Cara Pasang Banner Iklan dengan CSS

Pasang Banner Iklan dengan Style CSS BuySellAds - Merubah tampilan iklan dengan size/ukuran 125 x 125 dan 486 x 60 kesannya akan semakin professional dan menarik apabila diterapkan pada blog berlabel bisnis dan jasa. Tampilan tersebut didesign seunik mungkin oleh authornya sehingga memikat hati para pengunjung yang datang akan semakin sempurna dan semakin berlama-lama di blog yang telah menerapkan iklan dengan style css yang satu ini. Jika Anda penasaran bagaimana bentuk dan tampilan dari iklan dengan style ini, Anda dapat melihatnya dengan mengklik Demonya. Setelah melihat demonya bagaimana pendapat Anda, apakah menarik, biasa saja, keren, jelek silahkan menilai sendiri. Sudah, tidak usah panjang lebar berbicara mari kita mulai pemasangannya.

(* Bagaimana cara memasangnya ?

(* Mari kita simak tutorial yang akan lewat di bawah ini.

Langkah Pertama,

• Silahkan kalian login dengan email dan password Anda ke blogger,

• Selanjutnya, pada dasboard blog Anda silahkan pilih Template,

• Selanjutnya, anda pilih Edit Html dan jangan lupa ceklist Expand Template Widget,
• Gunakan ctrl-F untuk mencari kode di bawah ini,

]]></b:skin>

• Setekah itu, letakan kode css di bawah ini sebelum kode di atas,

/* Ads
---------------------------------------------*/
div.bsap_125 a{width:125px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;float:left;line-height:100%;margin:0 4px 10px 0;}
div.bsap_125 img{border:2px solid #ddd;clear:right;padding:5px;}
div.bsap_125 a.adhere{color:#666;font-weight:bold;font-size:12px;border:2px solid #ccc;background:#e7e7e7;text-align:center;width:125px;height:125px;line-height:1000%;}
div.bsap_125 a.adhere:hover{border:2px solid #999;background:#ddd;color:#333;}
html>body div.bsap_125 a.adhere{width:123px;height:123px;}
div.bsap_468 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_468 img{border:0;clear:right;}
div.bsap_468 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:468px;height:60px;line-height:480%;}
div.bsap_468 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>body div.bsap_468 a.adhere{width:466px;height:58px;}
.bsap a{text-shadow:1px 1px 1px #111!important;color:#eee!important;overflow:visible!important;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;border:0 none!important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;margin:0 10px 10px 0 !important;padding:7px!important;}
.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
.bsap a img{border:0 none!important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px!important;}
.bsap .even{margin-right:0!important;}
.bsap .ad1{background:#e42b2b!important;}
.bsap .ad2{background:#ff8400!important;}
.bsap .ad3{background:#a800ff!important;}
.bsap .ad4{background:#49a7f3!important;}
.bsap .ad5{background:#41d05f!important;}
.bsap .ad6{background:#B24700!important;}
.bsap .ad7{background:#FFE500!important;}
.bsap .ad8{background:#007D47!important;}
.bsap .ad9{background:#330000!important;}
.bsap .ad10{background:#990000!important;}
.bsap .ad11{background:#f70000!important;}

• Selanjutnya, pilih Save Template.

Langkah Kedua,

• Silahkan kalian masuk ke Elemen Laman > Tambah Gadget > HTML/JavaScript,
• Masukan kode-kode berikut,

Kode iklan dengan ukuran 125 x 125

<center>
<div id="bsap_125" class="bsap_125 bsap">
<a href="Link Iklan 1" class="ad1" title="Judul Iklan 1" id="bsa_1451626" target="_blank"><img src="Kode Gambar Iklan 1" alt="Judul Iklan 1" height="125" width="125" /></a>
<a href="Link Iklan 2" class="ad2 even" title="Judul Iklan 2" target="_blank"><img src="Kode Gambar Iklan 2" alt="Judul Iklan 2" height="125" width="125" /></a>
<a href="Link Iklan 1" class="ad3" title="Judul Iklan 3" target="_blank"><img src="Kode Gambar Iklan 3" alt="Judul Iklan 3" height="125" width="125" /></a>
<a href="#" title="Advertise Here" class="adhere ad4 even" target="_blank">Advertise Here</a>
</div>
</center>

Kode iklan dengan ukuran 468 x 60

<div id="bsap_468" class="bsap_468 bsap">
<span class="bsap_468 bsap"><a href="#" title="Advertise Here" class="adhere ad1" target="_blank">Advertise Here</a></span>
</div> 

Keterangan,

• Warna Hijau Link Bener Iklan,
• Warna Oranye Judul Bener Iklan,
• Warna Biru Link Bener Iklan Gambar,
• Warna Kuning Link Pemasangan Iklan,
• Warna Ungu Judul Pemasangan. 

•  Langkah terakhir pilih Simpan 

Sumber :  http://d-owlie.blogspot.com/2013/02/pasang-banner-iklan-dengan-css.html