Membuat Kotak Banner

Kotak banner berfungsi untuk menyisipkan image iklan yang akan ditampilkan dalam blog. Adapun bentuk banner bermacam-macam ukurannya, khusus dalam trik blogger ini kita akan mencoba menyisipkan image iklan yang berukuran 125 x 125. Disamping itu area banner dapat pula menjadi ajang promosi, entah itu promosi blog kamu yang lain atau blog orang lain yang diwakilkan dalam bentuk banner. Demo banner dapat kamu lihat di widget Pesan Sponsor Optimasi Blog (sidebar bottom sebelah kanan). Apabila kamu tertarik ingin mengaplikasikannya dalam blog kamu, mari kita mulai trik blogger membuat kotak banner.

  • Login dulu ke account blogger kamu.
  • Pilih tab Tata Letak --> Edit HTML.
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Tambahkan kode CSS berikut di atas kode ]]></b:skin>

/* Kotak Banner
===================== */
#Box-Banner-ads {
margin: 0px;
padding: 5px;
text-align: center; }

#Box-Banner-ads img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px outset #c0c0c0; }

#Box-Banner-ads img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px inset #333; }

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
  • Simpan dulu template blog kamu.
  • Pilih tab Tata Letak --> Elemen Halaman.
  • Tambah Gadget dalam elemen blog kamu --> "Tambahkan Gadget", pilih HTML/JavaScript.
  • Copy dan pastekan kode di bawah ini.
<div id="Box-Banner-ads">

<a target="_blank" href="http://#"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>

<a target="_blank" href="http://#"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>

</div>

Catatan :
Ganti kode yang berwarna merah dengan alamat blog kamu.
  • Lihat Blog.
Contoh cara memasang banner dalam kotak banner :
<div id="Box-Banner-ads">

<a href="http://dmoz.org/" target="_blank"><img border="0" alt="Open Directory Project at dmoz.org" width="125" src="http://dmoz.org/user-banners/125x125birt.gif" height="125"/></a> <

<a target="_blank" href="http://#"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>

</div>

Catatan :
Perhatikan kode yang berwarna hijau yang merupakan contoh memasukkan banner dalam salah satu kotak banner.

Selamat membuat kotak banner...

52 komentar untuk “Membuat Kotak Banner”

  1. wah... cara pasang buat yang masang iklan y mas? hmm... kapan-kapan dech diterapinnya hehehe

    BalasHapus
  2. Wuaaah, ini yg saya cari2, tp saya masih bingung Mas, yg warna ijo suruh merhatikan tp gak ada penjelasan lanjuannya, maksunya piye to Mas?

    Tapi trimakasih untuk tutornya, pasti saya akan coba, tapi setelah pemilu aja ya.. saya k warnt

    BalasHapus
  3. Loh koq photo saya ndak muncul to Mas? Piye to iki?

    BalasHapus
  4. to mantan copet: he..he.. bener juga tuh. Posting sudah OB update terima kasih.

    BalasHapus
  5. Ini yg saya Cari Mas

    Mantap Banget

    BalasHapus
  6. mas saya mbikin tapi koq ndak bisa jejer 4 ya?????
    koq malah jejernya ke bawah mas, piye to iki????
    tolongin dong mass....

    BalasHapus
  7. Makasih mas.. ini sangat membantu

    BalasHapus
  8. SIP, COBA AH.... SALAM BLOGGER

    BalasHapus
  9. sama seperti mantan copet,gimana caranya spy posisi kotak banner nya bisa 2- kesamping gitu:-/

    BalasHapus
  10. to mantan copet dan xtremesh0p: Pertama coba perhatikan ukuran lebar sidebar right atau left kamu. Jika ukurannya kurang dari 260-270px jelas tidak mungkin meletakkan 2 banner ukuran lebar 125. Jika ukuran sidebarnya telah memenuhi syarat, cek kembali ukuran banner dan harus memiliki lebar 125. Jika tidak, maka secara otomatis bannernya akan ke bawah. Ukuran banner yang besar dapat diatasi dengan penambahan kode width='125' dan height='125' (lihat contoh)

    BalasHapus
  11. o iy ya..g merhatiin sizenya :D ..thanx bos OB
    langsung dikerjain neh:D

    BalasHapus
  12. udah t ganti koq tetep ga bisa y?:-/
    di #sidewraper dan outer udah t lebarin,trus banner nya size nya 125x125 smua tp lom bisa juga~x(..gimana donk bos

    BalasHapus
  13. ok mas OB,... terimakasih banyak telah berbagi ,... gd lck!!

    BalasHapus
  14. Wah,thx tas infonya....
    nyoba dlu ah....

    BalasHapus
  15. sip...boi...udah ane terapkan, and...yahuuuuud...
    thanx yes....

    maen2 ya www.notekomp.blogspot.com

    BalasHapus
  16. Bisa jadi alternatif sob, thanks...

    BalasHapus
  17. dah bisa bos..mintanya diganti minima template,sama kek blog ku yg 1nya :D
    btw thanx bos..mo nyontek cara pasang smiley box dolo:D
    koq ada tulisan "Kredensial OpenID Anda tidak dapat diverifikasi." :-/

    BalasHapus
  18. thx bro atas infonya... ;;)

    BalasHapus
  19. waduh..asoy niy..makacih..ckrng blog gw jd ada iklanya euy..haa...

    BalasHapus
  20. OB gokil and TOP BGT many thanks

    BalasHapus
  21. thanks info nya ,soalnya w lg bkn blog lg nih jd harus cari referensi buat ngebagusin blog

    BalasHapus
  22. Ini bagus juga buat buka usahah jasa pemasangan banner di blog kita. lumayanlah buat nambah2 pemasukan.

    Itu letaknya bisa diatur dimana saja kan?

    BalasHapus
  23. artikelnya ok banget. mo tak coba dulu ya...
    thankz

    BalasHapus
  24. langsung tak copi ya bos buat koleksi...

    BalasHapus
  25. fyuh...akhirnya berhasil mas.

    BalasHapus
  26. ayo pasang iklan ditempat ku. terima ksih tutorialnya mas OB.

    BalasHapus
  27. Perlu banget tool ini, thanks mas.

    BalasHapus
  28. Menarik...thanks infonya

    BalasHapus
  29. mas!!!! saya udh pasang banner mas.

    pasang jg pnya saya ya mas!!!

    thx...

    nih blog saya:
    http://all-in4u.blogspot.com

    BalasHapus
  30. Blog walking bos. Mantap banget tipsnya. Jangan lupa mampir ke blogku ya

    BalasHapus
  31. kunjungi http://luphy-cuby.blogspot.com/ ^_^

    BalasHapus
  32. pasang lagi di blog saya yah

    BalasHapus
  33. sudah nyoba tapi gak bisa tampil di blog ku mas

    BalasHapus
  34. makasih tipx shob lam knl...

    BalasHapus
  35. makasih buat smua ilmunya....

    BalasHapus
  36. kang,q dah bisa triknya
    cuma klo qta pasang banner nanti kebawahnya malah ada lagi kotak banner ads
    gmana cara nya biar g ada lagi kotak bannernya???

    BalasHapus
  37. Artikel super sip ! saya sudah pasang link ke blog OB harap dikmfrmsi !

    BalasHapus
  38. weleh2 sudah lama saya baca ini tapi baru sempet komenthehehe
    th akang OB

    http://kehidupansekitar.blogspot.com

    BalasHapus
  39. kira kiraa ada yang mau iklan ga ya di blog ane?

    BalasHapus
  40. terima kasih atas infonya sobat!

    BalasHapus