Membuat Banner Iklan CSS3

Salam OT sahabat, sekarang lagi senengnya saya bahas tentang CSS3 jadi untuk minggu ini mungkin saya akan membahas tuntas tentang CSS3 yang lagi buming di dunia Web ini. Sekilas memang css tidak memberikan efek yang keren dibandingkan dengan jquery namun untuk kedepannya para webmaster ingin mengembangkan tentang CSS3. CSS3 memang fenomenal dengan efek-efek yang ingin mendekati dengan javascript ataupun jquery, walapun tidak se indah jquery namun efek yang di timbulkan css tidak membuat blog kita menjadi berat atau lama untuk di akses.

Untuk kesempatan ini saya akan membahas bagaimana cara membuat banner iklan dengan CSS3. CSS3 yang saya gunakan untuk membuat banner Iklan dengan css3 ini antara lain : CSS3 Background Gradient dan Drop Shadow lalu menambahkan penggunan css inline. dengan komposisi tersebut jadilah sebuah kotak banner iklan dengan CSS3.

Advertise Here

Nah setelah melihat komposisinya sekarang kita lihat cara memasangnya.

1. Seperti biasa kita login dulu ke blogger
   
   
   
   
   
2. setelah login masuk ke halaman Rancangan (dulunya Tata Letak)
   
   
   
   
   
3. nah setelah berada pada Elemen Halaman, tambahkan sebuah gadget (untuk letaknya saya sarankan di sidebar)
   
   
   
   
   
4. setelah menambahkan sebuah gadget, pilih yang HTML/Java script
   
   
   
   
   
   
5. lalu taruh kode di bawah ini kedalamnya
   
   
   <div style="margin:15px;">
   
   <a target="_blank" href="#"><div style="height:125px; width:125px; border:1px solid #fff; background:#f3f3f3; float:left; background: -moz-linear-gradient(top, #0b2b61, #1153c0);
   background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));-moz-box-shadow: 2px 3px 10px #585858;-webkit-box-shadow: 2px 3px 10px #585858;">
   <p style="text-align:center;font-size:14px;color:#ffcc66;padding:35px 0 0 0;">Advertise Here</p>
   </div></a>
   
   <a target="_blank" href="#"><div style="height:125px; width:125px; border:1px solid #fff; background:#f3f3f3; float:right; -moz-box-shadow: 2px 3px 10px #585858;background: -moz-linear-gradient(top, #0b2b61, #1153c0);
   background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));-webkit-box-shadow: 2px 3px 10px #585858;">
   <p style="text-align:center;font-size:14px;color:#ffcc66;padding:35px 0 0 0;">Advertise Here</p>
   </div></a>
   
   <a target="_blank" href="#"><div style="height:125px; width:125px; border:1px solid #fff; background:#f3f3f3; float:left; background: -moz-linear-gradient(top, #0b2b61, #1153c0);
   background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));-moz-box-shadow: 2px 3px 10px #585858;-webkit-box-shadow: 2px 3px 10px #585858;">
   <p style="text-align:center;font-size:14px;color:#ffcc66;padding:35px 0 0 0;">Advertise Here</p>
   </div></a>
   
   <a target="_blank" href="#"><div style="height:125px; width:125px; border:1px solid #fff; background:#f3f3f3; float:right; -moz-box-shadow: 2px 3px 10px #585858;background: -moz-linear-gradient(top, #0b2b61, #1153c0);
   background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));-webkit-box-shadow: 2px 3px 10px #585858;">
   <p style="text-align:center;font-size:14px;color:#ffcc66;padding:35px 0 0 0;">Advertise Here</p>
   </div></a>
   
   <a target="_blank" href="#"><div style="height:125px; width:125px; border:1px solid #fff; background:#f3f3f3; float:left; background: -moz-linear-gradient(top, #0b2b61, #1153c0);
   background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));-moz-box-shadow: 2px 3px 10px #585858;-webkit-box-shadow: 2px 3px 10px #585858;">
   <p style="text-align:center;font-size:14px;color:#ffcc66;padding:35px 0 0 0;">Advertise Here</p>
   </div></a>
   
   <a target="_blank" href="#"><div style="height:125px; width:125px; border:1px solid #fff; background:#f3f3f3; float:right; -moz-box-shadow: 2px 3px 10px #585858;background: -moz-linear-gradient(top, #0b2b61, #1153c0);
   background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));-webkit-box-shadow: 2px 3px 10px #585858;">
   <p style="text-align:center;font-size:14px;color:#ffcc66;padding:35px 0 0 0;">Advertise Here</p>
   </div></a></div>
   
   Catatan : Trik ini akan berfungsi dengan baik apabila element tempat menaruh widget ini mempunyai lebar 295px keatas dan apabila elemen tersebut mempunyai lebar lebih dari itu sobat dapat mengatur margin
   
   
6. Setelah itu simpan deh

Mungkin trik ini kurang sempurna karena trik ini buatan seorang newbie, newbie tersebut adalah saya sendiri . Walapun kurang sempurna kalau sobat dapat menyesuaikan dengan template sobat mungkin Banner Iklan dengan CSS3 ini akan lebih baik dari pada sobat tidak mengutak-ngatik Banner ini. Sekarang saya akhir dahulu y. Terima kasih dan Happy Blogging .


Lihat juga Trik Banner Iklan lainnya :

• Kotak Banner Dengan CSS Inline
• Membuat Kotak Iklan Berjalan
• Membuat kotak Banner Iklan
  

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg