Saturday, November 24, 2012

Styles For "Follow By Email" Gadget In Blogger

Author: Gagan Masoun
Styles For "Follow By Email" Gadget In BloggerBlogger's popular feature Follow by Email which allows the blog visitor to subscribe to blog articles via email. You can find this feature in blogger dashboard under Add a Widget directory. The default style of subscription box is very simple. But you can customize this widget according to your style.

Today, I'm going to share some CSS styles which can make the "Follow By Email" widget more attractive. Simply select your desired style and copy its code below the demo image & Follow given steps.

Recommend For You:
  1. Customize Blogger's Official Popular Posts Widget
  2. Customize Blogger's Official Follow By Email Widget
  3. Customize Blogger's Official Blog Archive Calendar Widget
Today's post makes use of completely overriding Blogger's default stylesheet for "Follow By Email" widget and will force-apply styles of your choice. The steps for this widget very easy.

Customize Blogger's Official Follow By Email Widget

  • Go To Blogger Dashboard and Click Drop Down. 
  • Now Select "Template" > EDIT HTML
  • Now Click Proceed button.
  • Press Ctrl+F  & Find ]]></b:skin>
  • Choose Below Style Code and Paste Before ]]></b:skin>
<style type="text/css">
.FollowByEmail table{
padding-top:110px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGufhgJa8o4b8jFJsdX-CxBhJJxj-P1G1z0T1fukbRvg1FFeX81AUX1GW3By8j3vidbphBoas9TeLnG721c5zSpCWE8sWBaDU0GOod0I1wuW6qyFw2Q2DLDfi3Vrqh7eAKrrYGLmJzVsTf/s1600/blogsdaddy.com-subscribe+via+email3.png') center top no-repeat;
}
.follow-by-email-inner input {
border-radius: 5px;
color: #fff;
padding-left:0px;
background:#2790a8;
font-weight:bold;
}
/* css by www.BlogsDaddy.com   02 */
</style>
<style type="text/css">
.FollowByEmail table{
padding-top:110px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGNcd84A2sXufLDWoUlqo6w-O0OvyDBR3-oNDQVWeRBKzziYL9wvx8JtUhW3nXV5sqCyH7fO27GNMG2K-Vsm0HBtWV9V4oR09aAA8YHlT6Xz_4UMqUFhOVCAmgFNFTMClV0MJpfgnyC-Ml/s1600/blogsdaddy.com-subscribe+via+email2.png') center top no-repeat;
}
.follow-by-email-inner input {
border-radius: 5px;
color: #fff;
padding-left:0px;
background:#464e53;
font-weight:bold;
}
/* css by www.BlogsDaddy.com   03 */
</style>
<style type="text/css">
.FollowByEmail table{
padding-top:110px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuSCA9lVHM2TEKPOYDbypCOlUHxWzrmzG3Z7tPfsxPogSycsGd1wCYmI2l_MwQXmdNm4T3hLbOl33pnHAXJ2AZ_yni07-bmfxMzm0p89shAbZLWgaaU6-Pe6QMm9ItmKat4uUrN4p2fLQl/s1600/blogsdaddy.com-subscribe+via+email1.png') center top no-repeat;
}
.follow-by-email-inner input {
border-radius: 5px;
color: #fff;
padding-left:0px;
background:#72ac00;
font-weight:bold;
}
/* css by www.BlogsDaddy.com   04 */
</style>
<style type="text/css">
.FollowByEmail table{
padding-top:90px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF7ik-rCAoRM4jqQWFdi_9G3PUFB8XA7kJGywLtwDuU8CmTyMs7q3PrfpZIeVI35UbVzFHHrgx7xB4zaROwJYp8ia8tqN2kXqN7NbLVLujpqUkKgWvzvKe6tqatjvZs6Uh7rmxRDGFXeaM/s1600/blogsdaddy.com-subscribe+via+email.png') center top no-repeat;
}
.follow-by-email-inner input {
border-radius: 5px;
color: #fff;
padding-left:0px;
background:#f59829;
font-weight:bold;
}
/* css by www.BlogsDaddy.com   06 */
</style>

How to Add Follow By Email Widget

  1. Go To Blogger Dashboard > Layout
  2. Click on Add a Gadget and Select The "Follow By Email" Gadget
  3. Give It Title and Click On Save Button
  4. Its All Done :)
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 customization's. Have fun. :)

3 comments:

  1. Thanks Gagan. I applied this on my blog
    www.usefultricks.tk

    ReplyDelete
  2. This helped me a lot thanks brother. And I am sorry for I removed your site name from CSS Part.

    ReplyDelete
    Replies
    1. Hello Rishabh,

      Its ok brother. But try to give a little credit to out work through your blog post link etc. It will be helpful for us.

      Thanks
      Gagan

      Delete