Cara Membuat Kotak Pencarian di Blog Dengan CSS

Cara Membuat Kotak Pencarian di Blog Dengan CSS - Ficri Pebriyana
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 :


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...

40 Komentar untuk "Cara Membuat Kotak Pencarian di Blog Dengan CSS"

  1. keren ya mas demonya... makasih sharingnya ntar dicoba :)

    BalasHapus
  2. Hmm... Sepertinya belum merasa perlu masang. Mungkin suatu saat

    BalasHapus
  3. makasih sharingnya nti dicoba

    BalasHapus
  4. wah... sepertinya nggak terlalu sulit juga kalau kodenya lengkap begitu yia bos, ijin kopi kode dan mempraktekannya yia bos...

    BalasHapus
  5. makasih bang dapet ilmu l;g tentang SS

    BalasHapus
  6. wah keren sob. ijin coba..

    BalasHapus
  7. thanks tutornya sob!! :-d sangat membantu sekali :)
    visit juga http://animesidrap.blogspot.com/

    BalasHapus
    Balasan
    1. iya sob, sama-sama...semoga bermanfaat,,,

      Hapus
  8. Waa Hebat Bener Demonya .....

    BalasHapus
  9. oh ternyata gtu ya ,, makasi banyak ya gan ,, baru tau nih maklum newbi :) .

    kunjungi balik ya gan, lagi di renofasi kwkwkw http://seopribadi.blogspot.com

    BalasHapus
  10. Mantep gan, keren ane coba dulu jika berkenan mampir ya :) http://mtsdupui-majalengka.blogspot.com/

    BalasHapus
  11. Keren Tutorialnya,., Kunjungi balik yaa ~>> www.wapliketrap.blogspot.com

    BalasHapus
  12. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  13. Kalo gak ada atau gimana bos ?

    Kunjungi balik ya...
    http://blog-yhan12.blogspot.com

    BalasHapus
  14. Maksudnya gak ada nav atau navigation

    BalasHapus
  15. artikel ini sangat bermanfaat, thnks broo...

    BalasHapus
  16. borneotutorials
    asik juga gan demonya...kereeennnnn gan
    thank sukses selalu gan...

    BalasHapus
  17. keren dimananya ya
    perasaan semua demo seperti itu :D

    BalasHapus
  18. makasih mas tutorial nya, saya memang lagi nyari ini. kalo bisa untuk tutorial pemasangan di atas header kaya punya mas ni.

    BalasHapus
  19. Cara pertama saya coba... tapi hanya berhasi pada tampilan web saja... jika saya buka blog sya via browser android itu tidak tampil.... mohon pnjelasan.

    BalasHapus
  20. Mantaap gan artikelnya, di tunggu artikel yang lainnya :)
    Izin share ya gan

    BalasHapus
  21. Makasik kak, tutorialnya sangat membantu

    BalasHapus
  22. Mantap infonya. Makasih admin. Salam Pemula.

    BalasHapus
  23. Mantap infonya. Makasih admin. Salam Pemula.

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting