Kotak Pencarian CSS3 Valid di W3C

Salam persahabatan
Sekarang tiba saatnya kita memulai widget kotak pencarian yang bergaya CSS3 dengan fungsi hover juga kita akan belajar bagaimana membuatnya valid di W3C. Saya akan memulai dengan kotak pencarian terlebih dahulu karena kalu widget followers, bloggroll,subcribe, gadget game, translator agak berbeda dan agak panjang. Kalau untuk kotak pencarian tidak terlalu rumit, apabila sobat tertarik silahkan lihat contoh kotak pencarian di bawah:

Bagaimana? kalu kurang menarik sobat bisa mendesain sendiri di kode css3 nya sesuai keinginan, okeh..sekarang bagaimana cara memasangnya dan membuat valid widget tersebut:
1.Masuk ke element laman kemudian klik add gadget
2.Pilih HTML/Javascript
3.Masukan kode dibawah di html/javascript tadi

   
4.Jangan lupa di save
Yups..itu belum selesai karena css3nya belum di masukan, nah..sekarang langkah selanjutnya adalah:
1.Masuk ke edit html
2.Centang Expand Widget Templates
3.Masukan kode di bawah di atas ]]></b:skin>

    #search{background : #EEE;margin : 0 0 10px 0;padding :11px 10px;width :230px;-moz-box-shadow : 4px 4px 4px rgba(0,0,0,0.3);-webkit-box-shadow :4px 4px 4px rgba(0,0,0,0.3);-moz-border-radius:10px;-webkit-border-radius:10px;font-size: 14px;line-height: 15px;}#searchform #s{width:162px;text-shadow:2px 2px 6px yellow;color:green;font-size:17px;}#searchsubmit{cursor:pointer;}.button{border:1px solid #aaa;-moz-border-radius:4px;-webkit-border-radius:4px;padding:2px 4px;}
    #search:hover{-moz-box-shadow : 4px 4px 14px blue;-webkit-box-shadow :4px 4px 14px blue;}

4. Kemudian cari kode <b:include name='quickedit'/> Dan di hapus kode tersebut
5.Save template dan lihat hasilnya

Nah..sekarang kotak pencarian sudah valid di W3C, untuk melihatnya sobat bisa mengunjungi http://validator.w3.org/ sobat perhatikan apakah ada komentar di W3C tentang eror kotak pencarian tersebut. Kalu mau bukti lebih lanjut saya sudah menyiapkan template yang valid dengan XHTML 1.0 dan html5 yang di sana kotak pencarian tersebut sudah valid. Biar ga penasaran silah kan klik link di bawah:

Tweet