Cara Membuat Search Box Dengan CSS3

Diposting oleh SIMPANGblogger pada tanggal
Cara Membuat Search Box Dengan CSS3 SIMPANGblogger Kali ini Akan Mencoba mengasih Script Search Box Dengan CSS3 Sebetul nya Sarch Box ini Ciri Khas Apple.com Style Mungkin Sahabat 
Blogger Sudah Tidak Asing lagi Kalau melihat Gambar Dibawah ini, Tidak hanya pada produk Apple yang ada model search seperti ini, dalam situs resminya Apple.com juga menggunakan search ini, memang search model ini lebih bagus karena menggunakan script CSS 3 dan lebih enak dipandang. 
ALT






Cara Memasangnya 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/AVvXsEiyFjsZC9CLC1RnwouZCnNbtNvlzsqx0cMiTX3OW1U-CTqII3E-f4UE1cnnbPs_KciI6bNvk02XFXwduzEJf3IW1T2yPLy2J5Og6nR7Wy8d6l4jH7iLOvK1WGnabI2TgZ4HRvLsBqstkD9N/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;
}


ALT






#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/AVvXsEiyFjsZC9CLC1RnwouZCnNbtNvlzsqx0cMiTX3OW1U-CTqII3E-f4UE1cnnbPs_KciI6bNvk02XFXwduzEJf3IW1T2yPLy2J5Og6nR7Wy8d6l4jH7iLOvK1WGnabI2TgZ4HRvLsBqstkD9N/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.

Komentar

Posting Komentar