Cara membuat recent post keren dengan thumbnail

Recent post ialah widget yang berisikan sejumlah postingan atau artikel terbaru. Pada umumnya widget recent post ini diletakkan pada sisi sidebar (kiri,kanan ataupun bawah) suatu blog maupun situs. Dengan adanya widget recent post ini, pemgunjung lebih memahami sebagian besar artikel-artikel yang baru di posting oleh pemilik blog maupun situs.

Recent post merupakan salah satu widget yang sangat sering di pasang pada sidebar suatu blog, selain widget Popular post. Kedua widget ini sering kita jumpai ketika kita berkunjung pada suatu situs. karena kedua widget ini memiliki kegunaan maupun fungsi yang cukup relevan dalam meningkatkat traffik blog/situs. Kedua widget ini pula yang membantu pengunjung untuk dapat berlama-lama membaca artikel menarik lainnya yang terdapat pada suatu situs.

---

Baca juga : Cara membuat Popular Posts berikut thumbnail 

---

Sebenarnya memasang widget Recent Post terbilang cukup mudah, karena pada blogspot sendiri sudah menyediakan layanan pemasangan widget recent post. anda cukup menautkan link blog anda pada layanan Feed Blog. Namun cara yang akan saya sampaikan ini, ada 3 Cara yang bisa anda terapkan pada blog milik anda, yang tentunya sesuai selera anda masing-masing.

Cara Paling mudah membuat Widget Recent Post

Cara yang satu ini, merupakan cara yang terbilang paling mudah. Karena cara ini menggunakan layanan yang disediakan oleh blogspot itu sendiri. Adapun cara pembuatannya ialah sebagai berikut :

• Seperti biasa, silahkan login pada akun blogger anda.
• Kemudian pilih Tata Letak ==> lalu klik tambahkan gadget (silahkan anda tentukan pada sidebar sebelah mana saja) lalu pilih Feed

• Silahkan masukkan URL feed anda, seperti gambar berikut ini :

Untuk URL Feed, anda bisa mengikuti contoh ini :

http://www.blog-inspiratiff.blogspot.com/feeds/posts/default

• Silahkan anda ubah URL yang saya beri warna merah dengan alamat URL blog atau web anda.
• Kemudian klik button Lanjutkan. setelah itu anda akan menjumpai tampilan seperti gambar berikut.

• Pada tampilan gambar diatas, anda dapat melakukan pengaturan apa saja yang akan anda tampilkan pada widget recent post tersebut. Jika anda rasa sudah pas pengaturannya, silahkan klik button Simpan.

Cara Membuat Recent post Responsive Tanpa Thumbnail

Tampilan Recent Post yang satu ini terbilang cukup keren, walaupun tanpa menggunakan Thumbnail (Gambar), karena widget recent post jenis ini cukup fast loading alias tidak membebani loading blog anda. Adapun cara pembuatannya ialah sebagai berikut :

• Silahkan anda login pada akun blogger anda.
• kemudian pilih Tata letak ==> lalu Klik Tambahkan gadget ==> kemudian pilih HTML/JavaScript.
• Selanjutnya silahkan anda copy paste kode berikut ini kedalamnya.

<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://www.blog-inspiratiff.blogspot.com",
numPosts = 10;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

• Terakhir, klik Simpan

Keterangan :

http://www.blog-inspiratiff.blogspot.com  : Ganti dengan URL Blog anda

numPOSTS = 10;  : ialah jumlah Recent post yang akan ditampilkan ( silahkan sesuaikan dengan keinginan anda.

Widget Recent Post dengan Thumbnail (Gambar)

Widget Recent Post yang satu ini terbilang yang paling keren dari kedua cara yang saya jelaskan sebelumnya, namun widget tipe ini memiliki kekurangan yakni dapat membebani loading blog. Tapi tenang kawan, pengaruhnya tidak terlalu signifikan kok, mungkin dapat memperlambat loading blog sekitar 0,05-0,2 detik (ingat yah "detik" ), jadi saya rasa cara ini masih cukup baik jika kita pasang di blog kita. Selain memiliki kekurangan, widget tipe ini juga memiliki kelebihan. Dengan tampilan yang disertai gambar (thumbnail) maka akan menarik minta pengunjung untuk dapat lebih berlama-lama berkunjung pada blog kita. Berikut ini cara pembuatannya :

• Silahkan anda login pada akun blogger anda.
• kemudian, pilih Tata letak ==> lalu klik Tambahkan Gadget ==> lalu pilih HTML/JavaScript
• Masukkan kode berikut ini pada area konten yang tersedia.

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmRAglx0A4iIkG4ZakKmboxML_lphCVzTc6ITd0YeTbBsbSoNEn0ffI8zZyQGO2O3ZmSlmsYNGdFziY_PzYftcFjokj39o-E8p2EBovCQEzlhVlVvMGdRK5Ukdd2wqt4uTmre4aNf5hIG8/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts"></script>');
</script>
</div>

• Terakhir klik Simpan

Pengaturan :

var rcp_numposts=5;  ialah jumlah recent post yang akan ditampilkan

var rcp_snippet_length=150; ialah panjang karakter dari setiap link yang ditampilkan

var rcp_info='yes'; ialah untuk menampilkan tanggal dibawah setiap link recent post

var rcp_comment='Comments'; ialah menampilkan jumlah komentar pada setiap postingan yang ada pada recent post

Berikut ini hasil akhir dari cara ketiga ini :

Bagaimana ? ketiga cara diatas cukup mudah bukan ? jika anda mempunyai kendala atau masih bingung seputar artikel saya kali ini, atau anda punya pertanyaan lain seputar artikel-artikel saya yang lainnya. Silahkan tinggalkan komentar anda pada kolom komentar yang tersedia. KRITIK serta SARAN yang membangun sangat saya harapkan untuk mengembangkan blog saya kedepannya.

Terima kasih telah berkunjung...