Terwujud

Cara Membuat Banner Iklan Blog Responsive, Sederhana dan Menarik



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
Sebenarnya Cara Membuat Banner Iklan Blog Sederhana Sekaligus Menarik ini sudah banyak tutorialnya, namun mengingat ada salah satu teman kita yang bertanya dengan tampilan iklan banner yang ada di blog ini, maka saya akan menjelaskan secara rinci.
Banner,Blog,Responsive
Saya tidak paham seluruhnya tentang maksud dari pertanyaan Mas Syarif Hidayat, namun kesimpulan saya mungkin akan terjelaskan dari tutorial ini nantinya. Berikut pernyataan dari teman kita terkait cara membuat banner iklan seperti di blog Terwujud.com:
“Mas ibrahim, saya mau tanya nih tapi maaf pertanyaan saya di luar pembahasan artikel ini cara bikin iklan lazada seperti punyanya sampean di sidbar karna iklan saya tidak ada iframe nya , mas bisa mengecek iklan di blog saya melalui google plus, karna disini sepertinya tidak diperbolehkan pasang link aktif, trimakasih

trimakasih atas responnya mas ibrahim, contoh tampilan gambarnya di blog saya mas di bagian sidbar., dan di gambar iklanya sampean mas. intinya gini mas kok tampilan iklan lazada saya tidak seperti iklan lazadanya sampean, iklanya sampean kaya ada garis tepinya kala kena maos muncul tulisan criteo iframe, trus iklan s...”

1. Kode CSS
Sebelum membuat tampilan iklan, maka terlebih dahulu dibuat kode CSS nya. Kode ini akan disimpan pada halaman Edit HTML pada template blog. Adapun caranya yaitu:
  • Klik menu template
  • Kemudian, klik menu Edit HTML
  • Simpan terlebih dahulu kode HTML sobat, sekedar berjaga-jaga jika ada kesalahan
  • Copy kode CSS di bawah ini dan letakkan diatas/sebelum kode ]]> </b:skin>, namun untuk template yang responsive seperti blog ini, kode itu tidak terlihat. Jika template sobat sejenis dengan template saya, sobat bisa meletakkannya di antara kode-kode CSS pada template blog sobat.
.baim_iklan {text-align: center;margin:0 auto;padding:16px 0 0;border:1px solid #ddd;width:298px;height:280px;}
.baim {margin: 0px 0px 16px 16px;padding:0;background:#ddd;height:125px;width:125px;display:inline;float:left}
  • Setelah itu, klik save/simpan template
2. Pemasangan Widget
Langkah selanjutnya adalah pemasangan kode HMTL pada kolom widget yang tersedia pada tata letak template blog. Adapun caranya adalah:
  • Masuk ke menu Tata Letak
  • Klik menu Tambahkan Gadget atau Masukkan pada Widget yang ada
  • Copy Kode di bawah ini dan paste ke dalam kolom widget yang sudah disiapkan
<div class="baim_iklan">
<div class="baim"><a href="Link Banner"><img alt="teks alternatif" src="Link Gambar" title="Teks pada judul banner" /></a></div>
<div class="baim"><a href="Link Banner"><img alt="teks alternatif" src="Link Gambar" title="Teks pada judul banner" /></a></div>
<div class="baim"><a href="Link Banner"><img alt="teks alternatif" src="Link Gambar" title="Teks pada judul banner" /></a></div>
<div class="baim"><a href="Link Banner"><img alt="teks alternatif" src="Link Gambar" title="Teks pada judul banner" /></a></div>
</div>
  • Klik simpan setelan
3. Hasil Akhir
Apabila langkah-langkah di atas sudah anda buat, maka iklan banner sudah selesai. Sobat juga bisa memodifikasi tampilan iklan baik dari sisi garis tepi, tampilan banner iklan yang belum di pasang, background iklan dan lain sebagainya.

4. Masalah dan Testimoni
Nah, jika ada masalah atau hal-hal yang tidak sobat ketahui, maka sobat bisa bertanya melalui form komentar di bawah atau melalui email saya di ibrahimlubismpdi [at] gmail [dot] com. Apabila berhasil, sobat juga bisa nyatakan melalui kolom komentar di bawah.


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 32 komentar

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

  1. Asik nih memang sangat diperlukan buat efektivitas promosi. Umumnya sudah saya lakukan cara ini. Makasih banget pak.

    ReplyDelete
  2. saya mending pake yang widget aja deh biar ga perlu ngerubah CSS template :D

    ReplyDelete
  3. Patutu di coba ni Mas Ibrahim sipa tahu bisa tampik ciamik di blog saya?

    ReplyDelete
  4. nah cocok banget nih mas, biar lebih enak dalam membuat banner di blog bs mencoba cara diatas, apalagi yang ingin kebanjiran iklan bisa di coba tips diatas

    ReplyDelete
  5. nah bagus ini pak... makasih ya pak

    ReplyDelete
  6. Kalau untuk buat iklan mandiri jadi bagus nih, banyak pilihan yang bsa diburu sama pemasang iklan natinya kalau mau pasang iklan di blog kita ya mas....

    ReplyDelete
  7. coding semua saya harus baca soalnya ga paham cara pasang iklan banner

    ReplyDelete
  8. Masih belum memikirkan iklan Mas karena baru kemarin bikin blog, salam kenal

    ReplyDelete
  9. bisa dicoba nih banner nya mas ibrahim, biar blog makin responsive ya kalau banner nya ikut responsive ;)

    ReplyDelete
  10. naah ini nih ..artikel yang ane cari -cari... yang mungkin cocok untuk modifikasi tampilan iklan widget.... makasih mas Ibrahim respon yang cepat atas permintaan saya.... tapi lain kali baru saya pasang ke widget saya .... maklum banyak kerjaan di dunia nyata...mas...

    ReplyDelete
  11. emangnya kalo kita dah pake template yg responsive...utk banner iklan tidak otomatis tampil respo?...mesti harus diatur ulangkah?..maaf penasaran aja meski blog aku gak pasang iklan...maklum ngasong 'cemilan' sendiri.

    ReplyDelete
  12. langsung disimpan pak banner iklannya, siapa tau nanti diperlukan.
    makasih banyak sharenya..

    ReplyDelete
  13. langsung dicoba dech, eit tapi aku belum punya iklan wkwk..

    ReplyDelete
  14. sama2 mas, eh eh eh salah saya bukan admin, hehe. maap mas baim

    ReplyDelete
  15. wah mantep kang Banner iklannya, apalagi responsif yah. cocok sekali bagi teman2 yg ingin memasang banner iklan di blog nya masing2 ... :)

    ReplyDelete
  16. Balik lagi mas, kalau banner bagusnya pake corel draw atau yang lain mas?

    Soale saya terbiasa dengan corel draw.

    Datang lagi ya ada yang baru hehe

    ReplyDelete
    Replies
    1. kalau itu yang biasa ndak masalah mas, tapi kalau saya sih biasa menggunakan photoshop

      Delete
  17. boleh dicoba nih, lumayan buat ruang kosong

    ReplyDelete
  18. Belum bisa pasang banner, soalnya pengunjung blog saya belum memenuhi syarat.

    ReplyDelete
  19. ini buat yang mau pasang iklan di blog kita ya?

    ReplyDelete
  20. bisa say cobain nih kang. siapa tau kalo iklan pribadi pake cara ini dapat untung besr

    ReplyDelete
  21. banner iklan blog emang bikin cantik yang ribet itu yaa harus jeli memasang kode2 HTMLNya wes menyerah deh, kalau dibuatin alhamdullilah :)

    ReplyDelete
  22. Saya juga lagi nyari-nyari cara membuat banner iklan responsive ini mas, dulu pernah membuatnya tapi bukan yang jenis responsive. Dan banner ini tidak muncul bila blog kita buka dalam tampilan mobile. Karena yang masang iklan pun tidak ada, akhirnya slot iklan tersebut saya copot lagi. Dan sekarang saya mau coba membuat kembali, karena sepertinya visitor blog saya sudah sedikit meningkat... mana tau ada yang berminat masang iklan, dan yang saya butuhkan script responsive seperti yang ada dalam tutorial mas ini.

    Terima kasih sudah mau berbagi mas ^___^

    ReplyDelete
  23. jadi iklan responsif itu kayak apa mas? :D

    ReplyDelete
  24. mantab mas.. makasih ilmunya :D

    ReplyDelete
  25. ukuran banner yang normal berapa gan ?

    ReplyDelete
  26. trims gan infonya, mampir ke numpangnonton.com buat selingan

    ReplyDelete
Copyright © 2014 Terwujud.com - All Rights Reserved