Blogger Widgets

Stylish Search area in blog.


     
     
  • 2. Click the Layout tab from your blog Dashboard.
  • 3. Click Page Elements.
  • 4. Click Add a Gadget above the section you want to put your search box in.
  • 5. Click the plus sign next to HTML/Javascript.
  • 6. Type Search this site (or whatever you want) in the Title box or leave it blank.
  • 7. Copy and paste this HTML code in the text area.

<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='255' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}' onfocus='if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}' type='text' value='Search this blog...'/>
<input id='searchbutton' type='submit' value='Search'/>
</form>
  • 8. Click on Save
  • 1. Click the Template tab from your blog Dashboard
    2. Click on Edit HTML tab and then click on Proceed
    3. Now find this code   ]]></b:skin>
    4. Past the following code just above the ]]></b:skin>
    #searchform {
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: inline;
    }
    #searchbox {
        background: #fff !important;
        width: 180px;
        color: #202020;
        font-size: 12px;
        font-family: Georgia, Times New Roman, Trebuchet MS;
        font-weight: normal;
        margin: 0;
        padding: 3px 0 8px 5px;
        border-top: 1px solid #DDD;
        border-right: 1px solid #666;
        border-left: 1px solid #DDD;
        border-bottom: 1px solid #666;
        display: inline;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    border:1px solid #6BB5FF;
    }
    #searchbox:hover {
        background: #fff !important;
        width: 220px;
        color: #202020;
        font-size: 12px;
        font-family: Georgia, Times New Roman, Trebuchet MS;
        font-weight: normal;
        margin: 0;
        padding: 3px 0 8px 5px;
        border-top: 1px solid #DDD;
        border-right: 1px solid #666;
        border-left: 1px solid #DDD;
        border-bottom: 1px solid #666;
        display: inline;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    border:1px solid #6BB5FF;
    }
    #searchbutton {
        -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
        -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
        box-shadow:inset 0px 1px 0px 0px #bbdaf7;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
        background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
        background-color:#79bbff;
        -moz-border-radius:22px;
        -webkit-border-radius:22px;
        border-radius:22px;
        border:1px solid #84bbf3;
        display:inline-block;
        color:#ffffff;
        font-family:arial;
        font-size:11px;
        font-weight:bold;
        padding:3px 11px;
        text-decoration:none;
        text-shadow:1px 1px 0px #528ecc;
    }#searchbutton:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
        background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
        background-color:#378de5;
    }#searchbutton:active {
        position:relative;
        top:1px;
    }
     
HTML Comment Box is loading comments...

About

About
Friends, this is Muzammil Sethi here, the administrator of Blogging Junction Read more

Suggestions

Do you have a tip you want to share, or do you have a suggestion you want to make for a future tip or trick. Then please head over to the contact page and make your comment known.

Contact

Fancy a chat, you can contact me easily. I will respond to any question you ask. Interested in an advertising partnership, have a cool product you want to promote, then please leave a message.

Subscribe

Connect with this site through these methods: