0

How To add Email Subscription Widget To Blogger Blog?

Email subscription widgets help you to get more subscribers to your blog. These widgets not only increase your traffic but also helps you to grow a loyal community. You can use these emails any time to make your reader updated about your services or posts.

So let's begin

This Article would cover:
  • What are some Different ways for adding Email subscription Widget?
  • Step by Step guide to add Widget to blogger blog.
  • Some Attractive Email Subscription widgets for blogger.
  • Final words: Some tips

What are some Different ways for adding Email subscription Widget?

There are many ways for showing your subscription box there is no limit for Imaginations.
You can add them as:
  • In sidebar of your blog
  • As a pop up that will appear as anyone visits you blog
  • As a default simple design provided by Feedburner 
  • In footer or header area of Your blog
  • You can also provide Direct link To your Subscription
  • And many more....
In this article I would be talking about How to add Subscribe By email Widget in Sidebar of your blog.

 Step by Step guide to add Widget to  sidebar of blogger blog

  1. Set up feedBurner. I have explained this in my previous post.
  2. Login to blogger > go to layout > click on "Add a gadget" in sidebar area
     3.From the window scroll down and Click on HTML/JavaScript

        4.Now paste the following code In the Box:
<style>
/* ----------------------------------------------------
Sidebar Subscription Box Widget = V.2
Designed by :: http://www.TwistBlogger.com
Distributed By ::http://www.Theeventsfeed.com
Keep These Credits Intact, Do Not Remove
-----------------------------------------------------*/
#twist-blogger-sbox-v2 {
  padding: 0;
  padding-bottom: 5px;
  font-family: inherit;
  display: block;
  margin: 0;
  width: 100%;
  border-radius: 1px;
  border: 0;
  background: #363636;
}
#twist-blogger-sbox-v2 .main_tagline {
  padding: 0px 0px;
  line-height: 2.5em;
  font-size: 26px;
  margin: 0;
  height: 95px !important;
  overflow: hidden;
  font-weight: normal;
  color: #FFF;
  text-align: center;
  border: 0;
  background-color: #FF5959;
}
#twist-blogger-sbox-v2 .email_icon {
  display: table;
  margin: -35px auto 0px;
  font-size: 25px;
  padding: 12px;
  height: 25px;
  width: 25px;
  background-color: #363636;
  color: #FFF;
  border-radius: 50px;
  border: 10px solid #FFFFFF;
  line-height: 0;
}
#twist-blogger-sbox-v2 p {
  font-size: 15px;
  color: #F9F9F9;
  text-shadow: 0px -1px 0px #000;
  line-height: 27px;
  padding: 5px 10px 5px;
  text-align: center;
  width: 80%;
  margin: 5px auto 20px;
  border-bottom: 2px solid #6A6A6A;
  border-radius: 20px;
}
#twist-blogger-sbox-v2 .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
}
#twist-blogger-sbox-v2 .rssform input {
  padding: 8px;
  margin: 20px auto 15px;
  font-size: 13px;
  color: #000;
  text-align: center;
  display: block;
  font-family: inherit;
  font-weight: normal;
  width: 90%;
  height: 38px;
  text-transform: uppercase;
  outline: none !important;
  border: 1px solid #FFFFFF;
  border-radius: 1px;
  background-color: #FCFCFC;
  box-sizing: border-box !important;
}
#twist-blogger-sbox-v2 .rssform .button:hover {
  background: #000000;
}
#twist-blogger-sbox-v2 .rssform .button {
  background: #FF5959;
  color: white!important;
  border: 1px solid #FFFFFF;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  padding: 5px 2px !important;
  float: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}
#twist-blogger-sbox-v2 .bottom_lock_policy {
  background: url(http://4.bp.blogspot.com/-kYVqV9JYDHY/VPMC8jPKTGI/AAAAAAAAA28/zxv0TYRIZe4/s1600/Lock-twistblogger.png) no-repeat 3% -2px;
  color: #959595;
  text-align: center;
  font-size: 12px;
  margin: 0;
  padding: 3px;
  line-height: 25px;
}
#twist-blogger-sbox-v2 .bottom_lock_policy a {
  color: #959595;
  text-decoration: none !Important;
}
#twist-blogger-sbox-v2 .social_profiles {
  line-height: 1.2em;
  display: table;
  float: none;
  margin: 0px auto;
  text-align: center;
  min-width: 157px;
  padding: 5px 0px;
  border: 0;
}
#twist-blogger-sbox-v2 .social_profiles a:hover {
  color: #FFF;
  background-color: #FF5959;
  border-color: #FFF;
}
#twist-blogger-sbox-v2 .social_profiles a {
  color: #000000;
  margin: 0 5px;
  text-align: center;
  float: left;
  display: table;
  padding: 4px 5px;
  background-color: #FFFFFF;
  border-radius: 50px;
  border: 2px solid #2D2D2D;
  width: 15px;
  height: 15px;
  line-height: 0;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
#twist-blogger-sbox-v2 form {
  margin-bottom: 10px !important;
}
</style>
<div id="twist-blogger-sbox-v2">
            <div class="main_tagline">Join Our Newsletter</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
                 <p>Get All The Latest Updates Delivered Straight Into Your Inbox For Free!</p>
   <div class="rssform">
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Theeventsfeedblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="Enter your email address...">
            <input type="hidden" value="Theeventsfeedblog" name="uri">
            <input type="hidden" name="loc" value="en_US">
            <input value="Join Now" class="button" type="submit">
            </form>
            </div>
      <div class="bottom_lock_policy">We Respect Your Privacy |
            </div>

I am Using a responsive Subscription box by Twistblogger  You can use Any  other  as u wish . You can find them on google.
Now Change Theeventsfeedblog       with your feedburner Url or username That You had set up while setting up feedburner.


6. Now click on ok  and then save arrangement on top right of your blogger dashboard
 You are done! you can  check  your changes on your blog.





Some attractive and stylish Email subscription widgets for blogger 2016


  • Hackinguniversity Subscribe Widget:

blogger subscribe widget

This one is a clean And Attractive Widget



  • Bloggingeasier Email Subscribe Widget



subscribe widget
Responsive And Stylish





  • Allbloggertricks Subscribe Widget


email newsletter widget

Get this widget
  

You can get more from google



Final words

I hope that You learned to add email subscription widget in blogger. If you still have any queries You can ask them in comments. One important thing i want from you that if you use someone else's Code for the widget please do not remove their credits because they have spent hours to design them And they will be demotivated by this activity so i request to you that please do not remove their credits.
if you liked the article please share !!!
And if u still Haven't subscribed to my newsletter please do it immediately so that we can update you always.
   

Post a Comment

 
Top