X
Facebook Twitter Google+
X
X
Website Search®
X
Blog Archive®
comment search

❖ Kotak Search / Pencarian Keren Dengan Css3

Pada kesmpatan ini saya akan tulis tentang tutorial cara membuat Search Form atau istilahnya  Kotak Pencarian, Sebelumnya saya juga pernah share tentang cara membuat Tombol/Button Dengan Css3. Dan juga membuat Tombol Sharing Is Sexy Menggunakan J-query. Dan kali ini blog DH-F akan share tentang cara membuat kotak search keren dengan Css3. Untuk contoh kotak searchnya lihat gambar dibawah ini.

Search form black
Search form

Lihat Demo

Cara pemasangan

Sobat login ke Blogger,
Setelah itu sobat mauk ke area Design/Tata Letak Blog
Selanjutnya sobat masuk ke area Edit HTML dan jangan lupa backup template anda
Setelah itu sobat cari kode ]]></b:skin>
Setelah ketemu tag ]]></b:skin> sobat masukan kode CSS di bawah ini tepat di atas tag ]]></b:skin>

.searchform {
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
    background: -moz-linear-gradient(top, #000, #444);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px #000;
    border: 1px #fff solid;
    display: inline-block;
    zoom: 1;
    *display: inline;
    border: solid 1px #555;
    padding: 3px 5px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
}

.searchform input {
    font: normal 12px Arial,Helvetica,sans-serif;
}

.searchfield {
    background: -webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638));
    padding: 6px 6px 6px 8px;
    width: 200px;
    border: solid 1px #222;
    outline: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: inset 0 1px 3px #222;
    -webkit-box-shadow: inset 0 1px 3px #222;
    box-shadow: inset 0 1px 3px #222;
}

.searchbutton {
    color: #fff;
    cursor: pointer;
    border: solid 1px #fff;
    font-size: 11px;
    height: 28px;
    width: 55px;
    text-shadow: 0 1px 1px #222;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
    background: -moz-linear-gradient(top, #000, #444);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}

Setelah selesai terus simpan / Save template blog sobat

Keterangan Code CSS
searchform : Kode CSS untuk memberi style kotak pencarian
searchform input : Kode CSS untuk memberi style kotak input
searchbutton : Kode CSS untuk memberi style pada tombol

Silahkan sobat ganti warna serta beckgrounnya supaya selaras dengan blog sobat.

setelah itu sobat masuk ke area Design/Tata Letak Blog dan tambahkan gadget HTML/JavaScript lalu sobat masukan kode di bawah ini

<form class="searchform" method="get" action="http://blog-anda.blogspot.com/search">
    <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" name="q" />
    <input class="searchbutton" type="button" value="Search" />
</form>

Sebelum di save sobat ganti tulisan yang bertanda (http://blog-sobat.blogspot.com/) dengan alamat blog sobat.

Pilihan-pilihan style warna kotak search

Search form black
Search form red

CSS RED

.searchform {
    background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
    background: -moz-linear-gradient(top, #aa1317, #ed1c24);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px #000;
    border: 1px #fff solid;
    display: inline-block;
    zoom: 1;
    *display: inline;
    border: solid 1px #555;
    padding: 3px 5px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
}

.searchform input {
    font: normal 12px Arial,Helvetica,sans-serif;
}

.searchfield {
    background: -webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638));
    padding: 6px 6px 6px 8px;
    width: 200px;
    border: solid 1px #222;
    outline: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: inset 0 1px 3px #222;
    -webkit-box-shadow: inset 0 1px 3px #222;
    box-shadow: inset 0 1px 3px #222;
}

.searchbutton {
    color: #fff;
    cursor: pointer;
    border: solid 1px #fff;
    font-size: 11px;
    height: 28px;
    width: 55px;
    text-shadow: 0 1px 1px #222;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
    background: -moz-linear-gradient(top, #aa1317, #ed1c24);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
Search form black
Search form black

CSS BLACK

.searchform {
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
    background: -moz-linear-gradient(top, #000, #444);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px #000;
    border: 1px #fff solid;
    display: inline-block;
    zoom: 1;
    *display: inline;
    border: solid 1px #555;
    padding: 3px 5px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
}

.searchform input {
    font: normal 12px Arial,Helvetica,sans-serif;
}

.searchfield {
    background: -webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638));
    padding: 6px 6px 6px 8px;
    width: 200px;
    border: solid 1px #222;
    outline: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: inset 0 1px 3px #222;
    -webkit-box-shadow: inset 0 1px 3px #222;
    box-shadow: inset 0 1px 3px #222;
}

.searchbutton {
    color: #fff;
    cursor: pointer;
    border: solid 1px #fff;
    font-size: 11px;
    height: 28px;
    width: 55px;
    text-shadow: 0 1px 1px #222;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
    background: -moz-linear-gradient(top, #000, #444);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}
Search form black
Search form blue

CSS BLUE

.searchform {
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    background: -moz-linear-gradient(top, #0078a5, #00adee);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px #000;
    border: 1px #fff solid;
    display: inline-block;
    zoom: 1;
    *display: inline;
    border: solid 1px #555;
    padding: 3px 5px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
}

.searchform input {
    font: normal 12px Arial,Helvetica,sans-serif;
}

.searchfield {
    background: -webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638));
    padding: 6px 6px 6px 8px;
    width: 200px;
    border: solid 1px #222;
    outline: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: inset 0 1px 3px #222;
    -webkit-box-shadow: inset 0 1px 3px #222;
    box-shadow: inset 0 1px 3px #222;
}

.searchbutton {
    color: #fff;
    cursor: pointer;
    border: solid 1px #fff;
    font-size: 11px;
    height: 28px;
    width: 55px;
    text-shadow: 0 1px 1px #222;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    background: -moz-linear-gradient(top, #0078a5, #00adee);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
Search form black
Search form green

CSS GREEN

.searchform {
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px #000;
    border: 1px #fff solid;
    display: inline-block;
    zoom: 1;
    *display: inline;
    border: solid 1px #555;
    padding: 3px 5px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
}

.searchform input {
    font: normal 12px Arial,Helvetica,sans-serif;
}

.searchfield {
    background: -webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638));
    padding: 6px 6px 6px 8px;
    width: 200px;
    border: solid 1px #222;
    outline: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: inset 0 1px 3px #222;
    -webkit-box-shadow: inset 0 1px 3px #222;
    box-shadow: inset 0 1px 3px #222;
}

.searchbutton {
    color: #fff;
    cursor: pointer;
    border: solid 1px #fff;
    font-size: 11px;
    height: 28px;
    width: 55px;
    text-shadow: 0 1px 1px #222;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}
Search form black
Search form orange

CSS ORANGE

.searchform {
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top, #f47a20, #faa51a);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px #000;
    border: 1px #fff solid;
    display: inline-block;
    zoom: 1;
    *display: inline;
    border: solid 1px #555;
    padding: 3px 5px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
}

.searchform input {
    font: normal 12px Arial,Helvetica,sans-serif;
}

.searchfield {
    background: -webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638));
    padding: 6px 6px 6px 8px;
    width: 200px;
    border: solid 1px #222;
    outline: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: inset 0 1px 3px #222;
    -webkit-box-shadow: inset 0 1px 3px #222;
    box-shadow: inset 0 1px 3px #222;
}

.searchbutton {
    color: #fff;
    cursor: pointer;
    border: solid 1px #fff;
    font-size: 11px;
    height: 28px;
    width: 55px;
    text-shadow: 0 1px 1px #222;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top, #f47a20, #faa51a);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
Search form black
Search form abu abu

CSS ABU ABU

.searchform {
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
    background: -moz-linear-gradient(top, #ededed, #fff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px #000;
    border: 1px #fff solid;
    display: inline-block;
    zoom: 1;
    *display: inline;
    border: solid 1px #555;
    padding: 3px 5px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
}

.searchform input {
    font: normal 12px Arial,Helvetica,sans-serif;
}

.searchfield {
    background: -webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638));
    padding: 6px 6px 6px 8px;
    width: 200px;
    border: solid 1px #222;
    outline: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: inset 0 1px 3px #222;
    -webkit-box-shadow: inset 0 1px 3px #222;
    box-shadow: inset 0 1px 3px #222;
}

.searchbutton {
    color: #000;
    cursor: pointer;
    border: solid 1px #000;
    font-size: 11px;
    height: 28px;
    width: 55px;
    text-shadow: 0 1px 1px #222;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
    background: -moz-linear-gradient(top, #ededed, #fff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}

Itu saja dulu yang bisa saya berikan, kalau ada waktu saya akan membuat warna-warna style yang lainnya

X

Posting Komentar

on/off contact message