CARA MEMASANG WIDGET ARTIKEL TERBARU THUMBNIL YANG SIMPEL DAN RINGAN PADA BLOG

Navigasi judul pada blog sangatlah penting, dengan adanya navigasi pembaca dapat dengan mudah melihat semua isi dari blog tersebut. selain itu juga pembaca menjadi lebih nyaman karena tidak perlu bingung jika ingin mencari artikel lainnya. salah satu widget yang dapat membantu navigasi pada blog adalah widget artikel terbaru. 

Maksud membuat Artikel Terbaru dengan Thumbnail adalah agar pengunjung dapat melihat dan mengetahui setiap postingan terbaru/terupdate dari sebuah blog, karena Widget Artikel Terbaru selalu up to date dan hanya menampilkan beberapa artikel yang terakhir dipostingkan. Jumlah postingan terbaru yang akan ditampilkan di sidebar blog dapat diatur sesuai keinginan kita, sehingga tidak akan memakan banyak ruang di sidebar.

Untuk tampilannya sendiri banyak pilihan yang kita gunakan seperti artikel terbaru dengan gambar atau juga snippet. untuk tutorial kali ini saya akan memberikan script widget artikel terbaru yang simple dan ringan. agar kecepatan loading pun tidak terlalu berpengaruh. Baca Juga : Cara-memasang-widget-artikel-terbaru

oke langsung aja berikut caranya :

1. Buka blogger => tata letak => tambahkan gadget

2. Selanjutnya pilih HTML/Javascript dan masukkan kode berikut ⛛

3. Tampilan judul artikel yang angka 5 bisa disesuai selera anda

<style type="text/css">

img.recent-post-thumbnail{float:right;height:60px;width:60px;margin:5px -5px 0px 0px;-webkit-border-radius:60%;-moz-border-radius:60%;border-radius:50%;padding:3px;background: #fff}

ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:17px 'Ubuntu Condensed', sans-serif;}

ul.recent-posts-wrap li:nth-child(1n+0) {background:  #1E90FF; width: 94%}

ul.recent-posts-wrap li:nth-child(2n+0) {background: #00BFFF; width: 94%}

ul.recent-posts-wrap li:nth-child(3n+0) {background: #00CED1; width: 94%;}

ul.recent-posts-wrap li:nth-child(4n+0) {background: #7FFFD4; width: 94%;}

ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}

ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}

.recent-posts-wrap a { text-decoration:none; }

.recent-posts-wrap a:hover { color: #222;}

.post-date {color:#e0c0c6; font-size: 11px; }

.recent-post-title a {font-size: 20px;font-weight: bold;color: #444;}

.recent-post-title {padding: 6px 0px;}

.recent-posts-details a{ color: #222;}

.recent-posts-details {padding: 5px 0px 5px; }

</style>

<script type="text/javascript">

function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil0JyRi5GVFy3rbn0qokpWjJ-hOmPkm46VlWI-kH5LD4ySbLOzpHaKIl2J_ZBqdvqpYz-Qtz8oXVcBcAflVshR6VQkbtYnSUvPq59cCa5gnT8L0RO34o0oTTZ_hVjsmR2DPSygiX1x4g-C/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}

</script>

<script type="text/javascript">

var posts_number = 5;

var showpostswiththumbs = true;

var insidereadmorelink = true;

var showcomments = false;

var posts_date = true;

var post_summary = true;

var summary_chars = 120;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

Bagaimana Reaksi Anda Tentang Artikel Ini?