Membuat Kotak Banner

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 ]]>


/* -- 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.

Copy paste code di bawah:

<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>

Hasilnya:

Copy paste code di bawah:

<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>

Hasilnya:

Contoh cara memasang banner dalam kotak banner :

Copy paste code di bawah:

<div id="Box-Banner-ads">
<a href="http://dmoz.org/" target="_blank"><img alt="Open Directory Project at dmoz.org" src="http://dmoz.org/user-banners/125x125birt.gif" border="0" height="125" width="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>

Hasilnya:

Copy paste code di bawah:

<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>

Hasilnya:

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

Selamat membua

Title: Membuat Kotak Banner

Rating: 5.0 out of 10 based on 745 user ratings

Number of user reviews: 15

Summary: Trik Blogger