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 22, 2023 Webpack vs Vite: Choosing the Right Build Tool for Your Next Web Project
In web development, build tools are essential for frontend developers to efficiently organize, compile and optimize their codebase. These tools automate the process of transforming source code into a production-ready format, which saves time and makes it easier to maintain projects in the long run. Two of the most popular build tools for modern web…
-
June 6, 2012 Grunge Mag Reloaded Blogger Template
As you can see , In smashing Tips I have one separate category for Blogger users. I will be showcasing all my unique Blogger hacks , Blogger widgets and Tips to customize Blogger templates here. And am an experienced Blogger template designer , so I thought of sharing at least one Blogger Template every week….
-
December 15, 2010 35+ Inspiring Nightscape photography and Tips
Nightscape Photography is one of the eluding styles of photography in lines of selection of photography-style by a photographer. It is sometime possible to shoot Landscape panorama, sea views, and bridges at night in such a manner as if, it has been taken at day time. A cityscape at night with lights blazing away like…
-
August 22, 2009 Show only post titles in Labels page
Hope you might have noticed that few blogger users are using custom layout for Home Page , Post Pages, Labels Page and Archives Page. Though I will write about having custom Layout in your blog later , In this post I will explain how to show only post titles in labels page and Archives page….
-
June 1, 2010 40+ best online coloring tools for graphic designers
If you are a web designer or dealing with some graphic design project then you will need some coloring tools for getting color hints from ready made color templates from professional designers. There are lots of Online color tools, but it will take time to search them all via Google. So i have tried to…
