Info Penting

Aplikasi Yasin dan Tahlil No 1 di Google dan Playstore

A plikasi Yasin dan Tahlil terbaik nomor 1 di Google dan Playstore kaya akan fitur dan konten yang bermanfaat untuk amalan sehari-hari u...

Info Penting

Artikel Terbaru

Membuat Banner atau Gambar Berjalan

25 Nov 2010 - - 22

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.

22 komentar

  1. amankan pertamax.... hehe....

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

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

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

    BalasHapus
  5. 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

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

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

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

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

    BalasHapus
  10. 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)

    BalasHapus
  11. asasasasasasassasasasasasssasasasasasas

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

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

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

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

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

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

    BalasHapus
  18. Wah..hebat bosss...jadinya bagus banget

    BalasHapus
  19. 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

    BalasHapus
  20. Makasih Ilmunya Master, Hasinya Bagus, Kereeen

    BalasHapus

Follow Me

Foto Mr. Mung
ttd Mr. Mung

Tutorial Blogger

Pilih Arsip Blog