-->

Cara Membuat dan Memasang Kotak Iklan Responsive di Blogger

Serieswans.com - Pada kesempatan kali ini saya akan membagikan sebuah tutoral blog lagi tentang bagaimana cara membuat 4 kotak iklan di blogger. dengan menampilkan atau membuat space iklan berupa banner di website maupun blog biasanya bisa kita jadikan peluang bisnis kita sendiri. apalagi blog atau website anda memiliki visitor yang banyak setiap harinya.

Pihak advertise juga tidak akan ragu untuk memasang iklan mereka di blog anda. dan pada kesempatan kali ini saya akan memberikan tutorialnya mengenai pembuatan kotak iklan di blog.

Baca Juga : Cara Memperbaiki Struktur Blog Agar Lebih SEO Friendly dan Responsive

Disini saya akan membuat 4 kotak persegi yang berukuran 125x125 pixel dalam satu widget. widget author box ini biasanya di pasang pada sidebar blog. fungsi dari widget author box ini adalah sebagai media iklan untuk memberikan informasi kepada si pembaca.

Cara Membuat dan Memasang Kotak Iklan Responsive di Blogger
Memasang Kotak Iklan Responsive di Blogger 

Menurut saya cara ini sangat bermanfaat bagi kita seorang blogger. Kenapa, jika blog kita ingin menampilkan tampilan yang rapi, maka perlu di coba untuk memasang iklan. Selain itu, blog kita akan terlihat rapi dan tidak mengganggu pembaca ataupun pengunjung. Mungkin anda sudah tidak sabar, bahaimana cara membuatnya , silahkan ikuti langkah-langkah di bawah ini.

Berikut adalah Cara Mudah Membuat dan Memasang Kotak Iklan Responsive di Blog :

1. Pertama sobat login dulu kedashboard blogger seperti biasanya, kemudian klik pada menu Theme => Edit HTML. Lalu tambahkan CSS dibawah ini sebelum kode ]]></b:skin> atau </style>

/* 4 Kotak Iklan */
.kotak_iklan {text-align: center;}
.kotak_iklan  img {margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #ddd;}
.kotak_iklan  img:hover {border:1px solid #aaa}
.kotak_iklan  img.noborder {border:0;}

2.Kemudian Simpan Templatenya

Baca Juga : Cara Mudah Memasang Author Box Keren di Blogger Terbaru

3.Selanjutnya silahkan klik ke menu Tata Letak > Tambahkan Gadget > Tambahkan HTML/Javascript dan masukkan kode dibawah ini dalam kolom tersebut.

<div class="kotak_iklan">
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
</div>

Perhatikan yang telah saya tandai dengan warna merah tersebut. Ganti url iklan, Judul Iklan, serta Url Gambar dengan iklan yang akan sobat buat.

4. Jika sudah selesai, simpan dan lihat hasilnya.

Mungkin itu saja artikel kali ini mengenai Cara Membuat dan Memasang Kotak Iklan Responsive di Blogger. jika anda memiliki sebuah pertanyaan, silahkan tanyakan di kolom komentar di bawah postingan ini. jangan lupa kunjungi terus blog serieswan.com untuk mendapatkan artikel terbaru lagi. semoga artikel kali bisa bermanfaat untuk anda.
Next
Previous

Related Posts

Show comments
Hide comments

0 Komen

Posting Komentar

  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

x
Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!