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/AVvXsEi53rAoh5fzQ1TxdY-hxsYqVkh5GfYvRHf72JtFnSk952B4BVFT6ryB6GuO8UHxmPRwado8_tRj7w5BzCGMT-WlpJQPTnf07Dc4-DJfHsY6Yi8mPwMoe8MLOu9C0EIgmDkiXTFeDFXeUVag/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/AVvXsEirqq3nlVs801n3jHl6cbGZ5qfXIqgSBY6QNWjgIwl9383G_oyl_EBa_Iw0yPSTc6M3Hmb2OIOarLK8ukIw81g5j936J7-qsZaaCfsK2KgXDMkFsLTqFAG3bviNtTLYvj2K4xvoZ2kOUuQP/s1600/lostsector-search-box-gray.png |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5rNkhuhSEtqU-oKyhlbKOXyi4BiFGHVtQ0CrYgX98q0rgljGyAszrzRlZLs988QC2ka47luKPmSkK_3Q6UsA0BE-gCcr9qtHzuvZAFQ-y5IE6t72WYajQqb89MGqaw8GsCQOrdcyqedgC/s1600/lostsector-search-box-black.png |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOOd-QF4L8qUVnLzmOAQCGk5707prc_rGHW7FVEgx5LF5NIhRRKZwdFo4zpCRTK78ZZDXzFuCxefPMGwQYtyRCM3C3qKs8BB49f30l_q3vQKsnjCmq3SFZxkueyGkD2078N6GDsxPvdLrP/s1600/lostsector-search-box-red.png |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIcZ3YuI8-sFlZFYtMhHv9cggghF8z64CMllCiHlqMmjp3DmvmJPmdRnbaw9JePnWaFGKHVRC6-XGVQafsaWekZ-FalJBXu6P3f7tH5GJGvVbR1cSKhECush3NEtSgnHNd9hJe_ABQdZPm/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/AVvXsEirxb8hbQ_IXZwrXXUkU1eVRlSfIcN-LxEiq9a98yYcem1yVDntCQ3k9XhvG0qpxZoi7fBCqrbPApNCocCf57xkDATaFo9O-eXIK9XAVD_aa1noeoPYt4eue2SbRYo6cuAp8RXTAM5RBJcq/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/AVvXsEjQ3x_ul6Uh-XO5b1GuL_ld29r5vaCbVAoeB9btAgvdwsk4fLRItkwkmet1a5kPCjwP3M8tHE1LWj0hspiQ2mXvKKMh9Anj1IW12Es8wLhRATTJ-O5BKb0eNP9beq0jyYpLObvhikNbG3bb/s1600/impoint.blogspot.com-red.png |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnPw83uV_IwhR6X05MywmXwvg5PM-RQ5fJD7EBGMVxaNh_0TWB2Oz80LkFE1MeXMpobz6Jdp1k-2nDBx6MsovkoaAB50kVd4GwIV32NwpiaJ_F8GDnc1QLK4Jy7teh2v3Nw-Olh-pBNZKU/s1600/impoint.blogspot.com-blue.png |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih23PJ9mHlRwoJgHelFOJXDmlEnxOCfqlKjzxkXBUxtKjMK0PCRty_jalSo_YVzsysQV6k1y4u51C-wv8uVic34ElHUzPJVVmMkikYA09XzfSQsK2DgIkMifP7JxAOZo_O8vRNff8OZq2C/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/AVvXsEjG6rtZKTuamdYVX3TIv6TpK3G9NRLXwmKRpf0lfyp3AhgVTVOeJliFZSkMZLZFsA8fh2LT3Pe9Lz8CjK0sjemEB3PC9tTTJBqqTgUudXFxlqDhim5vedi0IFyxrj7iZ8iZVHxCgmIlHeI/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
