Metro Style Search Bar for Blogger

Posted On // 20 comments

Metro Search Bar
As Microsoft has enrolled the new Windows 8 Metro Style OS, a lot of change in the designing section of the blogging community has been seen. Now a days people are changing their template/theme and giving them a Metro look. If you are one of those people here is a fabulous widget for you - A Metro Style Blogger Search Bar.

Its CSS has been compressed to make it load faster. The bar looks very cool and I personally like it. Well there is no need to demo for this search bar, you can see how this search bar looks in the above image.

So you can add this widget to your blog with our 1 Click Installation button or by adding the code manually.

1 Click Installation

For adding this search bar to your blog just click the below button.

After clicking the button you will be redirected to and your widget would be added.

Manually adding the code

If you think that you need to make some changes in the code or the above button is not working for you then you may use this method.
Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code.

#abt-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;
#abt-search-box {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 0 none;
    padding: 10px;
    width: 160px;
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="  Type! :D "/>
<input id="abt-search-btn" value="Search" type="submit"/>

Now save the widget and save the template. If you want to increase/decrease the text box width change 160px with your desired width.

You are done now. Now you and your visitors can see this awesome Metro style Search bar in your blog.


Unknown Author
16 July 2013 at 22:05


Unknown Author
10 August 2013 at 20:00

Nice One , Dhiraj

Rizwan @ Blogger Kid

12 August 2013 at 21:22

But blogger is providing default search bar na?does this widget works same as google's custom search?

Dhiraj Author
13 August 2013 at 14:20

No its different from the default google custom search.

sunny Author
23 August 2013 at 03:55

Nice one and Thanks Dhiraj I applied in my blog have a look

Siddhu Author
27 August 2013 at 07:35

Really nice dhiraj

dd Author
6 October 2013 at 13:13

so good

Unknown Author
17 October 2013 at 12:01

I applied on my new blog but when i click on search area to type seach item it doesn't allow me to write
on this blog>>

Isa Said Author
3 November 2013 at 14:49

Thank you,

Chopra Author
8 November 2013 at 21:52

According to Google Adsense Custom Search Engine Policy, webpage consisting search results should have width of 800 PX but my blogspot blog's sidebar is trouble in the way. Is there any way to remove the sidebar of blogger blog to make the width of post area larger.

Anonymous Author
9 November 2013 at 16:45

hey , I wanted to install CSS hover effect to the search button . anyway ?

Anonymous Author
29 November 2013 at 19:39


Download & Listen Free Mp3 Songs
Tamil,Hindi,Telugu,Malayalam,Kannada All Songs (Old To New)

Thanks For This Search Box

Millhiore Author
9 February 2014 at 15:38

Nice share!!!! after a minute of search, this one works! Thanks!

21 April 2014 at 13:29

Nice post lovely blog...........

Unknown Author
1 March 2015 at 02:52

Thanks bro!

Unknown Author
6 April 2015 at 18:51

This template is simply great.To complement this template i recommend : Flat Responsive Widgets For Everybody

5 February 2016 at 23:29

can i apply google search adsense cod to this search widget. thanks

30 August 2016 at 07:55

Big Thankz..!!

Unknown Author
23 September 2016 at 14:25
rockbd Author
24 January 2017 at 16:36

The 2017 Pro Bowl is the National Football League's all-star game for the 2016 season which will be played at Camping World Stadium in Orlando, Florida on January 29, 2017.
Pro Bowl 2017

Pro Bowl 2017 Live

Pro Bowl 2017 Live Stream

Pro Bowl 2017

Pro Bowl 2017 Live

Royal Rumble 2017


Post a comment

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