Cara membuat Widget tombol shuffle

Bagaimana cara membuat widget tombol shuffle atau widget tombol random di blog?. Kali ini saya akan share tutorial cara membuat widget tombol shuffle untuk blog. Sebelum-nya saya ingin menjelaskan dulu secara singkat apa itu tombol shuffle? Suffle jika diartikan dalam bahasa indonesia adalah Pengocokan atau lebih tepatnya adalah random. Lalu apa fungsi dari widget tombol shuffle?, Fungsi dari widget tombol shuffle adalah me-random atau mengacak posting blog jika kita menekan atau klik tombol shuffle tersebut otomatis anda akan dialihkan ke salah satu posting atau artikel yang di random.

Jika anda tidak paham dari apa yang sudah saya jelaskan diatas,alangkah baiknya anda meng-klik tombol DEMO yang ada di bawah ini,agar anda mengerti apa yang saya maksud dari artikel ini.

DEMO

Tutorial membuat widget tombol shuffle :

• Buka dasboard blog anda
• Tata Letak
• HTML/JavaScript
• Paste kode dibawah ini dan letakan di HTML/Javascript

<style>
#abt-random{position:relative;color:rgba(255,255,255,1);text-decoration:none;background-color:rgba(219,87,5,1);font-family:'Yanone Kaffeesatz';font-weight:700;font-size:20px;display:block;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);-moz-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);margin-bottom:10px;margin-top:10px;width:160px;text-align:center;-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;padding:4px}
#abt-random:active{-webkit-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);-moz-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);position:relative;top:6px}
#abt-random a{color: #fff;}
</style>
<center><div id="abt-random"></div></center>
<script type="text/javascript">
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 feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Shuffle'; document.getElementById('abt-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>

Keterangan : Anda bisa mengganti tulisan Shuffle sesuai keinginan anda,misalkan Random atau ke artikel lain?

Semoga artikel ini bermanfaat dan menambah wawasan untuk anda, Terimakasih banyak.

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Related Articles :