Cara Pasang Widget Random Post Di Blogger - BBT: Panduan lengkah bagaimana cara memasang widget random post dengan thumbnail di blogger dengan mudah dan cepat, serta script random post yang digunakan

Cara Pasang Widget Random Post Di Blogger

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

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

Bagaimana penampakan widget random post ini ?

Untuk demo widget ini silakan sobat lihat di samping kanan (sidebar) blog ini, itu adalah widget ramdom post dengan script yang sama dengan script yang akan saya 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

recent post thumbnail
Baca juga tutorial bagaimana cara memasang widget recent post di blogger, sobat akan mendapatkan 4 kode widget, mulai dari widget recent post sederhana sampai widget recent post dengan thumbnail untuk blogger, dan ada juga kode widget recent post by label yang disertai thumbnail.
Lanjut ...

Cara Memasang Widget Random Post Di Blogger

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

Bagi sobat yang tertarik untuk memasang random post di blog blogger nya silakan ikuti langkah - langkah berikut, dan pastikan sobat 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 bagian Konten
  5. Klik Simpan
tata letak blogger
Sangat mudah kan cara memasangnya :-)

Berikut kode script random post yang harus dipasang

<div id='random-post-container'>Memuat...</div>
<script type='text/javascript'>//<![CDATA[
// Feed configuration
var homePage = 'http://www.blogbacatulis.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> adalah area yang akan menampilkan artikel acak
  • var homePage = 'http://www.blogbacatulis.com/', → Ganti dengan alamat blog sobat
  • maxResults = 5, → Ganti angka 5 dengan jumlah artikel acak yang ingin sobat tampilkan
  • summaryLength = 100, → Ganti angka 100 dengan jumlah karakter ringkasan yang sobat inginkan
  • Untuk memberi style pada widget tersebut, silakan edit kode css yang berada di antara kode <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 semoga ada manfaatnya.
loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Cara Pasang Widget Random Post Di Blogger yang ada di blog ini bermanfaat buat sobat