Kode Widget Search Box untuk Blogger ~ Sosial Media Blogs

Sosial Media Blogs - Banyak hal yang dapat kita tambahkan dan melengkapi blog kita agar semakin beragam fiturnya dan semakin menarik tampilannya. Salah satu widget yang saya sarankan harus ada di blog kalian adalah "Search Box" karena menurut pengalaman saya, ini penting agar pengunjung blog kita lebih mudah dalam mencari artikel yang ada di blog kita sehingga dengan demikian, ini akan berdampak pada jumlah Page View kita akan meningkat.

Baiklah, cukup prolog dari saya, langsung saja saya bagikan Kode Widget Search Box untuk Blogger, ada berbagai jenis tampilan search box yang dapat kalian pilih...

1. Search Box Alexa

<style>
.balexa {
font: bold 12px Tahoma, Geneva, sans-serif,"times new roman";
color: #fff;
background: #0361d2;
border-radius: 5px 5px 5px 5px;
padding: 7px 15px;
cursor:pointer;
margin: 5px 0 0 3px auto;
}
.balexa:active {
cursor:wait;
position: relative;
top: 2px;
}
.balexa::-moz-focus-inner {
border: none;
padding: 0;
margin: 0;
}
.blsbox {
border: 1px solid #D3D3D3;
border-radius: 4px;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.blsbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
<form method="get" action="http://www.alexa.com/data/details/traffic_details" target="_blank">
<input class="blsbox" name="url" maxlength="255" size="40" type="text" onblur='if (this.value == "") {this.value = "Enter the Url...";}'
onfocus='if (this.value == "Enter the Url...") {this.value = ""}'
type="text" value="Enter the Url..." />
<input value="Alexa" type="submit" class="balexa" /></form>

2. Fresh Search Box

<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSe77LJ20zAysJHUWqP9UzmrBpL_E8oLvS48YX2aTaMjgilgDaHaynvy1msY1gDSIBE4gtG2M0czz0dS4kynan2GZvz0TFvaV82yUAJlmvESjSvVS5NbWxuKIjZeJyJlY5LuZbic4zdT6s/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>

Ganti warna Biru dengan style yang kalian suka dengan meng-copy kode di bawah gambar.

http://3.bp.blogspot.com/-jukSBGryNx4/UPgqKoLKi2I/AAAAAAAAC38/V7A3wruYzgo/s1600/lostsector-search-box-darkgrey.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipvoQqe7tG8nx2QY-LlQs5w-ohZrZg_a1Q2tqtP1xqPzK8gxShBhjxeioBpzmGMDQo4enPQ8yRDCICExf-ipgNLaxEzcrOvU3PS_HrJ31hLkFefbT42hTJ8oKMdONaoX61MphdC-0vezGA/s1600/lostsector-search-box-gray.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv0bl-j4Um6Uj3xGlOkaktOW51oY8-uvv82XlgOlqrOqQ4VeAGVT6to8ytcfSC9LXKZLkNebsSoyl7wKSE5zJx6mfPoXBD_7fvhPOGxTOC2A51N4M2yct5ZIJTw1fVi-IbcIkz647U87oB/s1600/lostsector-search-box-black.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8u02Kf1gf1a1zkkahMYSu3smBbvrltapd1pdJHgCBkTJH1N3dxEXjV48Zck7ocveR0AAF4dyI7pbPVH_sEJhwirn2NejyzcjrGoOScifrZ8w3-0AncR7u-G3UfZF27JLwCatsFuW-kGbS/s1600/lostsector-search-box-red.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg58-8Ban2VyMIC2FwsOsIzSsoqSmmjEAyOE981RiyN5fcdveFcSJIVxhP8FD0XNb3YGrW21ijLWC4aKAXS_2AfblOAM-oOwAzJ2RMLhOM7VQYFO-PrZ57ke3uPtZVacYwVbXi-OYO-dUD4/s1600/lostsector-search-box-yellow.png

3. Ellegant Search Box

<style type="text/css">#mediablogger-searchbox { border-radius: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMIlfsv3Qtwo-8ugvYCm1a61o5tQXtgBTUKSOEFStRdma5RJWR7yNFrVhPl7Q5PvvJWDVDzVU0n6uPMwS5g5WEyD1UYOLMMyBaUEtpveeMdwxvqwIpjMrjRIpUqFjZKXiht_3HICeumz7T/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>

Untuk Memilih Style, ganti tulisan warna biru di atas dengan URL yang ada di bawah gambar, berikut ini.

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBkmzfTCPuFQ_8yOyci1uqKdKa1mVslaqCeFVWYcMI60FAd7J3R8TV3P1k2__5L9S_EUwSo9Rc0Mal8bDGfouHfXqIhDQ9eMMYsaIdm5TUAplBsadMPaziue5JhuCAS4y3NZJebPvGcH5L/s1600/impoint.blogspot.com-blue.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCnHSEE2-KOjdBBt_ScB-orMjHt2WsoEzNaVc9YGJv68p17Z1VxlLcCWrBRTaWSMiyikHWf7l0n_6w_a7cPFMIFxNyZXN8AW444M7lfrXASR-Apsmm2Gl2d60cJsW_Z9e0zZW5vITji4k/s1600/impoint.blogspot.com-orange.png

4. Cool Search Box

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</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: 200px;
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/AVvXsEgm7CAnT7qKA7oVN16n1LrJuMU11-oZXWdr6uqFjEDiydIBmiudsR3TkcKsIOsEgN-JoJfie_LXjj5Qng2egmKfNh0nS55zLK_x3vUz0MPL-GgeBuL-hszoAC8vM5pRW40dT5H5DIMbJxY/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>

Demikian beberapa pengetahuan yang dapat saya bagikan untuk kalian para pembaca yang budiman. Semoga Bermanfaat.
Referensi : Mazinu Bersahabat, Mas Andes

Ditulis Oleh : Unknown

Jazakumullahu khairan katsiiraa. Terimakasih atas kunjungan Pembaca yang budiman karena telah membaca artikel Kode Widget Search Box untuk Blogger. Tak Lengkap Rasanya Jika Kunjungan Anda di Blog ini Tanpa Meninggalkan Komentar, untuk Itu Silahkan Berikan Kritik dan saran Pada Kotak Komentar di bawah. Anda boleh menyebarluaskan atau mengcopy artikel Kode Widget Search Box untuk Blogger ini jika memang bermanfaat bagi anda, namun jangan lupa untuk mencantumkan link sumbernya. Terima Kasih, Salam Blogger! :)