Tips Cara Membuat Random Post dengan Thumbnail

Hallo Sobat... nah sobat pasti lagi otak atik blog sobat bukan? pastinya sobat ingin merubah tampilan blog sobat lebih menarik dan enak dilihat. Sebelumnya saya sudah posting artikel Tips Cara Membuat Recent Post (Grid Thumbnail) nah kali ini Ditha, punya solusinya dengan Tips Cara Membuat Random Post dengan Thumbnail.

Gambar :  Random Post dengan Thumbnail

Apa itu Random Post?
Random Post adalah : Menampilkan post-post yang sobat sudah posting secara beracak, dilengkapi dengan Judul Posting. selain itu sobat juga bisa menampilkan random post dengan disertai summary ringkasan isi dan thumbnail atau cuplikan gambar. dan Tampilan random post sobat jadi lebih menarik, Nah Silakan di coba sob!!.

Langkah-Langkah

1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

   <style>
   .rp-post-link {
   font-weight: bold !important;
   font-size: 120% !important;
   }
   .rp-summary {
   margin-top: 3px !important;
   font-size: 100% !important;
   line-height: 1.3em !important;
   word-wrap: break-word !important;
   }
   .rp-thumbnail {
   margin: 5px 5px 2px 0px !important;
   float: left !important;
   width:65px;height:65px;
   }
   .rp-pubdate {
   font-style: italic !important;
   margin-bottom: 3px !important;
   }
   </style>
   <script type="text/javascript">
   var randarray = new Array();
   var l=0;
   var flag;
   var lengthsummary = 180;
   var numofpost=5;
   function randomposts(json){
   var total = parseInt(json.feed.openSearch$totalResults.$t,10);
   for(i=0; i < numofpost;){
   flag=0;
   randarray.length=numofpost;
   l=Math.floor(Math.random()*total);
   for(j in randarray){
   if(l==randarray[j]){
   flag=1;
   }
   }
   if(flag==0&&l!=0){
   randarray[i++]=l;
   }
   }
   document.write('<div>');
   for(n in randarray){
   var p=randarray[n];
   var entry=json.feed.entry[p-1];
   var item ="";
   var posttitle = entry.title.$t || "[Untitled]";
   "[Untitled]"
   for(k=entry.link.length -1; k >= 0 ; k--){
   if(entry.link[k].rel=='alternate'){
   item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";
   break;
   }
   }
   item += "<br"
   item += "/>"
   var pubdate = new Date(entry.published.$t).toDateString();
   item +="<span class='rp-pubdate'>Posted On " + pubdate +"</span>";
   if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>"
   var summary = "";
   if ("content" in entry) {
   summary = entry.content.$t;
   }
   else if ("summary" in entry) {
   summary = entry.summary.$t;
   }
   var re = /<\S[^>]*>/g;
   summary = summary.replace(re, "");
   item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>";
   document.write(item);
   }
   document.write('</div>');
   }
   </script>
   <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
   </script>

   
   
5. Sebelum Sobat Simpan, ada beberapa yang bisa sobat ganti agar sesuai dengan keinginan tampilan blog Sobat, Yaitu dibawah ini:
   width:65px;height:65px; =>>  65 ukuran dari thumbnail
   lengthsummary = 180; =>> 180  jumlah dari karakter isi post
   numofpost=5; =>> 5  jumlah dari post yang ditampilkan
6. Jangan Lupa Simpan jika sudah selesai yah sobat Blogger.

SEMOGA BERMANFAAT