Ini Dia!!! Tutorial Membuat Recent Post, Label, Dan Archive Widget Keren di Blogger

Baca Juga

Tutorial Membuat Recent Post, Label, Dan Archive Widget Keren di Blogger - Hai sob, hari ini saya mau updete artikel tentang Tutorial Membuat Recent Post, Label, Dan Archive Widget Keren di Blogger. 

Buat kamu yang punya blog, kamu pasti punya widget Recent Post yang kamu pasang di salah satu widget blogmu. Recent Post ini dapat menambah jumlah views kamu dengan singkat. Nah, kali ini saya mau kasih tau kamu Tutorial Membuat Recent Post, Label, Dan Archive Widget Keren di Blogger. Tutorial kali ini lumayan cukup simple. Tanpa basa basi lagi, ini dia Tutorial Membuat Recent Post, Label, Dan Archive Widget Keren di Blogger.

Baca Juga :

• Cara Buat Floating Social Button dengan efek Easing
• Cara Pasang Komentar Disqus di Blog dengan Mudah
• Tutorial Membuat Pop Up Floating Like Facebook di Blog Keren dan Responsif

Berikut ini langkah-langkah Tutorial Membuat Recent Post, Label, Dan Archive Widget Keren di Blogger:

Pertama, login ke blogger.

Kedua, buat widget baru. Dan pilih saja HTML/Javascript.

Tiga, salin kode di bawah ini dan tempel di widget baru yang kamu buat tadi.

<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/AVvXsEgd2pYB2HL7jEQjexzm7aR8v96bYm0C2KdCFTx-6bGUQSQtGgp6s0xYmgfq2wE0ZRMrdzydSSJ3WP1XZ_sF-hpcmeEFMbeQ3ZmYuEl9vBmOVvkxN2btSFaJDVkokFbOGy_Hj78bGqUNlF_i/"};}};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>

var rcp_numposts=5; ganti angka 5 dengan jumlah artikel yang kamu ingin.

Sekian dulu artikel dari saya, semoga dapat bermanfaat untuk sobat sekalian.

Referensi: -tutorialcid.blogspot.com