Tutorial untuk Cara Membuat Kotak Iklan (Banner Box) sebenarnya sudah perna di ulas di blognya O-OM, Namun karena saya barusan saja memasang widget kotak iklan di blog Komputer Teknologi ini yah jadinya tidak ada salahnya saya menulisnya dalam bentuk artikel, itung-itung untuk save tutorial biar tidak lupa nantinya, tidak menutup kemungkin kedepan kalau buat blog baru dan ingin pasang widget kotak iklan bisa buka-buka lagi deh nih tutorial.

Untuk contoh Kotak Iklan bisa lihat pada blog ini sendiri yang widgetnya saya beri nama dengan Sponsor Komputer Teknologi, biasalah persiapan untuk pasang banner dengan ukuran 125 x 125, yah dari pada lama-lama ceritanya entar pada kabur semua jadi langsung saja yah!

Cara Membuat Widget Kotak Iklan (Banner 125 x 125)
  1. Masuk pada halaman Edit HTML di blogger sobat, lalu cari kode <b:skin><![CDATA[ dan letakkan kode CSS berikut tepat di bawah kode <b:skin><![CDATA[



  2. #Box-Banner-ads {

    margin: 0px;

    padding: 5px;

    text-align: center;

    }

    #Box-Banner-ads img {

    margin: 0px 4px 4px 0px;

    padding: 3px;

    text-align: center;

    border: 1px solid #c0c0c0;

    }

    #Box-Banner-ads img:hover {

    margin: 0px 4px 4px 0px;

    padding: 3px;

    text-align: center;

    border: 1px solid #333;

    }


  3. Kalau sudah, jangan lupa untuk di Save,
  4. Selanjutnya tuju Elemen Halaman dan Tambah Gadget lalu pilih HTML/Javascript dan masukkan kode berikut



  5. <div id="Box-Banner-ads">

    <a target="_blank" href="http://meambo.blogspot.com"><img
    border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
    <a target="_blank" href="http://meambo.blogspot.com"><img
    border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
    <a target="_blank" href="http://meambo.blogspot.com"><img
    border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>
    <a target="_blank" href="http://meambo.blogspot.com"><img
    border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>

    </div>

Skrip diatas adalah contoh yang menampilkan empat jumlah banner iklan, jika ingin menampilkan banner lebih dari empat sobat sisa menambahkan kode tersebut

<a target="_blank" href="http://meambo.blogspot.com"><img
border="0" alt="ads" src="http://sites.google.com/site/bloggerbartiqy/Banner2.gif"/></a>

Untuk kode yang berwarna merah sobat ganti sesuai dengan alamat url iklan banner yang sobat pasang dan untuk yang berwarna biru adalah url gambar iklan,

Selamat mencoba, dan semoga berhasil.

Artikel Terkait

16 Komentar.

  1. Kenth mengatakan:

    Kayaknya di o-om gak ada deh, soalny saya biasa nongkrong disana:-o

  2. newbie blogger mengatakan:

    heheh, ada kok nih tutorial juga saya dapat dari situ

  3. Rachmansyah mengatakan:

    Themes wordpressnya bagus nih mas, kalo gak salah Comfy ya. Kalo boleh tau beli dimana ya mas, kali aja mas dapet tempat yang murah, abis kalo di deluxe themes harganya $59 (sekitar 550ribu)

  4. newbie blogger mengatakan:

    @ Rachmansya : betul mas, ni thems hasil dari konvert wordpress ke blogger, kebetulan saya juga nemu salah satu blog, pertamanya emang sih thems ini agak ancur-ancur dikit, tapi udah diperbaiki dikit. thx yah atas kuncungannya, sering mampir yah!

  5. Ketawa Bersama Oby mengatakan:

    :)
    kerren spot ikllannya
    ths yah sob

  6. Muda-Mudi Centre mengatakan:

    http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif

  7. jaya mengatakan:

    thans banget ya infonya, sangat membantu.

  8. newbie blogger mengatakan:

    thx juga sekalian buat kawan-kawan blogger, sering-sering mampir yah!

  9. asmanu mengatakan:

    trima kasih banyak atas share tutorialnya...makasih..

  10. Mr. Awalk mengatakan:

    thx.... postingannya bagus.

  11. kristiana mengatakan:

    makasi infonya mas......

  12. newbie blogger mengatakan:

    buat semuanya makasih terima kasih juga yah? berbagi informasikan lebih baik

  13. Media Semarang mengatakan:

    Wah bisa dipraktekkan langsung nich

  14. Raidynata mengatakan:

    kang salman hebat nch

  15. dhon mengatakan:

    udah ane coba , dan hasilnya alhamdulilah berhasil.
    thanks, buat infonya , gan....

    o ya, klo ada waktu mmpir jga ke blog ane yach...

    Dhon2008 Indonesia

  16. Ahmad Suhendra mengatakan:

    makasih trik bloggernya bro, bermafaat baged

    berkunjung ea di http://www.bloghendra.co.cc/

    kami tunggu

Komentar Anda..?

Subscribe to us kampoeng gue
  • Kampoeng Gue Facebook
    Facebook
  • Kampoeng Gue Twitter
    Twitter
  • Kampoeng Gue RSS
    RSS
  • Kampoeng Gue Google+
    Google+

add us to your Google plus circles