Hallo kali ini saya akan membagikan ke kalian tentang cara membuat widget rarndom post dengan thumbnail dan scroll, sbenenarnya ini baru pertama kali sharing tentang tutorial blog, soalnya lagi blm dapt inspirasi posting tentang yang lain. hehehe. langsung saja
DEMO bisa di liat di Widget Artikel Menarik Blog ini.
Caranya Pertama :
- Login Blogger
- Ke bagian Tata letak
- pilih Add Widget, tmpt di mana mau meletakkan random postnya
- Kemudia pilih Java Script /Html
- Dan copy Script di bawa ini
<div style="overflow:auto;width:100%; height:460px; padding:12px;">
<style>#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:30px;height:30px;padding:3px}</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=20;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
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){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;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/AVvXsEiL2m0l2Yg4L_gNPVZzCRVbOk2mCKttFV13kyc__NSNNCVqpfIIy95Dmo94HNhF6h9_puEKYr7tiDmRoqrZ-x5wae0d7WftiFmgziswdxpMMW_k6N7MAjvu_uVQV65uvLTclQh1heo7TTo/s1600/na_image.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes')
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><center><a href="http://teknologi-berkata.blogspot.com/2013/10/membuat-random-post-dengan-thumbnail.html" target="_blank">Get This Widget</a></center></div>
Warna
Hijau adalah Panjang widgetnya
Warna
Biru adalah Tinggi Widget
Warna
Merah ada banyaknya artikel yang di tampilkan
Setelah itu Save.
Itulah cara membuatnya, jika ada yang di tanyakan silahkan di jawab. eh komentar maksudnya ^_^