Telolet Apps

Cara Membuat Recent Post Dan Random Post Dengan Thumbnail di Blog 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>+posttitle+</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 = +commenttext+;<br>towrite=towrite+commenttext;<br>flag=1;<br>;<br>}<br><br>if(displaymore==true)<br>{<br>if (flag==1) towrite=towrite+ | ;<br>towrite=towrite+Read more»»;<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(contentin entry){var rdp_get_snippet=entry.content.$t}else{if(summaryin 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$totalin 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$thumbnailin entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1rC2j9JT3-FhNpPdJpy92oo-UrJdWhMA1SK41p9pOldDGbYJ9Vo-HFEuu-d5nB3iThb6ikO1D0WJ2hfpQc_XNmlNthmCpsEQ7ER-B3QRSPEcB1BKhdu4dJ0ThG0EgNkqtdv-HpPgxygs/s1600/no_thumb.png"}}};document.write( <li>);document.write(<img alt="+rdp_posttitle+" src="+rdp_thumb+"/>);document.write(<div>+rdp_posttitle+</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)

Available link for download

Cara Membuat Recent Post Dan Random Post Ringan Responsive di Blog

Jadi tanpa saya jelaskan tentu kalian sudah mengetahui Recent Post dan Random Post, karena sudah saya jelaskan di postingan sebelumnya.

Berikut Cara Memasang Recent Post Dan Random Post Ringan Responsive di Blog dibawah ini:

- Login ke Blogger.com

- Langsung menuju menu "Tata Letak/Tambahkan Gadget/Tambahkan HTML/JavaScript"

- Copy kode dibawah ini


RECENT POST
- Ganti "k0k0h" dengan alamat Blog kalian
- var numposts = 5, jumlah postingan yang ditampilkan, ganti nomor 5-nya saja

RANDOM POST
- Ganti "k0k0h" dengan alamat Blog kalian
- var numofpost=5; adalah jumlah postingan yang  ditampilkan, ganti nomor 5-nya saja

- Pastekan didalam kolom yang sudah disediakan

- Terakhir klik Simpan.

Available link for download