You are here:Home » Blogger Guide » Search Box Widget for Blogger.

Search Box Widget for Blogger.

Blogger has its own search widget  for their blogs but its design is not very attractive. Today i am going to share awesome search widget for blogger users. That will help you all to search smoothly.

Search Box Widget for Blogger
Search Box Widget for Blogger
Search widget is the most important thing for blogs/ websites to make visitors and readers easy to find the new posts, related posts or any post of blogs.

If you have large amount of posts sometime it is difficult to find some of the specific posts on your blog. You can solve that problem by adding search box on blogs and website.

How to Add Search Box Widget to Blogger.

  1. Go to your blogger dashboard and select your blog.
  2. Go for Layout.
  3. Click on Add a Gadget option. 
  4. Go for HTML/JavaScript widget.
  5. Now copy the below code and paste it of the work area. 
  6. Now save the widget.

Search-Box-1 

Search Widget Pink
<style>
#search-anm {
background: none repeat scroll 0 0 #ff9BED;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;    font-weight: 700;
    padding: 10px 20px;
}
#search-am {
    background: none repeat scroll 0 0 #EEffEE;
    border: 0 none;
    padding: 10px;
    width: 160px;
}
</style>
<form action="/search" style="display:inline;" method="get">
<input id="search-am" name="q" size="40" type="text" placeholder="  Search This Site "/>
<input id="search-anm" value="Search" type="submit"/>
</form>

Search-Box-2

Search Widget
<style>
#search-anm {
    background: none repeat scroll 0 0 #00f;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}
#search-am {
    background: none repeat scroll 0 0 #fff;
    border: 0 none;
    padding: 10px;
    width: 160px;
}
</style>
<form action="/search" style="display:inline;" method="get">
<input id="search-am" name="q" size="40" type="text" placeholder="  Search This Site "/>
<input id="search-anm" value="Search" type="submit"/></form>

0 comments:

Post a Comment