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 [a href="http://buzz.blogger.com/2011/03/engage-your-audience-with-follow-by.html" target="_blank"]announced[/a] a Follow by email [a href="http://www.mybloggertricks.com/2011/01/create-cute-subscription-form.html" target="_blank"]subscription box[/a] 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 [a href="http://www.mybloggertricks.com/2011/05/create-wordpress-subscription-form.html" target="_blank"]RSS email widget[/a] 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,
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 [a href="http://www.mybloggertricks.com/2008/01/color-code-generator-and-color-wheel.html" target="_blank"]color generator tool[/a]
- 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. :)
Post a Comment