Search Box Dengan Style Css



search box atau kotak pencarian salah satu bagian penting dalam suatu blog, yang fungsinya berguna untuk memberikan sarana pada pengunjung saat mencari artikel lain yang pengunjung inginkan dan juga untuk menavigasi isi dari suatu blog.
Ok, kayaknya cukup sudah penjelasaannya, berikut tutorialnya.


Search Box Dengan Style Css

  • Login ke blogger
  • Pilih menu template >> edit HTML >> lanjutkan
  • Dengan menggunakan ctrl + F, cari kode ]]></b:skin>
  • Lalu letakkan kode di bawah ini tepat diatasnya
#search {
}
#search input[type="text"] {
background: url(http://2.bp.blogspot.com/-El7-211Pt7o/T5HBuBrNztI/AAAAAAAAAow/bV7f0allh4Q/s1600/cari.png) no-repeat 10px 6px #000;
border-color: #fff;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bbbbbb;
width: 110px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
-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: 150px;
}
  • Setelah itu copy - paste kode di bawah ini, dan letakkan di tempat yang anda inginkan. Misalnya di samping menu, letakkan kode berikut setelah kode menu anda.
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>

  • Setelah selesai simpan HTML kalian dan lihat hasilnya.

Keterangan :

  • Jika ingin merubah warna backgroundnya kamu dapat menggati kode yang berwarna kuning dengan kode warna yang anda inginkan
  • Jika ingin merubah warna bordernya anda tinggal mengganti kode yg berwana hijau dengan kode warna yang anda inginkan.


Demikian penjelasan saya tentang cara memasang Search Box Dengan Style Css. dan semoga bermanfa'at.


Related Post:

13 comments

November 16, 2012 at 11:06 PM

makasih gan dah share artikel ini

November 17, 2012 at 5:09 PM

sama2...

November 18, 2012 at 10:39 PM

nice post
kunjungan from
http://itsmymarkus.blogspot.com

November 19, 2012 at 1:46 AM

thx uda comment...

November 19, 2012 at 4:55 PM

thx atas commentnya...

November 19, 2012 at 6:20 PM

wah keren nih..
saya coba dulu ya?

November 19, 2012 at 6:41 PM

silahkan....

December 3, 2012 at 2:04 AM

nice post

vist balik ya madereastu.blogspot.com

December 3, 2012 at 2:30 AM

Ok, langsung meluncur....

December 12, 2012 at 8:22 PM

Anggota Deezclan ya sob :D

December 12, 2012 at 10:17 PM

iye, emangnya ada apa..???
kok nanya2.

June 7, 2013 at 10:54 PM

I Like Your blog \m/ :drume
Thanks Gun.......

Post a Comment - Back to Content

Peraturan :
• komentar Dilarang Berbau SARA
• komentar Dilarang FLODDING,SPAM Dan Lain Lain
• komentar Dilarang Berbau Link Hidup
• Gunakan URL kalian utk berkomentar