Cara Membuat Random Post dengan Thumbnail di Blog

Hai Sobat Blogger,,,

Kali ini Saya ingin berbagi Bagaimana Cara membuat Random Post di Blog Sobat
Yang Fungsinya untuk Menayangkan Postingan atau Artikel Blog Sobat secara Acak

Berikut Langkah-langkahnya :
-Masuk ke Akun Blogger Sobat
-Pilih Tata Letak
-Add Widget
-Pilih Widget HTML dan Java Script
-Copy Kode HTML dibawah 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>
-Paste kan Kode HTML yang Saya berikan di atas
-Lalu Save atau Simpan

Bagaimana Hasilnya Sobat...???

Catatan: Sobat dapat mengedit Kode HTML yang Saya berikan dengan mengganti Jumlah Postingan yang ditayangkan sesuka hati dengan merubah numofpost=5 yang berarti Jumlah Postingan yang ditampilkan ada 5 dan width:65;pxheight:65;px 65 adalah Ukuran Thumbnail dan lengthsumarry = 180 yang berarti Jumlah karakter Tulisan Postingan yang di tampilkan ada 180.

Demikian Tutorial yang Saya berikan

Widget Blog

Share This :