CSS3 Search Boxes For Blogs... [Very Fast!]

Today I have got a bunch of search boxes based on CSS3 language. These search boxes are attractive, cool, and fast loading.. See how..

DEMO:

 

Insert A Search Box:

• Go to Blogger > Layout > Add A Gadget > HTML/JAVASCRIPT > And paste the code below into it:

<style type="text/css">
#search{padding:0}#search input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3YMwMqfULTMA5GuajGQd4xf9U13WMq_BbEajaXnWdekktG0ka64Ojn-nEF9pc2kmkUl9cG3PNh7TthvUvY3EdLXRgSqQ31MhxW9tWr-YYyKmGPgz6bRsphVJX39VcW8Ub1llX6zSUB3uT/s20/Search-icon.png) no-repeat 5px 5px #fcfcfc; border:1px solid #ddd; font:bold 12px Arial,Helvetica,Sans-serif; color:#888; width:210px; padding:6px 15px 6px 35px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; text-shadow:0 2px 3px rgba(0,0,0,0.1); -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; -moz-box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; box-shadow:0 1px 3px rgba(0,0,0,0.15) inset; -webkit-transition:all .7s ease 0s; -moz-transition:all .7s ease 0s; -o-transition:all .7s ease 0s; transition:all .7s ease 0s}#search input[type="text"]:focus{ width:240px}
</style>
<center><form method="get" action="/search" id="search">
<input name="q" type="text" size="50" placeholder="Search Our Blog..." />
</form></center>

• Save Your Template!

Customization:

• Change the bolded URL to the URL of image of search icon. (appears like a magnifier)
• Change width:240px to your search box width.
• Change text Search Our Blog... to anything you want to appear in the box.

Enjoy!!

About The Author

---

This is a Guest Post written by Mehul Mohan from MyPremiumTricks. He loves to write articles and has a lot of ideas about blogging and tricks, tips about computer. He is highly interested in computers and want to code something which everyone could remember. Catch him on Facebook and Twitter and Website.