Widget Artikel Terbaru Keren Untuk Blogger

 Hallo Sobat Blogger semuanya, selamat datang kembali di Rifai's Blog. Terimakasih Saya ucapkan kepada Anda semuanya karena sudah berkunjung ke blog sederhana Saya ini, pada kesempatan ini Saya akan berbagi tutorial mengenai dunia Blogging, dan sesuai dengan judul artikel ini, Saya akan berbagi tutorial mengenai Cara Membuat Widget Artikel Terbaru Untuk Blogger, dan berikut merupakan cara atau pun langkah-langkahnya:

Dengan adanya widget artikel baru ini pastinya bisa membatu pengunjung blog kita untuk mengetahui artikel mana yang baru saja diterbitkan di blog kita, dan selain itu dengan adanya widget artikel terbaru di blog kita ini akan menambah nilai SEO bagi blog kita, meskipun efeknya hanya sedikit saja.

Dan berikut merupakan langkah-langkah untuk membuat widget artikel terbaru di Blogger:

1. Silahkan Sobat Blogger copy kode di bawah ini:

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="mangwendy-posts-container">');for(var e=0;e<posts_no;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(p){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/AVvXsEgWbdjeUDXZst4wWkl2uU99ExwMQh89IVhI_TRkAkBSGeeFWCwA5ep8lUgbvls2ieW5BEIZitPdNw1Ry36qd_HCp-4LII-F4TAddHtcMLjPvLW43aYgo6k1XmVMnpS6aJNZv-9y4R8Ga7bh/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="mangwendy-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="mangwendy-post-thumb" src="'+u+'"/></a>'),document.write('<div class="mangwendy-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="mangwendy-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 3;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.mangwendy-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #c94a4a; border-radius: 10%;}
.mangwendy-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.mangwendy-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.mangwendy-posts-container {counter-reset: countposts;list-style-type: none;}
ul.mangwendy-posts-container li:before {counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.mangwendy-posts-container a { text-decoration:none; }
.mangwendy-posts-container a:hover{color: #c94a4a;}
.post-date {color:#757575; font-size: 11px; }
.mangwendy-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.mangwendy-post-title { margin: 5px 0px; }
.mangwendy-posts-details {border-top: 4px solid #c94a4a; margin-top: 5px; padding-top: 5px;}
.mangwendy-posts-details a{ color: #888;}
a.readmorelink {color: #c94a4a;}
</style>

2. Login ke Dashboard Blogger kita, kemudian klik pada menu Tata Letak;

3. Tambahkan sebuah widget HTML/Java Script dan beri judul widget HTML/Java Script tersebut kemudian Paste kode yang sudah di copy tadi ke dalam widget HTML/Java Script tersebut, perhatikan gambar di bawah ini:

4. Jangan lupa klik tombol Simpan.

Untuk hasil akhirnya bisa Sobat lihat di blog Saya ini. Demikian artikel mengenai Widget Artikel Terbaru Keren Untuk Blogger, mudah-mudahan apa yang sudah Saya sampaikan pada kesempatan ini bisa bermanfaat untuk kita semuanya. Sekian, terimakasih dan selamat mencoba.