Cara Membuat Kotak Pencarian Blog Responsive - informasiajib

Cara Membuat Kotak Pencarian Blog Responsive

Hallo ! pada kesempatan kali ini saya akan memberikan sebuah tips dan masih seputar kegiatan blogging atau ngeblog. Pada artikel kali ini saya akan mengajarkan bagaimana cara membuat kotak pencarian yang SEO, Responsive, menarik dan tentunya user friendly untuk blog.

Sebuah kontak pencarian pada blog merupakan salah satu keharusan dan merupakan elemen penting didalam sebuah blog. Ini semua dikarenakan kotak pencarian pada blog sangat erat kaitanya dengan kenyamanan para pengunjung dalam mencari berbagai macam informasi yang dibutuhkanya dengan mudah didalam sebuah blog.

Kita pasti tidak akan pernah melihat semua blog yang ada di internet tidak dilengkapi dengan kotak pencarian itu dikarenakan kotak pencarian sudah merupakan sebuah kewajiban untuk blog. Akan tetapi masih banyak sekali blogger khususnya blogger baru yang bingung dan ingin menambahkan widget kotak pencarian pada blognya karena mungkin template blog yang digunakan tanpa kotak pencarian didalamnya dan alhasil kita harus membuatnya sendiri.


( sumber gambar : creativevip*net )

Membuat kotak pencarian untuk blog yang menarik dan tentunya responsive jika di akses versi desktop maupun mobile sebenarnya tidaklah sulit. Itu semua tergantung kepada teman-teman semua apakah kalian ingin belajar atau tidak.

Cara Membuat Kotak Pencarian Blog Responsive, SEO dan Menarik

1). Masuk ke Tata Letak > Tambahkan Gadget > Pilih HTML/Javascript

2). Untuk judul sendiri tidak perlu di isi ( Kosongkan )

3). Masukan Kode script dibawah ini kedalamnya

( Double click pada kode dibawah ini untuk memblock kode sebelum di copy )
<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {border: 1px solid #ebebeb;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: #54a8d0;cursor: pointer;}
</style>
<div id="search-box">
<form action="/search" id="search-form" method="get" target="_top">
<input id="search-text" name="q" placeholder="Search here..." type="text" vk_1c225="subscribed"/>
<button id="search-button" type="submit"><span><i class="fa fa-search"></i></span></button>
</form>
</div>

4). Terakhir klik tombol "Simpan


5). Lihat hasilnya. semoga berhasil ! jika ada pertanyaan silahkan berikan komentar dibawah ini.
Show Comments

0 Response to "Cara Membuat Kotak Pencarian Blog Responsive"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel