Email Subscription Form Widget For Blogger

Hello Friends, Welcome to BeDude. As you all know, on BeDude I bring daily blogging and blog related information to you. Today, I have brought a blog design that is not only a design but also very useful. [ Email Subscription Form Widget For Blogger ]

All of you must have heard about Newsletter, I am talking about a blog Newsletter. When you go to the Blog Newsletter and sign up and enter your email, the details of the next post are sent to your mail. This way traffic of blog grows.

Blog Newsletter has many options on the internet like MailChimp etc. Most good newsletter service is Paid but there is also a free-to-play newsletter service called FeedBurner.

If you do not know much about FeedBurner and have not created an account on it, then quickly create it. In this topic, we are about to bring you a post soon. But at the moment, this talk of Feedburner is Google’s Provide Free Newsletter service, which Millions are using

If your FeedBurner account is ready and you now want FeedBurner’s Newsletter in your blog, then this post will be very useful to you. You will find a guide to insert newsletters in your blog, as well as a special newsletter design.

How it Work ??

 If anyone subscribe on your blog with their email, then feedburner to deliver your latest posts on all subscribed emails. In this tutorial i shared 2 subscribe box widget for blogger. Using these widget you can also grow up your blog’s visitors.

Email Subscription Form Widget For Blogger

It’s a nice side to look at a cool side that you can easily use on your blog. With its charm, you can force the visitor to subscribe to the blog Newsletter. It also gives you social media icons, you can set up and connect to your social media accounts so that you do not have to use different widgets.

Email Subscription Form Widget For Blogger
Email Subscription Form Widget For Blogger

Name : Email Subscription Form For Blogger

Author : MsDesignBd.Com

 My Review

From my side this is a very good and useful widget that MsDesignBd has created. This is a very attractive blog tool that will add more to our newsletter by putting it on the blog. Also there is also social media icons, due to which we will not have to add another social media widget to your blog. This is a great widget for Blogger users.

How to Add This Newsletter in Blog

It’s a very easy job, we can easily add this widget to my blog. We just have to do the following steps, Step by Step.

  • Go to Blogger Dashboard > Template Edit HTML and past below codes right after <head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
  • Now Need to add CSS code before </style>
#subscribebox{background:#576269;padding:20px;font-family:&#39;PT Sans&#39;,sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}
  • Save Your Template
  • Now go to Layout > Add A Widget > HTML/Javascript and past below HTML code and save widget.
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
<div class="creadit">
<a href="http://msdesignbd.com" rel="dofollow" target="_blank"> Get This Widget</a></div>
  • Change # tag with your all Social Media Link
  • Change All Your-User-Name with your Feedburner Name. 
  • Now Save Your Widget…

Congratulations, you’ve put a stylish ‘Email Subscription Form Widget for Blogger’ on your blog. Now you can increase your traffic via email marketing. And this will keep your old visitors connected with you. Because Now You Have “Email Subscription Form Widget For Blogger”