Cara Membuat Kotak Pencarian Responsive pada Blog Blogspot

Sahabat. Sudah menjadi ciri khas khusus jika sebuah blog mempunyai "kotak pencarian". Hal ini menjadi salah satu parameter blog yang user friendly. Itu artinya, jika sebuah blog tidak mempunyai ruang khusus pencarian artikel (kotak pencarian), maka bisa dipastikan "kurang disukai pengunjung.

Apa sudah ada survei mengenai hal itu kang?

Sebenarnya belum Sob. Namun hal itu saya kira sangat wajar sekali. Bisa dibayangkan, misalkan ketika ada seseorang yang dalam keadaan mendesak memerlukan sebuah penjelasan tentang "tips SEO Blog' dan tidak sengaja berada di halaman blog kita, dan ternyata tidak menemukan "kotak pencarian" artikel, pasti merasa "anyel, gusar" dan kemungkinan akan memilih mencari di google.

Rugi kan Sob?

Oleh karena itu, kali ini akan saya coba cara membuat kotak pencarian responsive di blog, dan tentunya keren abis pokoknya. Berikut kode-kode kotak pencarian keren yang ane peroleh dari mas CB.

Cara Membuat Kotak Pencarian di Blog

Cara pembuatannya cukup mudah kok, nih simak langkah-langkahnya dengan teliti!
1. Masuk akun blogger
2. Pilih gadget > HTML/JavaScript > copas kode di bawah (pilih salah satu kode)
3. Save

Berikut kode-kode widget yang saya maksudkan pada langkah ke-2 di atas:
1. Kode kotak pencarian Pertama

<form action="http://namablog.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

2. Kode kotak pencarian kedua

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-55QVPbUiM0JgRclQzxKR7TlV-8Iz8T6LHhFkKLs4OJBx5b2HYuRfoSRZZWl8sNv6AO_kZXG4QRdLiYpvLC4JzoxlNv3pip8YVaV08Dtaryz5-OLOJMzgSVVluGr-p8AkLKwrK5OiNAN_/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;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 Here..." 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>
</span>

3. Kode kotak pencarian ketiga

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Search Here...."/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 300px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGIsTNVLqV_EBqvxiFhNPxmqvRhN49nOR9heoDCs3AJEYdIhzYk7_c5B8ZZ-YEm3YDteZp-dGB8DdwIjnAMpt9YytRkmAcRWIKrTb-8Erfhx_-itO5_2eSHVPXidQoKuTLXRneaTz-b24/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style> 

4. Kode kotak pencarian keempat

<style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvJNkKxL2le7al2OlDhYD790fTEaYnpUpWwY__IdIA9cEd4wKJDkt0S1chSHJEEnVbOu8E1d0zP-MOWsONEgVxoXmpWJubK-EIfOITfqSeO5j3cUNvlz-FTUsNRklkU2nLKN-eiwUs4rR7/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...";}' /></form></div> 

5. Kode kotak pencarian kelima

<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiawRCsgbooyFQBjRL04Ac_BNBHN_cgjcj1c2g5uDZ_VEzgJiLlDWNRsv0ufg6fazdpPM_wtAVGFl5nR46AJXB7en36rfTVOGupRKMly-ulp3RPQX1jggOLLZdWTv0tkr1vnrZzkKd-STaW/s1600/lostsector-search-box-blue.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-left:20px;width: 205px;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>
<center>
<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></center> 

6. Kode kotak pencarian keenam

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this Site" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q"> <input id="searchButton" value="Go" type="submit"></form>

Keren-keren bukan?

Cara pembuatan kotak pencarian kali ini sangat mudah, tidak perlu melakukan editing template. Seperti halnya blog FBI ini, dimana kotak pencarian terletak pada menu navigasi. Dengan cara ini sangat simpel sekali. Tinggal menambahkan widget baru, copas kode simpan deh, langsung jadi.

Untuk menambah user friendly blog Anda, silakan terapkan cara mudah memasang media sosial bookmarking di blog.

Semoga bermanfaat. Salam. (http://forumblogindo.blogspot.com).*