Ads Box Dengan CSS

April 14, 2012

Bismillah
Mempercantik banner iklan dengan CSS dengan style BuySellAds , mungkin ini salah satu trik untuk menambah gaya blog sobat, biasanya blog-blog yang saya temui malah menggunakan gambar untuk mencurahkan isi hati untuk promosi terhadap visitor, itu menurut saya malah salah karena visitor terlalu bosen nunggu loading page yang lama, memeng terlalu banyak gambar akan memperlambat blog sobat, cukup sekian saja bincang-bincangnya.

DEMO

Cara Membuat Ads Box Dengan CSS

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Gunakan ctrl-f dan letakan kode CSS dibawah ini sebelum kode: ]]></b:skin>

/* 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_728 a.adhere{width:726px;height:90px;}
div.bsap_728 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_728 img{border:0;clear:right;}
div.bsap_728 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:128px;height:90px;line-height:730%;}
div.bsap_728 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>

body div.bsap_336 a.adhere{width:334px;height:280px;}
div.bsap_336 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_336 img{border:0;clear:right;}
div.bsap_336 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:336px;height:280px;line-height:2200%;}
div.bsap_336 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;}

Langkah 3
Klik Simpan template
Langkah 4
Masuk ke "Tata Letak - Elemen Laman"
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Langkah 5
Masukan (copypaste) kode dibawah ini pada bagian kolom:

Ukuran 125x125

<a href="http://koderator.blogspot.com/" class="ad1" title="KODE" id="bsa_1451626" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQIFFRFd619fO79kktkzP-UFDJSeRjO6_euf3XxUe9_lhCjNq64vdatQchbYSjMCi1SZP8buv4QBoypQ1n_ZEZmwwcvy69aXWhm-Y-buI7DuN71crwZYqVCgJ5ILFAjo7v4V-Czqq4Jw/s1600/logo.png" alt="KODE" height="125" width="125" /></a>
<a href="http://koderator.blogspot.com/" class="ad2 even" title="Koderator" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQIFFRFd619fO79kktkzP-UFDJSeRjO6_euf3XxUe9_lhCjNq64vdatQchbYSjMCi1SZP8buv4QBoypQ1n_ZEZmwwcvy69aXWhm-Y-buI7DuN71crwZYqVCgJ5ILFAjo7v4V-Czqq4Jw/s1600/logo.png" alt="Koderator" height="125" width="125" /></a>
<a href="http://koderator.blogspot.com/" class="ad3" title="KODErator" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQIFFRFd619fO79kktkzP-UFDJSeRjO6_euf3XxUe9_lhCjNq64vdatQchbYSjMCi1SZP8buv4QBoypQ1n_ZEZmwwcvy69aXWhm-Y-buI7DuN71crwZYqVCgJ5ILFAjo7v4V-Czqq4Jw/s1600/logo.png" alt="KODErator" height="125" width="125" /></a>
<a href="#" title="Advertise Here" class="adhere ad4 even" target="_blank">Advertise Here</a>

</div>

</center>

Ukuran 468x60

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

</div>

Ukuran 728x90

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

</div>

Ukuran 336x280

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

</div>

Keterangan

Warna Blok Hitam Link tujuan banner iklan
Warna Blok Pink Kode untuk setiap warna Box Ads, tersedia sampai ad11 / 11 warna
Warna Blok Merah Nama iklan
Warna Blok Biru Link gambar
Warna Blok Hijau Judul pemasangan
Warna Blok Ungu Penempatan iklan, hanya ada pada iklan ukuran 125x125 karena terletak pada dua posisi kanan dan kiri dan yang di Blok Ungu menunjukkan perintah penempatan sebelah Kanan

Gunakan kode dibawah ini untuk menambahkan gambar, caranya hapus tulisan yang Blok Hijau