Minggu, 25 Desember 2011

Cara membuat random post dengan scrollbar

Tips dan triks blog yang akan saya bagikan kali ini adalah bagaimana membuat random post dengan scrollbar. Sebelumnya cara membuat random post (artikel acak) ini sudah pernah saya tulis.

Sekarang yang kita lakukan adalah hanya menambah scrollbar saja. Tujuannya menghemat space pada sidebar blog kita. Jadi, sebanyak apapun jumlah postingan yang ingin kita tampilkan tidak menjadi masalah lagi.

Nah, ini dia cara membuat random post dengan scrollbar :

1. login ke blog sobat

2. Masuk ke menu Rancangan --> Lalu add gadget --> pilih HTML/JavaScript

3. Copy dan paste code berikut kedalam kotak HTML/JavaScript tadi.

<div style='overflow:auto; width:ancho; height:160px;'><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="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
</div>


Keterangan :

  1. height:160px adalah tingginya sobat bisa ganti dengan tinggi yang sobat inginkan. Misalnya 250px.
  2. kode yang di stabilo adalah jumlah posting yang ingin ditampilkan, ganti angka 10 dengan angka yang sobat inginkan.
  3. Kode warna merah adalah kode untuk scrollbarnya. Kode ini bisa sobat gunakan untukmembuat link sahabat menjadi rapi atau membuat widget lainnya dengan tambahan scrollbar.
  4. Kode warna hitam tersebut adalah kode random postnya.
4. Terakhir Save.



sumber : masdowi.blogspot.com

0 komentar:

Posting Komentar

Followers