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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcj7kpjttiHwEF6NgePBJUOvdtF3aVc1uzQOSftOod1snw59mhMEZpu8pSK53ae7eB6OD5uGm_WqYAAc_L5EBIcP1O2iqjBqRdurxUl9dup5iwHiXM0nmTx-EqHu1thbhTVb057jIDusE/" /></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjulNeyM3-Y1tlVaMHTWjJWX2zuikV8vUIbEVvB2Hm73oUNZK09zwb__ReG_4yjNmU1Qx_I93htnUgnBLGhtuM8DJCuGfqneJhx4rtI8jOLslwym3eXktZHlshgbAS679qidEM5ORnnU0K-/" /></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcj7kpjttiHwEF6NgePBJUOvdtF3aVc1uzQOSftOod1snw59mhMEZpu8pSK53ae7eB6OD5uGm_WqYAAc_L5EBIcP1O2iqjBqRdurxUl9dup5iwHiXM0nmTx-EqHu1thbhTVb057jIDusE/" /></a>
<span style="padding-left: 10px;"><a href="
http://namabloganda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjulNeyM3-Y1tlVaMHTWjJWX2zuikV8vUIbEVvB2Hm73oUNZK09zwb__ReG_4yjNmU1Qx_I93htnUgnBLGhtuM8DJCuGfqneJhx4rtI8jOLslwym3eXktZHlshgbAS679qidEM5ORnnU0K-/" /></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

Anonymous said... 07 March, 2009
Ini dia. Sip, lgsg dikerjakan.
Haedir 'sisi' said... 11 March, 2009
tengs,,,
some one 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
Unknown said... 09 January, 2010
bukan setelah tapi sebelum.. tapi keren sih :)
Unknown said... 16 January, 2010
matur tengkyu, tipsnya. linK sampen ta' taroh di blogku..
bursabaju 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 Kepanjen 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
Abdullah (Fish Seller) said... 15 November, 2010
thx ya mas herman
IRMAS said... 16 November, 2010
saya mau tanya,, kalo ngedit HTML di blog buat nempatin banner itu di mana? Mkasih..
rizum! said... 17 November, 2010
waaa...terima kasiiih tutorialnya,,,sangad membantuu ^^
Anonymous said... 31 December, 2010
keren gan postnya,,,
maen gan ke blog ane,,,tinjau hasil post agan di blog ane,,trus tinggalin jejak ya ,,,
Anonymous said... 31 December, 2010
makasie infonya gan,,,

maen ke blog ane ya,,,trus tinggalin jejak blognya agan ya,,,
Dodymysoul said... 04 January, 2011
mantap gan...: mohon ijin copas ya!!!!
jenis burung berkicau 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 said... 09 February, 2011
inpo yg bagus
Jemy Kaledupa said... 22 February, 2011
thanks brow...
arix b0edax 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 :((
lassee 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! ;;)
Arga 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
Admin 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,,,
ainbtzain said... 16 October, 2011
kagak bisa, om!!
Eko priyanto 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.....
Bisnis said... 12 January, 2012
oke banget, tank's infonya
ARIF MUJAHIDIN PONOROGO said... 16 January, 2012
Oke poooool
Amir said... 05 March, 2012
Mantap gannnsaya dah coba...n bisa thanks very much
Harun Ar said... 09 April, 2012
Mantab Mas.....
Makasih banget....
VENDOR MARMER LOKAL DAN IMPORT 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,,,???
Unknown said... 06 July, 2012
thanks ya,sangat amat membantu ;;)
Anonymous said... 16 July, 2012
waw kren banget gan !! thank you sob !
Unknown said... 06 November, 2012
ga bisa di praktekan
Unknown said... 17 November, 2012
Thanks Ya Gan
mampir di Blog ane yaa
http://dannywaskito99.blogspot.com/
Unknown 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