Beautiful Email Subscribe Widget for Blogger Sidebar

Email subscription form delivers your latest posts to your subscribed reader's email inboxes in the form of notifications along with post title, image and post body. Therefore, it's the most important widget in blogger platform that increases your blog page viewers and you gain ranking on the top of google search results. This email subscription widget is quite responsive. With this widget, you can easily attract your blog visitors to get subscribe to your blog updates. There are many widgets available on the internet but believe me, this one is the best ever.

Check out: Add Stunning Email Subscription Widget to Blogger

Adding Email Subscription Widget in Blogger

Login to your blogger account
Navigate to Template > Edit HTML
Click anywhere inside the template editor
Press Ctrl + F and search for ]]></b:skin>
Add the following code right before the ]]></b:skin>

.FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover{background-color:#171717;color:#FFF}

Click Save Template
After saving your template press Back button and navigate to Layout
Click Add a Gadget > HTML/JavaScriptAdd
A popup will open and paste the following code in the content area
Leave title blank by adding the HTML comment command <!--> (ScreenShot)

Copy the entire code here and past it as described in the previous step

<style type='text/css'> .FollowByEmail td{width:100%;float:left} .FollowByEmail .follow-by-email-inner .follow-by-email-submit{margin-left: 0; border-radius: 0; height: 45px; border: none; color: #000; font-size: 18px; letter-spacing: 0px; outline: none; font-family: "Exo", Helvetica, Arial, sans-serif; text-align: center; padding: 10px 10px; width: 100%; text-transform: uppercase; cursor: pointer; font-weight: 800; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -webkit-appearance: none;background-color:#fed130;} .follow-by-email-inner:after { content: " Widget by Knigulper"; display: block; margin-top: 10px; color: #fff; font-size: 6px; text-align: right; line-height: 1.2; font-weight: 700; font-family: "Exo", Helvetica, Arial, sans-serif; } .FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover{background-color:#171717;color:#FFF} .FollowByEmail .follow-by-email-inner .follow-by-email-address{ height: 45px; box-sizing: border-box; border: none; background: #292929; padding: 14px 10px; color: #777; font-size: 14px; text-align: center; outline: none; width: 100%; font-family: "Exo", Helvetica, Arial, sans-serif; font-weight: 700; margin-bottom: 10px;} .FollowByEmail .follow-by-email-inner .follow-by-email-address:focus{border:1px solid #EEE} .FollowByEmail .widget-content{background: #000; padding: 30px; color: #fff;} .FollowByEmail .widget-content:before{content:"GET MORE STUFF"; display: block; color: #fff; text-transform: uppercase; font-size: 16px; letter-spacing: -1px; font-weight: 700; text-align: center; line-height: 1;} .follow-by-email-inner:before { content: "Get Latest Updates"; color: #fed130; text-transform: none; font-size: 32px; letter-spacing: -1px; font-weight: 800; text-align: center; display: block; margin-bottom: 20px; } .sect-left .FollowByEmail .follow-by-email-inner .follow-by-email-address{border:1px solid #333;background-color:#222;color:#ddd} .sect-left .FollowByEmail .widget-content{background-color:#222} .sect-left .FollowByEmail .widget-content:before{color:#ddd} .sect-left .FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover{background-color:#333} .FollowByEmail .widget-content:before{display:none} </style> <div class="widget FollowByEmail" data-version="1" id="FollowByEmail1"> <div class="widget-content"> <div class="follow-by-email-inner"> <form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open("https://feedburner.google.com/fb/a/mailverify?uri=Knigulper", "popupwindow", "scrollbars=yes,width=550,height=520"); return true" target="popupwindow"> <table width="100%"> <tbody><tr> <td> <input class="follow-by-email-address" name="email" placeholder="Email address..." type="text" /> </td> <td width="64px"> <input class="follow-by-email-submit" type="submit" value="Submit" /> </td> </tr> </tbody></table> <input name="uri" type="hidden" value="Knigulper" /> <input name="loc" type="hidden" value="en_US" /> </form> </div> </div></div>

Now click Save

Note: Before you hit the save button, replace Knigulper with your FeedBurner username.