Cara Membuat Kotak Pencarian Keren Simple Responsive

Cara Membuat Kotak Pencarian Keren Simple Responsive

Cara Membuat Kotak Pencarian Keren Simple Responsive
Cara Membuat Kotak Pencarian Keren Simple Responsive di Sidebar Blogger

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

Kotak pencarian juga berguna untuk meningkatkan PageViews, bahkan juga diperlukan saat ada postingan kita berganti permalink atau berubah linknya.

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

Kotak Pencarian Keren Simple Responsive

Cara Membuat Kotak Pencarian

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul kosongkan.
3. Copas kode 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>

Save!

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

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

Demikian Cara Membuat Kotak Pencarian Keren Simple Responsive. Good Luck & Happy Blogging! (www.contohblog.com).*

Labels: Desain Blog

Related Posts

0 Komentar untuk "Cara Membuat Kotak Pencarian Keren Simple Responsive"

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *