Friday, May 12

Expanding Search Gadget For Blogger

Expanding Search Gadget For Blogger

Expanding Search Gadget are the gadget designed using html and css , when a user clicks on a search button they expands so that user can enter search query and after search they again become button or a icon.

Why use expanding search gadget ?

    • Light weight: Uses no external data and are very fast.
    • Responsive: Automatically width height adjustment according to the screen size.
    • Customizable: Customize according to your site theme.
    • Minified Pure CSS and HTML.
How to install expanding search gadget in blogger ?

Step1: Go to Blogger > Theme > Edit html and search for ]]>< using Ctrl+F.

Step2: Paste below CSS codes before the  ]]>< and save theme.

#blog-Search input[type=search] {width: 35px;height:35px;background: #000000 url( no-repeat 2px center;border: 1px solid #000000;border-radius:50%;color: transparent;cursor: pointer;outline:none;}
#blog-Search input[type=search]:hover {background-color: #3d3d3d;}
#blog-Search input[type=search]:focus {width: 40%;padding-left: 15px;padding-left: 30px;outline:none;color: #000;height:35px;border: 1px solid #000000;border-radius:10px;background-color: #fff;cursor: auto;}
#blog-Search input:-moz-placeholder {color: transparent;}
#blog-Search input::-webkit-input-placeholder {color: transparent;}

Step3: Now go to Blogger > layout > add a gadget (Where ever you want search gadget to appear).

Step4: Choose HTML/JavaScript and paste below codes in content box.

<form action='/search' id='blog-Search' method='get'><input name='q' onblur='if (&apos;&apos; === this.value) {this.value = &apos;Search here…&apos;;}' onfocus='if (&apos;Search here…&apos; === this.value) {this.value = &apos;&apos;;}' placeholder='Search' type='search'/> </form>

Step5: Save changes, That's it.