
Sebelumnya aku pernah membuat postingan perihal scrolling Recent Post, ternyata banyak yang minat juga, berdasarkan perhitungan informasi dari google, termasuk diantaranya pertanyaan mengenai bagaimana membuat scrolling Random Post.
Nach untuk di postingan ini, sistem scrolling dari Random Post pada intinya sama saja, yaitu tetap menggunakan marquee, yang berubah hanyalah kode script untuk menampilkan judul Post-nya.
Sedangkan tampilan dari judul postingan akan berubah secara acak, apabila ada loading window, seperti refresh atau ada pilihan pada judul post di random post.
Cara bikinnya, setelah login ke blogger, langsung masuk ke Design --> Page Element --> Add Gadget --> HTML/Script.
Kemudian Copy kode dibawah ini kedalam-nya :
<style type="text/css">
ul { list-style-image: url(http://img375.imageshack.us/img375/2936/flower.png) }
ul a{text-decoration:none;}
ul a:hover {background:#66FF00; text-decoration:none; color: red;"}
</style>
<marquee behavior="scroll" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://www.karsono.co.cc/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></marquee>
ul { list-style-image: url(http://img375.imageshack.us/img375/2936/flower.png) }
ul a{text-decoration:none;}
ul a:hover {background:#66FF00; text-decoration:none; color: red;"}
</style>
<marquee behavior="scroll" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://www.karsono.co.cc/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></marquee>
Selanjutnya yang perlu dilakukan perubahan adalah kode yang diberi warna merah.
Ganti numofpost=10 sesuai dengan jumlah post yang ingin ditampilkan.
Dan terakhir ganti link http://www.karsono.co.cc, sesuai dengan link anda sendiri.
tankyu buanget bang, mantap dah jadinya blogku
BalasHapusbgus juga ini Om..
BalasHapusOm bisa tukeran link ga ??
aku ini masih pemula Om..
nieh blognya keren bangedd...
BalasHapusgimana desainya ce....
*pengin belajar...
gan,,,,,gimana buat widgeet kayak punya agan...??
BalasHapuskrim bae ke email,
thanks...
coba lihat di postingan ini MEMBUAT ANIMASI TIAP WIDGET DI SIDEBAR BLOGGER
BalasHapusbos.... boleh ikut copas ia.......
BalasHapusTak kasih sumbernya...
thanks....
hahaha mantab, pas tk liat blog ku, malah macet, close mozilla ampe 3x
BalasHapusy udah deh gw hapus aj, g jadi pasang widget nya
Terimakasih tips nya
BalasHapussederhana tp OK
thx ats tipsnya, bgs bgt bro blognya, salam kenal: www.bersediabelajar.blogspot.com
BalasHapusthanks infonya, simple tapi sudah menarik
BalasHapusvisit my blog : www.gudanglu.blogspot.com