Cara Pasang Widget Random Post Di Blogger

Widget random post untuk blogger ialah widget yang berkhasiat untuk menampilkan beberapa artikel yang ada di blog kita secara acak.

Dengan adanya widget random post yang terpasang di blog kita, maka secara tidak pribadi kita sudah mempromosikan artikel lainnya yang ada di blog kita secara acak, dan jikalau pengunjung tertarik dengan artikel tersebut maka kemungkinan besar beliau akan mengklik dan membuka halaman artikel tersebut.

Bagaimana penampakan widget random post ini ?

Untuk demo widget ini silakan teman lihat di samping kanan (sidebar) blog ini, itu ialah widget ramdom post dengan script yang sama dengan script yang akan aku sertakan di bawah nanti.

Bagi kita yang tidak menggunakan template gaya magazine, maka widget ini dapat kita jadikan pilihan untuk dipasang selain widget recent post.

Cara Membuat Recent Post Di Blogger

Baca juga tutorial bagaimana cara memasang widget recent post di blogger, teman akan menerima 4 arahan widget, mulai dari widget recent post sederhana hingga widget recent post dengan thumbnail untuk blogger, dan ada juga arahan widget recent post by label yang disertai thumbnail.

Lanjut ...

Cara Memasang Widget Random Post Di Blogger

Ini ialah cara ter-mudah untuk memasang widget random post di blogger.

Bagi teman yang tertarik untuk memasang random post di blog blogger nya silakan ikuti langkah - langkah berikut, dan pastikan teman sudah masuk ke dasbor blogger.

1. Buka halaman Tata Letak
2. Klik Tambahkan Gadget
3. Pilih gadget HTML/JavaScript
4. Masukkan script random post pada bab Konten
5. Klik Simpan

Sangat mudah kan cara memasangnya :-)

Berikut arahan script random post yang harus dipasang

 <div id='random-post-container'>Memuat...</div> <script type='text/javascript'>//<![CDATA[ // Feed configuration var homePage = 'http://tips-trick.com/', maxResults = 5, summaryLength = 100, noImageUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC', containerId = 'random-post-container';  // Function to generate random number limited from `min` to `max` // Used to create a valid and safe random feed `start-index` function getRandomInt(min, max) {     return Math.floor(Math.random() * (max - min + 1)) + min; }  // Function to shuffle arrays // Used to randomize order of the generated JSON feed function shuffleArray(arr) {     var i = arr.length, j, temp;     if (i === 0) return false;     while (--i) {         j = Math.floor(Math.random() * (i + 1));         temp = arr[i];         arr[i] = arr[j];          arr[j] = temp;     }     return arr; }  // Get a random start index function createRandomPostsStartIndex(json) {     var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));     if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));      document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>'); }  // Widget's main function function randomPosts(json) {     var link, summary, img,         ct = document.getElementById(containerId),         entry = shuffleArray(json.feed.entry),         skeleton = "<ul>";     for (var i = 0, len = entry.length; i < len; i++) {         summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<br *\/?>|[\s]+/g, ' ').replace(/<.*?>/g, "").replace(/[<>]/g, "")).substring(0, summaryLength) + '&hellip;' : "";         img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s\d+(\-c)?\//, "/s72-c/") : noImageUrl;         for (var j = 0, jen = entry[i].link.length; j < jen; j++) {             if (entry[i].link[j].rel == "alternate") {                 link = entry[i].link[j].href;                 break;             }         }         skeleton += '<li>';         skeleton += '<img src="' + img + '" alt="" width="72" height="72">';         skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';         skeleton += '<span>' + summary + '</span>';         skeleton += '<span class="clear"></span></li>';     }     ct.innerHTML = skeleton + '</ul>'; }  document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>'); //]]></script> <style type="text/css"> #random-post-container ul, #random-post-container li { margin:0; padding:0; list-style:none; overflow:hidden; } #random-post-container img { display:block; float:left; margin:2px 7px 5px 0; } #random-post-container a { font-weight:bold; font-size:110%; } #rancom-post-container .clear { display:block; clear:both; } </style> 

Keterangan :

• <div id='random-post-container'>Memuat...</div> ialah area yang akan menampilkan artikel acak
• var homePage = 'http://tips-trick.com/', → Ganti dengan alamat blog sobat
• maxResults = 5, → Ganti angka 5 dengan jumlah artikel acak yang ingin teman tampilkan
• summaryLength = 100, → Ganti angka 100 dengan jumlah abjad ringkasan yang teman inginkan
• Untuk memberi style pada widget tersebut, silakan edit arahan css yang berada di antara arahan <style type="text/css"> dan </style>

Nah, itulah langkah demi langkah cara memasang widget random post di blogger serta script yang digunakan.

Selamat mencoba, dan biar ada manfaatnya.