Blogger Search Form box code

Off 57

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;’>
<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’/>

and here is the CSS for this search Box code :

About the author / 

Mohamed Rias

I'm a programmer, photographer, and proud parent. With a passion for coding and a love of capturing life's moments through my camera lens, I'm always on the lookout for new challenges and opportunities to grow. As a dedicated parent, I understand the importance of balancing work and family, and I strive to be the best version of myself in all aspects of my life.

Related Posts


Editor’s Pick

  • 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…

  • 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….

  • 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…

  • 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….

  • 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…