Home » » Widget Search Blogger Ala Apple

Widget Search Blogger Ala Apple

Beautiful CSS3 Search Form
Apakah sahabat pernah berkunjung ke webnya Apple, coba perhatikan desain menu navigasinya bagian paling ujung sebelah kanan, disitu terdapat form pencarian yang cukup keren. Ketika Sahabat pengen memasukkan keyword atau kata kunci untuk pencarian maka secara otomastis  form pencarian akan melebar kesamping kanan dan kiri. Unik kan...
Bagi Sahabat yang tertarik dan ingin memasangnya di blog sahabat, ikuti langkah-langkah dibawah ini:

1. Login akun blogger Sahabat. Pilih menu Rancangan - Edit HTML
2. Cari taq ]]></b:skin> dan simpan kode css dibawah ini diatasnya.

#search {
}
#search input[type="text"] {
background: url(https://lh4.googleusercontent.com/-SBuAPGg_eJw/
Ts0EGS0F7lI/AAAAAAAAABQ/3gzoJ_ArAEs/s15/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;
}

3. Simpan template. Setelah itu letakkan kode search form berikut ini pada template Sahabat.

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


Kode search form ini juga bisa Sahabat tambahkan ke dalam Gadget lalu plih HTML/JavaScript simpan dan letakkan Widgetnya sesuai selera Sahabat.
Search form blogger versi Apple ini akan terlihat sempurna jika menggunakan browser Mozilla Firefox dan Opera atau menggunakan browser lainnya yang mendukung penggunakan CSS3.

 Lihat Demonya


Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Rohis Facebook

+ Create Comment + 8 Responses so far.

11 Januari 2012 14.44

hajar dulu pertamaknya :-bd

11 Januari 2012 14.47

Langsung praktek. :-bd

11 Januari 2012 15.04

Baha Andes@
selamat pertamaxx..*smile
semoga berhasil...

12 Januari 2012 21.28

wah mantap ni gan, nice tips

12 Januari 2012 21.41

nice tips gan, tahnks ya buat sharenya :)

14 Januari 2012 10.48

Wahidsahidu Blog@
iyaa..., blog akan terlihat lebih elegant... *smile

Cirebon-Cyber4rt@
sama2 kawand.. *smile

28 Januari 2012 21.54

Bookmark aja dulu, siapa tau ntar ane perlu nanti



My blog>>punyashodiq.blogspot.com

26 Februari 2012 21.28

langsung sedot kang tak pasang di www.dixywebsite.com

Posting Komentar

Terima Kasih banyak atas saran dan kritiknya.

Sama seperti peraturan yang dibuat oleh para blogger pada umumnya.., cuma disini saya harapkan agar para pengunjung untuk lebih fokus pada artikel kami yang bertemakan Agama (Islam), khususnya untuk saudara-saudari kami yang Muslim dan Muslimah.

0. Yang OOT silahkan masuk ke menu Buku Tamu/Blogwalking!
1. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
2. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
3. Harus Sopan
4. Admin tidak meladeni Debat kusir
5. Bercanda gk boleh ada unsur pornonya dan unsur Bohongnya
6. Silahkan melampirkan link Mati, gk boleh link hidup