Cara Membuat Recent Post Dan Random Post Dengan Thumbnail di Blog (Work 100%)

Tutorial Cara Membuat Recent Post Dan Random Post Dengan Gambar di Blogspot (Work 100%)

Recent Post/Artikel Terbaru dan Random Post/Posting Acak memang menjadi salah satu Widget penting di Blog, tentu suatu kewajiban untuk di pasang di Blog.

Widget Recent Post dan Random Post memang sudah banyak di share oleh para Blogger, tetapi tidak semua cocok untuk dipasang, biasanya jika template tidak cocok dengan Widget tersebut maka tidak akan tampil juga Recent Post atau Random Post-nya. Maka dari itu saya tambahin di akhir judul artikelnya dengan kata "Work 100%", karena ini memang Work 100%, bahkan tampilannya pun akan menyesuaikan Template Blog.

Contohnya seperti Widget yang saya pasang saat ini di Blog k0k0h.blogspot.com

Berikut Cara Memasang Recent Post Dan Random Post Dengan Thumbnail di Blog (Work 100%) dibawah ini:

Copy kode dibawah ini! kemudian letakkan di Gadget Sidebar di Blog kalian
Caranya:
➞ Langsung menuju menu Tata Letak-Tambahkan Gadget-HTML/JavaScript
➞ Copy kode dibawah ini, kemudian pastekan didalam kolom yang sudah disediakan (jangan lupa beri judul).

RECENT POST
<style><br>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 {padding-bottom:5px;padding-top:5px;min-height:72px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style><br><script><br>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++){<br>if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}<br>if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)<br>{<br>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!="")){<br>thumburl=d;} else thumburl='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';<br>}<br>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">');<br>if(showpostthumbnails==true)<br>document.write('<img class="recent_thumb" src="'+thumburl+'"/>');<br>document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');<br><br>    if ("content" in entry) {<br>      var postcontent = entry.content.$t;}<br>    else<br>    if ("summary" in entry) {<br>      var postcontent = entry.summary.$t;}<br>    else var postcontent = "";<br>    var re = /<\S[^>]*>/g;<br>    postcontent = postcontent.replace(re, "");<br>if (showpostsummary == true) {<br>      if (postcontent.length < numchars) {<br>          document.write('<i>');<br>         document.write(postcontent);<br>          document.write('</i>');}<br>      else {<br>          document.write('<i>');<br>         postcontent = postcontent.substring(0, numchars);<br>         var quoteEnd = postcontent.lastIndexOf(" ");<br>         postcontent = postcontent.substring(0,quoteEnd);<br>         document.write(postcontent + '...');<br>          document.write('</i>');}<br>}<br><br>var towrite='';var flag=0;<br>document.write('<br><b>');<br><br>if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}<br><br>if(showcommentnum==true)<br>{<br>if (flag==1) {towrite=towrite+' | ';}<br>if(commenttext=='1 Comments') commenttext='1 Comment';<br>if(commenttext=='0 Comments') commenttext='No Comments';<br>commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';<br>towrite=towrite+commenttext;<br>flag=1;<br>;<br>}<br><br>if(displaymore==true)<br>{<br>if (flag==1) towrite=towrite+' | ';<br>towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Read more»»</a>';<br>flag=1;<br>;<br>}<br>document.write(towrite);<br>document.write('</b></li>');<br>if(displayseparator==false)<br>if (i!=(numposts-1))<br>document.write('<hr color="#d9f1fa" size=0.5>');<br>}document.write('</ul>');<br><br>}<br></script><br><script><br>var numposts = 10;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;<br></script><script src="http://k0k0h.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"><br></script><div class="clear"/></div><br>
RANDOM POST
<style><br>#random-posts img{float:left;margin-right:10px;<br>width:65px;height:50px;background-color: #F5F5F5;padding: 3px;}<br>ul#random-posts {list-style-type: none;}<br></style><br><ul id='random-posts'><br><script type='text/javaScript'><br>var rdp_numposts=5;<br>var rdp_snippet_length=150;<br>var rdp_info='yes';<br>var rdp_comment='Comments';<br>var rdp_disable='Comments Disabled';<br>var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};<br></script><br><script type='text/javaScript'><br>function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1HJJKvMkl-WX4rsBaexVwZdXsyOvTv_VYrjyuh3CFYaXiifzlDBkUqydzdoqBDIUE6UxFXFNOrHW-yzIjgPLn_BG4BN5E6tUTsSVYx7-tvnKEJNvXRVlN5VHoEu9U9f_4AGiZP1nar-Y/s1600/no_thumb.png"}}};document.write(' <li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};<br></script><br></ul>

Recent Post
Ganti tulisan "k0k0h" dengan alamat blog kalian dan jumlah postingan yang ingin ditampilkan "var numposts = 10" (tanpa tanda petik)

Random Post
Untuk Random Post tanpa mengganti alamat Blog dan hanya mengganti jumlah posting yang ingin ditampilkan "var rdp_numposts=5" (tanpa tanda petik)