Cara Membuat Tombol Surprise Me (Random Post) Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutrial tentang bagaimana caranya membuat tombol atau link random post atau yang lebih dikenal dengan surprise me. Ketika kalian menekan tonbol tersebut, secara otomatis akan diarahkan ke sebuah postingan secara acak. Jika kalian belum mengerti, kalian bisa melihat contohnya di link di bawah ini :

Demo

Bagaimana? Kalian tertarik? Langsung saja. Berikut ini adalah cara membuatnya :

• Pertama, masuk ke dasboard blog kalian.
• Masuk ke Template.
• Pilih Edit HTML.
• Masukkan kode JavaScript di bawah ini tepat di atas kode </body> :

 <script type='text/javascript'>

//<![CDATA[

function showLucky(root){

    var feed = root.feed;

    var entries = feed.entry || [];

    var entry = feed.entry[0];

      for (var j = 0; j < entry.link.length; ++j) {

       if (entry.link[j].rel == "alternate") { 

       window.location = entry.link[j].href; 

       } 

      } 

   }

function fetchLuck(luck){

    script = document.createElement('script');

    script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';

    script.type = 'text/javascript';

    document.getElementsByTagName('head')[0].appendChild(script);

   }

function readLucky(root){

    var feed = root.feed;

    var total = parseInt(feed.openSearch$totalResults.$t,10);

    var luckyNumber = Math.floor(Math.random()*total);

    luckyNumber++;

    fetchLuck(luckyNumber);

    }

function feelingLucky(){

    var script = document.createElement('script');

    script.type = 'text/javascript';

    script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';

    document.getElementsByTagName('head')[0].appendChild(script);

    }

//]]>

</script> 

• Simpan perubahan Templatenya.

Untuk menggunakannya, kalian hanya perlu menambahkan kode di bawah ini di menu blog kalian :

<li class='ranpost'><a onclick='feelingLucky();'><i/>Random Post</a></li>

Saya mendapatkan tutorial ini dari idblanter.com. Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar dan klik tombol like di bawah ini. 

Share :

Facebook Google+ Twitter