Cara Membuat Banner Berjalan

Posted by Herman on Sunday, February 08, 2009 53 comments

Sebelumnya saya sudah pernah mengulas tentang cara membuat efek marque untuk teks dan link. Dan sepertinya cara ini cukup menarik karena selain dapat menghemat ruangan blog cara ini juga dapat membuat blog lebih interaktif.

Oleh sebab itu, pada kesempatan ini saya akan membahas kembali cara membuat efek marquee namun kali ini yang akan saya bahas adalah efek marquee untuk banner atau banner berjalan. Contohnya seperti ini:




Cara ini sering dipakai oleh pemilik blog atau website yang ingin memasang banyak banner namun terbatas ruangannya. Nah bagi anda yang ingin menggunakan cara ini, gunakan kode dibawah ini pada blog anda:

<marquee scrolldelay="10" direction="right" behavior="scroll" scrollamount="3" width="468" bg height="60"><a href="http://namabloganda.com"><img src="http://lh3.ggpht.com/_15FopxVONSo/TISKJzjjf0I/AAAAAAAAD5Y/Fj2dsXlTc4M/hb_banner1.gif" /></a>
</marquee>
Ganti tulisan yang berwarna hijau dengan url website yang ingin dituju dan tulisan berwarna merah dengan url banner anda.

Jika anda ingin memasang lebih dari 1 banner. Sebagai contoh anda ingin menambah 1 banner lagi. Tambahkan kode dibawah ini diatas kode </marquee>

<span style="padding-left: 10px;"><a href="http://namabloganda.com"><img src="http://lh4.ggpht.com/_15FopxVONSo/TISKJ3UAzjI/AAAAAAAAD5c/AaGcQoy3V0I/hb_banner2.gif" /></a></span>
Ingat:
Ganti tulisan berwarna hijau dengan url website anda dan tulisan berwarna merah dengan url banner kedua anda.

Jadi susunan kodenya menjadi seperti ini:

<marquee scrolldelay="10" direction="right" behavior="scroll" scrollamount="3" width="468" height="60"><a href="http://namabloganda.com"><img src="http://lh3.ggpht.com/_15FopxVONSo/TISKJzjjf0I/AAAAAAAAD5Y/Fj2dsXlTc4M/hb_banner1.gif" /></a>
<span style="padding-left: 10px;"><a href="
http://namabloganda.com"><img src="http://lh4.ggpht.com/_15FopxVONSo/TISKJ3UAzjI/AAAAAAAAD5c/AaGcQoy3V0I/hb_banner2.gif" /></a></span>

</marquee>
Hasilnya:




Begitulah seterusnya jika anda ingin menambah banner lagi. Jika anda ingin mengganti arah gerak banner atau mempercepat gerakan banner silahkan baca artikel cara membuat efek teks marquee karena sudah pernah saya bahas disana.

Selamat mencoba.


Recent Posts:

53 comments

MU Fans said... 07 March, 2009
Ini dia. Sip, lgsg dikerjakan.
Haedirluv said... 11 March, 2009
tengs,,,
edy kagok said... 12 May, 2009
sippp..... :D :D
fatur341 said... 10 August, 2009
makasih bro infonya, saya ngopy ya... udah tak pasang
tukang ngeKLIK said... 01 December, 2009
wah..mantap gan tutorialnya...
yudi said... 06 December, 2009
Keren ni tutorialnya . . .
Buat blog q jadi tambah atraktif...
Tq bro . . .
Berjuang terus....!!! :D :D
it's my soul... said... 09 January, 2010
bukan setelah tapi sebelum.. tapi keren sih :)
Mahdi Sugara, said... 16 January, 2010
matur tengkyu, tipsnya. linK sampen ta' taroh di blogku..
ratuweb said... 24 February, 2010
Kang Herman, sayangnya hanya banner /gambarnya saja, kenapa tdk sekalian jelaskan banner yang ngelink ke website reseller /affiliate misalnya, jadi ketika klik salah satu banner berjalan langsung membuka web baru/open window tanpa meninggalkan web kita. Ditunggu HTMLnya yach
mas eko said... 15 April, 2010
wah maksih banyak infonya...akhirnya semua Banner terpasang di blog investasi saya...
tv online said... 22 June, 2010
kalo monambahin Link di banner tu gmana caranya,,kan sayang kalo g bisa di klik
herman said... 22 June, 2010
@ratuweb:
terima kasih atas masukannya. saya sudah menambahkan link dalam banner :)

@tv online:
silahkan di copy kembali kode banner diatas sudah saya tambahkan link didalamnnya
Dunia aMe said... 24 July, 2010
Buat Wordpress bisa gag gan ?
Herman said... 24 July, 2010
@Dunia aMe

sepertinya gak bisa mas. kecuali self host wordpress
Ghufron said... 25 October, 2010
Kang Herman...
mf aq newbi, mo nanya, link gbr tu didapet dari mana? apa gbr diupload dulu?
trus, ijin nih... artikelnya sy copy .. :D
he..he...he... (berarti bermanfaat dunk)
hatur nuhun, aq tunggu infonya..
Badi said... 12 November, 2010
Yang kode gitu mah enaknya diwarnet. Ne gue kan pake Hp SE gmana copy dan paste nya :-S
Xabduh said... 15 November, 2010
thx ya mas herman
IRMAS (Ikatan Remaja Muslim Asli Permai) said... 16 November, 2010
saya mau tanya,, kalo ngedit HTML di blog buat nempatin banner itu di mana? Mkasih..
odoRiezma Hime said... 17 November, 2010
waaa...terima kasiiih tutorialnya,,,sangad membantuu ^^
gRandonkz community said... 31 December, 2010
keren gan postnya,,,
maen gan ke blog ane,,,tinjau hasil post agan di blog ane,,trus tinggalin jejak ya ,,,
gRandonkz community said... 31 December, 2010
makasie infonya gan,,,

maen ke blog ane ya,,,trus tinggalin jejak blognya agan ya,,,
cah senowo said... 04 January, 2011
mantap gan...: mohon ijin copas ya!!!!
Dwi Banet said... 05 January, 2011
mantab bro.... langsung coba dech.
Zul said... 14 January, 2011
sore gan.... ssiip mantab
danie.ayank said... 19 January, 2011
makasih gan udh bagi-bagi ilmunya.... gud luck ;)
Tole ne Toudano said... 21 January, 2011
LANGSUNG GAN...TENGKYU
RIVAL ARDILES SANDO said... 09 February, 2011
inpo yg bagus
Jemy Anas said... 22 February, 2011
thanks brow...
arix wTc said... 24 February, 2011
tq sob tips'a

gan mw tanya nih
emoticon buat komntar saya muncul
tp pass udh di komen emoticon'a gx mw muncul jd cuma muncul kodenya aja
gmn y cara'a??
coba geh di test
http://arix-hardrock.blogspot.com

mohon bantuan'a gan :((
Sidabutar Kings said... 25 February, 2011
Tks bos infonya.tambah deh pengetahuan utk mempercantik blog. oh ya bos pasang link (follower) dong ke blog ku di Amazing aku udh lama jd follower blog ini.tks
Ary_Putra said... 31 March, 2011
Siip bos infonya. thanks bgt
aulia rahman said... 13 April, 2011
tengku broo..
dah nyari kmana2,
yang ini pling cocok...
seeep...
Tejo Sukarno said... 18 June, 2011
mantab gan,izin copy y
TeaYoungAreLead said... 19 June, 2011
Ijin copy lagi Gan! ;;)
Hamsah said... 28 June, 2011
Postingannnya mantab bro, salam sukses selalu.....
KHANSA said... 11 July, 2011
tanks gan infonya ...
praktek neh
Bunandar said... 01 August, 2011
makasih banget gan
dah praktek dan berhasil
mantaaaappp
Marlius said... 13 August, 2011
Trims Tutorialnya Bro,,,,
tangan zahil said... 22 August, 2011
makasi gan atas info na,,,ud lma nyari nya nih,,g`tw nya ktmu di sini,,,
jenengku ain, cok!! ♚ said... 16 October, 2011
kagak bisa, om!!
eko prianto said... 05 November, 2011
ini yang lagi aq cari hehe thanks infinya ijin praktek
Mursyid burhan said... 03 December, 2011
artikelnya boleh saya letakkan di blog saya ga neh?
daily wafa said... 11 December, 2011
Keren abis......
Lanjutkan.....
bisnissantai said... 12 January, 2012
oke banget, tank's infonya
Indonesiabisa said... 16 January, 2012
Oke poooool
Amir mahmud said... 05 March, 2012
Mantap gannnsaya dah coba...n bisa thanks very much
Harun Ar said... 09 April, 2012
Mantab Mas.....
Makasih banget....
ORA MBAYAR BLASS said... 15 April, 2012
terimakasih atas sharenya Gan,wah benar -benar sangat menarik,gimana dengan loading blognya setelah dipasangi Gan.tambahan waktunya tambah berat banget apa nggak,,,???
oktania Handayani said... 06 July, 2012
thanks ya,sangat amat membantu ;;)
irvanuzumaki.blogspot.com said... 16 July, 2012
waw kren banget gan !! thank you sob !
Bos Iklanizer said... 06 November, 2012
ga bisa di praktekan
Danny waskito said... 17 November, 2012
Thanks Ya Gan
mampir di Blog ane yaa
http://dannywaskito99.blogspot.com/
Hilmi Cules said... 20 December, 2012
gan ini klo gambarnya di ganti sesuai keinginan kita bagaimana??

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment