- Back to Home »
- blogger »
- Cara Pembuatan Kotak Iklan Banner
Posted by : ahman " creativ"
Minggu, 28 Oktober 2012
"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 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. Nah, bagi
yang ingin membuat kotak iklan dan belum mengetahui caranya silakan
ikuti tipsnya.
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://ikrarakbar.blogspot.com"target="_blank"><img src="http://i209.photobucket.com/albums/bb287/yono_pati/intan-1.gif" width="125" height="125"/></a>
</div>
<a href="http://ikrarakbar.blogspot.com"target="_blank"><img src="http://i209.photobucket.com/albums/bb287/yono_pati/intan-1.gif" width="125" height="125"/></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.
Kesembilan, selesai