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 ?
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5vJlMMUaO-TGO5gyOUudatKmV-7YssnATWXUrVJDcwfzPtsP9yRVZl9JPmKem2Yr04_Y6WgFyEIz2fIKFDd0IOVDwLs_XMMUHL9NRJJLLEAPi3bjDiX-s8LRrHxVHAfbxcemhIx-ln2xw/s1600/search-icon5.png) 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 ('' === this.value) {this.value = 'Search here…';}' onfocus='if ('Search here…' === this.value) {this.value = '';}' placeholder='Search' type='search'/> </form>
Step5: Save changes, That's it.
