Membuat Random Post Hanya Thumbnail Gambar Admin : Unknown

Assalamu'alaikum,wr.wb

Catatansaif.blogspot - Cara Membuat Random Post Hanya Thumbnail Gambar Saja

Pagi sobat blogger, hari minggu waktunya bersantai riya disela pekerjaan dan belajar, tapi kalau santai lama2 juga bosen,apalagi kalau tugas kuliah yang menumpuk,tambah bosen... mending ngeblog ajadeh..tugas ntar habis meregangkan pikiran..hahah

Okey kali ini catatansaif.blogspot datang dengan tutorial blog lagi,kali ini saya mau share Cara membuat widget random post hanya gambar thumbnail saja, sebelumnya sudah saya postingkan soal membuat random post dengan tampilan yang berbeda-beda. Bisa sobat lihat disini KLIK SAYA PLIZZ

Kembali ke pokok permasalahan, Pada umumnya random post dengan thumbnail akan menampilkan thumbnail pada sidebar blog ( kanan / kiri ) dengan judul post dan potongan deskripsi singkatnya,TAmpilan random post kali ini lumayan simple dan tidak terlalu memakan tempat,loading blog juga tidak ngadat, widget ini juga valid HTML5 dan CSS3, selain itu tidak mengurangi skor SEO pada Chkme dan image dimention di GTMetrix.

Bagi sobat yang suka dengan random post dengan hanya tampilan gambar atau thumbnail saja silahkan ikuti langkah-langkahnya di bawah ini :

• Login dulu ke blog sobat
• Masuk Dasbord pilih Template >> Edit HTML
• Cari kode  ]]></b:skin> atau </style> ( gunakan CTRL+F untuk permudah pencarian )
• Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

#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}

Kode warna hijau samakan nilainya dengan kode script dibawah.

• Setelah selesai Simpan template
• Kemudian masuk ke Tata Letak (layout) >> tambah gadget >> pilih HTML/JavaScript 
• Masukkan script di bawah 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)+"&#133;";};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/AVvXsEimHjzvARp6rms_kEPv5DO-dD4cIcsRFiLD3RBcY5paBV7GcAUsJtiNKo5qRVq2h-ZKhI-Swqsf22ZmC6g3Sc_NDcpqQ6OsfktZeQVlmCAp0OUutgZL_4qwQsg753mNoEp2DdhGI3PGweL4/"}}};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><center><a href="http://catatansaif.blogspot.com/2014/05/cara-memasang-random-post-bergambar.html" target="_blank">Get This Widget</a></center>

1. var rdp_numposts=9 untuk mengatur banyaknya post yang ditampilkan

2. height="90" width="90" untuk mengatur size gambar,samakan dengan kode CSS perintahnya diatas. 

• Selesai dan simpan

Bagaimana caranya berbedakan karena tampilannya juga berbeda sob,..Selamat mencoba...

Mungkin itu yang dapat saya bagikan sementara untuk hari ini, karena barusan dapet sms dari temen kalau besok tugas laporan  harus sudah selesai,jadi mau tidak mau tidak ada santai dan libur lagi.. T_T tak apa yang penting dijalani dengan ikhlas biar barokah nantinya,amiiin....

Posting terkait yang akan datang :

• Membuat random post hanya judul postingan saja.
• Membuat recent post berjalan kebawah / Efek Marquee