Cara Membuat Kotak Pencarian (Search Box) Di Blog Keren Terbaru, silahkan ikuti tutorial
langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin pasang kotak search pada blog dengan menggunakan css dan html.
Ada 2 cara bikin search Box yang akan dibahas yaitu yang pertama melalui widget bawaan dari blog dan yang kedua dengan menggunakan kode sendiri baik pada sidebar, footer atau header.
Cara Memasang Search Box Bawaan Blog :
1. Untuk membuat kotak search lewat bawaan blog dengan cara masuk menu Layout / Tata Letak lalu klik Tambahkan gadget di tempat yang sobat inginkan misal sidebar
2. Kemudian cari pilihan widget Kotak Penelusuran dan klik tombol tambah
3. Setelah itu langsung saja centang semua seperti gambar dibawah ini dan klik Simpan
4. Terakhir klik Simpan setelan yang ada di pojok kanan atas.. Selesai untuk pasang search box bawaan blog
Cara Memasang Search Box Dengan Kode Sendiri :
1. Kalau sobat tidak ingin dari bawaan blog, sobat bisa membuatnya dengan cara kedua menggunakan kode sendiri yaitu masuk menu Tata Letak / Layout dan klik Tambahkan gadget pada posisi yang diinginkan misal sidebar
5. Kemudian klik tambah pada pilihan HTML/Javascript
6. Setelah itu masukkan script kode berikut ke dalam kotak konten tersebut
<br/><form action="http://carazain.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="28" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
#Ganti tulisan warna merah dengan alamat url link blog sobat
#Ganti angka warna biru untuk mengatur ukuran search box
Jika sudah, sobat bisa klik tombol Simpan / Save
7. Terakhir klik Simpan setelan yang ada di pojok kanan atas.. Selesai untuk pasang search box dengan kode sendiri
Berikut ini beberapa script kode buat sobat untuk membuat search box dengan tampilan yang keren - keren menggunakan kode sendiri :
<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/AVvXsEh7DeFcNFbEkYcqxxOBmR-siJ2F0XFhYuPNK5jWiptqtev-45Lny3d8AUCswn0kHmeW3hHZaINvySC5uHPb9CkW5V87hAftcvAierEUBY4aHXnbwAStjVcOwMzL8NnqD5KzNFOqz4s0RVrd/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>
#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/AVvXsEh7DeFcNFbEkYcqxxOBmR-siJ2F0XFhYuPNK5jWiptqtev-45Lny3d8AUCswn0kHmeW3hHZaINvySC5uHPb9CkW5V87hAftcvAierEUBY4aHXnbwAStjVcOwMzL8NnqD5KzNFOqz4s0RVrd/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 {
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/AVvXsEh7DeFcNFbEkYcqxxOBmR-siJ2F0XFhYuPNK5jWiptqtev-45Lny3d8AUCswn0kHmeW3hHZaINvySC5uHPb9CkW5V87hAftcvAierEUBY4aHXnbwAStjVcOwMzL8NnqD5KzNFOqz4s0RVrd/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/AVvXsEgumvavXFhnWoTPpRMpTQL-bZkfatiRxS5JPYbUHtrIkJCSoreaCZpeSrSM7zEDqrYf1Tn-qGckzlSuiPOzU5BXogh-pBSZZ8PkzdmhV5mcaHqnXO-SvMj64sB9UUY6P6eX_KrguB0VHf4A/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>
#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/AVvXsEh7DeFcNFbEkYcqxxOBmR-siJ2F0XFhYuPNK5jWiptqtev-45Lny3d8AUCswn0kHmeW3hHZaINvySC5uHPb9CkW5V87hAftcvAierEUBY4aHXnbwAStjVcOwMzL8NnqD5KzNFOqz4s0RVrd/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/AVvXsEgumvavXFhnWoTPpRMpTQL-bZkfatiRxS5JPYbUHtrIkJCSoreaCZpeSrSM7zEDqrYf1Tn-qGckzlSuiPOzU5BXogh-pBSZZ8PkzdmhV5mcaHqnXO-SvMj64sB9UUY6P6eX_KrguB0VHf4A/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: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSF9wIG0INRNebs-cdeLjk7VlS3wGxFbW9P4eNWOQqE0c63-zrlPgxwNfoVvHzcEaTq2ywbHbS8G7KWs0RWqj7bFgg1MY_DauJgUkA1Lqd1C85tsb6ZotW0er75AXxvG8qhLRXjSgZmtEJ/s1600/searchbar.png) no-repeat;
width: 208px;
height: 29px;
}
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: 3px 0px 0px 20px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
color: #828282;
width: 70%;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigF6WXxdTEhS8XJwurptaTgywvTfqlz5JuP1dpaEibYUdkuMURW0CPknBVEnKdFIZPgxvw0C5sTZ3v2xXY0rL8BkHVylfq4RdDYvr7AdoRtJ_6WsKv4-rm8jcE_zSg5wlXzkh1Gk8hPESk/s1600/magnifier.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-left: 10px;
margin-top: 4px;
width: 21px;
height: 22px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5szGgAAeJn-IM7t2utsLctORe4Uuf9kMz3GOO8JWCUXsJYFVelFn1eeU6bOeEl_jsqYV4ASlm-ChD1nppTovlSbXqd9Q4tuUxtaqXxryGqL8zIVRs1cD59MyxG9K7P5yBw5UYbNqup6-p/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5szGgAAeJn-IM7t2utsLctORe4Uuf9kMz3GOO8JWCUXsJYFVelFn1eeU6bOeEl_jsqYV4ASlm-ChD1nppTovlSbXqd9Q4tuUxtaqXxryGqL8zIVRs1cD59MyxG9K7P5yBw5UYbNqup6-p/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 name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSF9wIG0INRNebs-cdeLjk7VlS3wGxFbW9P4eNWOQqE0c63-zrlPgxwNfoVvHzcEaTq2ywbHbS8G7KWs0RWqj7bFgg1MY_DauJgUkA1Lqd1C85tsb6ZotW0er75AXxvG8qhLRXjSgZmtEJ/s1600/searchbar.png) no-repeat;
width: 208px;
height: 29px;
}
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: 3px 0px 0px 20px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
color: #828282;
width: 70%;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigF6WXxdTEhS8XJwurptaTgywvTfqlz5JuP1dpaEibYUdkuMURW0CPknBVEnKdFIZPgxvw0C5sTZ3v2xXY0rL8BkHVylfq4RdDYvr7AdoRtJ_6WsKv4-rm8jcE_zSg5wlXzkh1Gk8hPESk/s1600/magnifier.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-left: 10px;
margin-top: 4px;
width: 21px;
height: 22px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5szGgAAeJn-IM7t2utsLctORe4Uuf9kMz3GOO8JWCUXsJYFVelFn1eeU6bOeEl_jsqYV4ASlm-ChD1nppTovlSbXqd9Q4tuUxtaqXxryGqL8zIVRs1cD59MyxG9K7P5yBw5UYbNqup6-p/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5szGgAAeJn-IM7t2utsLctORe4Uuf9kMz3GOO8JWCUXsJYFVelFn1eeU6bOeEl_jsqYV4ASlm-ChD1nppTovlSbXqd9Q4tuUxtaqXxryGqL8zIVRs1cD59MyxG9K7P5yBw5UYbNqup6-p/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 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/AVvXsEgf0guIbkjfJvSOC-RGttaGGZhXK3MO8Wid91uchbbqBURCnSOMlC6Av1nER3OK8eaGIUX1MeTfM4JaDo0GeNKgsQzWJHB2sktWKtvSuq75YRFHOpOl25_Kc-zBoszXWQrQoNdtECvEOkuZ/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/AVvXsEg5oJz0P-INgI9APhBPSLBXCtF94OLJuFyqSptzU1I-LNcc1rOW623Y66QBeG4SIyQf0GxSImLeIJKmqsXWxGDoSoU40r9RrsmR7djFloCxGPHStcudKM71BR7hchgzcopkt6UbFtOcY758/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/AVvXsEiFDkccL1vqI7SltMgyCzU16uenKcKR4DAreXiRkbWE9c2pxqDY-r1cZBerXsITfUDkGwF4XT68TTuGCg_DEYbs_o-pacPyi_2uiKJaKL7OPWZab6NVzxhkRaYGN9of1UPwiUSbyFdID29M/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>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0guIbkjfJvSOC-RGttaGGZhXK3MO8Wid91uchbbqBURCnSOMlC6Av1nER3OK8eaGIUX1MeTfM4JaDo0GeNKgsQzWJHB2sktWKtvSuq75YRFHOpOl25_Kc-zBoszXWQrQoNdtECvEOkuZ/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/AVvXsEg5oJz0P-INgI9APhBPSLBXCtF94OLJuFyqSptzU1I-LNcc1rOW623Y66QBeG4SIyQf0GxSImLeIJKmqsXWxGDoSoU40r9RrsmR7djFloCxGPHStcudKM71BR7hchgzcopkt6UbFtOcY758/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/AVvXsEiFDkccL1vqI7SltMgyCzU16uenKcKR4DAreXiRkbWE9c2pxqDY-r1cZBerXsITfUDkGwF4XT68TTuGCg_DEYbs_o-pacPyi_2uiKJaKL7OPWZab6NVzxhkRaYGN9of1UPwiUSbyFdID29M/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/AVvXsEjtIYCtTO_nBrkuOzsETgiJj0R886_d8NUh460bXff4Da5VHyW64PhopYFUkKH1DzWl9EjzogIcNm1ccM-dx4YyHHqkUm7oJIs51RqKncAxghv-uGy5y6qu071jS6Q5iOF7te6eZShXb89Q/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/AVvXsEgtBM5Gw_o_j2ZVtmDvIW_sES_9ARWY7iOR9gZPGhMFa6bXtUFCwlaYMHlk_A3nsjXy9X3RCYt1WBtc9vN0dM_5B7SI6d_48zsJZQ5uQ3UUQp2tuYe-9b0cNGLXMymDhs763X27IugAMwhs/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/AVvXsEjHOZktOSZc8NWGLzBXuc1HH7jniBfh6x_QGfsir3rD5mCFaNnWxQVIbxJruWKfC54I3FUrfz-c12yrWTnaAsmYKfp45f_TlEz_Zwg557OUMYhi63oASCc5xWsS6YINAVmf4gPYyAdsdstl/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHOZktOSZc8NWGLzBXuc1HH7jniBfh6x_QGfsir3rD5mCFaNnWxQVIbxJruWKfC54I3FUrfz-c12yrWTnaAsmYKfp45f_TlEz_Zwg557OUMYhi63oASCc5xWsS6YINAVmf4gPYyAdsdstl/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>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtIYCtTO_nBrkuOzsETgiJj0R886_d8NUh460bXff4Da5VHyW64PhopYFUkKH1DzWl9EjzogIcNm1ccM-dx4YyHHqkUm7oJIs51RqKncAxghv-uGy5y6qu071jS6Q5iOF7te6eZShXb89Q/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/AVvXsEgtBM5Gw_o_j2ZVtmDvIW_sES_9ARWY7iOR9gZPGhMFa6bXtUFCwlaYMHlk_A3nsjXy9X3RCYt1WBtc9vN0dM_5B7SI6d_48zsJZQ5uQ3UUQp2tuYe-9b0cNGLXMymDhs763X27IugAMwhs/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/AVvXsEjHOZktOSZc8NWGLzBXuc1HH7jniBfh6x_QGfsir3rD5mCFaNnWxQVIbxJruWKfC54I3FUrfz-c12yrWTnaAsmYKfp45f_TlEz_Zwg557OUMYhi63oASCc5xWsS6YINAVmf4gPYyAdsdstl/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHOZktOSZc8NWGLzBXuc1HH7jniBfh6x_QGfsir3rD5mCFaNnWxQVIbxJruWKfC54I3FUrfz-c12yrWTnaAsmYKfp45f_TlEz_Zwg557OUMYhi63oASCc5xWsS6YINAVmf4gPYyAdsdstl/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>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-0Dv0ZoENz4J5VU7jY6U8cd6XNVt3DDbAoMNFep-T8nE-1abDa94sc4ixWMLnq_-tK1SbrZU4TQHjHsDWnxkqVStbyRAZpnSdj52u9W4u4ZT5BQER1canEuyCaTz5lHiNb2lLM3326DE/s1600/search-box.png) no-repeat;
}
#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: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: #f2f2f2 !important;
padding: 10px 35px 10px 20px;
width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji0xGtxcBwVLWnUevGLSNyXXEDX2LNyWiYnkJpdjTTHhx8OkQ0K50OdxR5DIQ17i1WCvK3HyHPPUGCnP0U4JI3dLH5Sk1o09fPlTC5_esBPofDr7FppPJ7jsB9eoPfANwYE5PDwJSHDQqh/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZPKnyfVayC-5DVC7lmBU0M7QmyGqe4qrfTpmbo9LP-UPpy_Ju4ubpC4J-qbo-t_9Nke7CC1N72GD38Ppdi8VEMd8EgA6ocXrJvvWq4eYS87NUECSzCnUbRIyHPaD2P0H8BLySh0PJ7_Z/s1600/search-icon-hover.png);
}
</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>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-0Dv0ZoENz4J5VU7jY6U8cd6XNVt3DDbAoMNFep-T8nE-1abDa94sc4ixWMLnq_-tK1SbrZU4TQHjHsDWnxkqVStbyRAZpnSdj52u9W4u4ZT5BQER1canEuyCaTz5lHiNb2lLM3326DE/s1600/search-box.png) no-repeat;
}
#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: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: #f2f2f2 !important;
padding: 10px 35px 10px 20px;
width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji0xGtxcBwVLWnUevGLSNyXXEDX2LNyWiYnkJpdjTTHhx8OkQ0K50OdxR5DIQ17i1WCvK3HyHPPUGCnP0U4JI3dLH5Sk1o09fPlTC5_esBPofDr7FppPJ7jsB9eoPfANwYE5PDwJSHDQqh/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZPKnyfVayC-5DVC7lmBU0M7QmyGqe4qrfTpmbo9LP-UPpy_Ju4ubpC4J-qbo-t_9Nke7CC1N72GD38Ppdi8VEMd8EgA6ocXrJvvWq4eYS87NUECSzCnUbRIyHPaD2P0H8BLySh0PJ7_Z/s1600/search-icon-hover.png);
}
</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>
#Kode - kode tersebut bisa langsung dimasukkan ke kotak konten tanpa ada yang perlu di ganti / edit dulu.
Baca juga Trick and Tips Blog Lainya di bawah ini :
Cara membuat blog Download MP3 di Blogspot
Cara Mudah Membuat Sitemap di Blogger
Cara memasang atau memasukan widget lagu ke blog
Cara Menambahkan Elemen Halaman Atau Kolom Full Widgets Pada Sidebar
Cara Membuat & Memasang Kotak Berlangganan Responsive
Cara Memasang Widget Media Sosial di Sidebar Blog
Cara Menampilkan Widget Recent Posts
Promosi Facebook Page dengan Conversion Box
Related Post dengan Gambar Thumbnail untuk Blogger
Featured Post with Thumbnail Image for Blogger
Cara Membuat Sidebar Multi Tab di Sidebar Blog
Cara Membuat Navigasi Halaman Blog Pake Angka/Nomor
Widget Recent Posts Blogger Berdasarkan Label Atau Kategori
Widget Popular Posts Dengan Grid Layout Style
Cara Membuat Automatic Featured Posts Slider Dengan JQuery
Menyusun Gambar Sejajar Pada Postingan
Cara Membuat Kotak Pencarian (Search Box) Di Blog Keren Terbaru
Cara Membuat Iklan Melayang Di Bawah Blog Dengan Tombol Close
Cara Membuat Fanspage Facebook Melayang Di Blog Terbaru
Cara Membuat Popular Post Warna Warni Di Blog Terbaru
Cara Mengatur Jumlah Postingan Di Halaman Utama Blog
Cara Membuat link di HTML (tag)
Cara Membuat Garis Batas Horizontal di Blogger
Membuat Tab View Menu Tanpa Edit HTML di Blogspot
Cara memasang video Youtube di blog
Cara Membuat Tulisan/Link Agar Bisa di Klik
Membuat Popular Post Hanya Tumbnail
Membuat Slide Show Gambar di Halaman Posting Blogger
Cara Membagi Postingan Menjadi 2 Halaman di Blogspot
CARA POSTING DALAM HALAMAN BERBEDA DI BLOGGER
Cara Mengganti Warna Background Judul Sidebar Blog
Cara Membuat Label atau Kategori di Blog
Cara Membuat Isi Halaman Blog Berdasarkan Label
Cara Membuat Menu dan Submenu Navigasi pada Template Bawaan Blog
Cara Memasang Widget di Blog
Cara menambahkan daftar bacaan blog
CARA MELAKUKAN REDIRECT 301 (PENGALIHAN URL)
Cara Memasang Breadcrumb blog
Cara Menggunakan Menu Impor Blog di Blogger
Cara Mengalihkan Alamat Blog Lama Ke Blog Baru
Cara Membuat Kotak Komentar Facebook di Blog
Cara Membuat Menu Spoiler Pada Postingan Blogger
Cara Membuat Widget Recents Post / Artikel - Bergerak
Cara Mengganti Domain Blogspot menjadi .Com - (Custome Domain)
Cara Membuat Link / Tautan Antar Halaman
Cara Memasukkan Postingan di Menu dan Sub Menu
Cara Membuat Widget Recent Post Dengan Gambar
Cara Menambahkan Gambar Di Postingan Blog
SELAMAT MENCOBA
No comments:
Post a Comment