Nur Magic

Blog Tutorial kali ini membahas bagaimana membuat Kotak Iklan dengan CSS contoh demonya seperti diblog ini disamping, khusus pengiklan atau Advister yang ingin mengiklankan iklannya diblog shobatm sebelumnya saya ucapkan kepada saudara saya donorilmu yang telah memberikan script ini untuk saya publikasikan, oke langsung ke TKP

/* 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;}

4.Selanjutnya klik Save Template Belum Berakir!
5.Pergi ke Elemen Laman > Tambah Gadget > HTML/JavaScript Masukan kode berikut
Ukuran 125x125

<center>

<div id="bsap_125" class="bsap_125 bsap">

<a href="#" class="ad1" title="video screen capture" id="bsa_1451626" target="_blank"><img src="http://s3.buysellads.com/1247056/82764-1320885024.gif" alt="video screen capture" height="125" width="125" /></a>


<a href="#" class="ad2 even" title="Premium plugins for WordPress" target="_blank"><img src="http://s3.buysellads.com/1250333/71206-1312344285.gif" alt="Premium plugins for WordPress" height="125" width="125" /></a>

<a href="http://donorilmu.blogspot.com/" class="ad3" title="DonorIlmu" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh6FoD43LwYW_wVc7iO2xCR18-6xQr2Wl-AwFLehw2wCmQOcYHpnNvjUc5-WQz8jtjDQkcLELmQPCJFLRf8bsw0OcUBitcjzoYgkYmHMXTwXB49R-euluvEmwWEYurNMtfuXkwWbNPSRs/s1600/donor.jpg" alt="DonorIlmu" height="125" width="125" /></a>


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

</div>

</center>

Bener Ukuran 468x60

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

-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

-Dan yang bergaris bawah seperti ad1,ad2,ad3 dan ad4 ini menujukan background radius berwarna. Misalnya ad1 menujukan warna merah dan ad2 meujukan waran oranye dan seterusnya sampai ad11,


-Kalau class even menujukan posisi iklan di sebelah kanan dan adhere meujukan class Pemasangan Iklan


LANGKAH TERAKHIR SIMPAN