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.

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.