Ada banyak macam widget di dalam blog, menyerupai widget jam, postingan populer, label, dan masih banyak yang lainnya. Posisi widget pun ada yang di sidebar kanan atau kiri, header dan footer. Dan kali ini aku akan membahas bagaimana cara menciptakan widget artikel terbaru di blog, tentunya widget ini sangat SEO Friendly. Tujuan menciptakan widget artikel terbaru atau recent pos ini yaitu untuk memudahkan pengunjung blog dalam mencari artikel terbaru yang dipublish oleh admin blog, jadi tidak harus mencari kesana kemari. Selain itu, widget artikel terbaru juga sanggup membantu blog kita semoga terlihat sering update dan juga akan menjadi daya tarik tersendiri bagi pengunjung. Ada macam-macam widget artikel terbaru di blog, namun pada kali ini aku akan memperlihatkan cara memasang widget artikel terbaru dengan thumbnail dan cuplikan artikel. Langsung saja.
Cara Membuat Widget Artikel Terbaru di Blog
1. Buka blog kalian 2. Klik tata letak > tambah widget > pilih HTML/Javascript
3. Tuliskan Artikel Terbaru pada kolom judul, dan copy paste arahan HTML dibawah ini pada kolom konten
4. Setelah itu klik simpan dan lihat hasilnya
<style> img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {min-height: 80px;background:none;padding:5px 0;background:none;}.recent_posts_with_thumbs a {text-decoration:none;font-weight:700;font-size: 12px;}.recent_posts_with_thumbs strong {font-size:10px;}i {font-style: normal;font-weight: 400;font-size: 11px;} </style> <script> function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){ if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;} if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error) { s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){ thumburl=d;} else thumburl='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif'; } var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">'); if(showpostthumbnails==true) document.write('<img class="recent_thumb" src="'+thumburl+'"/>'); document.write('<b><a href="'+posturl+'" sasaran ="_top">'+posttitle+'</a></b><br>'); if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<S[^>]*>/g; postcontent = postcontent.replace(re, ""); if (showpostsummary == true) { if (postcontent.length < numchars) { document.write('<i>'); document.write(postcontent); document.write('</i>');} else { document.write('<i>'); postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" "); postcontent = postcontent.substring(0,quoteEnd); document.write(postcontent + '...'); document.write('</i>');} } var towrite='';var flag=0; document.write('<br><strong>'); if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;} if(showcommentnum==true) { if (flag==1) {towrite=towrite+' | ';} if(commenttext=='1 Comments') commenttext='1 Comment'; if(commenttext=='0 Comments') commenttext='No Comments'; commenttext = '<a href="'+commenturl+'" sasaran ="_top">'+commenttext+'</a>'; towrite=towrite+commenttext; flag=1; ; } if(displaymore==true) { if (flag==1) towrite=towrite+' | '; towrite=towrite+'<a href="'+posturl+'" class="url" sasaran ="_top">Read more»»</a>'; flag=1; ; } document.write(towrite); document.write('</strong></li>'); if(displayseparator==false) if (i!=(numposts-1)) document.write('<hr color="#d9f1fa" size=0.5>'); }document.write('</ul>'); } </script> <script> var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 90; </script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"> </script><div class="clear"/></div> 4. Setelah itu klik simpan dan lihat hasilnya
Catatan : Untuk memodifikasinya, sanggup kalian ganti angka 5 pada var numposts = 5 dengan jumlah artikel terbaru yang ingin kalian tampilkan. Itulah beberapa langkah untuk menciptakan widget artikel terbaru atau recent post di blog. Selamat mencoba dan semoga bermanfaat
