loading...

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

51 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. mas saya mbikin tapi koq ndak bisa jejer 4 ya?????
    koq malah jejernya ke bawah mas, piye to iki????
    tolongin dong mass....

    BalasHapus
  6. Makasih mas.. ini sangat membantu

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

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

    BalasHapus
  9. 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
  10. o iy ya..g merhatiin sizenya :D ..thanx bos OB
    langsung dikerjain neh:D

    BalasHapus
  11. 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
  12. ok mas OB,... terimakasih banyak telah berbagi ,... gd lck!!

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

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

    maen2 ya www.notekomp.blogspot.com

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

    BalasHapus
  16. 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
  17. thx bro atas infonya... ;;)

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

    BalasHapus
  19. OB gokil and TOP BGT many thanks

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

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

    Itu letaknya bisa diatur dimana saja kan?

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

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

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

    BalasHapus
  25. Perlu banget tool ini, thanks mas.

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

    pasang jg pnya saya ya mas!!!

    thx...

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

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

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

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

    BalasHapus
  30. makasih buat smua ilmunya....

    BalasHapus
  31. 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
  32. Artikel super sip ! saya sudah pasang link ke blog OB harap dikmfrmsi !

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

    http://kehidupansekitar.blogspot.com

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

    BalasHapus
  35. terima kasih atas infonya sobat!

    BalasHapus