Bosan dengan kotak pencarian yang gitu-gitu aja?
Coba aja ganti dengan yang lebih keren, dibawah ada beberapa pilihan untuk kamu pakai di blog kamu sebagai pengganti search box bawaan template.
Ga usah panjang lebar, langsung aja kamu praktikan biar ga penasaran.
- Pertama-tama Copy kode dibawah, Pilih salah satu yang sesuai dengan selera kamu
<style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZJ41R9bvS5VpLKMbfDer14M7dKiuuSrkmev3adgv5LxnlSQ6qwQ17BaIHWuP7VNck7TlyrdT7A0FPKouDh4jpZNxvIMr-nYxKa9jpSFkavx0RR_fkx7fC3r9jNDPGqTONGz2DhYje_VtM/s1600/search-box1.png) no-repeat;
width: 250px;
height: 65px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
padding: 5px 0px 5px 20px;
margin: 10px 15px 0px 0px;
border-width: 0px;
font-family: "Brush Script MT", cursive;
font-size: 12px;
color: #595959;
width: 65%;
font-weight: bold;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjGIwl_C6SCp-pOCFe0jHAEd3wGWsC3iv2fxwFxuhO9AJPHOi2E_3g1BBmT0LDsHveMv6lhk92ecqZ9xnPunddajhsh_Rucbg4eL_nbRUHToAB5fUUhetBD8kVfDgvLPHNeyhn24rR1bgJ/s1600/magnifier.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-top: 10px;
width: 19px;
height: 25px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo_egXKGoFg5Ou8nCZgZDZBZjpLO1vOYEsXC7L7dTV08udupj3p6OLPEYg2ZKAw4fFs2mekS9I7I7EiSBqoBNZT0FECs4GNGr7rGv7d4PRVCcrIhkduaGRwFqG3oIZ9V0N07X96KaV6S1o/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo_egXKGoFg5Ou8nCZgZDZBZjpLO1vOYEsXC7L7dTV08udupj3p6OLPEYg2ZKAw4fFs2mekS9I7I7EiSBqoBNZT0FECs4GNGr7rGv7d4PRVCcrIhkduaGRwFqG3oIZ9V0N07X96KaV6S1o/s1600/magnifier-hover.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
<input id="button-submit" type="submit" value="" />
</form>
<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 here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
<style>
#searchbox {
width: 240px;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS6NzChCcpHcSKdC3VIEbYQn58bBJw0W04Nh6wvQlJKcMb2yTdUh3tT8GoY-42F4pxPsiH3fENmfsf1Mu_M3_eecrT59fV9l1xOqOOSEXq3JW6ZMN0hHEi4QxHyLRkB3fyEL79WijNMvqP/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #6A6F75;
width: 160px;
padding: 14px 17px 12px 30px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
text-shadow: 0 2px 3px #fff;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw1pVink-EY8QKQE0bPD1b61WT3tJEl73cFGdLQHMLHzou6bZpjth4k0gzKU3r7TJdXk-0Ing3mht2dep1Cs05Q47trJVf_z0vpqrQ6kF5Zzdc-x7shDr4eeW6KXiq4ItipQ4q-hfQFHPN/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>
<style>
#searchbox {
background: #d8d8d8;
border: 4px solid #e8e8e8;
padding: 20px 10px;
width: 250px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS6NzChCcpHcSKdC3VIEbYQn58bBJw0W04Nh6wvQlJKcMb2yTdUh3tT8GoY-42F4pxPsiH3fENmfsf1Mu_M3_eecrT59fV9l1xOqOOSEXq3JW6ZMN0hHEi4QxHyLRkB3fyEL79WijNMvqP/s1600/search-dark.png) no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: #fff;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 55%;
padding: 8px 15px 8px 30px;
}
#button-submit {
background: #6A6F75;
border-width: 0px;
padding: 9px 0px;
width: 23%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #fff;
text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
background: #4f5356;
}
#button-submit:active {
background: #5b5d60;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>
<style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5BJxdl0R9tE-o0Ka7NzDBda18WQL3ZSVFseNkKb6GG1P0HmvYxbXB5W6as3KfUg0rLCKB0tYcwlSKY9TR5oVAxgLW_nK3un_b7yWt3DQG7dn1DzXqoTCL_r679OFFyg15DI-Y2OBYiD-N/s1600/search-box.png) no-repeat;
height: 27px;
width: 202px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
margin: 0px 0px 0px 12px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
font-style: italic;
width: 77%;
color: #828282;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqjhhNu00rRO-z0VvZY86IkmAJ8TLo7GjIW2giF-2DB7CZB0tiU3QMmLKjJ9eGGhabev3d_8wx4B5Y-ztwOTTaM3Y7IZ80arUknOu-p5z6vlTCMMZ077aM8Ao86fyDNctADdnzR4BQouDh/s1600/search-button.png) no-repeat;
border-width: 0px;
cursor: pointer;
width: 30px;
height: 25px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfIa3_9Jb2r4M0lG9fy-8TVPjZv-kOT8Bb6J4WxKPPYlYtMetSAZPlA6p91TR-Hdh4uBEGP_-Bh3h2QUMRJrnWBXvJ6DulK1x9CFji7bT5_30Bd84flnk2nnvYcPVH_X9uaoEJtzIS45rK/s1600/search-button-hover.png) no-repeat;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>
<style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5BJxdl0R9tE-o0Ka7NzDBda18WQL3ZSVFseNkKb6GG1P0HmvYxbXB5W6as3KfUg0rLCKB0tYcwlSKY9TR5oVAxgLW_nK3un_b7yWt3DQG7dn1DzXqoTCL_r679OFFyg15DI-Y2OBYiD-N/s1600/search-box.png) no-repeat;
height: 27px;
width: 202px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
margin: 0px 0px 0px 12px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
font-style: italic;
width: 77%;
color: #828282;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqjhhNu00rRO-z0VvZY86IkmAJ8TLo7GjIW2giF-2DB7CZB0tiU3QMmLKjJ9eGGhabev3d_8wx4B5Y-ztwOTTaM3Y7IZ80arUknOu-p5z6vlTCMMZ077aM8Ao86fyDNctADdnzR4BQouDh/s1600/search-button.png) no-repeat;
border-width: 0px;
cursor: pointer;
width: 30px;
height: 25px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfIa3_9Jb2r4M0lG9fy-8TVPjZv-kOT8Bb6J4WxKPPYlYtMetSAZPlA6p91TR-Hdh4uBEGP_-Bh3h2QUMRJrnWBXvJ6DulK1x9CFji7bT5_30Bd84flnk2nnvYcPVH_X9uaoEJtzIS45rK/s1600/search-button-hover.png) no-repeat;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>
<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 here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
Untuk kode yang berwarna Merah, kalian bisa ganti dengan kode warna yang kalian suka. Diatas ada beberapa contoh warna yang sudah dicoba.
Agar lebih mudah kalian bisa cek kode warnanya Disini
Agar lebih mudah kalian bisa cek kode warnanya Disini
<style type="text/css">#mediablogger-searchbox { border-radius: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxNdqvxb0p82xXD9I2Y4KKrVG7lKP_B2O1W8AQ1dtf-bj1Zj3cBfCB2_VQYW3BEkMQSYozrB8alc3zGp8LP8rLMEh5yRgM0OnuILDl6wts-BaUsjbBbpPYQ6jfulfBJ57oTcSxnuk6A2a6/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>
- Lalu masuk dulu ke blogger.com
- Pilih Tata Letak
- Klik Tambahkan Gadget, pilih letak yang sesuai dengan selera kamu, bisa diatas, ditengah atau dibawah.
- Pilih HTML/Java Script
- Pastekan kodenya disini
Ada juga sih yang pake Widget Search Box y yang dipasang di bagian Tema atau HTML seperti bawaan template gitu, katanya sih itu lebih aman atau ga bikin loading lambat. Cuma caranya agak ribet.
Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
Kami menerima masukan dari anda jika memang ada pembahasan yang keliru.
kami sangat senang jika anda dapat berkontribusi untuk menyempurnakan postingan kami.
EmoticonEmoticon