March 1, 2016

Cara Memasang Kotak Pencarian (Search Box) Keren di Blog

By Romeltea | Published: March 1, 2016

Kotak Pencarian (Search Box) KerenCara Memasang Kotak Pencarian (Search Box) Keren di Blog

SEORANG pengunjung bertanya tentang kode kotak pencarian yang ada di sidebar kanan paling atas blog ini. Di bawah ini saya share kode dan cara memasangnya.


Sebelumnya, kita "analisis" dulu peran atau fungsi kotak pencarian dalam sebuah blog atau web. Menurut pakar Web Usability, Jakob Nielsen, kotak untuk mencari tulisan dalam sebuah web ini merupakan elemen penting.

Kata Nielsen, wajib hukumnya sebuah blog atau situs web memasang kotak pencarian. Jika tidak, maka itu termasuk kesalahan dalam desain web karena tidak ramah pengguna (user friendly).

"Kotak pencarian harus simple dan visible," tulis Nielsen dalam Search: Visible and Simple. "Search Box harus ada di homepage, halaman dalam, dan mudah dilihat," imbuhnya.

Cara Memasang Kotak Pencarian (Search Box) Keren di Blog

Saatnya kita pasang kotak pencarian di blog. Saya share dua jenis saja: kotak pencarian yang dipasang di blog ini dan kotak pencarian simple warna hitam.


Cara memasangnya:
1. Di dashboard blog, klik "Layout" > Add a Gadget > pilih "HTML/Javascript"
2. Copas salah satu kode di bawah ini.
3. Save!


Jika tampilannya tidka sesuai dengan ukuran sidebar blog Anda, silakan utak-atik angka di kode CSS.

1. KODE KOTAK PENCARIAN KEREN MERAH


KOTAK PENCARIAN KEREN MERAH

<style>
.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;


 /* Form wrapper styling */
.search-wrapper {
width: 300px;
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: 202px;
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>


2. KOTAK PENCARIAN SIMPLE HITAM
Kotak pencarian jenis ini saya pasang di Blog Romeltea.

 KOTAK PENCARIAN SIMPLE HITAM

<style>
.serching{margin:0;width:100%;}.serching form{border:1px solid #ddd;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:14px}.serching form input{display:block!important;margin:0;border:0;padding:5px 0;outline:0;height:20px;line-height:20px;font-size:13px;border-radius:0!important}.serch{float:left;width:85%!important;text-indent:10px}.serchg{float:right;width:15%!important;height:30px!important;padding:0!important;background:gray;color:#fff;border:0!important;font-size:12px!important}
</style>
<div class='serching'><form action='/search?q='><input class='serch' name='q' placeholder='Cari...' title='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> GO </button><span style='clear: both;display:block'/></span></form></div>


Ada yang lain gak? Buanyaaak! Jenis Kotak Pencarian lainnya, antara lain, bisa diintip di 10 Stylish Search Box for Blogger. Wasalam. (www.romelteamedia.com).*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

5 comments on Cara Memasang Kotak Pencarian (Search Box) Keren di Blog

  1. Mantap pak boss artikelnya, sangat membantu :)

    ReplyDelete
  2. Kalau untuk kolom pencarian seperti di blog ini gimana gan?, share dong gan.keren banget soalnya

    ReplyDelete
  3. Blognya Sangat bermanfaat dan membantu sekali bosku,👍

    ReplyDelete
  4. terimakasih untuk ilmunya bos, sangat bermanfaat sekali.

    ReplyDelete

Contact Form

Name

Email *

Message *