How To Add Multi Search Widget to Blogger

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this:

]]></b:skin>

3.Now add below code just above ]]></b:skin> tag.

/** css for the search box */ div#pm-search ul { /* unordered list */ margin-top: 0; margin-right: 0; margin-left: 0px; margin-bottom: 5px; padding: 0; } div#pm-search li { /* each list element */ list-style-type: none; /* don't edit this */ display: inline; /* don't edit this */ cursor: pointer; /* don't edit this */ margin-top: 0; margin-bottom: 0; margin-right: 5px; margin-left: 0px; text-indent: 0px; padding: 0; } div#pm-search form { /* the search form */ margin: 0; padding: 0; } div#pm-search-h { display: block; /* don't edit this */ } div#pm-search-g, div#pm-search-b, div#pm-search-t { display: none; /* don't edit this */ } div#pm-search input { /* the textbox and submit button */ background-color: transparent; border: 1px dotted #999; color: #999; } .pm-search-selected { /* which search service is currently selected */ color: #999; border-bottom: 1px dotted #999; } .pm-search-unselected { /* which search services are not selected */ color: #777; border-bottom: 1px dotted #777; }

4.Now again Scroll down to where you see this:

</head>

5.Now add below code just above </head> tag .

6.Now save your template.

7.Go to Layout > Page Elements

8.Click on 'Add a Gadget' on the sidebar.

9.Select 'HTML/Javascript' and add the code given below and click save.

<div id="pm-search"> <ul> <li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li> </ul> <div id="pm-search-h"> <form action="http://YOURBLOG.blogspot.com/search" method="get"> <input id="pm-f-h" value="" name="q" size="15" type="text"/> <input value="Search" type="submit"/> </form> </div> <div id="pm-search-g"> <form action="http://blogsearch.google.com/blogsearch" method="get"> <input id="pm-f-g" value="" name="as_q" size="15" type="text"/> <input value="Search" type="submit"/> <input value="YOURBLOG.blogspot.com" name="bl_url" type="hidden"/> </form> </div> <div id="pm-search-b"> <form action="http://search.blogger.com/" method="get"> <input id="pm-f-b" value="" name="as_q" size="15" type="text"/> <input value="Search" type="submit"/> <input value="YOURBLOG.blogspot.com" name="bl_url" type="hidden"/> </form> </div> <div id="pm-search-t"> <form action="http://www.technorati.com/search.php" method="post"> <input id="pm-f-t" maxlength="255" name="s" size="15" type="text"/> <input value="Search" type="submit"/> <input value="searchlet" name="sub" type="hidden"/> <input value="YOURBLOG.blogspot.com" name="from" type="hidden"/> <input value="n" name="authority" type="hidden"/> <input value="n" name="language" type="hidden"/> </form> </div> </div>

Note : Remember to replace YOURBLOG with your real blog name.

It will look like this.



Source