Cara Membuat Widget Random Post dengan Gambar (Tumbnail)

Cara Membuat Widget Random Post dengan Gambar (Tumbnail) - Pada postingan sebelumya saya pernah membahas bagaimana cara membuat random post tanpa gambar, nah kali ini akan kita bahas bagaiman cara memasang widget random post dengan gambar (tumbnail). Caranya juga sama seperti tutorialnya sebelumnya, hanya pada tutorial kali ini kita akan sedikit memodifikasi kode CSSnya.
Daripada sobat penasaran lebih baik kita langsung saja ke langkah-langkah kerjanya, cekidot,, hehehe;

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 kita Simpan, ada beberapa yang bisa kita ubah agar sesuai dengan tampilan blog kita, diantaranya:
   width:65px; height:65px; -->  65 adalah ukuran thumbnail
   lengthsummary = 180; --> 180 adalah jumlah karakter isi post
   numofpost=5; --> 5 adalah jumlah post yang ditampilkan
6. Simpan jika sudah selesai. 

Bagaimana, mudah bukan? Jika ingin tampilan lebih menarik, silahkan edit kode cssnya sesuai keinginan anda. Semoga berhasil, berkomentarlah yang relevan.

Share this post