Rabu, 19 Januari 2011
Membuat Kolom Iklan Sidebar Ads di Blogspot
Sekarang sudah banyak template-template baru dari penyedia template blogger gratisan yang menyediakan kolom iklan (sidebar ads) bagi penggunanya. Tapi bagaimanakah jika template yang kita pakai belum tersedia? Kali ini kembali di tutorial blog, saya akan membahas mengenai cara membuat kolom iklan (sidebar ads) di blog. Bagi temen-temen para blogger yang sudah paham cara menambahkan kolom Iklan ditemplate blogspot tentu tidak asing lagi dengan trik yang satu ini. Dengan bermodalkan teknik coding kode HTML, saya mencoba terapkan di blog saya yang lain, dan ternyata berhasil. Agar lebih bermanfaat saya akan tulis didalam postingan 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 :
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 :
- Login ke blogspot, lalu masuk ke halaman Layout/Tata letak blog Anda >> Edit Html ( jangan lupa untuk selalu melakukan backup sebelum merubah Kode HTML untuk berjaga-jaga)
- Cari kode <div id='sidebar-wrapper'> kemudian copy kode dibawah ini letakkan di bawahnya
<div id='sidebar-ads'></div>
<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>
- Lalu copy juga kode dibawah ini letakkan di atas kode ]]></b:skin>
#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;
}
- Klik save/simpan, lihat di bagian sidebar anda apakah ada perubahan.
Temen-temen bisa ganti http://kwangkxz.com/images/banneriklan.png dengan banner iklan yang diinginkan. Itu dulu tutorial hari ini, kalau ada yang mau ditanyakan silahkan isi aja kotak komentar di bawah.
Selamat mencoba dan semoga bermanfaat.
Label:
tutorial blog