Cara Memasang Widget Recent Post di Blogger

Cara Memasang Widget Recent Post di Blogger

Widget Recent Post merupakan salah satu widget yang digunakan untuk menampilkan artikel atau postingan terbaru pada blog kalian dan biasanya sering dipasang pada sidebar blog. Widget ini benar-benar berguna sekali apabila kalian memiliki visitor organik dan ingin mengetahui artikel terbaru pada blog kalian tanpa harus pergi ke halaman homepage.

Kali ini saya akan membagikan tutorial Cara Memasang Widget Recent Post di Blogger dengan mudah. Jadi, disini saya akan membagikan Widget Recent Post dengan 2 tampilan, yaitu Dengan Gambar dan Tanpa Gambar. Simak langkah-langkahnya dibawah.

1. Pergi ke Dasbor Blogger > Tata Letak > Tambahkan Widget di bagian sidebar.

2. Pilih HTML/JavaScript lalu masukkan kode dibawah.

Dengan Gambar

<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/AVvXsEh3vfQ5wI8IGu_np_LGNkOXc9pPjY0I96LDv3FKxlXEsU6_FK-5n1s8FpYdrO2gXHnp1S1wlL_jq2ilfFARVbOLhWMEAIixhNP6oUB2mgvPz1y4HabYYyLyfGRA-EFn_uwff5-RfurDYPyf/"};}};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>

Tanpa Gambar

<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 = "/",numPosts = 5;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>

3. Setelah itu ganti jumlah artikel yang ingin ditunjukkan lalu tekan Simpan.

Penutup

Demikian tutorial singkat kali ini, semoga bermanfaat buat kalian semua dan menjadikan blog kalian menjadi lebih baik. Jika ada yang ingin ditanyakan, kalian bisa tanyakan melalui kolom komentar.