Floating Ads, Iklan tergantung untuk Nuffnang, Innity, Advertlets dll beserta dengan button close, close png

July 25, 2011 iPai 70 Comments

Salam


Tutorial kali ini adalah request daripada Cik Syaza a.k.a Yann daripada blog Sutera Kasih. Kod ni konfirm-konfirm bukan aku yang reka sebab aku tak tahu banyak pasal coding. Sikit-sikit dan agak-agak boleh la. Code ni pun aku gabung daripada beberapa tutorial yang aku jumpa kat tempat lain, sebab masing-masing ada code floating ads ni.

Contoh floating ads skyscrapper dengan button close comel kat atas

Ada tutorial floating ads yang guna coding yang panjang, Floating Ads by Jj. Ada juga coding pendek, Floating ads by Amirez. Dan ada juga coding floating ads dengan close button yang boleh ubah tempat by Jejaka Terhangat. Jadinya korang boleh baca-baca dan gabungkan knowledge-knowledge yang diorg kongsikan kat situ.


Secara ringkasnya yang aku pakai adalah code ini;

<div id="cry1"><div style='display:scroll; position:fixed; bottom:5px; left:5px;'><a href="#" onclick="document.getElementById('cry1').style.display = 'none';"><img src="http://3.bp.blogspot.com/-ibcYfr863so/TfeAmFIiARI/AAAAAAAAAqE/uq541mjziYU/s1600/close-button.png" alt="Close" /></a>
 <!-- Letak iklan Nuffnang di sini -->

</div></div>


1. Ubah posisi Iklan
Korang boleh ubah kedudukan iklan ini ikut suka hati korang dengan mengubah code di bahagian ini;

bottom:5px; left:5px

Korang boleh ubah bottom kepada top dan left kepada right. Part nombor 5px tuh boleh godek-godek try and error. Mengikut kesesuaian korang. Tak ubah pun tak pe. Ok je.


2. Image button close
Korang juga boleh tukar button close yang ada. Korang boleh cari kat Google dan gantikan code yang berwarna ungu tuh pada code button close pilihan korang. Ni aku ada senaraikan, kot-kot ada yang terminat mana-mana; (semuanya datang dari Google)

http://3.bp.blogspot.com/-ibcYfr863so/TfeAmFIiARI/AAAAAAAAAqE/uq541mjziYU/s1600/close-button.png



http://1.bp.blogspot.com/-WsqmnkxXqro/TivToMeNglI/AAAAAAAABLo/AM_dNZzo_Yo/s1600/btnCloseX.gif


http://3.bp.blogspot.com/-84Qe9C2u_Ds/TivTosiv8CI/AAAAAAAABLs/XOFDyJey4J4/s1600/close.png


http://4.bp.blogspot.com/-NzEMi1QPv7g/TivTo_SosyI/AAAAAAAABLw/GBCPiLF7mUU/s1600/close2.png


http://4.bp.blogspot.com/-9MWyoN5VsJM/TivTpPyUuhI/AAAAAAAABL0/ldO739MTRBg/s1600/close3.png


http://2.bp.blogspot.com/-wSHe6MbtcN4/TivTpeVWXII/AAAAAAAABL4/MRqLrobVnd4/s1600/close4.png



http://1.bp.blogspot.com/-LgKue49wN4k/TivTqOvwNfI/AAAAAAAABL8/weB24Y2h9UQ/s1600/close5.png


http://3.bp.blogspot.com/-EkyWf0NXwzg/TivTqfI9E7I/AAAAAAAABMA/YvxNHBtr53A/s1600/close6.png


http://4.bp.blogspot.com/-0uq0e_jWzNg/TivTqokcU0I/AAAAAAAABME/sXmzr-vPyuM/s1600/close-bar.gif


http://4.bp.blogspot.com/-gUTr8YeE0p8/TivTq4u66rI/AAAAAAAABMI/_lCSkmrr0v4/s1600/CloseButton_ver845743.png



http://4.bp.blogspot.com/-kZY0N7l8-Ow/TivTrhlNgsI/AAAAAAAABMQ/ZfInIfwKFjw/s1600/images.jpg


http://1.bp.blogspot.com/-10FyCGw5jyU/TivTrfNBWeI/AAAAAAAABMM/NMe9PcnZ9n0/s1600/close-x.gif


http://4.bp.blogspot.com/-bRYciKZws1k/TivTr_byQBI/AAAAAAAABMU/Ut-ck0eta50/s1600/layer_notes_close.gif


http://1.bp.blogspot.com/-HtQoe5Bua1Y/TivTsNwzA9I/AAAAAAAABMY/q4mizm-BwOQ/s1600/lightbox-btn-close.gif


http://3.bp.blogspot.com/-fLiv1XRBZx8/TivTsvetVQI/AAAAAAAABMc/5t-rdcrqTRk/s1600/subModalClose.gif




3. Letak kod iklan
Gantikan <!-- Letak iklan Nuffnang di sini --> dengan code pilihan korang. Biasanya orang akan pilih code Skyscrapper berbanding Leaderboard dan Large Rectangle kerana saiz Skyscrapper yang slim dan tidak mengganggu bacaan post. Aku sendiri pun penah cuba letak ketiga-tiga jenis dengan float ads ni. Mula-mula macam cool gila kan, lama-lama jadi semak. Haha. Sakit mata memandangnya. Cuba-cuba sampai berjaya ya.

Disamping itu, korang boleh je nak letak benda lain, macam gambar kucing ke, gambar pakwe ke, gambar sendiri ke. Tapi takleh letak gambar makwe, nanti kena ngurat


4. Cara nak letak dalam blog
  • Pergi kat Dashboard, http://www.blogger.com/home
  • Klik pada Design
  • Klik pada Add a gadget
  • Pilih HTML/Java Script
  • Copy paste code di atas
  • Klik Save
  • Siap !!

Habis dah. Nanti kalau ada apa-apa masalah, tanya ye.

70 comments:

Afikah Aziz said...

errr ika xphm pe2 >_<

iPai said...

@Afikah Aziz
erk .. tak paham ke .. alamak ..

syaz@rozelt said...

bgos iPai..selalu org buat floating ads nuffy nie x de close button..so agak semak siket..suka2 yg ade close button..hhii

mr_mrs mikko said...

waa waaa..
aku nak wat juga lah.
hihih...

oh, dari yan pula.
huhu

TYNTHA LANA said...

~~ cepat ke lana reply semalam?kebetulan je tu,hahahaha. lana insyaAllah, selagi pendapat tu bernas, lana terima.. ipai nak komen mcmna pun, lana cuba ambik pot, fikir dulu sblm bertindak ;)

ipai..lana lama dah nk tnya ni..kenapa dah tak psg shtbx T__T

TYNTHA LANA said...

hurmm..lana pun..tak terbalas semua :) standard lah tu.. kita manusia biasa..takkan mampu terkejarnya.. tak kisah kalau ipai tak pakai ke apa..cuma ni dari pnglmn lana, bila someone tingglkan komen..pada masa sma dia tinggl jejak kt shtbx utk menunjukkan diri dia dah sampai..

kadang2 diorg bukn komen entry kita yg awal2..entry lama2 jugk yg diorg baca.. dan kita sbg owner,kdg2 terlepas pandang..

~rasa2 ipai paham tak apa yg lana cuba sampaikan? pagi2 ni..slow skit otak ni,hahahaha

oo bru tau

Salam. Bagus perkongsian ni. Saya pernah mencarinya dulu ... :) sekarang baru jumpa tetapi sekarang dah malas nak wat .. hehehhehe

TYNTHA LANA said...

ipai,kalau camtu.lana pun sengal jugak lah,hahahahah. sapa yang tak suka kalau comments number tu banyak,hahahaha. takpalah..memg,pasg shtbx, bermkna tanggungjwb tu lebih lagi..tak bls, rasa bersalah pulak.. T__T

Lana ni pun,slagi mampu..pakai la jua,hahaha. oh ya..un-autopublished tu..mcmna nak buat?hahahahah.sengal lagi,hahahaha

Ellen said...

Perkongsian yang baik...tq

good information..

ooo...baru tau..
button close tu comel2..hehe

Acik said...

wakakaaa .. ika x paham. iPai x pas jadi cikgu.

heheeee ... terrer ngan koding eh! nanti tlg acik godek kod boleh? acik nye blog tak macam yg acik nak! :(

Aemy Shamy said...

Ha yg ni ada close button, better than yg xda close button..& sy suka floating adv kat blog iPai ni, sbb dia x cover gadget lain..ada sstgh blog tu da la xda close button, cover gadget pula..huhu..inconvenience..

TYNTHA LANA said...

ipai..thanks ya :) bagus2..xlokek ilmu :) urmm..nanti lana cuba..skrg mengantuk..masa untuk tido kejap je,kejap je,hahaaha

Tea said...

wewitt ipai pn dh bertuto skg. xDD

ohh baru tau koding ni. nt terasa nk pakai leh letak. hee. simple ohh.

Tea said...

siap ade button close okeh lg. ade tu takde button close. dh xdpt nk main2. huhu.

mesuya said...

grrrrrrrrrrrgrrrr
ermmm tolong buatkan lah~

thanks ipai !!!
sgt2 membantu..terharu sbb ipai buat tuto ni hihi :P

sbgai balasan, letak link tuto ipai ni dlm koleksi tuto d blog saya :)

ok menjadik lah ipai hehe tq !

izfanora said...

nama blog yg kt atas nie yer? bkn url kan?

a'a, izfa tukar.. np ipai?

atiyahkaman said...

wah tutorial..:)

Acik said...

wakakaaa ... patut ler iPai panggil Acik ika! saspen gak tadi. alaaa ... ika kat atas tu silap taip ler! acik la bukan ika, hokeh! :)

alif haris said...

nice la bro :)
pandai buat tuto eh .. hehehe ..
then yg bagusnye floating ads ni ade close button tu yg best :D hehe
takde r menyemak ..

Freaky said...

banyaknya icon bro =_= .. huhu

Ezad Skytech said...

waaahhh..kdg2 jumpa iklan nuffnang yg float ni tanpa button close..senang sikit kalau ada..rasa tak nak tgk je..tekan la close...(^^,)

waahh.. cun2 ^________^
tp mals na buat..heeeee

good sharing tapi sayangnya arisha tak ada nuffnang. huhu.

Bro ahmad said...

tapi ada kelebihan ke nuffnang scroll ni..ada kelebihan bab BE ke ipai? bro pernah pasang benda ni..sebab bro buang mcm mengangu pembaca..tapi ada buton x ok la kot,

abglan said...

Mekasih kongsi... rajinnye cari code button nih :)

toturial yg bagus.. tapi aku punye cam salah setting la.Ok tak iklan nuff aku yg float tu?huhu..

ala..semak la sume ni pai..aku klu bole nk je cabut iklan2 kt blog tu.bt berat je..duit nya x de la masyuk sgt.

iPai said...

@syaz@rozelt
yup2 .. boleh tambah n edit ikut kesesuaian kita ..

iPai said...

@mr_mrs mikko
buat jgan tak wat ..

iPai said...

@TYNTHA LANA
cepat juga laa ..

iPai said...

@cik wanie Lovela (CWL)
harap cik wanie leh cuba ..

iPai said...

@HasrulHassan [HH]
nanti hasrul dah rajin try buat ..

iPai said...

@Ellen
trima kasih ..

iPai said...

@lala shaheila
harap shaheila boleh cuba ..

iPai said...

@syarifahsidrus
hee, memang cari yang comel2 je .. hehe

iPai said...

@Acik
nanti kontak2 ye. ..

iPai said...

@Aemy Shamy
harapnya memang tak mengganggu r .. tp kalau orang yang pakai IE mesti ganggu ..

iPai said...

@TYNTHA LANA
jangan terlajak ye .. heee

iPai said...

@Tea
hee, tuto yang kecil2 saya tau laa .. yg besar2 saya tak tau ..

iPai said...

@Tea
yup2 .. pilih laa close button yang lawa2 .. hee

iPai said...

@mesuya
eh suya nak org buatkan ke ?

iPai said...

@[sutera kasih]
trima kasih syaza .. terharu .. dah tgk .. memang terharu ..

iPai said...

@[sutera kasih]
yeay .. harapnya menjadi r .. sama2 ..

iPai said...

@izfanora
takde pe .. cuma cam heran2 seketika .. heee

iPai said...

@atiyahkaman
hee, yup .. turorial ..

iPai said...

@Acik
sori tersalah acik aka ika

iPai said...

@alif haris
cuba bro try .. hee .. thnax baca ..

iPai said...

@Freaky
hee, kasi banyak pilihan ...

iPai said...

@Ezad Skytech
tu laa .. kot2 ada yang mengganggu, leh tekan close ..

iPai said...

@SoLy SoLicious
eh malas .. nanti rajin buat k ..

iPai said...

@Rtp Farra Arisha
arisha pasang je .. pasang dan biar .. macam lebih kurang sama tak pasang je ..

iPai said...

@Bro ahmad
hee, takde kelebihan kat BE .. sama je, cuma bila orang selalu nampak, ada yang nak tekan2 ...

iPai said...

@abglan
sama2 .. memang simpan satu dalam notepad .. heee

iPai said...

@Anif Abdullah| AA
ok dah tuh .. leh adjust2 lain je ..

Yumida said...

pandai nyer anak mak! sy x reti bt..hihi..

GaRy™ said...

paham!! tapi... iklan kat tepi blog aq macam dah full la... rasa macam menyemak lak.. T^T

Aimifiqa said...

thanks for sharing. nnt nak buatla. hihi

mantop XD

saya search dekat google untuk buat float ads. encik ipai punya page ni 1st in rank kot kat first page pulak tuh. cayalah.

and the tutor is superb. easy. thanks. :)

terima kasih =)

Cahaya Iman said...

thankz for info....sya bru lgi dlm blogging ni..dpt jgak ilmu bru kt blog saudari...tq so much..
http://farishhaikal.blogspot.com/

Cahaya Iman said...

Thankz for info bro....aku bru dlm blogging ni..dpt byk info berguna dri blog anda ...tq so much
http://farishhaikal.blogspot.com/

apakah boleh memasang iklan innity melayang/floating

terimakasih :D

Anonymous said...

its not working to my blog ...
http://silipsilip.blogspot.com

HafizAmri said...

Perkongsian yang bagus dan menarik, belum pernah cuba lagi..