Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Sabtu, 26 Juni 2010

Membuat Banner Iklan CSS3

Kategori : ,
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.


Nah setelah melihat komposisinya sekarang kita lihat cara memasangnya.
  1. Seperti biasa kita login dulu ke blogger

    Banner Iklan  CSS3

  2. setelah login masuk ke halaman Rancangan (dulunya Tata Letak)

    Banner Iklan  CSS3

  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

    Banner Iklan  CSS3

  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 oketrik.blogspot.com. 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 oketrik.blogspot.com.


Lihat juga Trik Banner Iklan lainnya :
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

19 Komentar untuk Membuat Banner Iklan CSS3

siip mantap sob...
tapi saya nggak pakek yang ini..
btw bermanfaat banget yang pemula sobat..

salam blogger

apa ya bedanya CSS3 dan CSS yang sebelumnya. . ??

thx 4 post gan.... :D

Kapan" di coba sob,, kalau sekarang lg ga terlalu butuh ... mantabs sob...

@jaya >> hehehe makasih gan, jangan lupa klik iklannya juga $_$

@m_chandra >> sevara sederhana dan simple CSS3 versi terbaru dari css dan mempunyai atribute baru juga sob dan atribute tersebut bertujuan untuk mengurangi penggunaan gambar dan javascript, itu menurut saya loh hehehehehe....

@kasih >> sama-sama ^_^

manteb pisan iki,,,
ane bungkus kang,, siapa tau sewaktu2 butuh

wah sama nih lagi seneng ama CSS3 yak sob....good gaya!!!

css 3 booming...
css 1 n 2 pun kurang ngerti saya??

css3?? Bussett.. perlu belajar dlu sob...
ane masih blum ngerti..

Aq udah pernah buat nih, tapi dah lupa,,, saya bookmark aja deh,, makasih gan...

Bagus kok tips bannernya. soalnya udah disuntikkan CSS3 yang paling baru. tapmilan bannernya juga ringan. gag banyak efek jadi bikin loading blog gag terganggu.:)

@Beben hahay, kita bisa saling sharing kang...

@jaka zulham >> halah, sama saya juga kurang ngerti kang...

@2012 >> hihihihi, sama kang ane juga perlu belajar, coz ane juga belum ngerti...

@Reza >> sip gaan...!!

@TUKANG CoLoNG >> walah disuntikan kaya apa aja sob,,,,

Oo begitu ya CSS3.. Tx mas triknya...

duh yg lagi ngefans ma css3.....

@oketrik->disuntik kayak pak dokter. :D

@TUKANG CoLoNG >> kamu susternya yah :D hihihihihi.....

klu memperbesar element tempat menaruh widget gimana bos?

perlu di coba ni tipsnya..mantap gan..

Want To Boost Your ClickBank Traffic And Commissions?

Bannerizer made it easy for you to promote ClickBank products by banners, simply visit Bannerizer, and grab the banner codes for your favorite ClickBank products or use the Universal ClickBank Banner Rotator Tool to promote all of the ClickBank products.