Cara Membuat Widget Random Post Pada Blog

Tutorial Lengkap Cara Membuat Widget Random Post Keren Pada Blog - Pagi gan, hari ini admin ingin share tutorial blogger nih. Untuk melengkapi widget kosong yang ada pada blog agan, lebih baik agan gunakan widget random post ini gan. Selain mempermudah pengunjung melihat posting - posting blog agan lainnnya selain yang ada di homepage, posting lama pun bisa muncul di random post ini gan.

Widget ini juga bisa agan pakai untuk membuat pengunjung lebih sering melihat blog agan. Pada saat pengunjung melihat judul posting yang menarik dan tertera pada widget ini, otomatis pengunjung akan mengklik dan melihat post tersebut. Dan jika postingan agan menarik semua maka blog agan pasti kebanjiran pengunjung.

Screenshot

 Tutorial Pemasangan

Pertama perhatikan script HTML ini gan. Agan bisa mengedit bagian css nya yang ada didalam script HTML dibawah ini. Kalau sudah mengerti tinggal masuk ke blogger, tata letak, add widget, javascript.

<style scoped='' type="text/css">
#twisted-random ul{list-style:none;margin:0;padding:0}#twisted-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
#twisted-random li:last-child{border-bottom:0;}
#twisted-random li a{color:#444;}#twisted-random li a:hover{color:#444;text-decoration:underline}
</style>
<div id='twisted-random'>Loading Post...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage = 'http://advaster.blogspot.com',
    maxResults = 10,
    containerId = 'twisted-random';
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
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;
}
function TwistedRandomPosts(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // 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>');
}
function randomPosts(json) {
    var link, ct = document.getElementById(containerId),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=TwistedRandomPosts"></scr' + 'ipt>');
//]]>
</script>

Okay lah cuma segitu caranya gan, mudah dan simple kok gan gak pake ribet. Kalau emang gak ngerti soal css mending jangan diedit ya gan, edit yang fontnya di bold aja. Terimakasih

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Unknown

Saya tinggal di Cirebon dan besar di kota udang ini. Tertarik dengan dunia blog tidak membuat saya lupa dengan pendidikan dan agama. Kunci utama saya adalah percaya bahwa apapun yang terjadi, usaha dan doa itu nomor satu.

Artikel Terkait