Membuat Banner atau Gambar Berjalan

Kamis, 25 November 2010 - - 21

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.

Mr.Mung at 25 November 2010 23.57

amankan pertamax.... hehe....

mahfuzah mardy at 16 Februari 2011 16.28

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

Burhan at 1 Maret 2011 11.21

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

Mr. Mung at 1 Maret 2011 16.53

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

biazstya at 5 Maret 2011 14.27

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

biazstya at 5 Maret 2011 14.29

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

Ari Ibnu Umar at 7 Maret 2011 19.12

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?????

ariyand at 4 Mei 2011 19.33

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

Mr. Mung at 5 Mei 2011 05.38

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)

kurniawan at 1 Juli 2011 16.42

asasasasasasassasasasasasssasasasasasas

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

ari at 21 Juli 2011 23.23

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

sarastiono at 18 November 2011 14.18

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

Mr.Mung at 18 November 2011 15.56

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

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

Mr.Mung at 12 Februari 2012 17.32

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

Amir mahmud at 8 Maret 2012 11.17

Wah..hebat bosss...jadinya bagus banget

rahmad at 19 Juli 2012 08.13

trimakasih

makasih banyak ya gan buat infonya

unduh film at 10 November 2012 17.40

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

Silahkan tinggalkan komentar anda disini dan Terimakasih anda mau menuliskan nama anda.

Koleksi Tutorial Blog

Arsip Blog