Membuat rolling banner dan link

Sebagai blogger sejati tentunya kita senang untuk bertukar link maupun banner karena selain bisa meningkatkan traffic blog juga kita akan lebih mudah untuk mengunjungi rekan blogger yang lain dari blog kita. Masalah yang timbul jika kita banner atau link sudah terlalu banyak yaitu ketersediaan space atau ruang untuk menyimpan banner-banner atau link tersebut. Ada beberapa solusi untuk menghemat space blog kita diantaranya dengan membuat widget yang dilengkapi scroll box ataupun dengan membuat rolling banner/link. Rolling yang saya maksud yaitu seperti yang anda lihat di blog ini, banner dibuat berputar dari bawah ke atas atau sebaliknya tergantung selera kita. Selain menghemat space juga terlihat lebih atraktif dan lebih cantik.

Teknik pembuatannya pun terbilang cukup sederhana yaitu dengan memanfaatkan kode dari teks berjalan atau marquee. Anda dapat berimprovisasi tidak hanya untuk banner saja, anda bisa juga membuat slide foto atau untuk memajang award dan sebagainya.

Langkah pertama seperti biasa silahkan login ke Dashboard Blogger anda dan pilih Layout – Page Elements. Tambahkan sebuah gadget dan pilih HTML/Java script, isi title sesuai selera dan masukkan script berikut:

Untuk link biasa tanpa banner

<marquee
bgcolor="#E7E7E7" direction="up" onmouseover="this.stop()" scrollamount="1" onmouseout="this.start()" height="250px">
<center>

<li><a href="http://linktujuan.com " target="_blank">Title link</a></li>

<li><a href="http://linktujuan2.com" target="_blank">title link2</a></li>

<li><a href="http://linktujuan3.com" target="_blank">title link3</a></li>

Link ke-4..

dan seterusnyaâ..

</center>
</marquee>

Untuk banner atau slideshow foto:

<marquee
bgcolor="#E7E7E7" direction="up" onmouseover="this.stop()" scrollamount="1" onmouseout="this.start()" height="250px">
<center>

<a href="http:/urltujuan.com" target="_blank"><img border="0" src="http://url-image-banner.com"/></a>

<a href="http:/urltujuan2.com" target="_blank"><img border="0" src="http://url-image-banner2.com"/></a>

Kode banner ke-3

Kode banner ke-4
...
...
dan seterusnya...
</center>
</marquee>

Ganti link tujuan dan title dengan link anda. Untuk banner anda tinggal mengcopy kode banner teman anda dan masukkan seperti kode diatas. Anda bisa mengganti warna background dengan mengganti kode warna pada bgcolor=”E7E7E7” dan untuk mengubah tinggi widget ganti nilai pada kode height=”250px” kemudian simpan. Atau jika ingin warna backgroundnya sama dengan template tinggal hapus saja kode tersebut. Agar terlihat lebih bagus anda sebaiknya menambahkan border pada widget yang anda buat. Namun untuk menambah border ini anda harus menambahkan kode CSS pada template anda. Caranya anda harus mengetahui widget ID dari widget yang baru saja anda buat. Untuk lebih jelas tentang widget ID silahkan baca kembali artikel sebelumnya yaitu Membuat background widget warna-warni. Klik tab Edit HTML lalu tambahkan kode berikut tepat diatas kode ]]></b:skin> :

#HTMLxx {
Border : dotted 1px;
}

HTMLxx adalah widget ID yang harus anda sesuaikan dengan widget yang baru dibuat. Sampai disini anda sudah dapat membuat rolling banner ataupun link, jika ada kesulitan silahkan kontak saya lewat email, kotak komentar, atau shoutbox. Selamat mencoba..

Artikel terkait: