Customized Search and Email Gadgets (Blogger)

Customized Search and Email Gadgets (Blogger)

Around this time last year, I did two tutorials for customizing the search and email gadgets for Blogger. Well today we’re going to bring both of those tutorials into one and update it with some new cool CSS :)

So what shall our new search and email gadgets look like? Check it out:

emailandsearch

Remove Old CSS

If you used either of my previous for the search gadget and the email gadget, then we’ll first need to go into your CSS and remove that code. If you’ve never customized the search bar or email gadget, you can skip this step.

It’s important that this CSS is removed if you have it because we don’t want it to override the new CSS we will be putting in.

If you’re not sure where your CSS is, follow this tutorial.

Search Gadget

For the search gadget paste in the following CSS with your color choices:

Apply changes, then you’ll need to go to Blogger > Layout > Add a Gadget > HTML/JavaScript

For the gadget content, paste in the following code and click Save:

Email Gadget

First you have to choose your colors here: http://www.huecode.com/ Just copy the code in the color textbox and paste it where the all caps text is. Don’t delete the semicolon at the end though.

Then go to Blogger > Template > Customize (button) > Advanced > Add CSS, and paste in the following CSS with your color choices:

Email Gadget not working?

That CSS only works for the Blogger Feedburner gadget. Yours is probably pasted in from the Feedburner site instead. What you would need to do, is add:

to the beginning of that code you use, and

to the end of the feedburner HTML code.

Then add this CSS:

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

30 thoughts on “Customized Search and Email Gadgets (Blogger)

  1. This is an awesome tutorial, I can’t use it anymore as I’m on self hosted WordPress but it’s still great and will recommend this to anyone who’s using Blogger! :) And I am in love with your new design! x

  2. I love your new design so much! And thank you for the updated version of the email subscription.

    I would really love if you could do a tutorial on how to edit the blogger comment design because the original one is horrible!

    xoxo

  3. Thank you Stephanie for your tutorials! I love how the tabs look so simple and classy. I was able to implement the search bar correctly, but for some reason the email subscription tab is not changing :( Any idea what I may be doing wrong?

    Thanks!

    1. That CSS only works for the Blogger Feedburner gadget. Yours is probably pasted in from the Feedburner site instead. What you would need to do, is add:

      to the beginning of that code you use, and

      to the end of the feedburner HTML code.

      Then add this CSS:
      .feedburner form{
      border: 0 !important;
      }

      .feedburner input[type=”text”]{
      width: 98% !important;
      height: 32px;
      font-size: 13px;
      color: #666;
      border: 1px solid #ccc;
      padding-left: 1%;
      }

      .feedburner input[type=”submit”]{
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      color: white;
      background: BACKGROUND COLOR;
      font-size: 13px;
      height: 28px;
      z-index: 0;
      border-radius: 0px;
      }

      .feedburner input[type=”submit”]:hover{
      background: BACKGROUND HOVER COLOR;
      }

      1. I was wondering how to adjust the spacing between the bos and the submit button. At the moment there is none. I tried fiddling around with the padding and margin but wasn’t successful.

  4. Thankyou, Thankyou, Thankyou, this saved my blog. Eben though it took me 30 miniutes to work out I had to add the email bar gadget to get the design to work though!!

  5. Hi there!
    I was just wondering if there was a way to put the search bar in my navigation bar for my website. Pls get back to me asap! xoxo

  6. Hi, first of all, thank you so much for your tutorials! They are all so helpful :) I was just wondering if theres a way of editing the look of the ‘submit’ button? Or have you already included that and I’m being a tad dense? haha! x

    1. It’s not working for yours because the input tag was changed and the class name doesn’t match.
      Looks like your HTML is this:


      You’ll have to find that input tag in your HTML and change that all caps SUBMIT to lowercase. So from follow-by-email-SUBMIT to follow-by-email-submit

    1. Yep! For the search box HTML, change the placeholder text:

      placeholder=’Search Site’

      For the email gadget, go into your template, and search for:

      class=’follow-by-email-address’

      then you can change this text:

      placeholder=’Email address…’

        1. Hi Cassidy,

          When you’re searching, make sure you click inside the code box, press Ctrl + F, and type your search in that little search box that appears in the top right of the code box. Don’t use your browser’s search box.

          Try searching for both

          and

          Make sure there are no spaces before or after in the search box.

  7. Hi Stephanie!

    These look lovely and I would love to use both of them on my blog but I’m having some trouble getting them to work!

    The search gadget appears with ‘Search’ button and the field to type in and it also appears much smaller than the preview in your post. I got rid of the button by deleting the line in the HTML/Javascript gadget but wasn’t sure this was the best way to go about it.

    And for the email gadget I assume you have to first add the gadget to your blog, so did that, but pasting the code in the Advanced > Add CSS section appears to make no changes to its appearance at all. I am using the ‘Follow By Email’ gadget available to add in Blogger Layout.