Bener Iklan Dengan Style CSS BuySellAds

Iklan Style BuySellAds

Memper cantik bener iklan dengan style BuySellAds berukuran 125x125 dan 468x60. Kesannya akan sedikit unik dan menarik pengujung untuk melihatnya, anda bisa melihat Demo dan screenshot di samping. Ini tidak mengunakan jQuery atau apapun javascript lain melainkan dari script CSS. Terkadang juga saya sering melihat di setiap Bener Iklan Blog yang berukuran 125px mereka megunakan pemasangan iklan sebagai image, maksudnya seperti screenshot ini.

Baik anda sudah melihat demonya dan apakah saya mengunakan image sebagai link pemasangan? tidak sama sekali dan lihat stylenya bagimana sedikit unik bukan. Langsung ke topik cara penerapan.

1. Login di Blogger.com, pergi ke Template/Rancangan > Edit HTML
2. Tekan Ctrl+F cari kode ]]></b:skin> copy kode CSS berikut ini paste diatas 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_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;}
3. Selanjutnya klik Save Template Belum Berakir!
4. Pergi ke Elemen Laman > Tambah Gadget > HTML/JavaScript Masukan kode berikut
   
   Untuk Iklan Bener Ukuran 125x125
   Bisanya lebi bagus kalau diletakan di sidebar dengan ukuran lebar minimal 300px
   

   <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/AVvXsEhljvOYfn8CnOEPP4HdAJsIu7KqcDCNcHmO8alItPfHm4_K80BCoLk3KzUCSnLN9-DFTO_ABOtD_Q966yHiG71VfCE7RFCwnWXfR89AavTrHMADfXTFBgjNf6Igl8ZlJxv5o5XB7O23L4o/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>

   Untuk Iklan 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
5. Langkah terakhir klik Simpan

Read more »

CSS3 Menu Side Bergaya Vertikal Fixed

Menu CSS3

Saya telah melihat banyak situs yang memiliki menu navigasi vertikal fixed untuk meletakan link halaman yang terpenting buat mereka. Dalam artikel ini saya memperkenalkan gaya baru CSS3 menu vertikal fixed untuk blog blogger. Menu ini dilengkapi dengan 5 ikon. 5 ikon itu berisi dari Home, About, Services, Portfolio dan Contact us. Tapi Anda bisa mengubah ikon dan teks apapun yang Anda suka. Menu ini dirancang benar-benar menggunakan CSS3 dengan hanya satu gambar dan dapat diterapkan dengan mudah. Demo

1. Login ke Blogger.com, pergi ke Template/Rancangan > Edit HTML
2. Tekan Ctrl+F cari kode ]]></b:skin> copy kode CSS dibawah ini paste diatas kode ]]></b:skin>
   *{/* A universal CSS reset */margin:0;padding:0;}#navigationMenu body{font-size:14px;color:#666;background:#111 no-repeat;/* CSS3 Radial Gradients */background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));font-family:Arial, Helvetica, sans-serif;}#navigationMenu li{ list-style:none; height:39px; padding:2px; width:40px;}#navigationMenu span{ /* Container properties */ width:0; left:38px; padding:0; position:absolute; overflow:hidden; /* Text properties */ font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; /* CSS3 Transition: */ -webkit-transition: 0.25s; /*-o-transition: 0.25s;*/ /* Future proofing (these do not work yet): */ -moz-transition: 0.25s; transition: 0.25s;}#navigationMenu a{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjAwWUf873vzIMOAlKpOKnNXpg6cg1DN5BuQBoerougt5gzpWc5kvfgx2FU4GOjZN-9XJjT8MCoBjkgEbsIgGuX27uf5j5bPTzH7H2vp8D32Ulj8QdH2Xw4O6L5PL2pc5aKXOriC93K3Bg/s1600/navigation.jpg') no-repeat; height:39px; width:38px; display:block; position:relative;}/* General hover styles */#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }#navigationMenu a:hover{ text-decoration:none; /* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5;}/* Green Button */#navigationMenu .home { background-position:0 0;}#navigationMenu .home:hover { background-position:0 -39px;}#navigationMenu .home span{ background-color:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31;}/* Blue Button */#navigationMenu .about { background-position:-38px 0;}#navigationMenu .about:hover { background-position:-38px -39px;}#navigationMenu .about span{ background-color:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0;}/* Orange Button */#navigationMenu .services { background-position:-76px 0;}#navigationMenu .services:hover { background-position:-76px -39px;}#navigationMenu .services span{ background-color:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344;}/* Yellow Button */#navigationMenu .portfolio { background-position:-114px 0;}#navigationMenu .portfolio:hover{ background-position:-114px -39px;}#navigationMenu .portfolio span{ background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b;}/* Purple Button */#navigationMenu .contact { background-position:-152px 0;}#navigationMenu .contact:hover { background-position:-152px -39px;}#navigationMenu .contact span{ background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6;}
3. Selanjutnya cari kode </body> copy kode berikut ini paste diatas kode </body>
   

   <div style='position: fixed; top: 40%; left: 0%;'>
   <ul id='navigationMenu'>
   <li>
   <a class='home' href='/'>
   <span>Home</span>
   </a>
   </li>
   
   <li>
   <a class='about' href='#'>
   <span>About</span>
   </a>
   </li>
   
   <li>
   <a class='services' href='#'>
   <span>Services</span>
   </a>
   </li>
   
   <li>
   <a class='portfolio' href='#'>
   <span>Portfolio</span>
   </a>
   </li>
   
   <li>
   <a class='contact' href='#'>
   <span>Contact us</span>
   </a>
   </li>
   </ul>
   </div>

   Anda bisa menganti teks biru dengan lnik anda dan merah untuk judul
4. Langka terahkir klik Save Template

Read more »