√ Cara Menciptakan Kotak Pencarian Keren Responsive Dengan Html/Javascript



Kotak Pencarian (Search Box) merupakan elemen/widget penting yang wajib ada di Blog. Kotak Pencarian ini memudahkan pembaca mencari gosip yang mereka butuhkan di blog kita.

Kotak pencarian juga berkhasiat untuk meningkatkan PageViews, bahkan juga diharapkan ketika ada postingan kita berganti permalink atau berubah linknya.

Berikut ini instruksi kotak pencarian yang ditampikan di sidebar blog dan cara memasangnya. Tampilannya menyerupai gambar di bawah ini.

 Kotak Pencarian ini memudahkan pembaca mencari gosip yang mereka butuhkan di blog kit √ Cara Membuat Kotak Pencarian Keren Responsive dengan HTML/Javascript

Cara Membuat Kotak Pencarian

1. Tata letak(layout) > Tambahkan Gadget > pilih HTML/JavaScript
2. Judul kosongkan.
3. Taruh instruksi berikut ini di kolom konten.

<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>

SIMPAN !

Karena Tombol Cari (Search Button) menggunakan Awesome Font, pastikan di template Anda sudah terpasang linknya. Jika belum ada, pasang instruksi ini di atas kode </head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

Enjoyy..

Sumber http://tiksatuweru.blogspot.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Subscribe to receive free email updates:

0 Response to "√ Cara Menciptakan Kotak Pencarian Keren Responsive Dengan Html/Javascript"

Posting Komentar