T10/25/2016

Membuat Form Search Box Flat Responsive Di Blog


Membuat Search form memang agak sulit apalagi membuatnya sendiri. Kebanyakan orang membuat yang sudah ada dari blog orang lain. Kalau saya sendiri redesign ya gan.. Lumayan hasil nya juga.

Jika tertarik silahkan baca sampai habis biar mudah di mengerti.

Search Box sangat berpengaruh untuk mencari artikel yang sudah tenggelam alias artikel sudah paling bawah dan susah di temukan. 

Contohnya Bisa dilihat di Gambar di atas
Silahkan 
pertama Kita pasang dulu CSS nya dan copy CSS dibawah dan pastekan diatas </style> atau ]]></b:skin>

#search-box {
    position: relative;
    margin: 0 auto;padding:5px;
}
#search-form {
    height: 40px;
    background-color: #fff;
    overflow: hidden;
border-radius:30px;
}
#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: #4dc677;
    cursor: pointer;
text-transform:uppercase;
border-radius:25px;outline:0;
}
#search-button:hover {background:#333;}

Setelah itu silahkan pilih salah satu step dibawah

Cara 1 Menerapkan Di Tata Letak widget
Step membuatnya sangat mudah. 
1. Silahkan buka Blogger.COM 
2. klik menu tata letak
3. Pilih widget yang masih kosong
4. Pilih html/javascript
Jangan lupa Ubah ke html

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='pencarian..' type='text'/>
<button id='search-button' type='submit'><span><i class="fa fa-search" aria-hidden="true"></i> </span></button></form></div>

Simpan dan lihat hasilnya
Cara ke 2 Masukan ke Html
Edit html
Cari kode nav
Copy html dibawah dan pastikan di atas html nav tadi

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='pencarian..' type='text'/>
<button id='search-button' type='submit'><span><i class="fa fa-search" aria-hidden="true"></i> </span></button></form></div>


Simpan
Dan lihat template kamu.
Jika bingung silahkan komentar dibawah

Show/Hide Comment

Muat Lebih Banyak
About Author

Menjadi Seorang Blogger Yang Berguna Untuk Orang Lain Dan Tetap Berbagi Ilmu Walau Hanya Sepotong Kata
Follow Me :
Related Article