Ad Under Header

Cara Mudah Memasang kotak Iklan Responsive di Sidebar Blog

Berikut ini adalah panduan untuk membuat kotak iklan responsive pada bagian samping blog anda, cukup menggunakan CSS dan HTML, klik disini untuk selengkapnya.

Cara Mudah Memasang kotak Iklan Responsive di Sidebar Blog

Pada kesempatan kali ini saya akan berbagi tutorial cara untuk membuat kotak iklan yang muncul di samping blog atau sidebar.

kotak iklan ini responsive dan siap digunakan disetiap blog sobat dengan template apa pun yang sudah suport responsive.

Baca: 10 Template Responsive Terbaik 

Ada banyak media yang bisa dilakukan oleh para blogger untuk mendapatkan penghasilan dari blog yang mereka bangu,  selain bergantung pada google adsense.

Salah satu media lainnya adalah dengan menyediakan paid advertising, atau iklan berbayar.

Dengan cara membuat kotak iklan di blog..

hal ini akan menarik perhatian orang yang mengunjungi blog sobat, terlebih orang tersebut sorang pengusaha atau pebisnis, yang butuh promosi untuk produknya.

Dengan adanya kotak iklan di blog sobat, hal ini menjadi media agar mereka tertarik untuk beriklan di blog sobat.


Nah, Kotak iklan responsive ini merupakan sebuah ruang untuk meletakkan unit iklan, entah itu iklan berbayar atau sekedar partner blog dengan rekan blog sobat masing-masing.

Untuk menampilkan iklan di samping blog tersebut tentunya harus dibuat dengan serapih mungkin agar iklan tersebut terlihat rapih dan elegan.

Nah, oleh karena itu ada kesempatan kali ini saya akan berbagi tutorial cara memasang kotak iklan responsive di blog.

Lalu bagaimana caranya?

Simak dibawah ini.

Cara Mudah Membuat kotak Iklan di Sidebar Blog:


1. Pertama silahkan masuk ke Edit HTML sobat masing-masing.

Dengan cara masuk ke blogger-Template-edit HTML.

2. Jika sudah, sekarang copy code berikut dan paste diatas kode </style> / ]]></b:skin>

Kode Pembungkus CSS

/* 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;}

Cara untuk menemukan kode tersebut gunakan Shortcut CTL+F pada keyboard sobat.

3. Setelah selesai silahkan save template sobat.

Pemasang CSS Kotak iklan responsive sudah selesai pada template sobat.

Langkah selanjutnya tinggal memasang bannernya ditata letak/layout blog sobat.

Caranya sebagai berikut:

1. Masuk ke blogger- Layout- Kemudian add Gadget- pilih HTML/Javascript

2. Kemudian copy dan paste kode berikut:


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


3. jangan lupa Save.

Untuk Contoh tampilannya bisa lihat disini:


Keterangan:

Detail: Renaldy Ways
url iklan yang dituju Contoh: Aqilmujahidiin.com
judul iklan Tuliskan judul iklan pada blog sobat
Url gambar Masukan URL gambar iklan/ Banner
alt gambar Berikan ALT Gambar agar lebih SEO


Bagaimana sob, mudah bukan cara memasang kotak iklan responsive pada blog?

Cara ini tidak begitu rumit dan bisa dilakukan oleh siapapun,


Demikian cara Mudah Memasang kotak Iklan Responsive di Sidebar Blog yang dapat saya berikan semoga bermanfaat.
Top ad
Middle Ad 1
Parallax Ad
Middle Ad 2
Bottom Ad
Link copied to clipboard.