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.:)
