Cara Membuat Search Box Seperti Search Box Google

Cara Membuat Search Box Seperti Search Box GoogleCara Membuat Search Box Seperti Search Box Google - Assalamualaikum Wr Wb. Halo Sobat Siang Siang gini enaknya Ngapain ya ?? o,O Tutorial Ini Sedang Saya baca Di Kompi Ajaib Lalu Saya Post.

Dengan search Box ini pengunjung yang ingin mencari kata tertentu di dalam artikel di blog kita tinggal memasukkan key word dan semua artikel yang mengandung kata tersebut akan muncul sebagai search result. Alamat Blog dan lebar search Box bisa diganti sesuai kebutuhan.


Cara Membuat Search Box Seperti Search Box Google


Simpan CSS Dibawah Ini Diatas Kode ]]></b:skin> Atau </style>

#search {background: #fff;border-radius: 2px;}
#search-form {color:gray;width:60%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #AAAAAA;border-radius:2px;}
.search-button,.search-button:hover{background-color:#4D90FE;border:1px solid #0955d3;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}

agar Search Box Tersebut Jadi Responsive ,, Ganti Ukuran Widht  atau Warna Biru diatas

Lalu Copy Kode Dibawah Ini Di HTML Javascript Sobat ,, Di TATA LETAK

<div id='search'>
<form id='searchform' action='/search' method='get' target='_blank'>
<input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Cari Disini....'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='http://2.bp.blogspot.com/-2jHjDZuQt-Q/Uluj1K7q-AI/AAAAAAAAaPE/k2uOoGDyrjw/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>

Simpan

DEMO

Artikel Yang Mungkin Anda cari :

Demikian Post  Cara Membuat Search Box Seperti Search Box Google Saya Hari Ini Semoga bermanfaat Bagi Kita semua ,, Wassalamualaikum Wr Wb..

Cara Membuat Search Box Seperti Search Box Google

Alternative Link : [ Click Here ... ]

Posted by Ramadhan Ashary | Published at 11.42

13 komentar :

  1. wah keren nihk kayaknya :D pasang ahk ..

    BalasHapus
  2. Tambah menarik lagi kalau di modifikasi seperti ini :)

    BalasHapus
  3. ane terapin dlu deh di blog ane :).. makasih infonya gan :D

    BalasHapus
  4. sip gan....unik search boxnya. tapi posisinya cocoknya di mana ya ? mampir ke sini mas bro ttg SEO siapa tau bermanfaat...http://portaldinamis.blogspot.com/2013/10/membuat-alt-tag-gambar-optimasi-membuat-blog-SEO.html

    BalasHapus
  5. harus dicoba ne mas
    tapi tidak berat loading blog kan tu mas

    BalasHapus
    Balasan
    1. Kalo Saya Sih Baik baik Aja Load nya ,, Itu cuma simple kok ,, tenang aja :D

      Hapus
  6. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  7. Keren Sob Search Nya ,, Makasih ya infonya

    BalasHapus

{ Harap Baca }

1. Harap berkomentar dengan bahasa indonesia yang baku tanpa singkatan.
2. Apabila Anda Komentar Thank's Info ,, Nice Post <-- Akan saya Hapus
3. Dilarang Live Link
4. Dilarang Berkomentar berbau Por** and SARA
5. Berkomentar lah Dengan Sesuai Postingan Diatas
6. Jika Anda Mengomentar Enggak Sesuai Topik Gunakan OOT

{+} Ingat Jangan Sekali Sekali Menaruh Link Hidup Maupun Link Mati

 
 
Copyright © 2014 Blog Mas Rama Template Design By | Pathmo