Cara Memasang Tombol Search With CSS Di Blog

Posted by : Rob 21 Jan 2013

Hallo Sobat kali ini admin akan post tentang Tombol Search With CSS untuk mempersingkat waktu langsung aja yuk .........

1. Letakan Code Dibawah ini di atas Code ]]></b:skin>

#search{float:right;margin-right:28px;margin-top:269px}#search input[type="text"]{border-left:3px solid orange; border-top:3px solid orange; border-bottom:3px solid white; border-right:3px solid white; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYWWV9nAHaVHnKouy61Yoow6wylTjB1x0rbJTHXHYtZrDjMJf1tsNoPNs18xdvjwGvaG0Az0FVC992QPF1DXnLoC5U0Mvsx_CuLgPgS5QB2uPMs_dO_-1UVrt0PNLgvna1Zw4GALNAcj0/s1600/cari.png) no-repeat 10px 6px #1D1E22;font:bold 12px 'Iceberg',cursive;color:#bbb;text-shadow:1px 1px 1px #000,-1px 1px 1px #000,-1px -1px 1px #000,1px -1px 1px #000;width:110px;padding:6px 15px 6px 35px;-webkit-transition:all .7s ease 0s;-moz-transition:all .7s ease 0s;-o-transition:all .7s ease 0s;transition:all .7s ease 0s;-webkit-border-radius:10px 0px 1px 10px-moz-border-radius:10px 0px 1px 10px;border-radius:0px;border-radius:10px 0px 1px 10px}#search input[type="text"]:focus{width:160px}

KETERANGAN

* code warna merah untuk mengatur batasnya
* code warna biru mengatur ketebalan border
* code warna kuning untuk posisi awal tombol search
* code warna hijau untuk mengatur posisi setelah mouse di arahkan ke tombol itu
* warna ungu untuk background

Letakan Code HTML di bwah ini terserah mw di mana aja yg penting tidak erorLalu Simpan Template Sobat :)Sekian Turial Dari Saya ^_^

Lalu Simpan Template Sobat :)

Sekian Tutorial Dari Saya :)

SEMOGA BERMANFAAT ^_^

sumber