Cara Membuat Kotak Blogroll dan Efek Marque

Membicarakan masalah efek marque dan kotak blogroll, pada posting sebelumnya saya pernah share cara membuat efek marque pada judul blog. Pada kesempatan kali ini, kita akan mempelajari cara membuat kotak blogroll dan efek marque pada blog. Apa maksudnya kotak blogroll? Kotak blogroll adalah sebuah kotak kecil yang dapat diatur ukurannya yang dalamnya berisi anchor text teman. Lalu apakah efek marque pada kotak blogroll tsb? Sama aja kok kayak kotak yang berisi anchor text namun berjalan.

Ngerti ga ya sobat semua. Kalo sobat masih belum ngerti silahkan lihat demonya di bawah ini (lihat widget di sidebar kanan).
DEMO
Nah sudah mengerti kan? Begitulah kotak blogroll tsb. Penasaran sobat ingin membuatnya? Ikuti langkah-langkahnya berikut ini:

1. Kotak Blogroll Model Text Area

1. Login ke akun blogger sobat.
2. Pilih Rancangan, lalu klik Add a Gadget.
3. Pada window yang terbuka, pilih HTML/Javascript, lalu isikan kode berikut:

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#link1 <br />
#link2 <br />
#link3 <br />
#link...

</div>

Keterangan:
- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, oh ya itu juga bisa diisi dengan banner link.
- Jika kamu ingin berjajar anchor textnya, hilangkan tanda <br/>.

2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar. Link-link ato isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Nah gini nih cara buatnya:
1. Login ke akun blogger sobat.
2. Pilih Rancangan, lalu klik Add a Gadget.
3. Pada window yang terbuka, pilih HTML/Javascript, lalu isikan kode berikut:

<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>

Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (Pasti udah tau artinya kan).
- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode <br />.
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

Selamat Mencoba ..

Sumber