Add Custom Follow by Email widget on Blogger Site

Follow by email widget is for connecting readers with blog and web site. In terms of Blogger platform whoever subscribe by follow by email widget they will receive all latest post into their email inbox after publishing. As a result if readers don't have time to visit blog but they can get the content in their personal email. So Readers are benefited by subscribing on blog by submitting their email address through Follow by Email widget.

Google Blogger has this beautiful widget by default where visitors can easily subscribe, however default widget is not always preferable by users. So I just brought a simple change by adding a small piece of graphics. It will look awesome but widget will load very fast. So please follow the below steps for adding Follow by Email widget in your Blogger site.

Inserting Default Follow by Email widget

First of all we have to add Follow by Emailwidget on our Blogger Site and after that we will tweak that widget by CSS coding.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "Follow by Email" Widget.

Step 4 Now configure your widget by changing widget title feedburner URL (If required) And finally click on Save button.

That's it you have inserted Blogger Default Follow by Email widget. Now go for CSS coding. 

Tweaking the Follow by Email widget

After successfully inserting the Follow by Emailwidget  in Blogger Layout section I will tweak for modify the default widget with CSS coding.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML

Step 3 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)   

Step 4 Copy the code from below and Paste the code above/before </b:skin> 

/* Widget by www.bloggerspice.com */
.FollowByEmail .follow-by-email-inner{padding:16px 8px;background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX9o-LbWAya-hIAUetla5cdFQcf6nmc4TsEAqgr7KRON_q7MYXZdBa18r4i8cBE3yvZQH9uujVKslBl8-WTlA9PjjbVpcEmHhQQc4EE3hITVNXSsnmsGNInsRXpBIJPn_R4xp8hIy9GxFu/s1600/BloggerSpice+RSSIco.png) left bottom no-repeat;}
.FollowByEmail .follow-by-email-inner .follow-by-email-address{outline:0;border:1px solid #000000;padding:1px 0;}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit{background-color:#33AAFF;margin-left:8px;}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover{opacity:0.8;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);}

Step 5 After that click on Save template button. Final output will be like below Image.

Now check your Blog to see the beautiful Follow by Email widget. I hope after adding this your Blog subscriber will increase rapidly. If you facing any trouble then feel free to leave a comment below.