Cara Membuat Kotak Pencarian di Blog Dengan CSS

Cara Membuat Kotak Pencarian di Blog Dengan CSS - Tak lengkap rasanya ketika sebuah blog belum memiliki sebuah kotak pencarian, kotak pencarian ini sangat bermanfaat dan berguna bagi pengunjung blog yang sedang mencari artikel di blog kita yang mungkin bermanfaat dan sangat dibutukan bagi mereka, dengan begitu kita perlu menambahkan sebuah widget pencarian di blog kita untuk mempermudah pengunjung mencari arikel lainnya. Kotak pencarian pada blog banyak sekali bentuk dan macamnya, namun pada kali ini blog Ficri Pebriyana akan membagikannya dengan menggunakan CSS3, jadi ini merupakan kotak pencarian keren dan paling baru dengan menggunakan css3.

Ada kalanya setiap blog pasti memasang kotak pencarian namun ada juga yang tidak memasangnya, entah karena apa alasannya namun alangkah baiknya setiap blog menambahkan kotak pencarian di blog. Pada umumnya kotak pencarian atau search box ini hanya bawaan dari template blog itu sendiri, tapi disini kita bisa mengedit dan merubah tampilan search box atau kotak pencarian dengan menggunakan css agar lebih keren lagi. Nah, bagi Anda yang ingin mengganti kotak pencarian di blognya bisa menggunakan tutorial ini dengan kotak pencarian menggunakan css, silahkan baca tutorial cara membuat kotak pencarian di blog dengan css dibawah ini :

DEMO

1. Masuk ke Bloggger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode css dibawah ini, lalu paste diatas kode ]]></b:skin>

/*Search Box CSS3*/

#search{position:relative;float:right;margin:5px 10px 5px 10px}li.search{float:right;line-height:normal}#search input[type="text"]{float:left;background:#444;height:30px;line-height:30px;border:0 none;font-size:12px;font-weight:500;width:120px;padding:0 10px}#search input#search-button{height:30px;line-height:30px;background:#0054BB;border:1px solid #fff;float:right;padding:0 10px;cursor:pointer;color:#fff}#search input#search-button:hover{background:#333}#search input[type="text"]:focus{background-color:#fff;text-shadow:none!important;outline:none;color:#555}

5. Cari kode </nav> atau </navigation>
6. Copy kode html dibawah ini, lalu paste diatas kode </nav> atau </navigation>

<li class='search'>

<form action='/search' id='search' method='get'>

<input name='q' placeholder='Pencarian...' size='40' type='text'/><input id='search-button' type='submit' value='Cari'/></form>

</li>

7. Klik Simpan Template

Catatan :
1. Cara diatas adalah untuk menyimpan kotak pencarian dibagian navigasi.
2. Jika ingin menyimpannya selain di navigasi, silahkan simpan kode html dibagian Tata Letak dan mengganti kode li dengan kode div.
3. Untuk mengganti warna silahkan ambil kodenya disini Kode Warna HTML.

Sekian artikel mengenai Cara Membuat Kotak Pencarian di Blog Dengan CSS. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini