Pure CSS3 Search Bar for Blogger

Posted On // 6 comments

Previously I have posted a Search widget named Metro Style Search Bar for Blogger. Today I am going to show how to add another cool CSS3 search bar in your blogger blog. This search bar is made up of Pure CSS without the use of any JavaScript or Image.

The search bar looks elegant and is also attractive. No demo is required for this widget as you can already see how it looks in the image beside.

To add this widget to your Blogger blog you can choose any of the two below options -

1. One Click Installation (Recommended)
2. Manual Installation

One Click Installation

You can add this widget to your blogger blog by just clicking the below given button. After that you will be redirected to blogger.com and your search bar will be added.

After the widget is added, save the template.

Manual Installation

Many would like to modify this widget or add it manually for some other reasons so paste the below given code in the HTML/JavaScript box and save the widget.

<form id="abt-css3-search" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="Type here" />
<input id="submit" type="submit" value="Search" />
<p style="display:none;">Search Box by <a href="http://www.allbloggertricks.com">All Blogger Tricks</a></p>
#abt-css3-search{background:#eaf8fc;background-image:0;-moz-border-radius:35px;border-radius:35px;width:270px;height:35px;overflow:hidden;border-color:#c4d9df #a4c3ca #83afb7;border-style:solid;border-width:1px;padding:10px}
#search{height:23px;width:180px;border:1px solid #a4c3ca;font:normal 13px 'trebuchet MS', arial, helvetica;background:#f1f1f1;-moz-border-radius:50px 3px 3px 50px;border-radius:50px 3px 3px 50px;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);padding:5px 9px}
#submit{background:#6cbb6b;background-image:0;-moz-border-radius:3px 50px 50px 3px;border-radius:3px 50px 50px 3px;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;height:35px;width:60px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#23441e;text-shadow:0 1px 0 rgba(255,255,255,0.5);border-color:#7eba7c #578e57 #447d43;border-style:solid;border-width:1px;margin:0 0 0 10px;padding:0}
#submit:active{background:#95d788;outline:none;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset}

After saving the widget, save the Template.

You are done now. Now you and your visitors can use and see this awesome Pure CSS3 Search Bar in you blogger blog.


9 June 2013 at 10:03

awesome widget, but i had a question how can we customize look of google custom search box?

9 June 2013 at 10:06

@Umesh for that you may have to overwrite the CSS properties of that search box.

ajinkya Author
10 June 2013 at 12:05

really awesome widget, that's what i am searching for ..,,,,

Thanx a lot dude...

Rafay Ghafoor Author
29 June 2013 at 09:23

Awesome tut thnx you so much

nextandy™ Author
29 July 2013 at 06:44

very useful

Cyber boy Author
5 October 2014 at 07:19



Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Pure CSS3 Search Bar for Blogger |