How To Add Animated Feedburner Subscription widget in blogspot

Hello Everyone Today we are back with Amazing 2016 Best Animated Feedburner Subscription Widget which works on pure CSS 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.

What is Animated Feedburner 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 Animated Feedburner 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.

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

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

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"><span>Subscribe To Our Blog</span></p>
<p class="headline2">Get Latest Updates Directly to your inbox</p>
<span> <i class="fa fa-envelope"></i>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNT0K5WC4-SxVE0ztyP33VVDykpTBGFcO4hb_fg4TlCTp87rPmsE0DdFd73Y9jEsPmxz4FdMXqoKgyKTpD5t0j1OiPP7LQdpesKaSgw4ok41-o8jcDDE1kui2COBPsDCRsIr6skxsluI/s1600/ColorRibbon.gif" />
<div class="formWrap">
<form class="innerForm" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Your Feedburner Username', '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="http://www.trendingwidgets.com" target="_blank">Trending Widgets</a></small></form></div></span></div>

<style>
/* Designed By Trendingwidgets.com */
*{padding:0px!; margin:0px; box-sizing: border-box;}
.socialWrap {maximum-width: 100%; minimum-width: 250px; padding: 5px; width:350px; text-align:center; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLCir5DC-t9FQeBI1EEbMJPkNWAWxAdZbI3ONQF6V3Z-nX6eNoOC7qqjaKh7s32g7qnjWyCMuQGIcUoaSfCTzPS6jz9er3zaPYrZAAW8TI7Ft-Pd9W1fd9HH8_xa2C0OwUqTknSG5WrhY/s1600/Bubble2.jpg);background-position: 0px 0px;
background-repeat: repeat;
animation: animatedBackground1 2s 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: 180%;width:100%; padding:5px;}
.headline1 span:nth-child(2)
{color:red;}
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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi27NhFUebn5WOREwUXX0YeMb8om-knxAt0musjtLjQBQi70j-QnoxZ5LwhICYHKS_W7tuvwwTEbRDxfXULzuaA-kx71REESjiAIwBr6ndH_CjHe6VC3XaCImWq0BuX9GrGkEqLYKkrHTc/s1600/cloudsBg.png);
background-position: 0px 0px;
background-repeat: no-repeat;
animation: animatedBackground 40s linear infinite;
background-size: cover;
padding:0px;
margin:0px;
}
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 Trendingwidgets.com */
@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;}</style>

Customization:

• The Green 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 Green color with your Username.

• The Yellow Highlighted Text is Responsible for Widget Width. if this is not fitting to your Layout then Change the Text in yellow color with your preferred number.

STEP 6:  All Done Save the Gadget and Check it in your site.

That's It Thanks For Following our Tutorial '2016 Best Animated Feedburner Subscription Widget for Sidebar! '' 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.