Membuat Kotak Banner

Membuat Kotak Banner

Posted by rike on 0

Kotak banner berfungsi untuk menyisipkan image iklan yang akan ditampilkan dalam blog. Adapun bentuk banner bermacam-macam ukurannya, khusus dalam trik blogger ini kita akan mencoba menyisipkan image iklan yang berukuran 125 x 125. Disamping itu area banner dapat pula menjadi ajang promosi, entah itu promosi blog kamu yang lain atau blog orang lain yang diwakilkan dalam bentuk banner. Demo banner dapat kamu lihat di widget Pesan Sponsor Optimasi Blog (sidebar bottom sebelah kanan). Apabila kamu tertarik ingin mengaplikasikannya dalam blog kamu, mari kita mulai trik blogger membuat kotak banner.

• Login dulu ke account blogger kamu.


• Pilih tab Tata Letak --> Edit HTML.

Tips : 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.

• Tambahkan kode CSS berikut 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.

• Simpan dulu template blog kamu.


• Pilih tab Tata Letak --> Elemen Halaman.


• Tambah Gadget dalam elemen blog kamu --> "Tambahkan Gadget", pilih HTML/JavaScript.


• Copy dan pastekan kode di bawah ini.

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



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



<a target="_blank" href="http://#"><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 merah dengan alamat blog kamu.

• Lihat Blog.

Contoh cara memasang banner dalam kotak banner :

<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://#"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>



</div>

Catatan :

Perhatikan kode yang berwarna hijau yang merupakan contoh memasukkan banner dalam salah satu kotak banner.

Selamat membuat kotak banner...