Skyrocket Your Blog Traffic!
Join our newsletter to get guides which will help you boost your blog traffic for free!

New Style Expanding Search Box With Effects!

9/29/2015 No Comment
There are many basic widgets required by a blog in which search box comes first therefore we created awesome expanding search box with effects!
Expanding Here means that when user clicks on input box the search box will change it's width with transition.So let's start talking about features of this widget-

Features Of This Widget-

1- Fully Responsive
2- Added Hover Effects
3- Transition's added
4- Beautiful
5- And More...

                                          LIVE DEMO

So let's start adding this widget in the blog-

These are very simple steps which you need to do with customization's-

1- Go To Blogger Dashboard
2- The Go To Layout >> Add A Gadget >> HTML/JAVASCRIPT 
3- Now Paste This Code In It With Your Customization's-

  <!--Expanding Search Box By MBA-->
<form action='/search' id='searchform' method='get'>
<input class='mba-box' id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = "";}' type='text' value='Search...'/>
<input id='searchsubmit' class='mba-bt' type='submit' value='Go'/>

.mba-box { width: 100px; height:30px; transition:1s; border:1px dashed; padding:4px; }
.mba-box:hover {border:1px solid green!important;}
.mba-box:focus { width:150px; border:1px solid;box-shadow:1px 1px 4px 1px black;}
.mba-bt { transition:0.5s; background:black;color:white;height:30px;border:2px solid black;}
.mba-bt:hover {background:white;color:black; }


Replace 100px  with the search box width , 30px  with the height of the box , green  with the border color on hover and white with background of button on hover and black with color of text in button on hover.

How's That ?

Hope you liked this widget and shared it with your friends. By the way did you saw any bug on the widget? If Yes then let me know through comments and do share this post :)

Join Our Newsletter!

Join our newsletter to get regular updates with secret tips/tricks to skyrocket your blog rankings!

No comments:

Post a Comment

Powered by Blogger.