Membuat Banner atau Gambar Berjalan

Pada posting kali ini kita akan belajar membuat gambar atau banner iklan berjalan di blog kita.
Cara pertama anda bisa memanfaatkan marque caranyapun tergolong simpel, anda tinggal copas saja code berikut, dan anda ganti link gambar dengan link gambar anda.

<marquee direction="LEFT" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="5" height="60" align="justify">
<a href='Link Tujuan Gambar' target="_blank" ><img alt="Mung Bisnis" border="0" width="460"
src="Link Lokasi Gambar" height="60" /></a>
<a href='Link Tujuan Gambar'target="_blank" ><img border="0" width="460"
src="Link Lokasi Gambar" height="60" /></a>
</marquee>
Keterangan: yang saya beri warna kuning, silahkan anda ganti sesuai kebutuhan.

Cara berikutnya ini tergolong sedikit njlimet kalau melihat scriptnya, karena banyak banget, tentunya karena kodenya panjang model berjalanya bannerpun berbeda, lebih keren tentunya. caranya juga sama, tinggal copas saja kode dibawah ini, dan atur lokasi gambar anda, selesai.
<script language="JavaScript1.2">
/*
Left-Right image slideshow Script-
By Dynamic Drive (www.dynamicdrive.com)
For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
*/

///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='480px'
var scrollerheight='60px'
var scrollerbgcolor='white'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000


//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<a href="Link Tujuan Gambar"><img src="Link Lokasi Gambar" border=0"></a>'
slideimages[1]='<a href="Link Tujuan Gambar"><img src="Link Lokasi Gambar" border=0"></a>'
slideimages[2]='<a href="Link Tujuan Gambar"><img src="Link Lokasi Gambar" border=0"></a>'
//extend this list

///////Do not edit pass this line///////////////////////

var ie=document.all
var dom=document.getElementById

if (slideimages.length>1)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.left>0&&tlayer.left<=5){
tlayer.left=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.left>=tlayer.document.width*-1){
tlayer.left-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.left=parseInt(scrollerwidth)+5
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.left>0&&tlayer2.left<=5){
tlayer2.left=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.left>=tlayer2.document.width*-1){
tlayer2.left-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.left=parseInt(scrollerwidth)+5
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
tdiv.style.left=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(scrollerdiv2)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.left=scrollerwidth
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
tdiv2.style.left=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(scrollerdiv1)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
setTimeout("move4(scrollerdiv2)",50)
}
else{
tdiv2.style.left=scrollerwidth
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie||dom){
scrollerdiv1=ie? first2 : document.getElementById("first2")
scrollerdiv2=ie? second2 : document.getElementById("second2")
move3(scrollerdiv1)
scrollerdiv2.style.left=scrollerwidth
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.left=parseInt(scrollerwidth)+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll

</script>

<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgcolor=&{scrollerbgcolor}; visibility=hide>
<layer id="first" left=1 top=0 width=&{scrollerwidth}; >
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>



Keterangan: yang saya beri warna kuning, silahkan anda ganti sesuai kebutuhan.
Contoh hasilnya disini.

Bagi yang gak ada waktu dan gak  mau repot cara membuat dan mengedit blog, serahkan saja kepada Mung Bisnis | Jasa Pembuatan Blog.

Posting Komentar

amankan pertamax.... hehe....

menarik blog anda. kayak facebook udah. thumbs up! ilmu juga! trimas!

mas cara masangnya gimana?coba ajari caranya yg lebih detail mas...soale saya msh awam banget..matur nuwun..

@mahfuzah: iya, emang menarik, hehe....
@burhan: blognya mana? koq gak ninggalin jejak?

wah aku bingungggg hikz pusing bener maklum IQ jongkok hikz mau bikin foto berjalan ma ganti layoutnya tp cm pic nya aja bisa gak ya hik aku liat blog tetangga tuh foto berjalannya bagus bngt

www.biazstya.blogspot.com ni humz aku hikz2 ajrin yah matur tengkiu

mas, kok di blog saya gak bereaski ya tutorialnya, salah ari dimana yah? tolong lebih detail donk mas... Pliss n thanks..

dah bisa gan.. hasilnya bisa lihat sini http://www.infoonlinemarketing.co.cc/
Nuwun gan...
Kalo yang bisa berhenti sebentar di tiap gambar gmn caranya?????

yang di maksud link tujuan gambar sama link lokasi gambar apa gan....tanks bnget..

link tujuan gambar: jika gbr di klik menuju ke posting atau web lain.
link lokasi gambar: untuk menampilkan gambar, gambar harus sudah di upload dulu (setelah di upload baru kita dapatkan link lokasi penyimpanan gambarnya)

asasasasasasassasasasasasssasasasasasas

Wah, numpang dicoba ya boss..., thanks buat shar nya

Wah bermanfaat banget buat belajar,mau tak coba tapi ngaruh ke loading ga ya.
trim's

Mencoba untuk menerapkan...pinter temen kang..!

@m syafii: iya, selamat mencoba, semoga berhasil.
@sarastiono: monggo diterapkan, semoga berhasil. :)

aku bingung gimana caranya ?
nih blog ku :
http://wandanurul24.blogspot.com/

@wanda: silahkan ikuti dan baca tutorial diatas dg seksama, saya yakin anda bisa.

Wah..hebat bosss...jadinya bagus banget

artikel yg cukup bagus dan juga ulasannya cukup bagus dan detail bro karena itu aku suka sekali loe, dan salam kenal dari mico mas, dan juga sekalian bagi teman2 yg suka dengan film terbaru box office,horor,romantis,action,dan anime silakan kunjungi situs nya loe, karena itu gue dapat dari google dan menariknya di update tiap hari filmnya. dan makasi juga untuk admin disini bro sudah berkenan memberikan saya berkomentar loe, keep blogging bro, dan juga makasi ya,thanks gbu

[facebook][blogger]

MKRdezign

Formulir Kontak

Nama

Email *

Pesan *

Javascript DisablePlease Enable Javascript To See All Widget

Label