sebelumnya postingan tentang retalted post random telah bisa menampilkan posting kita secara rondom di bawah posting yang di buka, cara kali ini adalah menampilkan related post dengan thumbnail yang adapada post jadi berkesan kebih menarik untuk di baca
Cara Membuat Random Post dengan Thumbnail
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
5. sebelum di simpan setting nilai pada html di atas sesuai kebutuhan
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.
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 di simpan setting nilai pada html di atas sesuai kebutuhan
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.
Comments
Post a Comment
terima kasih