Cara Membuat Kotak Banner Iklan di Blogspot

Tuesday, December 09, 2008

Umumnya kotak banner iklan ini sudah bawaan asli dari template. Tapi gimana yang udah terlanjur make template yang hanya ada dua sidebar? Jika sidebar anda hanya dua maka perlu ditambah satu sidebar lagi untuk meletakkan kotak iklan ini.


Langkah-Langkah Membuat Kotak Banner Iklan

Masuk halaman Edit HTML, tidak perlu mencentang Expand Widget.
Copy kode css berikut


/*----------Banner 125x125-----------*/

.banner{
margin: 0 0 10px 0;
padding: 10px auto 10px;
width:348px;
float:center;
border:1px solid #d6edf8;
background:#fff;
}

.banner ul {
margin: 0px 0px;
padding: 10px 25px;
overflow: auto;
}

.banner li{
height:125px;
width:125px;
margin: 6px 6px ;
padding:5px 5px;
list-style:none;
display : block;
display:inline;
float:right;

}

.banner li a:link, .banner li a:visited {
text-decoration: none;
}

Letakkan sebelum kode ]]></b:skin>

Kemudian, copy kode berikut

<div class="'banner'">
<ul>
<li>
<a href="'http://YOUR-LINK-HERE'" target="'_blank'"><img alt="'ads'" border="'0'" src="'http://4.bp.blogspot.com/_nxOMLf2KJwU/Sai5_XgYzxI/AAAAAAAABG4/Da1niOQL0Uw/s1600/advertise%2B125x125.png'/" /></a>
</li>
<li>
<a href="'http://YOUR-LINK-HERE'" target="'_blank'"><img alt="'ads'" border="'0'" src="'http://4.bp.blogspot.com/_nxOMLf2KJwU/Sai5_XgYzxI/AAAAAAAABG4/Da1niOQL0Uw/s1600/advertise%2B125x125.png'/" /></a>
</li>

<li>
<a href="'http://YOUR-LINK-HERE'" target="'_blank'"><img alt="'ads'" border="'0'" src="'http://4.bp.blogspot.com/_nxOMLf2KJwU/Sai5_XgYzxI/AAAAAAAABG4/Da1niOQL0Uw/s1600/advertise%2B125x125.png'/" /></a>
</li>
<li>
<a href="'http://YOUR-LINK-HERE'" target="'_blank'"><img alt="'ads'" border="'0'" src="'http://4.bp.blogspot.com/_nxOMLf2KJwU/Sai5_XgYzxI/AAAAAAAABG4/Da1niOQL0Uw/s1600/advertise%2B125x125.png'/" /></a>
</li>
</ul>
</div>


Letakkan di bawah <div id='sidebar-wrapper'> kemudian save.

Perlu dilakukan penyesuaian sesuai ukuran sidebar anda.

You Might Also Like

81 comments

  1. kalo ini gampang bong


    tingal telpon sapimoto

    ReplyDelete
  2. dulu pernah ngutik ngutik disitu
    terus koment ngak muncul... terus kamu prutes

    ReplyDelete
  3. @grubik:opooo :n:
    @bagus pras : dalang ki manteb

    ReplyDelete
  4. klo bikin ntar sapa y yg t promosi in.. :l:

    ReplyDelete
  5. Hm....... tak kasih iklan juga ato ga yah, blogku...... hm.....

    ReplyDelete
  6. welew welew ini bahasa planet mana lagi bong
    *mumet* :E:

    ReplyDelete
  7. Wah mbak, makasih infonya. Saya juga pingin ada iklannya. Cara daftarnya gimana?
    Kalau di tempalatenya saya lihat sudah disediakan widgetnya

    ReplyDelete
  8. wah good post, tapi punya saya ndak bisa. yo wis salaman aja...

    ReplyDelete
  9. cebong mmg yahud ya..??
    pusing deh aku lihat2 HTML...khkhkhkhkkk

    tiap hari update nih blog ya bong...
    Salam PLUR dulu deh...
    Blog Slank aku mulai aku hidupkan lagi..
    soalnya dah dua bulan OFF ngga update2..hehehe

    ReplyDelete
  10. Weee, nice tips nih, baru buat saya..
    btw, kebetulan banget ya saya baru aja posting cara buat banner yang gratisan... xixixi.. Mungkin bisa sedikit membantu bagi yg ingin buat bannernya setelah ikutin tips di mba Bong ini... :D

    Mba Bong, memang fee pasang banner disini brapaan harganya?

    ReplyDelete
  11. q mau ksh gitu,takutnya g ada yg mau masang...jd fokus seo dulu deh...

    ReplyDelete
  12. kira2 bakalan ada yg mau naro iklan ga yah kalo di pasangin gituan :h:

    ReplyDelete
  13. keren postingannya, coba dulu ah...

    ReplyDelete
  14. Wik kekk kek kalo aku pake table di widget he..he... tapi cara Mba Bong ini lebih praktis he..he.. Salam Mba Bong

    ReplyDelete
  15. mantaf! aku blogger belajaran mbak..tamplete minimalis bukan karena pilihan way of life, tapi gara-gara nggak ngerti musti diapain huehe..ngenesnya..

    ReplyDelete
  16. Thx ya dah bagi ilmu, kalau ada kendala saya pelajari lagi lebih teliti bikin banner iklan

    ReplyDelete
  17. hoh? kotak banner ini untuk orang yang mau ngiklan di blog kitah ya?

    ReplyDelete
  18. Sopo sing meh pasang iklan nggonku,..
    Kowe gelem bong,...

    ReplyDelete
  19. ada apa bong ??? kok manggil2 namaku ??? kangenkah dirimu dgn diriku ???

    :c:

    ReplyDelete
  20. weh weh weh..
    nutor teros yo... :c:

    ReplyDelete
  21. Bong cocok ga diterapkan di blog aku?

    ReplyDelete
  22. waduh, sip banget dah bong, mantab..

    ReplyDelete
  23. waduh bu guru....., aku pakai wordpress je? dos pundi nikuhgh. selamat buat kursus onlinenya.

    ReplyDelete
  24. @munawar:nggih sampun, mbok menawi dulure panjenengan
    @dede:we yg abis cutiii
    @tony:cocok mas makanya tak bikin ky gt
    @ongki:heleh
    @yoyo:heleh ini juga
    @masmoemet:GR :n:
    @indungg:ra nduwe duit
    @quinie:terserah mo diisi iklan ato gambar apa
    @zulfahri:yup sama sama mas
    @ernut:wealaaah mbake jujur xixixix
    @seno:banyak jalan menuju Roma Irama mas
    @marsudiyanto:ngombe bodrex pak
    @jkool:lah itu ud ada
    @arai:g harus iklan kan
    @ayub:oke
    @slikers:sudah kesanaaaa
    @ifoell:yahud brasa apa Bang :f:
    @hejis:pokoke salaman
    @erik:daftar apa mas? hehe
    @eros:planet kodok
    @alam:mikir 10 kali
    @dudut:diriku nuh

    ReplyDelete
  25. tak bookmark disik yo mbak, engkok lek gak males baru belajarnya, saiki lagi maless pooolllll :e:

    ReplyDelete
  26. jdi ini toh caranya, dari dulu ndak mudeng, mau buat banner di blogspot mbak ebong, mantab dah, mkasih infonya. :e:

    ReplyDelete
  27. eh salah ngasih kode smile, maksudnya ini :f:

    ReplyDelete
  28. Wah wah.. saya lagi belajar pake blogspot lho hhuhuehe..

    ReplyDelete
  29. mbak bong, kaya ny aq suka cara ny kang seno deh, pake tabel ajah... kan lebih simpel.
    tapi tetap aja tutorial ini berguna. coz sdh ngajarin cara bikin 3 kolom.
    cebong emang slalu hula-hula.
    numpang nge-LINK mbak.
    AGUNG PRASETYA HARDIKA JAYA SELALU SENANTIASA BAHAGIA WALAU KETIBAN KELAPA TETAP TERTAWA

    ReplyDelete
  30. Tak tunggu tutorial soal masang baliho ke blog, soale nek banner kurang manteb e...keciliken, hehehehe...

    ReplyDelete
  31. Fotoku ameh tak pasang neng banner kuwi entuk ra, nduk?
    Tapi ojo dikon mbayar yak, aku ra mampu

    ReplyDelete
  32. sipppp,,, tapi sayangnya d wordpress g bisa dipasang :a:

    ReplyDelete
  33. Wah ebong pinter, anake copo ceh. Sini2 sama oom.

    ReplyDelete
  34. @mantan kyai:dasar pedopil pede dg upil
    @kumiz:cup cup cup
    @dony:aku yho ra mampu nguripi internetku :a:
    @tukang nggunem:trus ngko di pajang potomu, gae weden blog
    @aiwy:iya kalo udah ada tempatnya enak
    @elja:diriku blom bljr wp
    @hendra: :f: wehehehe kliru sebelahe
    @oeoes:dirimu lagi males kabeh nuh kang

    ReplyDelete
  35. isi bannernya terus apaan...he..he..
    pengen nih mbak, tp (krn gaptek) takut, pernah kutak katik html..jd ancur blog, dq blajar dulu ya mbak?

    ReplyDelete
  36. Mantep mbak tutorialnya... Kalo aku mbak tinggal masukin aja kode yang di letak in di bawah main wrapper tersebut ke elemen html/java script. Memang hasilnya menyesuaikan sidebar yang ada. gitu...

    Wes mbak iki tambah suip ae... he..he...

    ReplyDelete
  37. Inilah seninya ngeblog. Gak cuma nulas-nulis tapi juga utak-utik sambil mringas-mringis. Saya juga abis ngutak-atik template blog yg saya comot secara acak dari ratusan template gratisan. Tapi masih bingung gimana cara mengamankannya supaya gak bubrah kalo dibrowsing pake IE. Blogmu juga masih ada bug ini. Saya tadi pk opera, comment asnya gak nongol. Saya ganti pake Mozilla bisa.

    Salam kenal!

    ReplyDelete
  38. @bewe:oooo...diriku udah nyoba tiga tiganya, aman, lah wong ini asli dari blogger wekekekekeke, salam kenal juga
    @frenavit:aku nyoba lsngung ndak muncul
    @nyante:nyoba di blog laen aja dl, biar aman

    ReplyDelete
  39. Mbak cebong, maaf pertanyaanya agak menyimpang, caranya buat emoticon yang kayak gitu gimana?


    Terus, kenapa sih namanya cebong ipiet? ada arti khusus?

    ReplyDelete
  40. @hangga:iyah gpp, emoticon yg ky di kotak komentar ini yah? ada di postingan blog saya satunya tapi mungkin rada error scriptnya, klo mau, saya kirim via email aja gmn, soalnya kalo posting html kan rada ribet takutnya salah ketik jg. Cebong Ipiet itu yg ngasi nama temen temen komunitas chatter dulu hehehe

    ReplyDelete
  41. Numpang blogwalk deh, blm ada post baru soalnya disini, huehuehue... :p

    ReplyDelete
  42. weleh" kok susah bgt mbk bong??

    saya gak pakek gitu"an lah.

    ReplyDelete
  43. lama ga sempet maen ke blog kawan-kawan, wah laporan posting kamu di dashbordku banyak kali bong, akhirnya pilih ini deh, makin OK nih blognya, dan tutorialnya makin mantab. Banyak sekali ya jam terbang ngeblog kamu? jadi pengen

    ReplyDelete
  44. eh iya kang sawa aku ga tahu juga bong

    ReplyDelete
  45. @albri:hohoho g tau mo ngapain ya udah nge blog aja :f: jawaban yg jujur, iyah blog nya g bisa di buka juga
    @rezki: :d:
    @sandy:iyah ntar kl uda kebelet
    @david:sama sama makasih ud mampir

    ReplyDelete
  46. hue hue makasih ebong :c:

    nice inpo bong :c:

    Peace and Love
    Red Dog

    ReplyDelete
  47. izin ambil gambarnya wekekekkeke.. soalnya males buat sendiri

    ReplyDelete
  48. mas,jujur sampai saat ini saya masih kesulitan untuk ngebuatnya,tolong donk kasih e-book / video cara ngebuatnya,soalnya disini saya masih pemula banget,email=lulukindrayani@ymail.com mohon bantuannya & terimakasih.

    ReplyDelete
  49. :a: Maaf mas, ini rangga mau tanya kok di code

    #sidebar-right {
    width:135px;
    padding:0px 10px 10px 10px;
    float:right;
    background:#fff;
    }


    Gak ketemu ya mas di template_ku (aku pake template bawaan.......)
    Mohon bantuannya
    e-mail : rannoemail@gmail.com

    ReplyDelete
  50. keren keren keren...ajarin bikin blog ya ya ya ya...

    ReplyDelete
  51. thank you bu bong.. mumet sih ak masihan iki....

    ReplyDelete
  52. thank's tipsnya yach...di simpen dulu ah, biar ga lupa...

    ReplyDelete
  53. thank's tipsnya yach...di simpen dulu ah, biar ga lupa...

    ReplyDelete
  54. Asli, aku mumet...$%$#$#ERTFT&^%#

    ReplyDelete
  55. @ran:huehue ya dibikin sendiri, ditambahin aja, sesuaikan sama lebar sidebar asli

    ReplyDelete
  56. :c: siapa ya yang mau pasang iklan hiks.. hiks..

    ReplyDelete
  57. waduh..
    klo bwt wordpress ad gag ?

    mau tuker link ?


    http://jamalbaharun.wordpress.com/

    ReplyDelete
  58. This comment has been removed by the author.

    ReplyDelete
  59. kakak, punyaku gagal, ga bisa bentuk kotak-kotak,..:a:
    gmn nigh??mhon bntuannya kak..

    coba deh liyat di http://dwons.blogspot.com
    mohon pencerahannya untuk sang nubi yg pgen blajar nie...
    pjg bgt kek ngrim surat yak?:c:

    ReplyDelete
  60. menyenangkan sekali...dapat ilmu baru

    ReplyDelete
  61. Ok, nice tutorial . .
    Trus cara masang kode iklan dari advertiser gimana?

    ReplyDelete
  62. Ok, nice tutorial . .
    Trus cara masang kode iklan dari advertiser gimana?

    ReplyDelete