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
-
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 9, 2010 6 Reasons why Linux Servers are More Secure
Although there are several servers available on different operating system platforms like windows, unix , etc. I feel that Linux Servers are more secure when compared to other competitors.There are several reasons why Linux servers are more secure than those running solely off of Windows. The importance behind this extra security is to help prevent…
-
April 5, 2023 CSS Grid vs. Flexbox: Understanding the Top 5 Key Differences with Real World Examples
If you’re new to web development or simply trying to decide which layout tool to use, you may be wondering about the differences between CSS Grid and Flexbox. While both CSS Grid and Flexbox can be used to create complex and dynamic layouts, they each have their own strengths and weaknesses that make them better…
-
September 22, 2012 Know the Different Lenses In Photography And Their Influence.
Depending on what lens you are using you can add in creative control, different perspective, and technical improvements to your photographs. Choosing the right lens can lead you to have more control over your final image that you want to frame or already framed in, in your mind. Influence of lens can lead to optical…
-
January 9, 2010 How to add multiple Authors in Blogger
The technique of having Multiple authors to manage a Blog is getting popular these days. Though this feature was already available in wordpress , recently Blogger too has enabled this feature. So now Blogger Users can have upto 100 multiple Authors or co-Authors for their blogs. So this new Team Blogging feature has enabled multiple…
