Hello guys! Welcome to another awesome tutorial on Bestutorialz. In this tutorial, am going to show you how to add a beautifully
customized search box to your blogger blog.
To get started, follow the below steps.
Step 1
Login to your blogger dashboard
Step 2
Goto Layout
Now go to the part of your blog you want to add the search box and Add a Gadget
Step 3
Select html/javascript
Now paste the following code in the box.
<style type="text/css">
#searchbox{width:280px;background:url
(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/
AAAAAAAAAlg/rbd0HN4EZrY/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:14px "Avant
Garde",Avantgarde,"Century
Gothic",CenturyGothic,"AppleGothic",sans-serif;color:#f2f2f2!
important;padding:10px 35px 10px 20px;width:220px}
#searchbox input[type="text"]:focus{color:#fff}#button-submit
{background:url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/
VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-
icon.png) no-repeat;margin-left:-40px;border-
width:0;width:40px;height:50px;cursor:pointer}#button-
submit:hover{background:url
(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/
AAAAAAAAAls/j7_kGSpkIfg/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>
Step 4
Click “Save”
That's all. Now check out your blog to confirm.
If you don't like this search box design, you can use the below code instead.
<style type="text/css">
#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(http://2.bp.blogspot.com/-
xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/
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:0;padding:9px 0;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>
0 Comments