Home
Blogger

Add Custom Follow by Email widget on Blogger Site

Add Custom Follow by Email widget on Blogger Site
email widget

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 Email widget 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.
follow by email widget

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

 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 Email widget  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/AVvXsEhx4ucUHjWFbMDUiqvR7biz0LK2yifb2-HeAJt1Atw3Gv82bpXXIgsXBvWbFPvq96t8sW9BC3BwxFrQjMMpzj-LppNuqfd1It1BCR0O6jvyoNnDRxrYYj9pIMKk_bRALYOHagEy2e20QvIu/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.

email subscription

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. 

17 comments

  1. Have missing some line in your post!!! Check and update your posts
    • Hi Anas, I have tested this widget in several site. It is working fine. Can you tell me what kinds of problems you are facing?
  2. Where do I paste this code?
    • Ohh thanks bro.. I have skipped one steps in tutorial. Please check the tutorial now. I have added Step 3 and Step 4. thank again. You have to add the code before closing b:skin
  3. Hi, Followed all the steps but have two issues
    1. The final output had a blue background in the section to type in 'email address..' making it difficult to read the prompt to insert email, cant find where to change color for that section
    2. only half of the 'submit' text is displayed
    • Hi Macaulay. This is happening for your existing template code. Because your template already have CSS code for input and Text Box. like below--

      .enews {

      float: left;

      }
      input { color: #333; width:175px; -moz-box-sizing: border-box; box-sizing: border-box; }
      input[type=text], select, textarea { background: #F45A5A;
      border-color: rgba(0, 0, 0, 0);

      -moz-border-radius: 3px;

      cursor: pointer;

      padding: 12px 15px;

      text-transform: uppercase;
      display: inline-block;
      background: #0db9e7;
      font-size: 12px;
      letter-spacing: 3px;
      font-weight: bold;
      height: 110px; }
      textarea { color: #333; font-size: 12px; text-transform: none; }






      /***** Button CSS *****/
      input[type="button"],
      input[type="submit"], .showpageNum a, .showpage a, .showpagePoint, .button { border-color: rgba(0, 0, 0, 0);
      -moz-border-radius: 3px;
      cursor: pointer;
      padding: 12px 15px;
      text-transform: uppercase;
      display: inline-block;
      background: #EF2673;
      font-size: 12px;
      letter-spacing: 3px;
      font-weight: bold;
      height: 109px;
      color: #fff;}
      input:hover[type="button"],
      input:hover[type="submit"], .showpageNum a:hover, .showpage a:hover, .showpagePoint, .button:hover { background: #000; color: #fff; text-decoration: none; }

      In this case you should use your default script. and to use my widget you can add the below line only. Then it will match with your current blogger template code.

      /* Widget by www.bloggerspice.com */
      .FollowByEmail .follow-by-email-inner{padding:16px 8px;background:#000000 url(http://3.bp.blogspot.com/-vmhZWva5sok/VO6eKkpwWoI/AAAAAAAAJpQ/M6-AxOr9ACY/s1600/BloggerSpice%2BRSSIco.png) left bottom no-repeat;}
      .FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover{opacity:0.8;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);}


      Thanks. :up
  4. thanks for this ways... I'm Glad, and wanna try ..
    • Menyambut Said, Jika Anda memerlukan bantuan maka silakan menulis saya. ^_^
  5. Hello sir
    Your website is on blogger.com or wordpress ?
    • Hi Akashii. currently my site hosted in Google Blogger and my Domain is Google Domains. I have purchased from Google.
  6. Nice post Mr, F.Rabbi I always like your blogging related tutorial.
    http://blogsnucleus.blogspot.com/
    • Thanks Kalam...but now Blogging tips and tutorial niche is very competitive. You have to spend much more time to grow your Blog. ^_^
  7. i have added the gadget follow by email but its not appearing in the blog what should i do??
  8. nice article. thnks for sharing this important code. http://www.sarkarinaukrifarm.com
    • Welcome mate, :) and also thanks for dropping your comment.
  9. Ayam ayam jago Terbaik di Indonesia

    video sabung ayam bangkok
  10. a
Go Up