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
-
April 30, 2023 Javascript Classes: The Definitive Guide for 2023
Explore ‘JavaScript Classes: The Definitive Guide for 2023’ to master the ins and outs of JavaScript Classes. From basics to advanced concepts, this guide empowers developers to write cleaner, more efficient code. Perfect for beginners and seasoned pros looking to level up their JavaScript game.
-
January 24, 2010 10 useful Greasemonkey scripts for Flickr power users
Flickr is one of the best photo sharing and hosting site which is widely used by many photographers and designers. In order to make the navigation in flickr easy, I have collected some of the useful Greasemonkey scripts for firefox users. Userscripts are add-ons for the Firefox web browser, which dynamically enhance the communication and…
-
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…
-
June 10, 2012 Show Recent Posts With Thumbnail from Particular Label/Category in Blogger
Hey Blogger friends, Today i have come up with another cool blogger hack. It’s about showing recent posts with/without thumbnail from any particular label/category in blogger. As you can see in my sidebar, I have listed recent posts from each category, but i have done this in wordpress. So if you want to do same…
-
August 27, 2012 How to add, remove and purge ppa’s using YPPA manager
Ubuntu users find themselves installing softwares through Ubuntu Software Centre which is a GUI based tool and on the other hand by commands through terminal. While both of the methods are efficient in their way there are users who install software through PPA’s. Now wait, PPA? What is it? In simple words PPA is Personal…
