Labels: Blog Design, Widget
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. Refrensi saya ambil dari BloggerMint
Untuk Demonya bisa lihat disini
Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatasnya menurut style yang sobat inginkan
Style Seacrh Box Dark
}
#search input[type="text"] {
background: url(http://www.bloggermint.com/demos/css3searchbox/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="text"]:focus {
width: 200px;
}
Style Search Box White
#search {
}
#search input[type="text"] {
background: url(http://www.bloggermint.com/demos/css3searchbox/search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) 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="text"]:focus {
width: 200px;
}
Style Search Box Black White
}
#search input[type="text"] {
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="text"]:focus {
background: url(http://www.bloggermint.com/demos/css3searchbox/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);
}
Langkah 3
Masuk ke "Tata Letak - Elemen Laman"
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Masukan (copypaste) kode dibawah ini pada bagian kolom:
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
Klik Save
Article Information:
Thanks to: BloggerMint.com
Semoga bermanfaat, selamat mencoba dan semoga berhasil
4 Komentar:
Ady Blink said on June 2, 2012 at 7:51 AM
Pagi kawan, he,,he,,, btw kayaknya keren neh model searchnya, aku pernah coba-coba buat lalu biar gerak gitu, eh malah ketika kursor diletakkan geraknya bukan kekanan malah kekiri jadi yah aku biarkan saja modelnya kayak sekarang yang penting orang dah bisa nyari udah cukup, he,,he,,,
Trijaya said on July 4, 2012 at 12:19 PM
Mhon info sob, cara bikin kolom yang isinya script itu gmna ya ? maklum pemula makasih sob
Muhammad Irham said on July 4, 2012 at 2:53 PM
@Trijaya ini sob caranya klik disini
Blogger Pemula said on July 12, 2012 at 4:43 PM
wah keren-keren nih tutorialnya, saya jadi senang sekali berkunjung ke blog ini. Isinya menarik, bisa jadi ilmu yang sangat berharga bagi blogger pemula. :D
Post a Comment