You might have seen this expandable search box in LabStrike. Some of LabStrike’s readers asked me via contact form about this expandable search box which I’ve had added. So today, in this post let me share this Expandable Search Box widget with my LS readers. It’s 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, you’ll be able to see the demo search box at the top right of LabStrike’s 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 it’s not good under Internet Explorer 7 or older.
How to Add this Search Box to your Blogger?
Step #1: Go to Blogger → Layout → Click 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.
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 you’re a professional blogger) and click Save arrangement. Now you’re done. Don’t 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