Membuat Search Box Keren

Membuat Search Box Keren - Search box ialah kolom kotak pencarian yang disediakan untuk pengunjung berkhasiat mencari konten artikel yang mereka butuhkan, keberadaan widget search box ini sangat berguna, namun sayangnya widget search box bawaan google tampilannya berdasarkan para blogger kurang menarik, nah untuk itulah aku akan share menciptakan search box ini menjadi keren caranya pun cukup gampang tinggan tambahkan widget kemudian masukkan kodenya kemudian simpan, ttinggal anda letakkan widget tersebut sesuai impian 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 kemudian 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>

gg  Ganti aba-aba sesuai aba-aba 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>

Ganti aba-aba yang aku blog dengan warna hitam dengan url gambar kesukaan anda dibawah ini:

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtSIeoxLW0lsrutLyKvE2DfmsLj4HnIaihTqrz1HFRUHiAPiFhwJ6e3IEorcYZjb6f5JVtNKILKaNoJRtkFKCFbarbBWANZSvxJf1ezFhRoznejVz27KVwe-zXNGKAd8I4q2Pa2X-AG98h/s1600/impoint.blogspot.com-red.png

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8oS9W5beXOaBL4DsaQ9vYjeeiy_4YDzajBe_T4FnK4ZmsKS-93Uu-I8Mhqgvk8JRbJ3QDKjEtucbRUpKFLn8qJl6kPP287M8Brzy_pcKyMU_PxepYi2iGJz6vjXbv1oGbC3SJ6NrhhBW6/s1600/impoint.blogspot.com-blue.png

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZFCCWsLwI0dw3ab8j4PXuKDp41kjszRMBGjnvudSo0kAAvFLFKX_rwoHwW0LESD6CWbF5FECnuAWGiFTR2lVs8rKtXZdA9S_d2ZQgPizaMAm0czRK5_gOqK8-vVr6nZuL6RRLluOwOsVs/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>

Ganti url yang aku blok sesuai dengan warna yang anda inginkan dibawah ini:

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WHd2rwqSdaB8f7MJNzdZTtlh3309B7YTSQ3W_nwMGLcIWZCf7l318_YZeLjH7TmzSgGT108gWXFQMVi0LxrMBnLKsuNgOd2tMCgEjqN8RbWTvNx5VwRNialLUBunqIfU5N1nQxUTtWxx/

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUamsGpJCxkvugH16f23vSnij7CAmu8T94-gaLAJZyMC18NtAEI4Xq5MDdi5Dod1vZzamLsRGIwrTnvExo1hk7rTsm8R3VgNH2NiaQyi9vA5S5b5j7ERpSuzBjBZvhQCLc-_IsCymePGyK/

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheyZz1UAojKQpjwkWphJ_kZh8aOMJPOAMnpS46yAM-0zwt6XmATwAWu8T-JkYax7ZN-ntJD-pJmaW3Q22Bavz9pM0_-CPq-lvPbPC7K-WMLoUAcGafGm0rY2ZDZxpIOuhaWQntiiiGfC-e/

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZHsF9Ovejb809ADx_p7OD-CSJdDNOEtYgeuh4Mb9-7bGi6evmSzU8fkyT-kiEde4Sp7yfmYGWs1qKfz0Y-aIAzN_K9zv8hueH2tA5hAGE_3L-0quZTcqx3aWdQUaeA6Ht7xZuy95-ItmO/

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9pemuIXFhSpLb3UlPd4xW6mUzNGSNQIM3vAZkODeCXx0DSwLizhl5kOaMA58nPaFPoJixep1tDRzm5JIbqCMfL6xE80mLtMaGRn7VIrXUV6g5GxuWVUcjF3rOh2SPYPwzSm9x1MK8ce_n/

Demikian tutorial cara menciptakan search box keren, mungkin anda juga perlu membaca:
Membuat majemuk popular post keren
Membuat Label keren
Menghias link kredit footer
Membuat Navigasi nomor di bawah halaman
Membuat Header 2 kolom

Share this post