Tutorial Letak Random Post Button Dalam Blog

Jika sesebuah blog mempunyai entri yang banyak, mungkin pengunjung tidak tahu untuk membaca mana satu entri di dalam blog tersebut. Jadi bagaimana untuk kita kekalkan pengunjung blog untuk membaca entri blog secara rawak.? Maka perlulah dipasang 'random post button' dalam blog.
Ia juga salah satu cara untuk memastikan pengunjung akan kekal lebih lama di dalam blog kita untuk membaca entri-entri yang terdapat dalam blog secara rawak. Ia sangat bagus bagi blog yang sebahagian besar kandungannya adalah gambar atau video, dimana pengunjung tidak perlu membaca mengikut turutan garis masa, tetapi membaca entri secara rawak.


Contoh blog (test blog) yang dipasang dengan random button ini boleh dilihat di sini > test blog 

Tutorial untuk memasang random post button ke dalam blog adalah seperti berikut.


1. Login akaun blogger > dashboard > layout
 

2. Kemudian add a gadget > HTML/javascript
 


3. Di dalam ruangan HTML/javascrip, copy dan paste salah satu kod di bawah. Terdapat dua jenis kod, satu untuk berada di sidebar, satu untuk statik. Anda boleh cuba mana-mana satu yang dirasakan sesuai.

3(a) Kod untuk random post button berada di sidebar
<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 = 'Random Post'; document.getElementById('abt-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"> </script>
 ATAU

3(b) - Kod untuk random post button statik di sebelah kanan-bawah blog
<div style='display:scroll; position:fixed; bottom:5px; right:5px;'> <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 = 'Random Post'; document.getElementById('abt-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"> </script> </div>
4. Save dan lihat hasilnya.:)

48 comments:

  1. Akhirnya, lama tunggu untuk updates. Hehe :)

    ReplyDelete
  2. kunjungan siang postinganya sangat bermanfaat sekali jangan lupa kunjung balik

    ReplyDelete
  3. Wahh..dah lama tak post ni. Selamat kembali :) - K.Jaha

    ReplyDelete
  4. This is awsome blog how to add random-post-button it will be really helpful for me. seo company london

    ReplyDelete
  5. terima kasih gan.. sangat bermanfaat

    visit my blog : azharryandhi.blogspot.com

    ReplyDelete
  6. malam malam lagi berkunjung kesini, akhirnya update juga hehehe

    ReplyDelete
  7. infonya bagus

    salam sukses
    http://tokoobatbiusasli.blogspot.com

    ReplyDelete
  8. Hi :) mcm mana yg na buat mcm ni.. sy sendiri pun tak tahu na sebut benda ni sbg ap.. Bg contoh jela ye :

    Kita buat satu entri baru, kemudian kita nak terangkan kpd pmbaca bahawa dia boleh rujuk entri lame dgn hanya klik "sini".. Bila kita tekan perkataan "sini" tu akan muncul entri lame tanpa perlu guna ayt panjang berjela nak describekan benda tu tp hnya dgn klik "sini".. tq :) panjang lebar soklannya.. heheh

    ReplyDelete
  9. thank infonya gan,, jangan lupa berkunjung ke http://komangsuardika.blogspot.com/

    ReplyDelete
  10. Wah great tutorial .. visit my blog yer.. http://www.kacamataview.com/

    ReplyDelete
  11. salam kenal dan follow
    torascool(dot)blogspot(dot)com

    ReplyDelete
  12. Bagus info ni:) TQ.. i follow..
    visit my blog http://vic-mycerita.blogspot.com/2014/03/vivix-penawar-yang-dicari.html

    ReplyDelete
  13. tutorialnya super mantap, terima kasih gan

    ReplyDelete
  14. thanks gan atas informasinya

    ReplyDelete
  15. keren juga nih...

    www.tokokonohasatu.blogspot.com

    ReplyDelete
  16. artikel blognya membahas dengan pasti, komentar juga dong ke blog saya www.goocap.com

    ReplyDelete
  17. www.sharethis2win.com/1711

    ReplyDelete
  18. Kod untuk random post button yang statik atau sidebar, yang mana lebih bagus?... tq..

    ReplyDelete
  19. dengan baca dan menyimak postinganya menjadi ilmu dan wawasan saya makasih atas blog nya yang bermanfaat ini.

    ReplyDelete
  20. Semakin keren jadinya blog ya jika ada rondom post, mungkin lebih menarik lgi jika ditambah infinite scrool seperti blog saya

    ReplyDelete
  21. Semakin keren jadinya blog ya jika ada rondom post, mungkin lebih menarik lgi jika ditambah infinite scrool seperti blog saya

    ReplyDelete
  22. terima kasih atas tutorial.. saya nak cuba ...

    ReplyDelete
  23. Terima kasih ilmunya. Memang penting juga ya membuat random post untuk memberikan pelayanan yang terbaik bagi pengunjung blog kita

    ReplyDelete
  24. ini yg saya cari...
    salam kenal...

    ReplyDelete
  25. Here providing you free tutorials and reference manuals with examples.You gote more information regarding any topic.

    for more visit http://tutorialterminal.blogspot.in/

    ReplyDelete
  26. kunjungan siang membaca artikelnya menambah ilmu dan wawasan saya makasih banyak

    ReplyDelete
  27. ajib tambah referensi baru nih. thanks infonya

    ReplyDelete
  28. terimakasih infonya mas,sangat membantu untuk saya yang masih awam
    komputer tutorial

    ReplyDelete
  29. Oke banget gan postingan nya, boleh di coba neh ntar, thanx gan udah mau berbagi. :-)

    ReplyDelete
  30. lengkap sangat, detil, and very intresting, layak di cuba...., thank's very much...

    ReplyDelete
  31. Very nice post.
    Thank admin !

    ReplyDelete
  32. menarik dan sungguh bermanfaat sekali infonya makasih

    ReplyDelete
  33. komentarnya dong gan web ane ni http://www.goapindulvacation.com/

    ReplyDelete
  34. nice blog.... tolong kunjungi blog aku PENGETAHUANPRO.BLOGSPOT.COM ... Harap sudi...

    ReplyDelete
  35. Tis expels te older mth that you cn just train a body part for growth two occasns a week plus 3 ocasions a week for description. Humaloid HGH Maximum Strength Human Growth Pro-Hormone Oral Spray " Powerful 65,000 nanograms of Human Growth Pro-Hormone " Produced in an FDA Certified Lab under c - GMP manufacturing guidelines " High quality oral spray that has a hint of citrus taste " Natural formula to stimulate your bodies Growth Hormone " Doctor formulated " Safety sealed " No side effects. Green tea fat burner is an over-the-counter weight loss product that asserts to decrease your desire for food and provide improvement to your metabolism.

    My web blog :: Watch this Video

    ReplyDelete
  36. Mau Belajar Blogger ? Tapi Gak Bisa Atau Gak Tau Cara Nya ?
    Kesini Aja http://ruby-alfa.blogspot.com/
    Disitu Anda Bisa Belajar Tentang Blogger Dan Tutor Mempercantik Blog

    ReplyDelete
  37. Hey there! This is kind of off topic but
    I need some help from an established blog. Is it difficult to set up your own blog?
    I'm not very techincal but I can figure things out pretty quick.
    I'm thinking about creating my own but I'm not sure where to begin. Do you have any ideas or suggestions?
    Many thanks

    my page :: http://youtu.be/qNsQoZeUrNQ

    ReplyDelete
  38. html yg mana gan di masukanya? kalau untuk wp gimana solusinya seperti situs website: http://www.mebeljeparajati.com/ ini gan

    ReplyDelete