Cara Membuat Widget Recent Post di Blogger

Recent Post adalah widget yang isinya daftar posting yang baru dipubalikasikan, dengan memasang widget ini pengunjung blog lebih mudah mencari posting yang baru kita publikasikan tanpa perlu mencari di menu navigasi lainnya.

Recent post biasanya terletak di halaman utama, atau di sidebar blog agar terlihat oleh para pengunjung, namun beberapa orang tidak tahu cara membuat sebuah widget recent post karena recent post ini sebenarnya ada di tab Tata Letak bawaan blogger, tapi dengan menggunakan widget bawaan blogger akan terasa kurang bervariasi, dibawah ini adalah macam-macam cara membuat recent post:

Recent Post Simple Tanpa Thumbnail
Recent post ini sangat simple karena hanya berisi link posting saja tanpa ada thumbnail atau gambar posting berikut adalah cara membuatnya:

• Login terlebih dahulu ke dasboard blogger, lalu pilih Tata Letak,
• Di bagian sidebar klik tambahkan gadget,
• Lalu akan ada beberapa pilihan gadget pilih HTML/JavaScript,
• Beri judul Recent post atau sebagainya, di dalam kolom yang kosong salin code dibawah ini:

<script>

//<![CDATA[

function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<5;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}

document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}

document.write('</ul>');};

document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");

//]]>

</script>

• Lalu tekan Simpan,
• dengan cara di atas kalian sudah selesai membuat sebauh recent post, jika recent post tersebut ingin dikotaki ikuti cara dibawah ini:
• Pergi ke menu Template lalu klik Edit HTML
• Lalu salin code dibawah ini:

<style type='text/css'>

#recent-posts{

    width:auto;

    padding:0 10px;

    margin:0 auto;

    border:1px solid #ddd;

}

#recent-posts ul,#recent-posts li {

    list-style:none;

}

#recent-posts a{

    text-decoration:none;

}

#recent-posts li{

    border-top:1px solid #ddd;

    padding:6px 0

}

#recent-posts li:first-child{

    border-top:none;

}

</style>

• Tempatkan code tersebut tepat diatas </head>,
• Lalu klik simpan.

Dengan melakukan cara diatas kalian telah membuat recent post simple dengan hanya teks link saja untuk membuat recent post dengan thumbnail caranya ada dibawah.

Recent Post Dengan Thumbnail

Recent post ini berisi dengan thumnail atau gambar yang tersedia di posting yang sudah anda buat, untuk membuatnya ikuti langkah dibawah ini:

• Pertama login terlebih dahulu ke dasboard blogger,
• Di bagian sidebar klik tambahkan gadget,
• Lalu akan ada beberapa pilihan gadget, pilih HTML/JavaScript,
• Berilah judul recent post atau sebagainya,
• Di dalam kolom yang kosong masukan code di bawah ini:

<div class="eggTray">

<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",

"pipe_params":{"URL":"Alamat Blog/feeds/posts/default"},

"hideHeader":"false","height":"500","count": 8 }</script>

<noscript>Your browser does not support JavaScript!</noscript></div>

<style type=text/css>

.eggTray {margin:10px 0px;padding:0px;}

.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}

.pipesTitle {padding-top:0px;}

.pipesDescription {display:true;}

.ycdr, .ycdr a {color:#999999;}

.widget .popular-posts ul {padding-left:0;}

</style>

Keterangan:

1. Ubahlah Alamat Blog jadi alamat blog kamu,
2. Untuk menonaftifkan scroll bar  hapus nomor 500,
3. Untuk mengubah banyak posting yang diperlihatkan ubah 8 menjadi banyak posting yang diinginkan,
4. Jika hanya ingin judul postingan saja yang tampil, ganti true dengan none dan ganti 0 dari padding-top:0px; dengan 10.

• Terakhir simpan dan lihat hasilnya.

Dengan melakukan cara diatas kalian telah membuat sebuah widget recent post, tapi masih banyak lagi cara membuat recent post selain cara di atas.

Happy Blogging.............(Cara-Blogger)

Tweet