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(https://3.bp.blogspot.com/-QlIuE4wO9_0/WRW4odk3I9I/AAAAAAAABvU/Ueqf-fWx-tEdIONVQvyyo0pQyJPRl-cVwCLcB/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 (&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.

3 comments:

  1. Firstly, thank you for your sharing about this development tips. I believe this article will useful for many readers.friv jogos online
    jogos online 2019
    friv jogos 4 school online

    ReplyDelete
  2. Hello. This post couldn’t be written any better! Reading this post reminds me of my previous roommate. He always kept chatting about this. I will forward this page to him. Fairly certain he will have a good read. Thank you for sharing.
    kizi unblocked
    free games online
    friv2019

    ReplyDelete
  3. This is no longer true. Unlike the artistic visionaries of inter- war Europe, who interpreted the last breath of a dying world-order through their brazen art, we see no such aesthetic effort today when the world is teetering on the brink of another geopolitical crisis of equal gravitas, when there is every indication of a tectonic shift in the post-Cold war balance of power.
    Jogo live
    360 jogos
    games io

    ReplyDelete