Cara Membuat Recent Post dengan Gambar di Blogspot

Cara Membuat Recent Post dengan Gambar di Blogspot – Widget recent post merupakan salah satu widget yang menampilkan artikel terbaru dan biasanya dipasang pada bagian sidebar blog. Banyak sekali macam-macam tampilan widget recent post diantaranya recent post fast loading, dengan tambahan thumbnail atau gambar, tanggal dan komentar, juga beberapa modifikasi lainnya yang lebih keren.

Nah kali ini saya akan berbagi recent posts dengan tambahan gambar thumbnail agar terlihat keren namun tetap fast loading. Jika kamu ingin recent post tanpa gambar bisa simak tutorial yang sudah pernah saya buat (Baca:Cara Memasang Recent Post Fast Loading di Blog).

Ada beberapa teman blogger yang bertanya, kenapa hampir setiap blog yang saya kunjungi terdapat widget recent post? saya jawabnya cukup mudah, dilogika saja tentu semua blogger berharap semua artikelnya dapat terbaca oleh pengguna internet, namun artikel terbaru tentu belum terindek oleh Google.

membuat recent pots blogspot

Nah agar artikel terbaru bisa langsung dibaca oleh pengunjung maka diperlihatkan daftar artikel terbaru di sidebar blog agar mudah terlihat dan langsung dibaca. Jika anda tertarik dengan memasang recent post yuk simak tutorialnya berikut ini.

Cara Membuat Widget Recent Post dengan Gambar di Blogspot Blogger

  1. Silahkan login akun Blogger.
  2. Pilih menu Tata Letak >> lalu Tambahkan Gadget >> HTML/JavaScript.
  3. Silahkan beri judul Recent Posts lalu masukkan kode berikut ini:
    <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=7;
    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="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"};}};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>
  4. Terakhir klik Simpan, kemudian klik simpan setelan pada menu tata letak agar bisa langsung terlihat di sidebar.recent post blogger dengan gambar

Keterangan:
var rcp_numposts=7; adalah jumlah recent post yang ditampilkan, silahkan ganti sesuai dengan selera.

Selain recent post, kamu juga bisa memasang widget popular post dengan tampilan menarik agar pengunjung tertarik untuk membacanya, silahkan baca tutorialnya Cara Membuat Popular Post Keren Berwarna di Blogger.

Demikian tutorial singkat kali ini, semoga dpat bermanfaat dan menjadikan blog semakin lebih baik. Jika masih kesulitan bisa ditanyakan melalui kolom komentar.

Terima kasih.

Leave a Reply