Cara Membuat Kotak Pencarian Paling Keren Dan Responsive Di Blog

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

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

Berikut ini tutorial membuat kota posting responsive di blog

Ada dua cara dalam membuat kotak pencarian

• Lewat edit HTML template blog
• Menambahkan lewat gadget langsung

Kita bahas cara pertama

1.Login ke Blogger.com Kalian

2. Pilih Template >> Edit Html

3. Kemudian Cari kode  ]]></b:skin> Copy dan pastekan kode di bawah ini tepat  atas kode 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 menu Tata letak. tambah Gadget  Pilih yang HTML Javascript

6. Kemudian Copy dan Paste kan kode 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 menu Tata letak Tambah Gadget  Pilih tambah HTML Javascript

3.Copy dan pastekan kode 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 selesai mudah bukan.

Keterangan: background-color: #1a7db7  ini adalah kode warna bila kalian ingin menganti warna silahkan ganti dengan warna pilihan kalian

Itu dia cara cara membuat kotak pencarian di blog mudah bukan semoga dapat membantu kalian,

Terimakasih

Selamat Mencoba .

TIPS BLOGGER LAINNYA

• Kode Warna HTML CSS Lengkap
• Siapa Blogger Terbaik Dengan Niche Tutorial Ngeblog
• Cara Mengaktifkan HTTPS Di Platfrom Blogspot.com
• Cara Menambahkan Icon Di Menu Navigasi Dengan Font Awesom
• Cara Membuat Sticky Widget Popular post di Sidebar Blog
• Cara Menambahkan Title Tag dan Alt Tag Pada Link Url Dan Gambar

Bagikan Artikel ini