sponsored ads

Membuat Search Box Keren

Posted By : Posted on - 11:25:00 AM with 6 comments

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:
<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 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>

Ganti kode yang saya blog dengan warna hitam dengan url gambar kesukaan anda dibawah ini:

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

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOZIlLD4-BNCdSwg331TYoGPNSAhKs3KekhaRVpqUgpz-sBULn91BCVSAMKEuGIxcqI62eygh0FHjAe2wh0L_46A8bOXxJvXYzChMs6Bl3ltb_V52aCLYCx0Q6fASVwrVtMnaqcLlmj5Hy/s1600/impoint.blogspot.com-blue.png

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihLisuXfCXesnZ7HcmZ1e34dI_67YhHssuQfP0_exvB6-QfKwlZEKpf0AunSqjHTM9qfvvaecOzJunniqKboUhLP6c85y0bGAde_wRUU0Jei61_7WQowFTbKJj-tOaFWPgmeiUy8KKiXk6/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 saya blok sesuai dengan warna yang anda inginkan dibawah ini:

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCNGqLGHUhkY2WxLrLuFNfefz2pOhvwsYxpIW9j8MP9-qmmp26l_cmQ78uIlKSu65BDskF9BpoPZYYt4xlUP6ol0vOEacyfjajP0snEM3mXzlM5xXQw8sAphB6u-IhtD3M9gWSYrnyq8iT/

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrJC3yBMhAarSC4AKeLO2mvJTodZF6AdjgsdF8hR30wRZFv7f8rGLSNBaUCPWeg_R6q_Po-sDgbzLVZRzcdN2LXt6iohSyVdav8hO3J5a9YTpCuwSAnbDrRs-0mINg2UdSEyAWADfEt6ZK/

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

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

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISanu9oWPaVfCZkPZliAAobg92oE4tvpA0UjYkMtk_n3UI7T4GQ6x96HNBxh8NwWKixdOrYkpize-FVUGGeTcG_p-9wGhinqUYKGlBYh2DaMdVfMEtziKZnE9-SKML9GhfcjIqj8vQHYu/

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

6 comments:

Ketentuan Berkomentar:

1. Menautkan link aktif (anchor text) pada komentar secara otomatis akan kami hapus
2. Gunakan fasilitas Name/URL untuk menempatkan link anda
3. Dilarang berkomentar diluar topik artikel (SARA, pornography, provokasi,promosi produk)
4. Dilarang komentar spam
5. Berkomentarlah dengan baik dan sopan
6. Komentar yang tidak sesuai dengan poin diatas tidak akan dipublikasikan


                                                                                  Admin Tips & Cara