✔ Cara Menciptakan Random Posts Dengan Style Thumbnail Keren Dan Responsive

D

i dalam sebuah blog kita membutuhkan sebuah widget yang menunjang biar pengunjung sanggup melihat semua artikel yang kita miliki. Untuk itulah kali ini menciptakan tutorial perihal

cara menciptakan 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 mempunyai thumbnail gambar biar widget terlihat menarik.

Untuk teman yang ingin tahu cara memasang widget random posts ini, ikuti langkah-langkah dari berikut ini.

Cara Memasang Widget Random Posts dengan Thumbnails di Blogger

• Langkah pertama buka akun Blogger sobat
• Pilih hidangan Tata Letak,
• kemudian pilih Tambahkan Gadget
• lalu pilih HTML/Javascript
• Masukan judul widget, kemudian masukan instruksi script di bawah ini :

/* RANDOM POSTS THUMBNAIL BY  */ <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/j4vaScript'> 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/j4vascript" 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/j4vaScript'> 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) + "&#133;"; }; 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/AVvXsEgaCZptQh4v9zJfLYExZBA03tSsQOfWp2oBHA8bFj5Niwj6atfJmd5P1bghm98kLJnzveMM_c6oIQKF768ZZ7-42aTkB05ftmhJStL1F55HMBY9XjS9xAgbi1EveJy5AScLoqf3YdFPJWE/s1600/no_thumb.png" } } }; document.write('<li>'); document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="Cara Membuat Random Posts Dengan Style Thumbnail Keren dan Responsive ✔ Cara Membuat Random Posts Dengan Style Thumbnail Keren dan Responsive" 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/j4vascript" 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 teman ingin tampilkan.

Ganti angka 30 dengan jumlah aksara isi artikel yang ingin di tampilkan.

Ganti YES dengan NO apabila teman tidak ingin menampilkan keterangan waktu dan jumlah komentar

Setelah simpulan pilih Simpan.

Terima kasih dan sekiaan info sederhana yang sanggup bagikan mengenai

Cara Membuat Random Posts Dengan Style Thumbnail Keren dan Responsive

, semoga artikel ini sanggup bermanfaat dan juga sedikit memperlihatkan suplemen wawasan buat sobat.

Jangan Lupa SHARE dan SUBSCRIBE dibawah ini, biar blog ini bertambah rajin dan bersemangat dalam memposting artikel-artikel gres lain yang bermanfaat dan berkhasiat buat teman semua.

Sumber http://omipoel.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: