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.
10 comments:
Om bisa tukeran link ga ??
aku ini masih pemula Om..
gimana desainya ce....
*pengin belajar...
krim bae ke email,
thanks...
Tak kasih sumbernya...
thanks....
y udah deh gw hapus aj, g jadi pasang widget nya
sederhana tp OK
visit my blog : www.gudanglu.blogspot.com
Posting Komentar