Membuat Search Box Keren - Search box adalah kolom kotak pencarian yang disediakan untuk pengunjung berguna mencari konten artikel yang mereka butuhkan, keberadaan widget search box ini sangat berguna, namun sayangnya widget search box bawaan google tampilannya menurut para blogger kurang menarik, nah untuk itulah saya akan share membuat search box ini menjadi keren caranya pun cukup mudah tinggan tambahkan widget lalu masukkan kodenya lalu simpan, ttinggal anda letakkan widget tersebut sesuai keinginan anda semua:
Semua widget search ini cara membuatnya hampir sama yaitu:
1. Log in ke blogger
2. Masuk tata letak
3. Tambahkan widget pilih HTML/ Javascript lalu masukkan kodenya
4. Simpan
Membuat Search Box versi 1:
gg Ganti kode sesuai kode warna pada gambar diatas sesuai warna kesukaan anda
Membuat Search Widget versi 2:
Ganti kode yang saya blog dengan warna hitam dengan url gambar kesukaan anda dibawah ini:
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWbBdf3fS7VFH-u8fYtAh7xLtHfTX2GVN49sqRbHUGnk8U44zyfdZuDbeRDSo3-G3mWQ5YbZkXnFBSCWZMZMqItn1Stt2uveEitoxT652aZ3X9NaqVtvSYMK54zXAS946egKZyrKfJEggo/s1600/impoint.blogspot.com-red.png
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaT6c3ukjFIMARf2zWZmGdZ5OQZSRe0qvTwLSuqOx9RRW1UIEMNa8byuM_nROpwlpUcN2lKOG2a6krVzddbLtbXNyPDztiGL-4XCEyfwP6Z50JeGzWRaTxJ2IcMfMj23HoexEzp5bzYnJj/s1600/impoint.blogspot.com-blue.png
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinNIXReZ4Ks_AmQgeip0_pv47BKzlpVey9EHCxr0YLVnQ9yMt6mcsAWbkifxyrygqs-7wqsWcBAYFjk8sKYVizC81JTM7IcouSLtANzGzZJOs8-kIk3CRFUffhkF7dxA_Lq-uCG8ge98ER/s1600/impoint.blogspot.com-orange.png
Membuat Search Widget Versi 3
Ganti url yang saya blok sesuai dengan warna yang anda inginkan dibawah ini:
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeLrl6DmwY7nZiA-5tLNztnBI8fXyoMnXEkiAr4IPAxmylxyJFqymbMsOO9IRWevech_jVuIVO-4ABNm_WbzLpZIiBq-LQXVv1_7dzTT-n_9N6T9U5dCzX0oYXWZZ9EpNl4ZDKWevp6HD3/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbNFWqh6EyZiqHuLqoU9m_gDkmpBMrN8707s139Y_vb2hVFLhBKVb7o-SohFvFhFz4FuovLKUGOLv6plT2r0I9afuckytM4iGXf7dJB41P0_weWhURSLkgvri8ZTqAfZ9ijgONn4p6KHX8/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit_r3yNy6fCn-kbTULS5YpDG47F1akw0br0BIkZSvspFhRt1nwcbfVTbCTUHJSGmhzXidRNindVWyWD7FBBZBTI9ryC3lDaOUOsRgT0BZnOsQIxpW4Qo3mYc-UuvBNkbQUiuZzBuJJrPqK/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGeBeIXSeC-HH9kbCLBWI7vhBVQLv15CmadHI1IziMVKf8CHgf7RoPSGKnPvtI42QRJlY35cYa_QKbqCj-so0MrHrJb7mcAPN1dc_8pk-K2-Mdt2bSRjGaZ4ehwxWKK4XmlkuR1fXPuF98/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8gVudte67pP0t3TAXrRqbkAtTfOHoGTTgzG5gDfwX78TB2-jNu3yM9WiKAVeL-QGfc7lTR0MGprngMAMD3AliJkI1rwtY-y84kuqWEEw70YrJ-gYlkp0rWGWS6fFKx7nS7tq1T0eZEVLU/
Demikian tutorial cara membuat search box keren, mungkin anda juga perlu membaca:
Membuat bermacam-macam popular post keren
Membuat Label keren
Menghias link kredit footer
Membuat Navigasi nomor di bawah halaman
Membuat Header 2 kolom
Semua widget search ini cara membuatnya hampir sama yaitu:
1. Log in ke blogger
2. Masuk tata letak
3. Tambahkan widget pilih HTML/ Javascript lalu masukkan kodenya
4. Simpan
Membuat Search Box versi 1:
<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
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: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
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 Keyword Here....' type='text'/>
<button id='search-button'
type='submit'><span>Search</span></button>
</form>
</div>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
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: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
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 Keyword Here....' type='text'/>
<button id='search-button'
type='submit'><span>Search</span></button>
</form>
</div>
gg Ganti kode sesuai kode warna pada gambar diatas sesuai warna kesukaan anda
Membuat Search Widget versi 2:
<style type="text/css">
#mediablogger-searchbox {border-radius: 5px; background: url(http://1.bp.blogspot.com/17dWPUuCMEE/UQr5WvW2inI/AAAAAAAAAWM/xWAzhlw4ez0/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent; width: 307px;height: 50px;disaply: block;}
form#mediablogger-searchform {display: block; padding: 9px 16px; margin: 0;}
form#mediablogger-searchform #s {padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent;} form#mediablogger-searchform#sbutton {margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top; border: none; background: transparent;}
</style>
<div id="mediablogger-searchbox">
<form id="mediablogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'onblur='if (this.value == "") {this.value = "Search...";}' />
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"/>
</form>
</div>
#mediablogger-searchbox {border-radius: 5px; background: url(http://1.bp.blogspot.com/17dWPUuCMEE/UQr5WvW2inI/AAAAAAAAAWM/xWAzhlw4ez0/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent; width: 307px;height: 50px;disaply: block;}
form#mediablogger-searchform {display: block; padding: 9px 16px; margin: 0;}
form#mediablogger-searchform #s {padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent;} form#mediablogger-searchform#sbutton {margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top; border: none; background: transparent;}
</style>
<div id="mediablogger-searchbox">
<form id="mediablogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'onblur='if (this.value == "") {this.value = "Search...";}' />
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"/>
</form>
</div>
Ganti kode yang saya blog dengan warna hitam dengan url gambar kesukaan anda dibawah ini:
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWbBdf3fS7VFH-u8fYtAh7xLtHfTX2GVN49sqRbHUGnk8U44zyfdZuDbeRDSo3-G3mWQ5YbZkXnFBSCWZMZMqItn1Stt2uveEitoxT652aZ3X9NaqVtvSYMK54zXAS946egKZyrKfJEggo/s1600/impoint.blogspot.com-red.png
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaT6c3ukjFIMARf2zWZmGdZ5OQZSRe0qvTwLSuqOx9RRW1UIEMNa8byuM_nROpwlpUcN2lKOG2a6krVzddbLtbXNyPDztiGL-4XCEyfwP6Z50JeGzWRaTxJ2IcMfMj23HoexEzp5bzYnJj/s1600/impoint.blogspot.com-blue.png
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinNIXReZ4Ks_AmQgeip0_pv47BKzlpVey9EHCxr0YLVnQ9yMt6mcsAWbkifxyrygqs-7wqsWcBAYFjk8sKYVizC81JTM7IcouSLtANzGzZJOs8-kIk3CRFUffhkF7dxA_Lq-uCG8ge98ER/s1600/impoint.blogspot.com-orange.png
Membuat Search Widget Versi 3
<style type="text/css">
#a-searchbox{background:url(http://lh5.googleusercontent.com/Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form></div>
#a-searchbox{background:url(http://lh5.googleusercontent.com/Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form></div>
Ganti url yang saya blok sesuai dengan warna yang anda inginkan dibawah ini:
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeLrl6DmwY7nZiA-5tLNztnBI8fXyoMnXEkiAr4IPAxmylxyJFqymbMsOO9IRWevech_jVuIVO-4ABNm_WbzLpZIiBq-LQXVv1_7dzTT-n_9N6T9U5dCzX0oYXWZZ9EpNl4ZDKWevp6HD3/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbNFWqh6EyZiqHuLqoU9m_gDkmpBMrN8707s139Y_vb2hVFLhBKVb7o-SohFvFhFz4FuovLKUGOLv6plT2r0I9afuckytM4iGXf7dJB41P0_weWhURSLkgvri8ZTqAfZ9ijgONn4p6KHX8/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit_r3yNy6fCn-kbTULS5YpDG47F1akw0br0BIkZSvspFhRt1nwcbfVTbCTUHJSGmhzXidRNindVWyWD7FBBZBTI9ryC3lDaOUOsRgT0BZnOsQIxpW4Qo3mYc-UuvBNkbQUiuZzBuJJrPqK/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGeBeIXSeC-HH9kbCLBWI7vhBVQLv15CmadHI1IziMVKf8CHgf7RoPSGKnPvtI42QRJlY35cYa_QKbqCj-so0MrHrJb7mcAPN1dc_8pk-K2-Mdt2bSRjGaZ4ehwxWKK4XmlkuR1fXPuF98/
gg https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8gVudte67pP0t3TAXrRqbkAtTfOHoGTTgzG5gDfwX78TB2-jNu3yM9WiKAVeL-QGfc7lTR0MGprngMAMD3AliJkI1rwtY-y84kuqWEEw70YrJ-gYlkp0rWGWS6fFKx7nS7tq1T0eZEVLU/
Demikian tutorial cara membuat search box keren, mungkin anda juga perlu membaca:
Membuat bermacam-macam popular post keren
Membuat Label keren
Menghias link kredit footer
Membuat Navigasi nomor di bawah halaman
Membuat Header 2 kolom
Tidak ada komentar:
Posting Komentar