Change Color of "Follow By email" Gadget in Blogger

Yes you can surely change background colour of the Submit button, Text input box, font size and colour of the Submit button of Follow by Email gadget. Blogger recently announced a Follow by email subscription box that helps your readers to subscribe to your daily blog updates. Luckily after offering my fajr prayers an idea clicked my mind as why not personalize this RSS email widget and hence I came up with this post. Today's tutorial makes use of completely overriding Blogger's official stylesheet for the widget and will force-apply styles of our choice. The steps for this widget are extremely easy. Kindly first see a demo,

Live Demo

Customize "Follow by email" in Blogspot

To enable Follow by Email, click the Add a Gadget link from the Design | Page Elements tab, and then select the Follow by Email gadget. After having added the gadget to your sidebar, follow these steps,

Go To Blogger > Design > Edit HTML
Backup your template
Search for,

]]></b:skin>

4. Just above it paste the following CSS code,

/*---Copyrighted MBT's Tutorials---Follow by email---*/

.FollowByEmail .follow-by-email-inner .follow-by-email-address{color:#4DA6FE !important; width:100%;height:22px;font-size:13px;border:1px inset}

.FollowByEmail .follow-by-email-inner .follow-by-email-submit{width:60px;margin:0;border:0;border-radius:4px !important;-moz-border-radius:4px !important;background:#4DA6FE !important;background:rgba(0,0,0,.6);color:#fff;font-size:13px;height:24px;z-index:0}

.follow-by-email-inner .follow-by-email-submit:hover{background:#FF7700 !important;}

Make these changes,

To change Input text color then edit #4DA6FE . Use our color generator tool
To change Submit button background color in active mode then simply edit #4DA6FE
To change the background colour of submit button on mouse hover mode then edit #FF7700

5. Save your template and you are all set!

View your blog to see the new changes successfully applied. Now enjoy putting a better impression on your readers and stand out from your competitors by using a custom follow my Email gadget. Let me know if you needed any further customizations. Have fun. :)

Pin it

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 9/11/2011 CSS and HTMLTricks , Widgets

7 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

Promo Code LandSep 11, 2011, 6:13:00 PM
Hello Mohammad can you please show me how you write that code inside the Content ....???that MTB coding
Priyanka rautela dhankarSep 11, 2011, 6:43:00 PM
Hey MOhd. Sorry brother this is little off the topic question but i thought that by commenting here i might get ur quick attention ..reply :)

Brother please share as how to add adsense for custom search ...pls pls i need this and its really urgent as i am not able to do it rightly ...mohd if u dont have time to make post on this then i can send u my adsesns password too,believe me i have blind faith on u,so this way u can put my adsens in my websites and later u can publish a post on this topic .......brother its urgent !!!!

2.Mohd. you know what I launched a new site on Friday http://shirdisaibabaprayerclub.blogspot.com/ .This is a prayer club ,where all can pray for each other,I am telling you this because I used ur tanzanite templet in this and I am using it as a forum ...pls see the site and kindly give ur suggestions and views ...
blessings to u
Mohammad Mustafa AhmedzaiSep 11, 2011, 8:26:00 PM
@totalclicks
Read this brother Create a blockquote

@Priyanka

Sis I have already published a tutorial on it. Kindly check this: "How to integrate AdSense in Custom Search engine?"

And I always like your color combinations. :) Great job again Sis. Though I think MONOP would have suited your new blog more. Do try it too as many blogs have started using it.
Priyanka rautela dhankarSep 11, 2011, 10:38:00 PM
Hey thanks Brother for the post link i wonder how i missed it ???

2.you know why I use tanzanite because now i am very comfortable with its designing as i am using it in almost all my sites ,but still i will consider this monolop also soon ,but believe me your all templets are just simply great and dam easy to customize !!!

mohd. thanks for appreciating the color combination but still the credit is all your's because I am able to do it JUST BECAUSE OF YOUR COLOR WHEEL AND COLOR CHART .without it it was impossible to do it at ALL....

THANKS ...THANKS...THANKS...ALWAYS AND FOR EVERYTHING :)
Blessings to you
ur sister
priyanka
ilikewinterOct 10, 2011, 2:34:00 AM
Thank you so much for this tutorial! I was wondering if you could tell me how to change the width/height and also how to get it to say "Subscribe by email" or "Enter email here" inside the text box?

Thank you! Wonderful instructions. =)
AnonymousOct 11, 2011, 5:43:00 PM
The only irritating aspect of this, is that you can't change the border style from inset. If you choose 'solid' instead of 'inset', nothing changes. I just want a simple box border instead of the default where the top and left sides are thicker than the rest.
SteffyJul 22, 2014, 3:26:00 PM
Thank you so much for this!