Latest News

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

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

Widget

Agar diterima anda harus menunjukkan navigasi yang baik salah satunya dengan memasang widget recent post.Jika anda menerima pengunjung dari search engine tentunya mereka akan pribadi 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 mampu 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 arahan dibawah ini dan masukkan di widget gres 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(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/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://tps-trick.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:"http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/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://tps-trick.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 mampu aku bagikans agar bermanfaat.