Recently I explained How to add Blogger search box code to your Blogger template. Now In this post I will explain How to customize the search box code to suit your Blogger template. In order to make it easier for you , I am going to explain this with two blogger search form example codes. Once you have added the proper codes then you can have your own custom blogger search engine.
Default search box code
Here is the default code which can be used to create your own search engine in blogger.
<form id=”searchThis” action=”/search” style=”display:inline;” method=”get”><input id=”searchBox” name=”q” type=”text”/> <input id=”searchButton” value=”Go” type=”submit”/></form>
But this code will create only a basic blogger search box without any special effects. If you add this code to your blogger sidebar via a HTML / JAVASCRIPT widget , you will find it something like this
Customizing the Blogger search box code
The above code will create just a basic blogger search form. But it’s just not enough for blogger template designer or for those who want their blog to have a professional look. So here I have modified the default script little bit in order to add CSS codes to make special effects in blogger search box.
Here is my modified code :
<div id=’search-box’>
<form action=’/search’ id=’searchform’ method=’get’ style=’display:inline;’>
<span>SEARCH:</span>
<input class=’s’ id=’s’ name=’q’ type=’text’ value=”/>
<input class=’sub’ src=’http://techieblogger.com/wp-content/uploads/2009/06/go.gif’ type=’image’ value=’Submit’/>
</form>
</div>
and here is the CSS for this search Box code :
About the author /
Mohamed Rias
Popular
Editor’s Pick
-
August 21, 2012 50+ Amazing Olympics Infographics Inspirations
The London Olympics 2012 has proved to be a phenomenal attraction this year – attracting eyeballs and attentions like nothing else. Well, I caught on to the Olympics buzz quite late into the second week – watched it every day from 11 in the night (IST). However, I followed it regularly over the news papers…
-
August 21, 2012 50+ Amazing Olympics Infographics Inspirations
The London Olympics 2012 has proved to be a phenomenal attraction this year – attracting eyeballs and attentions like nothing else. Well, I caught on to the Olympics buzz quite late into the second week – watched it every day from 11 in the night (IST). However, I followed it regularly over the news papers…
-
September 5, 2012 65 Amazing High Resolution 3D Wallpapers for your Desktop
Desktop Wallpaper can be handy, many of us always keep looking for good wallpapers which can make our desktop lively. Desktop wallpaper is a kind of visual image which produces inspiration and impulse, provides a relaxed and calm perspective from boring work flow, even challenges our imagination. Among desktop wallpapers, high quality original 3D wallpapers…
-
December 16, 2009 30+ Most Downloaded Google Chrome Extensions
Google Chrome being the fastest browser in terms of performance still it’s not preferred by most. Especially Mozilla firefox users won’t ditch firefox so soon just because Google chrome is faster. Being a firefox user,one of the reasons I didn’t liked Chrome is because it doesn’t had plug-ins support before. But now after one year…
-
January 15, 2010 16 useful Mac cheat Sheets
Cheat sheet is a concise set of notes used for quick reference. Cheat sheets will contain most of the shortcuts needed to program faster. And it is meant for newbie users who can’t remember the shortcuts or commands. In this article , I have collected some of the useful cheat sheets available for Mac OS….