Widget Artikel Terbaru Ringan Dan Keren Untuk Blogger

Assalamu'alaikum Wr. Wb. salam sejatera untuk kita semuanya, selamat datang di Mas Operator. Terimakasih Saya ucapkan kepada Anda semua, yang sudah berkunjung ke blog sederhana Saya ini, pada kesempatan ini Saya akan berbagi sebuah informasi atau tutorial mengenai Cara Membuat Widget Artikel Terbaru Untuk Blogger.

Bagi Sobat Blogger yang mungkin sedang mencari informasi mengenai cara untuk membuat widget artikel terbaru atau widget recent post di Blogger, mungkin artikel Saya ini bisa dijadikan referensi untuk Anda. Seperti yang kita ketahui bersama, bahwa di Blogger tidak terdapat fitur khusus untuk menampilkan artikel terbaru/recent post. Namun kita bisa menambahkannya secara manual, dan berikut merupakan cara atau pun langkah-langkahnya:

Cara Membuat Artikel Terbaru/Recent Post Untuk Blogger

1. Login ke Dashboard Blogger;

2. Klik pada Menu Tata Letak;

3. Copy/salin kode/script 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/AVvXsEiubcuAGWwfFnU21hFEXkU-PjUR8fSGe2JfVKPD3IUNtnnhELbVtmY9SaZ_WgrfV1IQ0abE9egDUW4CP7RIf_2f_n1RVBnOK_VtJ0CGMYaZ7Th_hR4k4tRtUhXXd6YNnJNthAIp07nYKVLY/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>

3. Tambahkan sebuah Widget, dan pilih HTML/Java Script, berinama "Artikel Terbaru" atau sesuaikan dengan keinginan Anda dan Paste/tempel kode/script di atas ke dalam widget HTML/Java Script tersebut. Dan akhiri dengan klik tombol Simpan.

Manfaat Widget Artikel Terbaru/Recent Post Untuk Blog

Memberikan Signal kepada bot Crawler Google bahwa ada konten yang baru dirilis, sehingga artikel terbaru tersebut akan lebih cepat diindeks mesin pencari/search engine;
Google lebih suka kepada blog yang rajin update konten, dengan demikian menjadi salah satu faktor keberhasilan SEO;
Artikel terbaru menjadi penting untuk kelengkapan informasi sebuah blog, dimana pengguna atau pun bot Google dapat melihat dafatar konten yang baru/update; dan
Artikel terbaru bermanfaat sebagai indikasi/penanda oleh bot Crawler Google apakah blog masih dikelola secara baik, kapan waktu terakhir update atau blog sudah ditingkatkan oleh pemiliknya.

Dengan demikian, artikel terbaru/recent post memberikan dampak positif untuk optimasi SEO Google dimana sebuah blog akan lebih mudah dikenali memiliki konten yang fresh oleh pengunjung.

Mungkin hanya itu saja pembahasan mengenai Widget Artikel Terbaru Ringan Dan Keren Untuk Blogger, mudah-mudahan informasi yang singkat ini bisa menjadi manfaat untuk kita semuanya. Sekian, terimakasih dan selamat mencoba. Wassalamu'alaikum Wr. Wb.

Salam Mas Operator!!!