Cara Menciptakan Kotak Pencarian Paling Keren Dan Responsive Di Blog

Sebenar nya menciptakan kotak pencarian ini bukan lah hal yang sulit sanggup di bilang praktis gampang susah widget satu ini wajib di pasang pada blog kalian alasannya dengan adanya tombol search button akan sangat membantu pengunjung blog kalian dalam menemukan artikel yang ingin di cari.

Dan pastinya kotak pencarian yang aku bagikan ini keren dan responsive abis dah dan support dengan perangkat mobile mengingat pengunjung blog kita tidak hanya dari dekstop

Berikut ini tutorial menciptakan kota posting responsive di blog

Ada dua cara dalam menciptakan kotak pencarian

Lewat edit HTML templat blog
Menambahkan lewat gadget langsung

Kita bahas cara pertama

1.Login ke Blogger.com Kalian

2. Pilih Templat >> Edit Html

3. Kemudian Cari kode ]]></b:skin> Copy dan pastekan arahan di bawah ini tepat atas arahan tersebut.

 /*Search Box*/ #search-box{position:relative;margin:0 auto;border:1px solid #ccc;padding:5px;border-radius:4px} #search-form{height:40px;background-color:#fff;overflow:hidden} #search-text{font-size:14px;color:#ddd;border-width:0;background:transparent;line-height:15px} #search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none} #search-button{position:absolute;top:5px;right:5px;height:40px;width:80px;color:#fff;text-align:center;border-width:0;background-color:#1a7db7;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0} #search-button:hover{background:#333}

4.Kemudian Klik Simpan

5. Masuk ke hidangan Tataletak. tambah Gadget Pilih yang HTML Javascript

6. Kemudian Copy dan Paste kan arahan di bawah ini .

 <div id='search-box'> <form action='/search' id='search-form' method='get' target='_top'> <input id='search-text' name='q' placeholder='Cari Artikel Disini ...' type='text'/> <button id='search-button' type='submit'><span>Search</span></button></form></div>

7. Simpan, dan lihat hasil nya.

Cara ke dua

1.Login ke Blogger.com Kalian

2. Pilih hidangan Tata letak Tambah Gadget Pilih tambah HTML Javascript

3.Copy dan pastekan arahan di bawah ini ke kolom HTML Javascript

<style> #search-box {position: relative;width: 100%;margin: 0;} #search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;} #search-text {font-size: 14px;color: #ddd; border-width: 0;background: transparent;} #search-box input[type="text"] {width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none;} #search-button {position: absolute;top: 0;right: 0;height: 42px; width: 80px;font-size: 14px;color: #fff;text-align: center; line-height: 42px;border-width: 0;background-color: #1a7db7; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; cursor: pointer;} </style> <div id='search-box'> <form action='/search' id='search-form' method='get' target='_top'> <input id='search-text' name='q' placeholder='Cari Artikel Disini...' type='text'/> <button id='search-button' type='submit'><span>Search</span></button> </form>

4. Simpan dan final praktis bukan.

Keterangan: background-color: #1a7db7 ini yaitu arahan warna kalau kalian ingin menganti warna silahkan ganti dengan warna pilihan kalian

Itu ia cara cara menciptakan kotak pencarian di blog praktis bukan biar sanggup membantu kalian,

Terimakasih

Selamat Mencoba .