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:



25 Komentar:

Ivan Kavalera said...

makasih infonya, sobat. salam sukses. merdeka!

NURA said...

salam sobat,,trims ya tipsnya
saya ingin coba slideshow foto..dengan kode tips sobat,,semoga berhasil.

JT said...

Bener Banyak JURUS nya. Sips bin HEBAT.
Klw yang di bawh link sahabat or di atas recent vistior, apa tu n kumaha sobbbbs???

dinni said...

sip dech ini baru mantap artikelnya, slam sukses sob;-)

irvan said...

sip infonya..ditunggu tips lainnya bos

bangun said...

wah keren abizz nee ...
sangat bermanfaat bagi q ... mksh prend ..

HeQris said...

Tanks atas infonya,,mantap pokoknya,,
Nambahin dikit sob:
Free Template Blogspot
Tutorial Blog

Siais said...

wah makasih ya triknya mudah2an dapat ngebantu nih...

female sexy said...

wuih mantab ne infonya...

jngan bosen2 maen k'blog aKu jg iia...

fikirjernih said...

wiss sip mas,
=================
mas tolong komentar nya untuk postingan blog saya yang alamat nya

http://fikirjernih.blogspot.com/2009/08/rumah-indaman-yang-ingin-ku-wujudkan.html

makasih sebelum nya

al-basri said...

terima kasih tipnya...
semoga sukses

mas doyok said...

siiip mass

keshit said...

aku ambil link sampeyan bro, lam kenal aja. tolong di back ya

amlus said...

thank informasinya...

TamaTech said...

BISMILLAH..
saya cobain k ADs banner, kok malah larinya horisontal, ga vertkal. trus lari sendiri lgi..
whats wrong? ato gw yg katrok..hehe

tama said...

alhamd... ud bs boz..matur nuhun sanget...
o,y.. gw uda link ente, back link ya..

kenali dan kunjungi objek wisata di pandeglang said...

siap, mantep. thx mas.

pembolangmaya said...

thankz pisan infona

badman said...

sip gan... thanks...

mampir ke blog saya gan... banner agan udah saya pasang di partner banner... :)

Unknown said...

thank sob . . .

Elang Dirga Buana said...

Sippp Mas.... Postingnya Sangat Bermanfaat!!
Saya Pasang Link Blog ini ya Di Blog Saya???
http://rumoh-solution.blogspot.com/

modern auto car said...

good

Quiz and Games Solutions said...

Quiz and Game Solutions | Android and iOS Games and Applications

Royyan said...

Makasih mas atas artikenya.
Saya sudah pasang di blog saya
Salam kenal

Dyotarunaway said...

Thank gan artikelnya sangat membantu. Mengatur Kecepatan geraknya gimana ya gan?

Post a Comment

Silahkan tinggalkan komentar anda, setiap komentar yang anda tulis akan menambah jumlah backlink anda.
Sebaiknya gunakan Name/URL pada saat menuliskan komentar.

Template Design by Eris Agustian - Digital Life | Professional Blogger Template