Widget Search Box Keren dengan css

Search box adalah kotak pencarian untuk mencari sesuatu yang kita ingin kan untuk itu bagi pengguna blog yang ingin memasang nya kini ada yang lebih keren lagi .. dengan css3 berikut caranya...

Cara Memasangnya Widget Search Box Keren dengan css3 Pasti Seperti Biasa Seperti CSS yang lain nya Pertama

1. Login ke Blogger >> Rancangan >> Edit HTML

2. Cari kode ]]></b:skin>

3. Letakan kode dibawah ini tepat diatas kode ]]></b:skin>

#search {
}
#search input[type=&quot;text&quot;] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheIUPuG5_YLDLDVTM9BsVvMTLbA6QiCE5MuHs__yXVl6Pp8O4PiYZXC0BzEsQL1uvfKWBSq0lx-Y81DblywiU_uPU6BdA8du1PmxUhs-92W98AVTaNUN-cWLi94xLzWa3bRbTDJQuoOb3W/s1600/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type=&quot;text&quot;]:focus {
width: 200px;
}

#search {
}
#search input[type=&quot;text&quot;] {
background: url(http://www.bloggermint.com/demos/css3searchbox/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type=&quot;text&quot;]:focus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheIUPuG5_YLDLDVTM9BsVvMTLbA6QiCE5MuHs__yXVl6Pp8O4PiYZXC0BzEsQL1uvfKWBSq0lx-Y81DblywiU_uPU6BdA8du1PmxUhs-92W98AVTaNUN-cWLi94xLzWa3bRbTDJQuoOb3W/s1600/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

4. Lalu Klik Pratinjau Kalau sudah tidak ada masalah lagi Tinggal Simpan Tempelats
5. Buka Tata Letak lalu Tambah Gadget Pilih HTML JAVAScript  dan masukan Scrip dibawah ini

<form method="get" action="/search?s=" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>

6.Klik Save / Simpan .Cukup Sekian Semoga Bermanfaat.

Title : Widget Search Box Keren dengan css
Posted by : Unknown
Published : 2013-04-06T21:03:00-07:00
Rating : 5
Reviewer : 99999 Reviews

Share :

• Tweet