Membuat Kotak Space Banner Pada Blog

Assalamualaikum.Wr.Wb
Banyak orang menggunakan fasilitas blog untuk mencari sarana informasi, kesenangan, silaturahmi, juga ada yang memanfaatkannya sebagai sarana berbisnis.
Jika blog dijadikan sarana berbisnis pasti blog tersebut membutuhkan kotak banner untuk menampung iklan-iklan yang akan dipasang di blog pribadinya.
Dipembahasan kali ini Iq akan memberikan ilmu bagaimana cara membuat kotak space banner pada blog.
Kegunaan dari kotak space banner ini pun beragam. ada yang memanfaatkannya sebagai sarana per-iklannan, penjualan, tukar menukar banner antar blog, dan masih banyak yang lainnya.
Tergantung kebutuhan kawan. Iq pun menggunakannya sebagai sarana Tukar Banner dengan blog lain.
Demo Klik Disini
Bagaimana caranya...?
Langsung saja..

• Login -> Template -> Edit HTML -> Lanjutkan
• Centang Expand Template Widget
• Selanjutnya cari kode ]]></b:skin> untuk mempermudah bisa menekan CTRL + F
• Copy dan Paste kode script tepat Diatas/Sebelum kode  ]]></b:skin>

#Rmasi Iqbal {margin:0px;padding:0px;text-align:center}
#Rmasi Iqbal  img {margin:1px 1px;text-align:center;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;}
#Rmasi iqbal img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);}

• Save Template

<div id="Rmasi Iqbal">
<a href="MASUKKAN-URL" target="_blank" title="TITLE"><img style="heigth: 100px; width: 100px;"border="0" src="URL GAMBAR" /></a>

</div>

 Keterangan:
- kode biru adalah Link web, dan link gambar
- kode merah adalah ukuran panjang lebar
- kode hijau adalah judul (ketika disorot mouse)
- kawan bisa perbanyak hanya tinggal Copy Paste, ingat jika kawan ingin gambarnya berbaris kawan Copy jangan dengan kode <div id="Rmasi Iqbal"> ------ </div> karena kode tersebut untuk membuat kolom baru.

• Kawan bisa memasang script Di- Design -> Tata Letak -> Tambah Gadget -> HTML/JavaScript, Di- Laman, juga Di- Postingan (sesuaikan dengan kebutuhan kawan)

Contoh
Jika kawan membuat script seperti berikut maka hasil dari script tersebut bisa kawan lihat di bawah.

<div id="Rmasiiqbal">

<a href="http://facebook.com/" target="_blank" title="Facebook"><img border="0" src="http://newbeingetop.files.wordpress.com/2011/11/logo-fb1.jpg" style="heigth: 100px; width: 100px;" /></a>

<a href="http://twitter.com/" target="_blank" title="Twitter"><img border="0" src="http://simplyzesty.com/wp-content/uploads//2011/08/Twitter-Logo-300x293.jpg" style="heigth: 100px; width: 100px;" /></a>

<a href="http://blogger.com/" target="_blank" title="Blog"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG22JbvkaK8lWhUqVUV7TwleePo2uwY1ebdgFqT5HwVxB15qjtTd8nZ7yUUQJhqmFNLRKIjI-qDtZqFZtnKeOrX7hCM1wERyzJcJVw7MjwArqq-4h_YOeKYJw02ygo5wZSPrVs8Qe8ijk/s1600/blog.png" style="heigth: 100px; width: 100px;" /></a>

<a href="http://kaskus.co.id/" target="_blank" title="Kaskus"><img border="0" src="http://kamarblogger.com/wp-content/uploads/2012/05/kaskus.jpg" style="heigth: 100px; width: 100px;" /></a>

</div>

<div id="Rmasiiqbal">

<a href="http://facebook.com/rmasiiqbal" target="_blank" title="Facebook Rmasi"><img border="0" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/539033_286809171427175_1234739455_n.jpg" style="heigth: 100px; width: 100px;" /></a></div>

Semoga sampai sini kawan sudah bisa mengerti.
Selamat mencoba. Semoga bermanfaat untuk semua.
Wasslamualaikum.Wr.Wb