Ketika blog and sudah banyak sekali postingan, visitor atau pengunjung blogspot anda tidak selalu mempunyai waktu untuk mencari satu persatu artikel yang anda posting, dengan Random post itu memungkinkan bagi para pengunjung blog anda untuk bisa mengikuti artikel-artikel yang ada pada blog, tutorial kali ini akan memperlihatkan kepada anda bagaimana cara menambahkan random post/Artikel acak.
Menambahkan Random Posts Dengan Thumbnails dan Singkatan Posts di blogger
Step 1 : Login keblog anda, pilih blog anda dan masuk kebagian layout
Step 2 : Tambahkan widget baru dengan menklik link Add a gadget dan pilih Html/Java Script di popup window
Step 3 : setelah widget sudah ditambahkan anda butuh menambahkan script dibawah ini didalam gadget tersebut
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<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 = 110; var randomposts_details = 'yes'; var randomposts_comments = 'Comments'; var randomposts_commentsd = 'Comments Disabled'; var randomposts_current = []; var total_randomposts = ; 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 = ; i < randomposts_number; i++) { var found = false; var rndValue = get_random(); for (var j = ; 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 = ; 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(, randomposts_chars); var whitespace = randompostsnippet.lastIndexOf(" "); randomposts_snippet = randompostsnippet.substring(, whitespace) + "…"; }; for (var j = ; 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 = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/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(, 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 = ; 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> |
Opsi Random Post
#Ukuran Thumbnails : untuk mengubah ukuran pixel, ganti nilai 75px
#Banyaknya karakter : anda bisa mengontrolnya (dalam karakter) dengan mengubah nilai 110 dari variabel var randomposts_chars =110;
#Post Info : Jika anda ingin tanggal dan jumlah commentar didak muncul, bisa dengan jumlah komentar ‘yes‘ dari variabel var randompots_details=’yes‘; ke ‘no‘;
#Ukuran Font post judul dan summary : Jika anda ingin mengubah ukuran font size summary silahkan ubah nilai 11px, dan untuk ukuran judul ubah nilai 12px;
Klik tombol simpan kemudian jalankan blog anda.Di Sidebar akan tampil Random Posts dari masing-masing halaman blog.
Butuh bantuan, tinggalkan komentar dibawah. terimakasih, semoga bermanfaat.