Cara Pembuatan Kotak Iklan Banner

Hampir semua blog atau situs menempatkan iklan pada salah satu halamannya, baik pada halaman utama ataupun pada halaman postingannya (permalink). Dari iklan yang dipasang tersebut, ada iklan yang hanya berupa link text dan ada juga iklan yang berupa banner. Jika jenis iklannya berupa banner atau image link, agar tampilannya terlihat lebih rapi, kita dapat menggunakan kotak iklan (box) sebagai sarana untuk menempatkan atau "membingkai banner tersebut.


<font size="3">#Kotak-iklan {
margin: 0px;
padding: 5px;
text-align: center;
}

#Kotak-iklan img {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #c0c0c0;
}

#Kotak-iklan img:hover {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #333;
}</font>


Langsung saja pada langkah-langkahnya, yaitu sebagai berikut.


Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML


Kedua, temukan kode ]]></b:skin>


Ketiga, buat dan tempatkan kode css berikut ini di atas kode di atas tersebut.





Keterangan:


Jika menginginkan, kita dapat mengganti warna border dengan kode html warna sesuai keinginan masing-masing. Untuk mengetahui kode warna silakan klik di sini.


Keempat, simpan template


Kelima, masuk (klik) Tata Letak >> Tambah Gadget >> Tambahkan HTML/Javascript


Keenam, ketikkan kode dengan format seperti di bawah ini.


<font size="3"><div id="Kotak-iklan">

<a href="link anda"target="_blank"><img src="http://i1155.photobucket.com/albums/p545/mickey_n1edlich/SpaceIklan.jpg" width="125" height="125"/></a>

</div></font>

Jika ingin menambahkan kotak lagi, kita tinggal memasukkan kode dengan format seperti di atas.
Jika ingin mengkustomasi ukuran gambar/image, ubahlah angka pada width dan height.