Add CSS3 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 follow manual installation steps. 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.


CSS Codes:

<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" /> </form> <p style="display:none;"> Search Box by <a href="http://amazingtricksforblogger.blogspot.com">Amazing Tricks For Blogger</a></p> <style> #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,#submit{float:left} #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:hover{background:#95d788;background-image: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} #submit::-moz-focus-inner{border:none} #search.placeholder{color:#9c9c9c!important;font-style:italic} #search:focus{background:#fff;outline:none;border-color:#8badb4} #search::-webkit-input-placeholder,#search:-moz-placeholder{color:#9c9c9c;font-style:italic} </style>