Cara Membuat Random Post Thumbnail
Pada Postingan sebelumnya saya telah posting cara membuat random post hanya Judulnya saja, dan sekarang saya akan coba membuat posting hanya thumbnail, dan mungkin ini bisa lebih mempercantik tampilan blog anda. Dan bisa jadi random post yang hanya thumbnail akan bisa membuat kekosongan yang ada pada tampilan blog anda
Kita langsung aja kepada cara membuatnya langsung.
1. Login ke blogger.com
2. Masuk halaman template
3. Lalu cari kode ]]></b:skin> atau </style>, dan untuk memudahkannya tekan ctrl+F. lalu masukan kode dibawah ini tepat diatasnya.
#random-posts{width:100%;background:none;}
#random-posts ul {margin: 0 !important; padding: 0 !important; }
#random-posts ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#random-posts li{float:left;list-style:none;}
#random-posts img{float:left;margin-right:5px;margin-bottom:5px;border:none;width:90px;height:90px;transition:all 400ms ease-in-out;}
#random-posts img:hover {opacity:.7}
4. Lalu save
5. Masuk ke halamat Tata Letak
6. Lalu Klik Tambah Gadget
7. Pilih "HTML / Java Script"
8. Masukan kode dibawah ini
<div id="random-posts">
<ul>
<script type='text/javaScript'>
var rdp_numposts=9;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
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};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in 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$total'in 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;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh18cjKw_OaCQ2kR143hGTX5gb5qZkg7To7LKytyH0WbDnlBFISNM6A9ARHomTtj979fxUryxpp6CYq0SRrDD-tH2lEbx3hqh4gt2bfhD4Gx00hM5LNhc_J89cMigcisJ6vSu-x8bTAoNKm/"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');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>')};
</script>
</ul>
</div>
9. Save
Lalu lihat hasilnya, Semoga bermanfaat.
Catatan :
1. Untuk yang berwarna merah ("90") ukuran thumbnail dan anda bisa merubah sesuai dengan keinginan anda.
2. Untuk berwarna biru "var rdp_numposts=9" adalah jumlah thumbnail yang akan ditampilkan dan andapun bisa merubahnya sesuai dengan keinginan.
3. lalu klik "Tambahkan Gadget"
4. Pilih "HTML / Java Script"
5. Lalu masukan kode dibawah ini
- See more at: http://muslim-now.blogspot.com/2014/08/cara-membuat-random-post.html#sthash.TC8JiBm7.dpuf
3. lalu klik "Tambahkan Gadget"
4. Pilih "HTML / Java Script"
5. Lalu masukan kode dibawah ini
- See more at: http://muslim-now.blogspot.com/2014/08/cara-membuat-random-post.html#sthash.TC8JiBm7.dpuf
0 comments:
Posting Komentar