Monday, May 5, 2014

BLOGGER: ADD A CUSTOM SEARCH BOX PART I

Leave a Comment

So Blogger's Search gadget is not working right for you? Same here! I had to find a way to make a working search box. Having one is essential to any blog. The use of the search box saves your visitors time and effort looking into your long list of archives. But we would like to customize our search boxes to match the overall look and feel of our blog. Hence, this post.

Below are two simple search boxes which you can easily customize to match your taste.
Just copy the codes below it and change what's necessary. I will teach you what code to change for each element of the search box.


1. SHARP CORNERS
 
CODE:
 <style>  
 #tpsearch-box {  
 position: relative;  
 width: 220px;  
 margin: 0;  
 }  
 #tpsearch-form   
 {  
 height: 30px;  
 border: 1px solid #999;  
 background-color: #fff;  
 overflow: hidden;  
 }  
 #tpsearch-text   
 {  
 font-size: 12px;  
 color: #ddd;  
 border-width: 0;  
 background: transparent;  
 }  
 #tpsearch-box input[type="text"]  
 {  
 width: 90%;  
 padding: 5px 0 2px 1em;  
 color: #333;  
 outline: none;  
 }  
 #tpsearch-button {  
 position: absolute;  
 top: 0;  
 right: 0;  
 height: 32px;  
 width: 40px;  
 font-size: 12px;  
 color: #fff;  
 text-align: center;  
 line-height: 12px;  
 border-width: 0;  
 background-color: #000000;  
 cursor: pointer;  
 }  
 </style>  
 <div id='tpsearch-box'>  
 <form action='/search' id='tpsearch-form' method='get' target='_top'>  
 <input id='tpsearch-text' name='q' placeholder='Search Tweak Peek' type='text'/>  
 <button id='tpsearch-button' type='submit'><span>Go</span></button>  
 </form>  
 </div>  

2. ROUNDED CORNERS
 
CODE:
 <style>  
 #tpsearchr-box {  
 position: relative;  
 width: 220px;  
 margin: 0;  
 }  
 #tpsearchr-form   
 {  
 height: 30px;  
 border: 1px solid #999;  
 -webkit-border-radius: 5px;  
 -moz-border-radius: 5px;  
 border-radius: 5px;  
 background-color: #fff;  
 overflow: hidden;  
 }  
 #tpsearchr-text   
 {  
 font-size: 12px;  
 color: #ddd;  
 border-width: 0;  
 background: transparent;  
 }  
 #tpsearchr-box input[type="text"]  
 {  
 width: 90%;  
 padding: 5px 0 2px 1em;  
 color: #333;  
 outline: none;  
 }  
 #tpsearchr-button {  
 position: absolute;  
 top: 0;  
 right: 0;  
 height: 32px;  
 width: 40px;  
 font-size: 12px;  
 color: #fff;  
 text-align: center;  
 line-height: 12px;  
 border-width: 0;  
 background-color: #000000;  
 -webkit-border-radius: 0px 5px 5px 0px;  
 -moz-border-radius: 0px 5px 5px 0px;  
 border-radius: 0px 5px 5px 0px;  
 cursor: pointer;  
 }  
 </style>  
 <div id='tpsearchr-box'>  
 <form action='/search' id='tpsearchr-form' method='get' target='_top'>  
 <input id='tpsearchr-text' name='q' placeholder='Search Tweak Peek' type='text'/>  
 <button id='tpsearchr-button' type='submit'><span>Go</span></button>  
 </form>  
 </div>  

You can customize your search box for your blog by editing a few codes. The codes you can edit are in fuschia.

Where it says:
#tpsearchr-box {
position: relative;
width: 250px;
margin: 0;
}
WIDTH. This is the width of the box where you input your query. This excludes the search button(the button where it says Go) Just change the 250 according to your liking.

Where it says:
#tpsearchr-form 
{
height: 30px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}

HEIGHT. If you change the width, you should also adjust the value of height. Change 30px to anything.

BORDER. The thickness of the border(the line around the area that gives it shape) can be changed by changing the value 1px. The larger the number, the thicker the border.

RADIUS. This is what makes the corners of the search box rounded(excluding search button). Adjust this to make it more rounded or less rounded.

BACKGROUND-COLOR. Under #tpsearchr-form, the background-color is the color of the box where you type your query.

Where it says:
#tpsearchr-text 
{
font-size: 15px;
border-width: 0;
background: transparent;
}

FONT SIZE. This is the size of the input text and the placeholder(where it says Tweak Peek). If you changed the width and height, you're gonna have to change this, too.

Where it says:
#tpsearchr-box input[type="text"]
{
width: 90%;
padding: 5px 0 2px 1em;
color: #333;
outline: none;
}

PADDING.  This is what distance between the input text(query) and the border.
COLOR. The color of the input text.

Where it says:
#tpsearchr-button {
position: absolute;
top: 0;
right: 0;
height: 32px;
width: 70px;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 12px;
border-width: 0;
background-color: #000000;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}

HEIGHT. The height of the search button alone.
WIDTH. The width of the search button alone.
FONT-SIZE. The size of text where it says Go.
COLOR. Color of the text where it says Go.
BACKGROUND COLOR. The color of the entire search button.
RADIUS. As mentioned above, this is what gives the round corners. This one is for the search button alone.

Where it says:
<div id='tpsearch-box'>  
 <form action='/search' id='tpsearch-form' method='get' target='_top'>  
 <input id='tpsearch-text' name='q' placeholder='Search Tweak Peek' type='text'/>  
 <button id='tpsearch-button' type='submit'><span>Go</span></button>  
 </form>  
 </div>

Texts in red are editable. 
You can change Search Tweak Peek to Enter keywords or anything that you like.
You can change Go to Search or anything that you like.

That's it! Having trouble? Leave a comment below. :)

 t

0 comments:

Post a Comment