LabStrike Style Expandable Search Box for Blogger

Expandable Search Box for Blogger
You might have seen this expandable search box in LabStrike. Some of LabStrikes readers asked me via contact form about this expandable search box which Ive had added. So today, in this post let me share this Expandable Search Box widget with my LS readers. Its just like Apple.com style search box. Means, by default it seems black in color and when clicked it changes black to white in color.

Before we get started, youll be able to see the demo search box at the top right of LabStrikes sidebar, or if you wanna see the demo here itself, just see the demo search box below.


LabStrike Style Expandable Search Box – Live Demo




Please note: This Search box works Perfectly Under Mozilla Firefox, Google Chrome and Opera (especially under Firefox) and its not good under Internet Explorer 7 or older.

How to Add this Search Box to your Blogger? 

Step #1: Go to BloggerLayoutClick on Add a Gadget or click this link to navigate your account to blogger Layout in one step. Then copy & paste as plain text below code in Add a Gadget.

<style>
#search {
}

#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    background: url(search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

</style>
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>

Before saving your Gadget please follow below customizations if you want:

  • #444 - Change your default color (black) with your own desired color. 
  • width:150px; - Shows search box width in default. 
  • Search... - You can change the text to show in search box with your own (eg: Search in LabStrike)

Step #2: Save your Gadget and drag your Search box Gadget to the top/middle of your blogger sidebar (because it make your visitors feel that youre a professional blogger) and click Save arrangement. Now youre done. Dont hesitate to ask your doubts via comment and do share this if you have liked.

Also see: Advanced CSS Search Box with Select Option for Blogger