Sunday, 15 January 2017

Beautiful Email Subscribe Widget for Blogger Sidebar

Blogger email subscription widget

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)
  • Blogger email subscription widget

  • 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="" method="post" onsubmit=";;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); 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.

Discover How to Grow Your Blog to 2k+ Visits /Day

Get Free Access

More From Knigulper

Comment Policy

Please Keep in mind that all comments are moderated manually & by default, all the links in comment area are set to nofollow. Using hyperlinks in comment is forbidden and such comments will not be published. Let's enjoy a spam-free conversation.

Speak Your Mind