Cara Membuat Kotak Banner 4 Kolom

Hai semuanya.... Malam ini saya mau posting soal cara membuat kotak banner 4 kolom dengan ukuran 125x125. Bagi anda yang belum punya/belum ada tempat untuk naruh banner-bannernya nih aku kasih tau caranya. Loh kok kenth sendiri gak buat??? saya udah buat kok, tapi di blog yang satunya...

1. Login dulu ke blog kamu tentunya
2. Klik Tata Letak kemudian Edit HTML

Penting: Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula dan jangan lupa beri tanda centang pada kotak kecil.

3. Tambahkan kode di bawah ini dan taruh di atas kode ]]></b:skin>

/* Kotak Banner
===================== */
#Box-Banner-ads {
margin: 0px;
padding: 5px;
text-align: center; }

#Box-Banner-ads img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px outset #c0c0c0; }

#Box-Banner-ads img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px inset #333; }

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Setelah selesai menaruh kode tersebut, silahkan simpan dulu template blog kamu. Kemudian pilih Tata Letak-->Tambah Gadget-->kemudian pilih HTML/JavaScript.

Lalu Copypaste kode di bawah ini:

<div id="Box-Banner-ads">

<a target="_blank" href="http://blogger-jepara.blogspot.com"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>

<a target="_blank" href="http://blogger-jepara.blogspot.com"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>

<a target="_blank" href="http://blogger-jepara.blogspot.com"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>

<a target="_blank" href="http://blogger-jepara.blogspot.com"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>

</div>

Catatan : Ganti kode yang berwarna Biru dengan alamat blog kamu.
Simpan kode tersebut lalu lihat blog anda.

Contoh cara pemasangan Banner dalam kotak banner adalah seperti ini:

<div id="Box-Banner-ads">

<a href="http://dmoz.org/" target="_blank"><img border="0" alt="Open Directory Project at dmoz.org" width="125" src="http://dmoz.org/user-banners/125x125birt.gif" height="125"/></a> <

<a target="_blank" href="http://blogger-jepara.blogspot.com"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>

<a target="_blank" href="http://blogger-jepara.blogspot.com"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>

Dan seterusnya...

</div>

Catatan :
Perhatikan kode yang berwarna Orange yang merupakan contoh memasukkan banner dalam salah satu kotak banner.

Selamat membuat kotak banner...