Posisinya dapat di navigasi sajian atas, sajian bawah header, atau --lazimnya-- di sidebar.
Kotak pencarian memudahkan pengunjung blog dan admin sendiri mencari goresan pena yang dibutuhkan. Posisi atau lokasi kotak pencarian harus gampang ditemukan.
Dalam studi Web Usability NN Group disebutkan, kotak pencarian sangat penting bagi pengunjung dan harus gampang ditemukan dan sederhana. Search: Visible and Simple.
Berikut ini daftar Kode Kotak Pencarian (Search Box) untuk Blogger. Cara memasangnya:
1. Layout > Add a Gadget
2. Pilih HTML/JavaScript
3. Judul widget kosongkan.
4. Plih dan Copas salah satu isyarat kotak pencarian untuk blog di bawah ini
5. Save!
Kode Kotak Pencarian (Search Box) untuk Blogger
<style>
#searchbox {background: #d8d8d8;border: 1px ;padding: 5px 5px;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/AVvXsEjcuP52D3aVHI-COuztznFQMSVxdYMOKuMc7B-AYYbr8nLAE2yIPieqJJx0eLZj3ieA-hFb7cqRarKSEvTk9J8KVWgL5bacjmhsUfB1LNwNtHuG3ZG7osu6b3lWfRI35J8ctL9KnZrtI2wl/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/AVvXsEjcuP52D3aVHI-COuztznFQMSVxdYMOKuMc7B-AYYbr8nLAE2yIPieqJJx0eLZj3ieA-hFb7cqRarKSEvTk9J8KVWgL5bacjmhsUfB1LNwNtHuG3ZG7osu6b3lWfRI35J8ctL9KnZrtI2wl/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 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all .7s ease 0;-moz-transition:all .7s ease 0;-o-transition:all .7s ease 0;transition:all .7s ease 0}
#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/AVvXsEivzXX7swxoYzBxJ3xOXW9Gt2iyqZMxA78lMikn0fg_Db-np4ol3V2xkTAUzV5Jjf-jzz1zIVtTL1r4LJt8JPQVA_gy2Q_TV00DsZvBCsYMiGRnfWLC-CUBHE26z9tXcWYoIr7jaJ3ag3nn/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;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{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr0SLhyXAp20AHgTlAoTs727wz4Mxgmvfdb_P3wsKKy5eLHoRyMido-GKyIrsvljK8NNEIuhcbDzVLvZCYmjOsBTC8UHEKktxXznIUPHXbkZeEUXwqcDlP-TbXgK1CU4-mw8zaGTRX5hV3/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:0;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/AVvXsEjc2X40zP1vB-eiPPGmaQxjkkmhtPSpfzqSG5rjBGlG2DQpWiYb2PmDfcZOX_oyUS6UVUDsdwxczAsxx1lRAwiRUJVF6oMDFth4qrkvnvMDGPVW0DRZdeUqib5AHeaRdoPDz-Oj4pN0qtYS/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px}
#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvTOnIif-2499XQjIwgmCPCXIG5htPZCjsUpmV00uR8GdUGewXa7MpQg2daRbKQeR3dJS4Y5qvjuhH14pau4a52hE5iorcTl8uk6JHwuLCPZ6DKBpGdH6AKihUyrn8bTy__VPDNJBX3M4t/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>
<style type="text/css">
#hbz-searchbox{min-width:250px;margin:10px auto;border-radius:3px;overflow:hidden;max-width:300px}
#hbz-input{width:59.2%;padding:10.5px 4%;font:bold 15px "lucida sans","trebuchet MS",Tahoma;border:none;background-color:#EEE}
#hbz-input:focus{outline:none;background-color:#FFF;box-shadow:0 0 2px #333 inset}
#hbz-submit{overflow:visible;position:relative;float:right;border:none;padding:0;cursor:pointer;height:40px;width:32.8%;font:bold 15px/40px "lucida sans","trebuchet MS",Tahoma;color:#FFF;text-transform:uppercase;background-color:#D83C3C}
#hbz-submit::before{content:"";position:absolute;border-width:8px;border-style:solid solid solid none;border-color:transparent #D83C3C;top:12px;left:-6px}
#hbz-submit:focus,#hbz-submit:active{background-color:#C42F2F;outline:none}
#hbz-submit:focus::before,#hbz-submit:active::before{border-color:transparent #C42F2F}
#hbz-submit:hover{background-color:#E54040}
#hbz-submit:hover::before{border-color:transparent #E54040}
</style>
<form id="hbz-searchbox" action="/search" method="get">
<input type="text" id="hbz-input" name="q" placeholder="Search..." />
<input type="hidden" name="max-results" value="8" />
<button id="hbz-submit" type="submit">Search</button>
</form>
<center>
<style>
#search{border:1px solid #BDBDBD;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqJ3Nu_dDYjT40HHxO13_UzUoaEAt545prHwzYT_fSHGD3nzHnsuY3LL3bIL1Dvabwum1Q_PUiNUN1oakCZ11gvs75AWzDvw_6ZhLfhj15iCGJEpOj3UihT9bLCYfML30Ct1Fn-gEHVI1U/h120/search3.png) 98% 50% no-repeat;text-align:left;padding:8px 24px 6px 6px;width:85%;height:18px;mouse:pointer:}
#search #s{background:none;color:#BDBDBD;font-family:verdana;font-size:11px;border:0;width:100%;padding:0;margin:0;outline:none}
</style>
<div id="search" title="Kode Kotak Pencarian (Search Box) Simple Keren untuk Blogger">
<form action="/search" id="searchform" method="get"> <input id="s"
name="q" onblur='if (this.value == "") {this.value = "Search";}'
onfocus='if (this.value == "Search") {this.value = "";}' value="Search"
type="text"> </form>
</div>
</center>
<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:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0;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' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
Itu beliau beberapa Kode Kotak Pencarian (Search Box) Simple Keren untuk Blogger yang aku pilihkan dari banyak sekali sumber.*
0 comments: