31/01/12

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


Flying bat in a marqueeBlog RaDhio


Live Demo 2

Flying bat in a marqueeBlog RaDhio


Live Demo 3











Blog RaDhio




Live Demo 4



Blog RaDhio






Live Demo 5



Flying bat in a marquee









Blog RaDhio






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

18 ulasan:

misz_eyza berkata...

awak, tuto nie sesuai tak digunakan kalau nak letak iklan? sbb awk kata banner tidak akan berhenti jika letak mouse pointer...jd camner nk klik yer>

dan satu lagi, kalau saya nak gantikan banner tue dgn gambar2 utk letak dlm entri blh x? kalau blh, camner nak bagi ada scroll bar ekk?


thanks awak dan sori sbb byk bertanya lak hihi... ;)

khairul berkata...

menarik...TQ tuan

Polskahackrew berkata...

@misz_eyza
klik ja masa dia bergerak.. hehe.. klu nak letak gambar blh jg,, letak iklan pun blh,, letak widget folower pun boleh rasanya.. fanpage.. dan macam2 lagi.. klu nak letak scrollbar rasanya x sesuai.. ('',) tanya saja.. jangan malu2 hehe

misz_eyza berkata...

@Polskahackrew owh itu macam ekk hehe mekasih awak

Polskahackrew berkata...

@khairul
welcome.. segan la kena pangil tuan.. ('',)

Polskahackrew berkata...

@misz_eyza
sama2 ('',)

misz_eyza berkata...

@Polskahackrewkehkehkeh cubaan yang berjaya dan menjadi buat kali pertama...hihi (^_^)

Polskahackrew berkata...

@misz_eyza
yeah.. thanks bagi feedback

O CIKTEDDY berkata...

dh jadik! wee~ thanks krew =)

Polskahackrew berkata...

@O CIKTEDDY
your welkam

Cik Kay Jue berkata...

thnks.. membantu sgt.. tp kalau nk dia gerak slow sikit cam ner ea?

Polskahackrew berkata...

@Cik Kay Juecuma tambah kata arahan scrollamount="33"

Contoh

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

CodeBannerCodeBannerCodeBannerCodeBannerCodeBannerCodeBanner

</marquee>

tukar angka 5 tu.. makin kecil angka makin slow..

boleh atau tidak nnti bagitau

Cik Kay Jue berkata...

alright thnks.. jadi..>_<

Polskahackrew berkata...

@Cik Kay Jue
sama2.. thanks bagi feedback

J-Dorama berkata...

thankz

Polskahackrew berkata...

@J-Dorama
ur welcome..

suyet berkata...

Bisa digunakan dalam CMS Joomla apa g..?

Polskahackrew berkata...

@suyet

kurang pasti boleh guna atau tidak sebab saya tidak pernah try test cuba.. hehe

entri ja

Related Posts Plugin for WordPress, Blogger...