Hot To Add Unique Email Subscription widget in Blogspot Blogs

Hello Everyone Today we are back with New Update of  Social Follow Buttons + Email Subscription widget blogger v2.0 Last time we have shared Only Attractive Email Subscription widget without Social Follow Buttons like Twitter and Facebook. Now This  Email Subscription widget blogger v2.0 is loaded with Facebook and Twitter Follow Buttons with likes and followers counter. which works on JavascriptHTMLCSS Which can be added to your Blog or Website Sidebar Which Looks very attractive and can get good subscribers. For a Website or Blog. Loyal subscribers are very important who can follow your tutorials and share your content and give you necessary feedback when you ask. So This  Feedburner Subscription Form Widget is very Important for Bloggers. Google Feedburner is most used and most favorite opt-in medium of Blogger Users. Feedburner is free and Has Many Good Features Like the Paid Opt in Services but it is not updated from very long time. Then Also still this is most popular medium to raise
email subscribers And Optimize Your Feeds.

2016 Best Animated Feedburner Subscription Widget for Sidebar

What is Social Follow Buttons + Email Subscription Widget?

Animated Feedburner Subscription Widget. is a form by Feedburner To Get Subscribers By Email As the Feeburner Form By Default does not looks Good. By Using CSS We Have made this Widget Look Much Better And Improve The Load Time Of Website by Designing This Widget By Using Pure CSS. Even The Animation is Designed By Using CSS3. And This Widget is Recommended To All Webmasters To Get Good Subscribers and And To Make Your Site or Blog Popular.

Why To Use Social Follow Buttons + Email Subscription Widget?

Animated Feedburner Subscription Widget Has Many Features like:
  • Pure CSS script is used in this widget So That This widget does not effect on the Loading Speed of the Site.
  • This Widget Does not need more space it can be added to Sidebar, Footer or inside the posts also.
  • Most Advanced way of animating which is by Using CSS Have been used to create this widget
  • This Widget is Very Flexible and Can Be Customize easily according to your theme or Template.

What is new in Social Follow Buttons + Email Subscription Widget?

Social Follow Buttons + Email Subscription Widget is one of a kind in which we have added twitter and Facebook Follow Buttons with Feedburner Email Subscription Form. and Animation by Pure CSS with Unique and attractive design to attract users. And It is Responsive. Yes heard it right it is responsive and Work on any device with ease and does not effect much on loading time. no need of adding separate widgets for Facebook and twitter this One Widget will do all the jobs for you.

See The Working Demo in the Sidebar of our Site:

Let Start! How To Add  Animated Feedburner Subscription Widget in Blogs or sites:

Steps To Add Animated Feedburner Subscription Widget:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

Blogger Layout

STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.

Add a Gadget

STEP 3: Click On "Add a Gadget" As highlighted in the image above.

STEP 4:After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list 
and Open it as highlighted in the image above.

STEP 5: Now Copy This Below Code And Paste it in The Empty Box of the "HTML/JavaScript" Section.
<div class="socialWrap">
<p class="headline1">Follow Us on <span id="fb_H1">Facebook</span> & <span id="tw_H1">Twitter</span></p>
<div class="formWrap">
<a href="" class="twitter-follow-button" data-show-count="true" data-size="large" data-show-screen-name="false">Follow @latestgames2</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+'://';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); = id;
  js.src = "//";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="" data-width="100px" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>

<div class="clear"></div>
<p class="headline1"><span id="feed_h1">Subscribe</span> To Our Blog</p>
<p class="headline2">Get Latest Updates Directly to your inbox</p>
<span> <i class="fa fa-envelope"></i>
<img src="" />
<div class="formWrap">
<form class="innerForm" action="" method="post" target="popupwindow" onsubmit="'', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><input alt="Enter your email address:" placeholder="Enter your email address:" type="text" style="width:140px" name="email"/></p><input type="hidden" value="TopFullGamesdownload" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="button" type="submit" value="Subscribe" /><small>Designed by <a href="" target="_blank">Trending Widgets</a></small></form></div></span></div>

/* Designed By */
*{padding:0px!; margin:0px; box-sizing: border-box;}
.socialWrap {max-width: 350px; min-width: 250px; padding: 5px; width:100%; text-align:center; background:url(;background-position: 0px 0px;
background-repeat: repeat;
animation: animatedBackground1 10s linear infinite;
background-size: cover;

.headline1{margin: 10px 0px 0px 0px; display:inline-block; background: rgba(0,0,0,0.1); color: #fff; font-family: arial, helvetica; opacity: 0.7; font-weight: bold; font-size: 150%;width:100%; padding:5px;}
.headline1 span:nth-child(2)
p.headline2{color:red; font-family: arial, helvetica; background: rgba(0,0,0,0.1); color: #fff; opacity: 0.7; font-weight:400; font-size: 90%; margin: 0px 0px 10px 0px; width:100%;}
p input {width: 250px!important;height: 30px; background:rgba(0,0,0,0.5); padding: 0px 10px; margin: 15px 0px 0px 0px!important; border: none; font-weight:550;margin: 5px 0px;color: #fff; border-radius: 5px;border: 1px solid rgba(0,0,0,0.7)}
.button {width:250px; height: 30px; background:rgba(0,0,0,0.5); color:darkgrey; font-weight:bold;margin: 10px 0px; border-radius: 5px;border: 1px solid rgba(0,0,0,0.7);cursor: pointer;}
.formWrap {
background-position: 0px 0px;
background-repeat: no-repeat;
animation: animatedBackground 40s linear infinite;
background-size: cover;
small{text-align:right; text-decoration: none;display: block;}
small a{text-decoration:none;}
.fa-envelope {font-size: 180%; color:red; display:block; margin: 10px;}
.socialWrap:hover, .formWrap:hover {animation-play-state: paused;}
/* Designed By */
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0px; }

@keyframes animatedBackground1 {
from { background-position: 20% 0; }
to { background-position: 100% 0; }
.button:hover, p input:hover {
background-color: rgba(142, 193, 218, 0.7);
color: #000;
font-weight: 600;

.socialWrap img {width:100%; height: 5px; padding:0px; margin:0px; position:relative; top:5px;}

.socialWrap .formWrap:nth-child(2) {
  text-align: left;

.socialWrap .headline1:nth-child(1)  {
  text-transform: capitalize;
  font-size: 130%;
  margin: 5px 0px 5px 0px;

.formWrap .fb-like{
  bottom: 8px;
  margin: 0 5px 10px 0px;


.formWrap .twitter-follow-button{
 position: relative !important;
 left: 10px;
 top: 40px!important;

#fb_H1 {
  color: #55ACEE;;

#tw_H1 {


  • The Green Highlighted Text is Responsible for your twitter Username So replace all the Green Color Texts with your Twitter Username.
  • The Yellow Highlighted Text is Responsible for your Facebook Page Username So replace all the Yellow Color Texts with your Facebook Page Username or URL .
  • The Light-blue Highlighted Text is Responsible For For Your Feedburner Username. if you add the username then only your widget will work correctly. So Change the Text in Blue color with your Feedburner Username.
STEP 6:  All Done Save the Gadget and Check it in your site.

That's It Thanks For Following our Tutorial 'Social Follow Buttons + Email Subscription widget blogger v2.0 '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

No comments:

Post a Comment