Tutorial Blog: Cara Membuat Form Search Melebar setelah diklik seperti di website Apple.com

Senin, 07 Mei 2012

Tutorial Blog: Cara Membuat Form Search Melebar setelah diklik seperti di website Apple.comkarena dari kemarin, saya membahas hanya tentang komputer (saja). Biar tidak terkesan monoton, hehe. Author akan mencoba memutar haluan dari Komputer ke Blog. Kalo tidak salah, postingan sebelumnya membahas tentang Antivirus Terbaik (berdasarkan av-comparatives test versi 2011). Tutorial Blog kali ini akan membahas Cara Membuat Form Search Melebar setelah diklik seperti di website Apple.com.  Seperti yang kita ketahui, di website Apple.com terdapat sebuah search form atau kotak pencarian yang bisa melebar saat akan diketik atau saat diklik hendak diketik. Pada posting kali ini saya ambil dari sebuah blog luar yaitu myhavies.blogspot.com, dan saya akan bahas Cara Membuat Form Search atau Kotak Pencarian Melebar dengan mudah.
1. Masuk ke blogger sobat.
2. Pergi ke Design / Rancangan - Page Elements / Elemen Laman - Add a Gadget / Tambahkan Gadget - HTML / Javascript
3. Paste Kode berikut didalamnya dan Simpan
<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

4. Belum selesai, Pergi lagi ke Design / Rancangan - Edit HTML
5. Cari kode ]]></b:skin>, Paste kode - kode berikut, tepat diatasnya.


a. Untuk Search Form Dark Background
 
Tutorial Blog: Cara Membuat Form Search Melebar setelah diklik seperti di website Apple.com
CSSnya :
 #search {

}

#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;
}

b. Untuk Search Form Light Background
Tutorial Blog: Cara Membuat Form Search Melebar setelah diklik seperti di website Apple.com
CSSnya :
#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;
}

c. Untuk Style Apple.com
Tutorial Blog: Cara Membuat Form Search Melebar setelah diklik seperti di website Apple.com
CSSnya :
#search {

}

#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);
}

6. Sedikit sentuhan, Simpan Template. dan Lihat hasil kerja sobat.

Semoga dengan membaca  Tutorial Blog kali ini, sobat dapat membuat Form Search Melebar ala website Apple.com.. Semoga postingan ini dapat memberikan manfaat kepada pembaca dan tentunya dapat mempercantik blog yang sobat miliki.. :)


"Silahkan modif sendiri CSSnya sesuai dengan keinginan sobat. 
Kalau ada yang masih bingung, jangan segan - segan bertanya dengan berkomentar dibawah."

MAMUT PORTAL

Artikel-Tips-Tutorial-Komputer-Blog-SEO | Desain-Logo-Spanduk-Stiker-Pamflet-T Shirt-Cover Facebook | Free Download-Blogger Templates-Makalah-Software

Feedburner

masukkan email untuk berlangganan update artikel terbaru GRATIS dari Mamut Portal:

Fans Page

Followers