Hari ni aku nak jadi cikgu, ada yang bertanya macamana aku buat floating banner kat blog aku. Kelebihan floating banner / Ads ni membolehkan iklan yang korang pasang statik pada kedudukannya walaupun korang scroll dari atas ke bawah dan sebaliknya. Pihak pengiklanan pun lebih suka jika floating banner ni dipasang kerana iklannya sentiasa tertera dan mudah dilihat oleh setiap pengunjung blog.
Korang nampak banner ketua kampung sebelah kanan bawah tu ngan banner Nuffnang sebelah kiri bawah, dan korang tau cara nak pasang? Meh sini aku nak cerita.
- Memula korang dapatkan code HTML banner atau gambar yang korang mahukan. Pergi ke Photobucket ,daftar (bagi sesiapa yang baru) dan upload gambar / banner korang di situ
KLIK untuk paparan lebih jelas
- Tick pada gambar yang korang upload tadi dan klik 'save and continue to my album'
- Copy HTML code pada gambar yang baru di upload seperti di bawah
- Dah copy, paste-kan pada notepad untuk membuat perubahan sedikit pada HTML code korang
- Ni adalah contoh code HTML yang korang copy dari Photobucket tadi
- Mula2 korang ubah link merah kat atas tu kepada link yang korang mahukan bila pengunjung klik pada banner / ads korang. Contohnya aku tukar kepada link URL blog aku ;
<a href="http://afzalsukasuki.blogspot.com/" target="_blank"><img src="http://i1101.photobucket.com/albums/g435/afzalsukasuki/ketuakampung-1.jpg" border="0" alt="Photobucket"></a>
- Kemudian korang masukkan penambahan code pada awal dan akhir HTML code korang tadi seperti di bawah ;
HTML Code untuk Banner
<div style='display:scroll; position:fixed; bottom:0px; right:0px;'><a href="http://afzalsukasuki.blogspot.com/" target="_blank"><img src="http://i1101.photobucket.com/albums/g435/afzalsukasuki/ketuakampung-1.jpg" border="0" alt="Photobucket" /></a></div>
<div style='display:scroll; position:fixed; bottom:0px; right:0px;'><a href="http://afzalsukasuki.blogspot.com/" target="_blank"><img src="http://i1101.photobucket.com/albums/g435/afzalsukasuki/ketuakampung-1.jpg" border="0" alt="Photobucket" /></a></div>
HTML Code untuk Nuffnang Ads
<div style='display:scroll; position:fixed; bottom:0px; left:0px;'><!-- nuffnang -->
<script type="text/javascript">nuffnang_bid = "576b481f48e2f2b731ced30398445169";
</script><script type="text/javascript" src="http://synad2.nuffnang.com.my/lmn.js"></script>
<!-- nuffnang--></div>
#PERHATIAN : Korang juga boleh mengubah jarak banner / ads yang korang pasang dari sisi tepi atau dasar blog korang dengan mengubah bottom:0px --->jarak dari dasar dan right:0px--->jarak dari sebelah kanan atau mengalihkan banner / ads korang dari kanan ke kiri dengan megubah perkataan right:0px kepada left:0px mengikut citarasa korang
- Lepas tu macam biasa korang pegi la dekat Dashboard / Design / Add a Gadget / (HTML/JavaScript) dan paste-kan code kat atas ni. Korang leh SAVE dan lihat hasilnya :)
- Selamat mencuba la ye :)
16 Comments
tapi akak tak suka sebab mengganggu kita nak baca post.post terlindung dengan iklan tu.
ReplyDeleteiklan statik tu zal kalau nak tahu ianya akan mengganggu pembacaan entri atau sidebar sekiranya seseorang pembaca tu mempunyai skrin komputer yg kecik..macam akak memang x de masalah..tapi kena fikir jugak mereka yang mempunyai skrin kecik..kesian diorang..heheeheh
ReplyDeletesatu lagi nak bagitahu kalau boleh x perlu upload gambar kat photobucket sebab gambar dari photobucket hanya melambatkan proses loading.cuba letak gambar tu kat blog kita je..pastu copy imej url untuk ambik url gambar tu..senang...lagi cepat loading
ReplyDeleteaku id pass mana x siap2 lagi ni wakakaka
ReplyDeletejal.. kadang2 aku tgk cam mengganggu pun ade.. :P.. tp mcm kata phat la.. id aku mana? ahhaha
ReplyDeleteawak..awak..awak...dah jadi cikgu ek sekarang ni...sekelip mata awak berubah ye...hihi
ReplyDelete*mana nak dapat banner yang sebelah kanan ni?? comel la..saya ada ketinggalan apa2 ke dekat GBS?
wah.. bukan maen lg tutorialnya ye bro..hehhe..ingat blog ni utk tmpat bersengal je.. hahaha..
ReplyDeleteterimakasih cekgu
ReplyDeleteteringin gak nak wat
ahaks tok ketuat buat tuto ekk?
ReplyDeletepstt request blh hehe...caner nak buat link macam kat atas tue ekkk yg ada link ❤Sihatimerahjambu❤
walaupun ada yg x brapa setuju iklan mcm ni...tp saya tabik spring tuk tutorial ni!!! cayalah.. =)
ReplyDeletesejak bila tok ketuat jd cikgu ni ahaksss ;)
ReplyDeleteyg ni statik kan..tp mcm mnghalang skit nk bace post.hehe
ReplyDeleteskang dalam process pembersihan blog..banyak dah buang tepi2..hehe..ape2 pun akan datang kalau nak letak leh refer dsini.tenkiu sifu ^_^
ReplyDeleteWahh! tok da jadi cikgu skunk.wink! wink! ^.-
ReplyDeleteEh ada tuto laaaa. Ok letak tu tapi kalau dapat tambah satu button 'close' jadi pembaca boleh buat pilihan nak biarkan atau tutup banner tu :)
ReplyDeletesifu.......
ReplyDeletethanks for the ilmu....