Cara Mudah Membuat Widget Artikel Terbaru Menarik dan Warna-warni di Blogspot

Penulis: Angger Reda Tama, S.Pd., Gr., M.Pd.

Assalama'alaikum, Sobat Sahabat-ilmu.com yang berbahagia.

Cara Mudah Membuat Widget Artikel Terbaru Menarik dan Warna-warni di Blogspot - Bingung mencari wedget artikel di blogspot kalian, tampilan blog dapat memberikan kesan nyaman bagi pembaca termasuk di dalamnya adalah dengan meletakkan wedget yang menarik salah satunya wedget artikel terbaru.

Artikel terbaru (recent post) merupakan kumpulan artikel-artikel baru pada tulisan di blog Anda yang telah dipublikasikan. Mengingat widget artikel terbaru sangat penting agar pembaca mengetahui deretan tulisan artikel yang baru Anda tulis. 

Cara yang perlu dilakukan untuk membuat widget artikel terbaru atau recent post itu tidaklah terlalu sulit. Anda dapat menggunakan langkah-langkah cara mudah membuat widget artikel terbaru di bawah ini.

1. Masuk ke (log in) dashboard blog Anda - cara membuat widget.
2. Pilihlah pada menu navigasi "Tata Letak" atau "Layout" - cara membuat widget.

3. Pilihlah kolom sidebar kemudian klik "Tambahkan Gadget".
4. Setelah muncul jendela pilihan gadget silahkan pilih "HTML/JavaScript".

5. Selanjutnya salin kode di bawah ini - cara membuat widget.

<style type="text/css">
img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;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:12px 'Ubuntu Condensed', sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}
ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}
ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}
ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; 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: 14px;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/AVvXsEiCIXhrgACGmCRm2Iih6ob5vgIW32rkQRIqfv59RjWV3YrLah7SDjCo0oZFrTu49SxFRVotKLuPFvzpIREj1RXvnpaPjywSIIo3CwOIWO7wrgOAlXj2CmMjqQpLCeHMxCmlru65Mns7RhV2/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 = 70;
</script>
<script src="https://www.sahabat-ilmu.com/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' />

Akan tampak gambar jendela seperti di bawah ini ganti domain www.sahabat-ilmu.com dengan domain Anda.

6. Di bawah ini merupakan contoh hasil tampilan widget artikel terbaru dari script html di atas - cara membuat widget.

Anda dapat merubah jumlah artikel baru yang akan anda muculkan dengan mengganti angka pada script kode di atas, cari kode  var posts_number = 5; angka 5 merupakan jumlah artikel di widget. Anda dapat mengganti jumlah tampilan artikel sesuai keinginan Anda.

Semoga artkel "Cara Mudah Membuat Widget Artikel Terbaru Menarik dan Warna-warni di Blogspot" bermanfaat bagi Sobat Sahabat-ilmu.com sekian terimakasih Wassalamu'alaikum Wr. Wb.