HOMEMembuat Search Box Keren
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:
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/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
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
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/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>
#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
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips & Cara
 |
Artikel Terkait Dengan "Membuat Search Box Keren "
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
sukses gan, makasih :D
ReplyDeleteBermanfaat nih gan tutorialnya.. thanks ya
ReplyDeleteBagus Sekali Gan Tampilan Search box Nya Saya Izin Sedot Codenya Salam Blogger Sukses terus Gan
ReplyDeleteSilahkan gan, terima kasih...
Deletethank u tipsnya
ReplyDeleteMksh
ReplyDelete