Cara Menambah Kolom Iklan SIDEBAR ADS di Template Blogspot

Bagi Anda para blogger yang sudah tau cara menambahkan kolom Iklan ditemplate blogspot tentu tidak asing lagi dengan trik yang satu ini. Dengan bermodalkan tehnik coding kode HTML, Saya mencoba diterapkan di blog ini, dan ternyata berhasil. Selanjutnya Saya langsung share didalam artikel ini, karena trik ini cukup berguna bagi Anda yang ingin memonetize website atau blognya, yaitu menjadi Publisher dari Iklan-iklan yang akan dipasang.

Dengan adanya iklan ini, maka setiap pengunjung yang datang, tentunya merasa penasaran dengan banner iklan yang sudah di buat semenarik mungkin, dan melakukan klik disana, dan bila mereka berminat, maka akan terjadi sebuah transaksi online.
Sebagai tambahan, bila rekan-rekan blogger memiliki website atau blog yang sudah memiliki traffic yang cukup tinggi, ini bisa dijadikan tambahan penghasilan tentunya, karena dengan banyaknya kunjungan, maka kemungkinan mereka melakukan klik terhadap iklan yang ada, itu semakin besar.

Untuk banner yang nantinya akan tampil di website atau blog kita, adalah seperti gambar dibawah ini :

Dan langkah-langkah yang harus Anda lakukan untuk membuat kolom iklan tersebut adalah sebagai berikut :

1. Login ke blogspot, lalu masuk ke halaman Layout/Tata letak blog Anda dan klik Edit Html ( jangan lupa untuk selalu melakukan backup sebelum merubah Kode HTML untuk berjaga-jaga)

2. Lalu copy kode dibawah ini

<div id='sidebar-ads'>
<div class='ads-sidebar'>
<center><ul>
<li><a href='mailto:emailanda@gmail.com' target='_blank'><img border='0' height='125' src='http://kwangkxz.com/images/banneriklan.png' width='125'/></a></li>
<li><a href='mailto:emailanda@gmail.com' target='_blank'><img border='0' height='125' src='http://kwangkxz.com/images/banneriklan.png' width='125'/></a></li>
</ul></center>
</div>
</div>

 
3. Kemudian paste di atas <div id='sidebar-wrapper'>

4. Lalu copy juga kode dibawah ini :

#sidebar-ads {
width:300px;
margin-bottom:10px;
float:right;
background:#fff;
padding:10px;
}
.ads-sidebar{float:left; margin:0pt; padding:0pt}
#sidebar-ads ul li ul{list-style-type:square; margin-left:1.5em; padding:0; border:0}
#sidebar-ads ul li ul li{border:0}
#sidebar-ads .ads-sidebar ul{background:transparent none repeat scroll 0% 50%; border:1px solid transparent; float:left; margin:0pt; padding:10px 0pt 10px 2px; width:300px}
#sidebar-ads .ads-sidebar ul li{display:inline; list-style-type:none; margin:0pt; padding:0pt}
#sidebar-ads .ads-sidebar ul li a:hover{border-bottom:none; list-style-type:none}
.ads-sidebar ul{margin:0px; padding:0px}
.ads-sidebar ul li a{float:left}
.ads-sidebar img{margin:0px 0px 5px 8px; border:1px solid #CCC; padding:2px}
.ads-sidebar img:hover{border:1px solid #999}

5. Dan paste lagi di atas ]]></b:skin>

6. Klik SAVE

Semoga informasi yang Saya berikan ini bermanfaat bagi Anda semua.

Selamat mencoba dan Terimakasih.