Metro Style Search Bar For Blogger Blog

Add search bar to your Blogger blog can help your visitors to find some thing in a jiffy. Allow them to help faster rather than reaching to desire page finding page one by one.

You have seen so many style of search bar but now you can have the best style in your template. This style will look great in every template and color.

Add metro style search bar into your Blogger blog. This search bar is adobe from Windows 8 metro style OS.

This widget is consists of CSS code and this look cool and work faster will not make your site lazy. You can customized too.

Add Metro Style Search bar to Blogger Blog:

• Go to your Blogger account and open the layout tabs right of your Blogger dashboard.
• Click on the edit widget and open it. Open the HTMl/JavaScript and past the below code on it.

<<style> #search-btn {     background: none repeat scroll 0 0 #359BED;     border: 0 none;     border-radius: 0 0 0 0;     color: #FFFFFF;     font-weight: 700;     padding: 10px 20px; } #search-box {     background: none repeat scroll 0 0 #EEEEEE;     border: 0 none;     padding: 10px;     width: 160px; } </style> <form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="40" type="text" placeholder="  Type! :D "/> <input id="search-btn" value="Search" type="submit"/> </form>

After add the code save your template and refresh you blog. Give us your feedback about this widget by leaving here comment or by searching this post article with others.

---

Tweet

About Post Author:

This post is fruit of pen-clipping of Mohammad Hamza Frough, poineer of ProFeedLinks. He likes to shear about his thought and experience with others.

Read more about Mohammad Hamza Frough »