"Cara Membuat Kotak Iklan Banner Pada Blog. 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 textdan 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. Nah, bagi yang ingin membuat kotak iklan dan belum mengetahui caranya silakan ikuti tips yang saya dapatkan dari Mas O-om ini bersama Tips dan Trik Blog berikut ini.
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.
#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;
}
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;
}
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.
<div id="Kotak-iklan">
<a href="http://harppy-phoenix.blogspot.com"target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8O0n7e5wrLAoG5C8buILVWsU1T8RTTjQczemj-Mk-p8DF9W0ilcnzMz0nF7Lc1RZFt_HMH9rDhyphenhyphenyDwINmN8CXrNyuNFwLrBfVI4rmeKucQwlRDDFCIUD4uySUhTNJO60IqStDwCHIJDc/s1600/iwhvt3.png" width="242" height="350"/></a>
</div>
Keterangan
- Yang berwarna biru, silakan diganti dengan URL blog atau situs kita masing-masing.
- Yang berwarna merah, silakan diganti dengan URL banner kita (yang sudah kita upload pada image hosting) masing-masing.
- 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.
Ketujuh, simpan perubahan.
Kedelapan, refresh blog dan jika berhasil, tampilannya seperti di bawah ini.
