Cara Menambahkan Tombol Surprise Me Di Blog

Kalian sering gak klik "I'm feeling lucky" di google,jika di klik akan muncul sebuah pencarian random,yang siapa tau pengunjung akan tertarik dengan pencarian tersebut,kegunaan nya apa? gak ada sih,untuk menghilangkan bosan saja

nah,kali ini saya akan share tutorial serupa,yaitu cara membuat tombol surprise me di blog,sama aja dengan "i'm feeling lucky" di google,cuma yang ini akan memunculkan artikel random,di blog kamu
ikuti tutorial dibawah ini untuk cara membuat nya

Cara membuat tombol surpise me di blog

1. masuk ke blog > template > edit html

2. cari kode </head> letakkan kode dibawah ini di atas kode tadi

<script type='text/javascript'>
//<![CDATA[
function showLucky(e){for(var t=e.feed,a=(t.entry||[],t.entry[0]),c=0;c<a.link.length;++c)"alternate"==a.link[c].rel&&(window.location=a.link[c].href)}function fetchLuck(e){script=document.createElement("script"),script.src="/feeds/posts/summary?start-index="+e+"&max-results=1&alt=json-in-script&callback=showLucky",script.type="text/javascript",document.getElementsByTagName("head")[0].appendChild(script)}function readLucky(e){var t=e.feed,a=parseInt(t.openSearch$totalResults.$t,10),c=Math.floor(Math.random()*a);c++,fetchLuck(c)}function feelingLucky(){var e=document.createElement("script");e.type="text/javascript",e.src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky",document.getElementsByTagName("head")[0].appendChild(e)}
//]]>
</script>

3. simpan template

Menambahkan tombol surprise me

jika kamu ingin menambahkan tombol nya di navigasi template kamu,letakkan kode dibawah ini di dalam html navigasi kamu

<li><a id='btn-randrom' href='#random' onclick='feelingLucky()' title='Surprise me'><i class='fa fa-random'></i> Surprise me</a></code></li>

untuk menaruh nya didalam menu navigasi,letakkan kode dibawah ini

<a id='btn-randrom' href='#random' onclick='feelingLucky()' title='Surprise me'><i class='fa fa-random'></i> Surprise me</a>

Untuk css nya letakkan kode dibawah ini di atas kode ]]></b:skin> atau </style>

/* Button Suprise Me */
#btn-randrom:hover{background:#75c15d}
#btn-randrom>i{font-size:14px;background:#6ca75a;margin:-10px 5px -10px -10px;padding:0 13px;border-radius:3px 0 0 3px;display:inline-block;line-height:38px}
#btn-randrom{background:#7ec169;border-radius:3px;display:inline-block;color:#FFF;padding:10px}
a{text-decoration:none;}