4 in 1 searching box :

Alright, now I will discuss about how to add "4 in 1 search" box, like this picture.


You can search many site with just one searching box. Also this widget can save space on your blog page. Hehe...
So, if you interest with this widget just follow this steps
1. First, login to your blooger account.
2. Click Layout > Add a Gadget > HTML/Javascript.
3. Then paste this code into that widget,

<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://purplemoggy.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="purplemoggy.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="purplemoggy.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="purplemoggy.blogspot.com" name="from" type="hidden"/> <input value="n" name="authority" type="hidden"/> <input value="n" name="language" type="hidden"/> </form> </div> </div>

Nb: Don't forget to change "http://purplemoggy.blogspot.com" sentence with your url address.

4. Save
5. Then click Edit HTML, and paste this code

/** 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; }

under <b:skin><![CDATA[/*

6. Then paste this code

<script type='text/javascript'> //<![CDATA[ /*********************************************** * Javascript functions for the search box * made by PurpleMoggy :) * http://purplemoggy.blogspot.com/ ***********************************************/ var search_which_one = "pm-f-h"; function selectH() { document.getElementById('li-h').className = 'pm-search-selected'; document.getElementById('li-g').className = 'pm-search-unselected'; document.getElementById('li-b').className = 'pm-search-unselected'; document.getElementById('li-t').className = 'pm-search-unselected'; document.getElementById('pm-search-h').style.display = 'block'; document.getElementById('pm-search-g').style.display = 'none'; document.getElementById('pm-search-b').style.display = 'none'; document.getElementById('pm-search-t').style.display = 'none'; document.getElementById('pm-f-h').value = document.getElementById(search_which_one).value; search_which_one = "pm-f-h"; } function selectG() { document.getElementById('li-h').className = 'pm-search-unselected'; document.getElementById('li-g').className = 'pm-search-selected'; document.getElementById('li-b').className = 'pm-search-unselected'; document.getElementById('li-t').className = 'pm-search-unselected'; document.getElementById('pm-search-h').style.display = 'none'; document.getElementById('pm-search-g').style.display = 'block'; document.getElementById('pm-search-b').style.display = 'none'; document.getElementById('pm-search-t').style.display = 'none'; document.getElementById('pm-f-g').value = document.getElementById(search_which_one).value; search_which_one = "pm-f-g"; } function selectB() { document.getElementById('li-h').className = 'pm-search-unselected'; document.getElementById('li-g').className = 'pm-search-unselected'; document.getElementById('li-b').className = 'pm-search-selected'; document.getElementById('li-t').className = 'pm-search-unselected'; document.getElementById('pm-search-h').style.display = 'none'; document.getElementById('pm-search-g').style.display = 'none'; document.getElementById('pm-search-b').style.display = 'block'; document.getElementById('pm-search-t').style.display = 'none'; document.getElementById('pm-f-b').value = document.getElementById(search_which_one).value; search_which_one = "pm-f-b"; } function selectT() { document.getElementById('li-h').className = 'pm-search-unselected'; document.getElementById('li-g').className = 'pm-search-unselected'; document.getElementById('li-b').className = 'pm-search-unselected'; document.getElementById('li-t').className = 'pm-search-selected'; document.getElementById('pm-search-h').style.display = 'none'; document.getElementById('pm-search-g').style.display = 'none'; document.getElementById('pm-search-b').style.display = 'none'; document.getElementById('pm-search-t').style.display = 'block'; document.getElementById('pm-f-t').value = document.getElementById(search_which_one).value; search_which_one = "pm-f-t"; } //]]> </script>

under <head>

7. Then save.

Wew ... long article. Wkwkwkwk... But that's okay. I hope this article can be useful. And do not forget to comment y. Hehe..


Nb: thx to purple moggy, I learned a lot from U, hehe..