Min menu

Pages

Hot

Blogger Template Blogger Tutorials

How to Add a Search Box With CSS Style to Your Blogger

Admin
(1)
A search box or search field is a common GUI element of computer programs, especially in file and web browsers and on web sites. It is basically a type of text box, the contents of which are to be searched for in a database. It is commonly coupled with a search button (sometimes indicated only by a magnifying glass symbol).

 "Attention! before you edit your HTML code, please download your template previously"

 Copy and paste the following code :
<form action='#/search' id='searchform' method='get'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value=''/>
</form>

 Explanation : # = Replace with your Website
Css Style : Copy and paste the following code after <head>

#searchform {
    position:absolute;
    right:0;
    top:80px;
}
#searchform input {
    border:1px solid #626262;
    background:#000;
    padding:5px 4px 6px;
    color:#999;
    width:215px;
    float:left;
}
#searchform input#searchsubmit {
    width:65px;
    height:30px;
    border:none;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI_36_8Vpi9ai01jKCh0fGeDL1z6i0rPwxSNQM-91rztiaRxjwQj2DvRxNDlTIykPWaiOZu7fjyOVRheCOMlOd7jFX4gxtt4AKRbM3fNsbt0CzrlC-DyqnFBgeaD0L_QS1vzzNNlDlzmg/s1600/bk_search_but.jpg) 0 0 no-repeat;
    cursor:pointer;
}

 Explanation : Red Text = Replace with your own search Background

 Google Seach Box on your Site :
<form method="get" action="http://www.google.com/search"> 
<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text"   name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="checkbox"  name="sitesearch"
 value="http://bbloggertutorials.blogspot.com/" checked />#<br />
</div>
</form>

 Explanation : Red Text = Replace with your Website
                    # = Text of your website
reaction:

Latest articles from : Blogger Template

Comments

1 comment
Post a Comment

Post a Comment