Membuat kotak banner vertikal di blogspot

Wah cukup lama rasanya tidak pernah posting lagi di blog ini, kangen juga rasanya sama blog sederhana ini. Semua tak pernah lepas dari segala macam kesibukkan baik di rumah maupun di kantor. Oya untuk pertemuan kali ini saya coba sedikit mengulas tentang cara membuat kotak banner yang disusun secara vertikal.
Tujuan dari postingan ini tak lain adalah sekedar rasa ingin berbagi dan selain itu posting di blog ini sebagai wahana buat saya untuk menyimpan berbagai macam informasi yang saya butuhkan dalam menambah ilmu dan wawasan saya (di dunia blogging).

Langsung saja bos:

- Login ke blogger
- Pilih rancangan, klik edit HTML
- Copas kode di bawah ini dan letakkan diatas kode ]]></b:skin>

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

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

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

]]></b:skin>

- Jika sudah, save dulu bos.

Lanjut.......

- Copas lagi kode di bawah ini:

<div id="Box-Banner-ads1">
<a target="_blank" href="http://infokita1978.blogspot.com"><img alt="Banner.gif" src="http://i1089.photobucket.com/albums/i352/infokita1978/Banner.gif" border="0"/></a>

<a target="_blank" href="http://infokita1978.blogspot.com"><img alt="Banner.gif" src="http://i1089.photobucket.com/albums/i352/infokita1978/Banner.gif" border="0"/></a>

<a target="_blank" href="http://infokita1978.blogspot.com"><img alt="Banner.gif" src="http://i1089.photobucket.com/albums/i352/infokita1978/Banner.gif" border="0"/></a>

<a target="_blank" href="http://infokita1978.blogspot.com"><img alt="Banner.gif" src="http://i1089.photobucket.com/albums/i352/infokita1978/Banner.gif" border="0"/></a>
</div>

- Kembali ke tab rancangan, pilih elemen laman
- Klik tambah gadget, pilih HTML/JavaScript
- Letakkan kode tadi, terus save
- Jalankan untuk melihat hasilnya.

Kalau mau lihat hasilnya yang sudah jadi, silahkan klik disini

Catatan:
- Warna hijau diatas silahkan diganti dengan url blog masing-masing.
- Kalau mau pasang banner, tinggal ganti saja kode diatas dengan kode banner si bos.
- Oya hampir lupa... bannernya ukuran 125px X 125px ya bos... biar rapi adjah.. hehe...

Sekian, semoga berguna. salam.

Artikel Terkait Lainnya