Cara Membuat Kotak Pencarian Search Keren Simple dan Responsive

Kotak Pencarian (Search Box) merupakan elemen atau widget penting dalam sebuah blog. 

Menurut pakar web usability, kotak pencarian wajib dipasang di situs web atau blog. "Kotak pencarian harus mudah dilihat dan sederhana". 

Fungsi Kotak Pencarian

Fungsi kotak pencarian adalah memudahkan pengunjung mencari informasi atau tulisan di blog sekaligus untuk meningkatkan pageviews.

Kotak pencarian juga sangat berguna untuk kita sebagai admin ketika akan membangun tautan internal (internal link building) sebagai salah satu elemen seo blog.

Admin PMB sudah beberapa kali share kode searching box yang dipasang di sidebar blog ini. Berikut Admin PMB kompilasikan untuk memudahkan pembuatan kotak pencarian yang sesuai dengan tema blog. 

Kotak pencarian simple responsive dan keren pertama adalah yang Admin PMB pasang di sidebar blog admin PMB, atau bisa lihat contoh di bawah ini:

Cara Memasang Kotak Pencarian di blog

Berikut ini cara membuat kotak pencarian responsif (mobile friendly), fleksibel, dan fast loading di sidebar blog.

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul widget kosongkan
3. Copas Code kotak pencarian simple responsive di bawah ini.
4. Save!

<style>.cf:before, .cf:after{    content:"";    display:table;}
.cf:after{    clear:both;}
.cf{    zoom:1;}   
 /* Form wrapper styling */.search-wrapper {width: 288px;margin:10px 0;box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);}
/* Form text input */
.search-wrapper input {width: 190px;height: 20px;padding: 10px;float: left;font: bold 14px 'lucida sans', 'trebuchet MS', 'Tahoma';border: 0;background: #EEE;border-radius: 3px 0 0 3px;}
.search-wrapper input:focus {    outline: 0;    background: #fff;    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;}
.search-wrapper input::-webkit-input-placeholder {   color: #999;   font-weight: normal;   font-style: italic;}
.search-wrapper input:-moz-placeholder {    color: #999;    font-weight: normal;    font-style: italic;}
.search-wrapper input:-ms-input-placeholder {    color: #999;    font-weight: normal;    font-style: italic;}   
/* Form submit button */.search-wrapper button {overflow: visible;position: relative;float: right;border: 0;padding: 0;cursor: pointer;height: 40px;width: 78px;font: bold 14px/35px 'lucida sans', 'trebuchet MS', 'Tahoma';color: white;text-transform: uppercase;background: #D83C3C;border-radius: 0 3px 3px 0;text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);}  .search-wrapper button:hover{       background: #e54040;}   .search-wrapper button:active,.search-wrapper button:focus{     background: #c42f2f;    outline: 0; }
.search-wrapper button:before { /* left arrow */    content: '';    position: absolute;    border-width: 8px 8px 8px 0;    border-style: solid solid solid none;    border-color: transparent #d83c3c transparent;    top: 12px;    left: -6px;}
.search-wrapper button:hover:before{    border-right-color: #e54040;}
.search-wrapper button:focus:before,.search-wrapper button:active:before{        border-right-color: #c42f2f;}     
.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */    border: 0;    padding: 0;}   </style><form action="/search" class="search-wrapper cf">        <input type="text" method="get" name="q" placeholder="Search here..." required="" />        <button type="submit">Search</button>    </form>

Demikian cara membuat dan memasang kotak pencarian search di blog kita. Jika shobat tertarik ingin mencoba memasang di template blog sobat, silahkan ikuti langkah langkah di atas sesuai tutorial yang Admin PMB berikan. semoga berhasil. 

Share This

Facebook Twitter Google+