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
-
November 22, 2010 85+ BreathTaking Tilt-Shift Photography and Resources
Tilt-Shift photography is the technique of using selective focus. This is used to reduce the magnitude of large size photos to make it into miniature models. One moves the lens adjacent to the plane of the image in the shift phase while moving the lens through an angle to that of the image plane is…
-
February 4, 2010 20+ incredible Gigapixel Photography Inspirations
Gigapixel photography is a new trend that has come about in the last few years, creating 1,000+ megapixels of data in single images, cropped together to create a monstrous image. The detail and spectrum that can be captured in a Giga pixel image is unlike that of anything that a single camera can capture. For…
-
November 28, 2011 45+ Unbelievable Landscape Photography Inspirations
Beach Grass, Scotland Marram beach grass blowing on the coast of the Isle of Lewis. Pampa – Santa Fe, Argentina Hengill Mountain, Iceland Hengill mountain is close to Reykjavik and is famous for its geothermal areas and vivid colours. Storm Clouds, South Dakota Large powerful storms can be nearly a daily occurrence during the summer…
-
April 25, 2023 WhatsApp Multiple Device Log-in: Simplify Staying Connected Across Devices
WhatsApp, which is a widely used messaging platform, is introducing a game-changing feature that will allow users to log into their WhatsApp account on multiple devices. This much-awaited update aims to simplify staying connected across devices by making it easier for users to maintain their chats. In this comprehensive guide, we will explore the benefits…
-
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.
