Styles For "Follow By Email" Gadget In Blogger

Blogger'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. :)