Menarik Lainnya
D
i dalam sebuah blog kita membutuhkan sebuah widget yang menunjang agar pengunjung dapat melihat semua artikel yang kita miliki. Untuk itulah kali ini cara membuat widget random posts dengan thumbnails di blogger.
Di widget ini juga di sediakan keterangan waktu artikel di buat, banyaknya komentar, serta menampilkan sedikit isi artikel tersebut, dan yang paling penting widget random posts ini memiliki thumbnail gambar agar widget terlihat menarik.
Untuk sobat yang ingin tahu cara memasang widget random posts ini, ikuti langkah-langkah dari
Cara Memasang Widget Random Posts dengan Thumbnails di Blogger
- Langkah pertama buka akun Blogger sobat
- Pilih menu
Tata Letak , - kemudian pilih
Tambahkan Gadget - lalu pilih
HTML/Javascript - Masukan judul widget, lalu masukan kode script di bawah ini :
/* RANDOM POSTS THUMBNAIL BY Om Ipoel */
<style>
#random-posts img { border-radius: 10px; float: left; margin-right: 5px; width: 75px; height: 75px; background-color: #F5F5F5; padding: 3px; transition: all 0.2s linear 0s; }
#random-posts img:hover { opacity: 0.6; }
ul#random-posts { list-style-type: none; padding: 0px; }
#random-posts a { font-size: 12px; text-transform: uppercase; padding: 0px auto 5px; }
#random-posts a:hover { text-decoration: none; }
.random-summary { font-size: 11px; background: none; padding: 5px; margin-right: 8px; }
#random-posts li { margin-bottom: 10px; border-bottom: 1px solid #EEEEEE; padding: 4px; }
</style> <ul id='random-posts'> <script type='text/javaScript'> var randomposts_number = 5; var randomposts_chars = 30; var randomposts_details = 'yes'; var randomposts_comments = 'Comments'; var randomposts_commentsd = 'Comments Disabled'; var randomposts_current = []; var total_randomposts = 0; var randomposts_current = new Array(randomposts_number); function randomposts(json) { total_randomposts = json.feed.openSearch$totalResults.$t } document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts"></script>'); function getvalue() { for (var i = 0; i < randomposts_number; i++) { var found = false; var rndValue = get_random(); for (var j = 0; j < randomposts_current.length; j++) { if (randomposts_current[j] == rndValue) { found = true; break } }; if (found) { i-- } else { randomposts_current[i] = rndValue } } }; function get_random() { var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1)); return ranNum }; </script> <script type='text/javaScript'> function random_posts(json) { for (var i = 0; i < randomposts_number; i++) { var entry = json.feed.entry[i]; var randompoststitle = entry.title.$t; if ('content' in entry) { var randompostsnippet = entry.content.$t } else { if ('summary' in entry) { var randompostsnippet = entry.summary.$t } else { var randompostsnippet = ""; } }; randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, ""); if (randompostsnippet.length < randomposts_chars) { var randomposts_snippet = randompostsnippet } else { randompostsnippet = randompostsnippet.substring(0, randomposts_chars); var whitespace = randompostsnippet.lastIndexOf(" "); randomposts_snippet = randompostsnippet.substring(0, whitespace) + "…"; }; for (var j = 0; j < entry.link.length; j++) { if ('thr$total' in entry) { var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments } else { randomposts_commentsnum = randomposts_commentsd }; if (entry.link[j].rel == 'alternate') { var randompostsurl = entry.link[j].href; var randomposts_date = entry.published.$t; if ('media$thumbnail' in entry) { var randompoststhumb = entry.media$thumbnail.url } else { randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ3OD37ZSmGp4Lod7VOfRRqtBfJ2mKvdronIkPjofnvT81ja_ZIdOkA-Az9e2JM0dSd98drPuqvLs9M2T4zYGcLVo6lZycEgKpc6y_DGmOJI9z4kZ_MvU8cbEd86akc08jY8-n-BER3Hw/s1600/no_thumb.png" } } }; document.write('<li>'); document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>'); document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>'); if (randomposts_details == 'yes') { document.write('<span><div class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>' }; document.write('<br/>
<div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>') } }; getvalue(); for (var i = 0; i < randomposts_number; i++) { document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts"></script>') }; </script>
Ganti angka 5 dengan jumlah artikel yang sobat ingin tampilkan.
Ganti angka30 dengan jumlah karakter isi artikel yang ingin di tampilkan.
GantiYES dengan NO apabila sobat tidak ingin menampilkan keterangan waktu dan jumlah komentar
Setelah selesai pilih Simpan.Ganti angka
Ganti
Cara Membuat Random Posts Dengan Style Thumbnail Keren dan Responsive
, semoga artikel ini dapat bermanfaat dan juga sedikit memberikan tambahan wawasan buat sobat.Jangan Lupa
