Cara Membuat Random Post Dengan Thumbnail Di Blog

Tutorial kali ini saya akan membahas Cara Membuat Random Post Dengan Thumbnail Di Blog dengan gambar di blogger.
Widget ini akan menampilkan random post atau artikel di blog anda. Widget ini sangat berguna bagi pengunjung agar dapat mengeksplorasi isi dari posting, sehingga membuat pengunjung bisa lebih lama berada di blog anda.
Widget random post akan menampilkan secara acak, baik posting populer, terbaru dan terpanjang meskipun dalam jumlah yang ditentukan dalam konfigurasi widget. Widget random post dengan gambar (thumbnail) yang akan didistribusikan dalam artikel telah disesuaikan untuk mengoptimalkan gambar, yang akan meningkatkan nilai baik di google PageSpeed dalam menentukan dimensi gambar.






Cara Menginstall Widget Random Post Dengan Gambar Di Blog
Caranya sangat sederhana yaitu dengan menempatkan kode di bawah ini dan taruh di tata letak > sidebar.

Copy Paste kode di bawah ini

<style type='text/css'> #random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left} #random-posts img:hover{opacity:0.6;} ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;} #random-posts a{color:#64707a;transition:all .3s;display:block} #random-posts li:hover a,#random-posts a:hover{color:#4285f4;} .random-summary{font-size:13px;color:999} #random-posts li{background-color:#fff;margin:0;padding:10px;min-height:65px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;} </style> <ul id='random-posts'> <script type='text/javaScript'> var randomposts_number = 10; var randomposts_chars = 0; var randomposts_details = 'no'; 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 = ""; } }; 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/AVvXsEjH2ZtNXyksCf4koAnVTDqZu527soPVMY0jvB1PNJmbkbUDs88XqlWmAQ2AEIK7Dh5UHDXrP_w1RJB8dAmPJyTTX9_l5wR1xmeARPGbkFPfm1JU7ufimMyOhX0pkQD3BZo2mTmSTaS3Emo/s1600/bungfrangki_no_image_100.png" } } }; document.write('<li>'); document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '" width="' + 72 + '" height="' + 72 + '"/></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> </ul> <div class='clear'/> </div>

Ganti angka 10 pada kode var randomposts_number = 10; untuk menunjukkan berapa banyak posting yang anda inginkan.

Sekian Terimakasih Selamat Berkunjung Kembali.

Share on Google Plus

About Unknown

Saya hanya seorang blogger yang biasa saja tanpa kehebatan apapun silahkan anda meberi kritik di blog saya sebagai tanda pujian bagi saya Terima Kasih