Tutorial cara buat banner box bergerak

Bertukar banner sesama blogger adalah perkara yang bagus sangat2.. dan aku suka letak banner blogger2 lain walaupun aku sendiri x ada banner ketika entri ni di tulis.. hahaha

Tidak ada standard size untuk banner blogger,sebab tu ramai blogger buat banner ikut saiz yang mereka suka.. bagi aku saiz yang ideal 125 x 125.. tapi saiz tu kira besar jugak la.. klu banyak banner memang serabut la blog kau orang bila letak banner tu pada homepage..

terdapat banyak alternatif untuk kurangkan serabut tu.. tapi dalam entri ni alternatif yang aku guna ialah dengan cara buat scrolling box untuk banner tu.. senang ja..

Live Demo 1





Live Demo 2




Live Demo 3
















Live Demo 4










Live Demo 5




















Code 1 untuk Live Demo1

<marquee behavior="scroll" direction="left" style='width:129px;height:129px;' onmouseover="this.stop()" onmouseout="this.start()">

CodeBannerCodeBannerCodeBannerCodeBannerCodeBannerCodeBanner

</marquee>

Nota untuk code 1 : untuk code banner tu jgan bagi space.. rapatkan code tu


Code 2 untuk Live Demo2

<marquee behavior="scroll" direction="left" style='width:504px:height:129px;' onmouseover="this.stop()" onmouseout="this.start()">

CodeBannerCodeBannerCodeBannerCodeBannerCodeBannerCodeBanner

</marquee>

Nota untuk code 2 : sama seperti code 1..rapatkan code banner

Code3 untuk Live Demo3

<marquee behavior="scroll" direction="up" style='width:129px;height:504px;' onmouseover="this.stop()" onmouseout="this.start()">

Code Banner
Code Banner
Code Banner
Code Banner
Code Banner
Code Banner

</marquee>

Note untuk code 3 : susun code banner seperti diatas



Code 4 untuk Live Demo 4

<marquee behavior="alternate" direction="left" style='width:504px:height:129px;' onmouseover="this.stop()" onmouseout="this.start()">

CodeBannerCodeBannerCodeBannerCodeBannerCodeBannerCodeBanner

</marquee>

Nota untuk code 4 : sama seperti code 1 dan 2


Code 5 untuk Live Demo 5

<marquee behavior="alternate" direction="up" style='width:129px;height:504px;' onmouseover="this.stop()" onmouseout="this.start()">

Code Banner
Code Banner
Code Banner
Code Banner
Code Banner
Code Banner

</marquee>

Nota untuk code 5 : sama seperti code 3

Cara pasang di blog.. Pergi ke dashboard---design---add a gadget---html / javascript...

copy salah 1 code yang anda mau.. kemudian paste...

Gantikan tulisan Code Banner dengan code banner blog yang anda berminat...

Code banner boleh di dapati di blog yang ada banner sahaja.. hehehe.. ('',)

Updated : Banner akan berhenti bergerak jika anda letak mouse pada banner..

Sekian