Membuat Daftar Link Berputar/ Rolling Blogroll

Pict : Google

Assalamu'alaikum...

Mayasa©. Salah satu cara untuk menjaring pengunjung blog adalah dengan bertukar link/ membangun jaringan. Namun apabila daftar link tersebut telah banyak sehingga membutuhkan space yang tidak sedikit, maka hal tersebut akan mengganggu tampilan blog kita. Sama seperti banyaknya widget yang kita tambahkan pada blog kita.

Jika pada posting sebelumnya saya share cara untuk membuat sedikit ringkas tampilan widget-widget tersebut dengan menambahkan fungsi scroll, kali ini saya ingin share cara yang lain yakni dengan membuat daftar link tersebut berputar/ rolling keatas.

Dengan membuat daftar link tersebut berputar, maka kita dapat mengurangi ukuran border/ kotak daftar link kita karena daftar link tersebut akan otomatis berputar naik.

Untuk membuat blogroll berputar caranya sangat mudah. Saya sudah mencoba langkah-langkah berikut ini dan berhasil. Namun karena tidak pernah saya rencanakan untuk direpost, maka tidak saya catat source-nya. Dan kode yang saya tuliskan disini saya copas dari widget yang telah saya buat sebelumnya.

Jadi langsung saja anda ikuti langkah-langkah berikut ini :

1. Login ke akun blog anda atau klik disini
2. Klik menu rancangan dan klik Layout, kemudian tambahkan widget baru berupa HTML
3. Copy kode HTML/javascript di bawah ini.
   
   <!-- Codes by HTMLcodes.me -->
   <marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrollamount="2">
   <ul>
   <li><a href="http://m4y-a5a.blogspot.com/">MAYASA™</a></li>
   <li><a href="http://m4y-a5a.blogspot.com/">MAYASA™</a></li>
   <li><a href="http://m4y-a5a.blogspot.com/">MAYASA™</a></li>
   </ul></marquee>
   
   
4. Ganti tulisan yang berwarna "UNGU"  dengan alamat URL link teman anda sedang yang berwarna "BIRU" silahkan diganti dengan Nama Anchor yang ingin di tampilkan.
5. Terakhir klik "simpan".
6. Kemudian lihat tampilan blog anda sekarang.

Itu adalah cara pertama untuk membuat blogroll yang berupa link/ tulisan berputar. Sedangkan untuk link yang berupa banner, cara membuatnya adalah :

Copy kode dibawah ini pada widget HTML yang telah anda tambahkan :

<marquee direction="up" align="center" scrollamount="2" style="border:2px  solid" width="100%" height="200px" onmouseover="this.stop()" onmouseout="this.start()" >KODE BANNER SAHABAT</marquee>

Keterangan kode di atas :

1. Marquee direction="up"
   adalah arah gerakan teks, yakni dari bawah ke atas, untuk mengganti arah gerakan anda bisa menggunakan left untuk bergerak ke kiri, right untuk bergerak ke kakanan serta down untuk bergerak ke bawah.
2. Align="center"
   adalah untuk mengatur tataletak daftar link/banner pada posisi tengah
3. Scrollamount="2"
   adalah kecepatan bergeraknya daftar link, semakin tinggi nilai scrollamountnya maka semakin cepat daftar link berjalan, semakin kecil scrollamountnya maka semakin lambat daftar link bergerak. Silahkan anda coba gunakan variasi angka selain 2 dan lihat hasilnya.
4. Style="border:2px solid"
   adalah menentukan besar kecilnya garis batas dari daftar link atau garis pinggir dari daftar link. Semakin besar nilai bordernya maka semakin tebal garis yang terlihat begitu juga sebaliknya semakin kecil nilai bordernya maka semakin kecil atau tipis tampilan garisnya.
5. Width="100%"
   adalah lebar dari kotak daftar link sesuai dengan lebar sidebar yaitu 100%
6. Height="200px"
   adalah tinggi kotak daftar link, ukuran ini bisa diubah untuk disesuaikan dengan kebutuhan begitu juga dengan lebar tadi.
7. Onmouseover="this.stop()"
   adalah ketika penunjuk mouse berada dalam area atau kotak daftar link maka link/ banner yang sedang berjalan akan terhenti.
8. Onmouseout="this.start()"
   adalah ketika penunjuk mouse tidak berada dalam kotak daftar link maka daftar link akan bergerak.
9. KODE BANNER SAHABAT
   harus diganti dengan kode dari banner blog teman anda misalnya untuk banner blog MAYASA™ jika kodenya ditulis akan seperti berikut :
   

   <a href="http://m4y-a5a.blogspot.com"><img src="http://images.cooltext.com/2673496.png" width="158" height="34" alt="MAYASA™" title="|MAYASA™| Trying to Fight the Darkness with Education"/></a>

   Apabila digabungkan maka secara lengkap kodenya akan menjadi seperti berikut :
   

   <marquee direction="up" align="center" scrollamount="2" style="border:2px solid" width="100%" height="200px" onmouseover="this.stop()" onmouseout="this.start()" > <a href="http://m4y-a5a.blogspot.com"><img src="http://images.cooltext.com/2673496.png" width="158" height="34" alt="MAYASA™" title="|MAYASA™| Trying to Fight the Darkness with Education"/></a></marquee>

10. </marquee> menyatakan bahwa semua kode daftar link yang menggunakan marquee berakhir pada kode ini (</marquee>).

Bagaimana, tidak terlalu rumit bukan?
Jadi selamat Mencoba dan semoga sukses.

Wassalamu'alaikum...