Terwujud
KomTer,Komik Online
Smartphone Mainbitcoin

Cara Membuat Banner Iklan Blog Responsive, Sederhana dan Menarik


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.

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF
Next
« Prev Post
Previous
Next Post »

31 komentar

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

Balas

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

Balas

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

Balas

Gak diruah kok cuma di tambah dikit..

Balas

Cocok buat iklan mandiri..

Balas

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

Balas

nah bagus ini pak... makasih ya pak

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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.

Balas

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

Balas

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

Balas

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

Balas

mbak yang satu ini bisa aja

Balas

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

Balas

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

Balas

boleh dicoba nih, lumayan buat ruang kosong

Balas

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

Balas

ini buat yang mau pasang iklan di blog kita ya?

Balas

Ini dapat dipakai bila suatu saat saya pengin membuat banner iklan mandiri di blog. Terima kasih ilmunya, pak Ibrahim.

Balas

kalau itu yang biasa ndak masalah mas, tapi kalau saya sih biasa menggunakan photoshop

Balas

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

Balas

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

Balas

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 ^___^

Balas

jadi iklan responsif itu kayak apa mas? :D

Balas

mantab mas.. makasih ilmunya :D

Balas

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.

Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)

By: Terwujud.com
Terima Kasih!!

Copyright © 2014. Terwujud.com | Sumber Informasi Terpercaya - All Rights Reserved | Template Created by Kompi Ajaib | Modified by Ibrahim Lubis