16 Widget Recent Post Dengan Fungsi Previous Dan Next

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Widget Recent Post KerenWidget recent post termasuk salah satu widget penting dalam blog. Kegunaannya tentu saja agar pengunjung blog dengan mudah bisa mengetahui daftar artikel atau postingan terbaru yang dimuat suatu blog.

Adapun versi widget recent post sangat banyak dan berfariasi, dengan pengetahuan tentang CSS kita bahkan bisa memodifikasi widget recent post yang ada agar tampilannya lebih unik, cantik atau sesuai dengan tema atau desain blog kita. Pada blog tips trik blogging ini saja sudah ada 3 versi widget recent post yang pernah saya posting dan ketengahkan tutorial pemasangannya.

Baiklah untuk versi hari ini tampilannya seperti apa yang anda lihat pada image disamping ini atau lihat demo pada blog ini (jika masih terpasang versi ini).

Nah jika anda tertarik mencobanya silahkan ikuti tutorial cara memasang widget recent post keren ini:

  1. Login ke blogger dengan akun anda
  2. Pada dasbor pilih blog yang hendak dipasangi widget recent post ini
  3. Klik menu template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan sebaiknya sebelumnya backup dulu template anda
  5. Sekarang letakkan kode berikut ini diatas kode ]]></b:skin>

#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.

6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = http://www.tipstrikblogging.com/”;
var charac = 100;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}
function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

Keterangan :
var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget
var urlblog = http://www.tipstrikblogging.com/; >> ganti dengan URL blog Anda
var charac = 100; >> Jumlah karakter atau huruf pada setiap post.

8. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

Terakhir save dan lihat hasilnya di blog anda!

Demikian tutorial membuat recent post dengan fungsi previous dan next pada sidebar blog. Semoga bermanfaat.

Resource: CreatingWebSite


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

16 komentar :

  1. Bagus banget widgetnya, sis.
    Btw, kalau yang berdasarkan label..kira2 harus ditambah apa lagi ya sis?

    Makasih sharing bagusnya.. :)

    BalasHapus
    Balasan
    1. Cara memasang widget recent post berdasarkan label insyaAllah akan saya posting pada kesempatan yang lain. Thanks apresiasinya!

      Hapus
    2. Assalamuallaiku...
      Mau tanya ... :d

      Bagaimana bila kotak gambarnya menjadi bulat dan ber efek seperti berputar..
      terimakasih
      wasalamualaikum

      Hapus
  2. I blog frequently and I really appreciate your content. This article has
    really peaked my interest. I am going to bookmark your website and
    keep checking for new information about once a week. I subscribed to your Feed too.
    Also visit my weblog :: rainbow titanium ring

    BalasHapus
  3. kunjungan gan,bagi - bagi motivasi
    Hal mudah akan terasa sulit jika yg pertama dipikirkan adalah kata SULIT. Yakinlah bahwa kita memiliki kemampuan dan kekuatan.
    ditunggu kunjungan baliknya yaa :)

    BalasHapus
    Balasan
    1. Terima kasih kunjungan dan apresiasi anda!

      Hapus
  4. maaf mau nanya untuk memberikan border pada kategory itu gimana caranya.... di tungu balsannya hehehe :)

    BalasHapus
    Balasan
    1. Untuk memberikan border dan background pada kategory atau label tinggal nambah kode CSSx, tutorialnya search aja diblog ini pada kategory blogger widget atau lebih khususnya pada kategory label blog.

      Hapus
    2. Oke jangan lupa kunjung balik ya junedalbughisy.blogspot.com

      Hapus
  5. wah, panjang bener nih scriptnya, tapi kalo udah dipasang bagus juga
    lumayan buat nambah ide..
    btw, good share..

    BalasHapus
    Balasan
    1. Iya, anaa jg spndapat dgn anda. Trimaksh tuk kunjungan dan apresiasinya.

      Hapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. wah di template ane kok gk bisa ya..?
    padahal gak semua intruksinya sudah benar semua..
    any body can help me?

    BalasHapus
    Balasan
    1. eh udah bener semua maksudnya.. tapi tetep gk bisa nongol..

      Hapus
    2. Pastikan var urlblog:"alamat blog anda"
      Jangan terlupa tanda " yang mengapit url blog anda
      Atau pastikan setting feed blog anda penuh

      Hapus
  8. wah coba dulu, spa tau cocok.mksih mbak tipsnya........

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!