Cara Membuat Kotak Banner Iklan di Blogspot (1)

Sekedar kilas balik saja, template yang saya pakai sekarang ini hasil obrak abrik dari template bawaan blogger yang dua kolom. Sampe suatu saat pengen jadi 3 kolom. Dan kemudian kok pengen tau caranya masang kotak iklan di sidebar. Setelah saya googling saya nemu dari postingannya o-om.com tentang cara bikin kotak iklan atau box banner. Kalo mau tau sumber aslinya ceklik [di sini] . Setelah saya coba, loh ga muncul, akhirnya saya iseng iseng view source template ternyata musti ada sedikit editing peletakan.
Umumnya kotak banner iklan ini sudah bawaan asli dari template. Tapi gimana yang udah terlanjur make template yang hanya ada dua sidebar? Jika sidebar anda hanya dua maka perlu ditambah satu sidebar lagi untuk meletakkan kotak iklan ini.


Langkah-Langkah Membuat Kotak Banner Iklan

Masuk halaman Edit HTML, tidak perlu mencentang Expand Widget.
Cari kode #sidebar anda, misal kode sidebar anda

#sidebar-right {
width:135px;
padding:0px 10px 10px 10px;
float:right;
background:#fff;
}

Copy kode berikut dan letakkan di bawah kode sidebar tersebut.
#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}

Perhatikan, pada width:300px. Sidebar tempat meletakkan banner iklan ini lebarnya sekitar 2 kali lebar sidebar yang kecil yang saya kasih warna hijau, jadi ganti width:300px tersebut sesuaikan dengan lebar sidebar anda.

Kalau sudah buat elemen baru. Cari kode berikut ini

<div id='main-wrapper'>
</div>

Copy paste kode di bawah ini, dan letakkan di bawah kode main-wrapper tersebut.
<div id='sidebar-ads'> <div> <center><ul> <li><a href='http://cebongipiet.blogspot.com' target='_blank'><img border='0' height='125' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png' width='125'/></a></li> <li><a href='http://ipietoon.blogspot.com' target='_blank'><img border='0' height='125' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png' width='125'/></a></li> </ul></center> </div> </div>

Kemudian SAVE

Anda dapat mengganti http://ilhamthedarkness.blogspot.com dengan link anda, dan link yang bertuliskan http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png, ganti dengan source banner anda. Anda bisa mengganti dengan gambar anda tentunya berukuran 125x125 pixel, kemudian upload di photobucket (atau image hosting lain)

Banyaknya banner bisa anda tambahkan dengan menambah (copy paste) kode berikut

<li><a href=' http://ilhamthedarkness.blogspot.com ' target='_blank'><img border='0' height='125' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png' width='125'/></a></li>