Cara Membuat Widget Recent Post/Artikel Terbaru With Thumbnail Untuk Blogger

Widget recent post atau artikel terbaru merupakan widget yang bisa dikatakan penting untuk melengkapi blog anda. Biasanya widget ini diletakkan di sibebar atau footer dan ditemani widget lain seperti popular post dan label. Kenapa widget ini penting? Widget ini penting bagi kalian yang mau mendaftarkan blog untuk adsense.

Agar diterima anda harus memberikan navigasi yang baik salah satunya dengan memasang widget recent post.Jika anda mendapatkan pengunjung dari search engine tentunya mereka akan langsung menuju ke artikel yang mereka dapatkan di search engine dan tidak menuju beranda home terlebih dahulu. 

Dengan begitu mereka tidak mengetahui apa ada artikel terbaru di situs tersebut. Maka dengan memasang widget artikel terbaru maka pengunjung bisa mengetahui artike terbaru di situs tersebut tanpa harus menuju home page. Widget ini juga berfungsi untuk menurunkan rasio pentalan atau bounce rate situs anda dengan membuat pengunjung membaca artikel yang lain.

Cara Memasang Widget Postingan Terbaru

Langkah 1 (Membuat widget di Tata Letak)

Silakan masuk ke blogger,klik Tata Letak ➝ Tambahkan Gadget ➝ HTML/JavaScript

Langkah 2

Silakan anda salin kode dibawah ini dan masukkan di widget baru yang dibuat tadi.

<style scoped='' type='text/css'>
/* Recent Post Navigasi */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
.recentpostel:hover{background-color:#fefefe}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbGr8IskS8jll_WjqVQ8EWzkV30UcAswJtZv02A744zG_MuzApSANc7o28db02s-wVrHBL0_kjHXvBvNHt_BsfaDKvofhHGumUxZS7CytMDMTheuAM7Dv7t1UEILpG1hP_iS2OenayG64/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://www.anggasave.com";
    var charac = 0;
    var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGbF5vRKB4DPIVvgy7RmA1Irolnx6CjGtyNUjNQ0S9FtUgl01cJQsPuRi4RS9AiaMFpwv__u1mFKNS-D96_0lrgP2dlO054QqvyzLFKDEjz5I4B13J5x7w7JOLBUi1HwAVnfNDxXe0BJy/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'></a>":"<span class='noactived previous'></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><p></p></a>":"<span class='noactived next'></span>",s+="<a href='javascript:navigasifeed(0);' class='home'></a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>

Ganti http://www.anggasave.com dengan url blog anda.

Lalu simpan template.

Sekarang coba buka blog anda apakah widget recent postnya sudah muncul atau belum.  Ok cukup sekian tutorial cara membuat widget recent post with thumbnail yang bisa saya bagikans semoga bermanfaat.