Tutorial : Floating Banner / Ads Pada Blog

Assalamualaikum,

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

<a href="http://s1101.photobucket.com/albums/g435/afzalsukasuki/?action=view&amp;current=ketuakampung-1.jpg" target="_blank"><img src="http://i1101.photobucket.com/albums/g435/afzalsukasuki/ketuakampung-1.jpg" border="0" alt="Photobucket"></a>

  • 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>


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

  1. tapi akak tak suka sebab mengganggu kita nak baca post.post terlindung dengan iklan tu.

    ReplyDelete
  2. iklan 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

    ReplyDelete
  3. satu 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

    ReplyDelete
  4. aku id pass mana x siap2 lagi ni wakakaka

    ReplyDelete
  5. jal.. kadang2 aku tgk cam mengganggu pun ade.. :P.. tp mcm kata phat la.. id aku mana? ahhaha

    ReplyDelete
  6. awak..awak..awak...dah jadi cikgu ek sekarang ni...sekelip mata awak berubah ye...hihi


    *mana nak dapat banner yang sebelah kanan ni?? comel la..saya ada ketinggalan apa2 ke dekat GBS?

    ReplyDelete
  7. wah.. bukan maen lg tutorialnya ye bro..hehhe..ingat blog ni utk tmpat bersengal je.. hahaha..

    ReplyDelete
  8. terimakasih cekgu
    teringin gak nak wat

    ReplyDelete
  9. ahaks tok ketuat buat tuto ekk?

    pstt request blh hehe...caner nak buat link macam kat atas tue ekkk yg ada link ❤Sihatimerahjambu❤

    ReplyDelete
  10. walaupun ada yg x brapa setuju iklan mcm ni...tp saya tabik spring tuk tutorial ni!!! cayalah.. =)

    ReplyDelete
  11. sejak bila tok ketuat jd cikgu ni ahaksss ;)

    ReplyDelete
  12. yg ni statik kan..tp mcm mnghalang skit nk bace post.hehe

    ReplyDelete
  13. skang dalam process pembersihan blog..banyak dah buang tepi2..hehe..ape2 pun akan datang kalau nak letak leh refer dsini.tenkiu sifu ^_^

    ReplyDelete
  14. Wahh! tok da jadi cikgu skunk.wink! wink! ^.-

    ReplyDelete
  15. Eh ada tuto laaaa. Ok letak tu tapi kalau dapat tambah satu button 'close' jadi pembaca boleh buat pilihan nak biarkan atau tutup banner tu :)

    ReplyDelete
  16. sifu.......
    thanks for the ilmu....

    ReplyDelete