Are you looking for stylish Search box for your blog that looks quite professional? Yes of course! I might be able to help you as I designed following below search widgets (using CSS3 and HTML5) for your blogger site. A few months ago, I searched for custom designed search bar on Google and found a number of different stylish and beautiful search boxes, but all were created by using old techniques. When I used one of those, I wondered to see that:
- That was not responsive
- That was only a image (used as background) that looks pretty.
- That was not created by using exact method.
- The inner design of input were not described.
According to your choice, I build a few search box design using CSS3 and HTML all are responsive and I used Font Awesome icon (in some search gadgets) instead of image icon (great benefit is that no loading, still HD at zoomed screen).
These Search boxes have following features:
- Esay to customizable
- Easily readable source code
- Easy to modify
- Perfect for side bar widget
- Best user experience with:
- Shadow Effects
- Input Focus Effects
- Button Hover Effects
How to use on your Blog
First of all choose your favorite search box code and follow the following steps.Login 》Blogger Dashboard 》Layout 》Add a Gadget 》HTML/Javascript.
Then copy and paste the code of your favorite search widget into HTML/Javascript content's box and save.
You have done ! Now It's time to let me know if you have successfully completed and checked custom search result page.
Simple Clean Search Bar
Clean Blue Search Box
Cute Search Box
Rounded Corner Stylish Search Bar
Block Stylish Search Widget
Technology Blog Search Gadget
Feel free to edit, customize and change the source code according to your needs.