Fast Loading Email Subscription Widget for Blogger


Best Movies Sites: TOP 10 MOVIE WEBSITES


Email Subscription Widget for Blogger
Almost every blogger knows the importance of email subscription widget in your blog. Email subscription helps your readers to reach your blog when you provide new article or update your blog. Moreover, an easy email subscription box attracts your readers to subscribe your blog straightforwardly. So today, this post is about adding a fast loading email subscription widget to your blog and it might be helpful for those who doesnt like default blogger Follow by Email.

As always, weve to take a demo visit to this email subscription widget. This email subscription widget seems like below image screenshot, thats taken from HTML editor. But, you can see this subscription widget in action via LS demo blog. As a result, slightly visit the link URL: http://goo.gl/VREor

Fast Loading Email Subscription Widget

Please note: This email subscription widget adjusts the dimension automatically according to the place where it belongs to. But its better to have at least 300px if youre focusing on sidebar. To prove it, if you own a demo blog, try to add this widget in your blogs sidebar as well as footer to see its automatic dimension.

And you can easily customize your blogger sidebar width if its below 300px via Customise. Access path: Blogger Dashboard » Template » Customise » Adjust widths » Right sidebar.


 Add this Email Subscription Box to your Blog
Here, we provide two simple methods to add this subscription widget to your blog. The first method is for newbies, thats One Click Installer. Merely click on the Add to Blogger image below and itll add it to your blog automatically.



So, youll be able choose the second method if you wanna add this email subscription box to your blog manually. Its for guys, whos experienced adding widgets to their blog earlier. Kindly follow simple steps provided below.

  • Go to Blogger Dashboard » Layout
  • Click on Add a Gadget
  • Copy & paste the below code in it (leave the title column blank)

<style type='text/css'>#sidebar-subscribe-box {
    background: url(http://1.bp.blogspot.com/-IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/s1600/colored-strip.png) repeat scroll 0 0 transparent;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 3px 0;
}
.sidebar-subscribe-box-wrapper {
    background: url(http://2.bp.blogspot.com/-tUlo5p5gP8o/UBhYciGNgwI/AAAAAAAAFTM/x22pIuNLVPw/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;
    color: #111;
    font-size: 14px;
    line-height: 20px;
    padding: 1px 20px 10px;
    text-align: center;
    text-transform: uppercase;
}
.sidebar-subscribe-box-form {
    clear: both;
    display: block;
    margin: 10px 0;
}
form.sidebar-subscribe-box-form {
    clear: both;
    display: block;
    margin: 10px 0 0;
    width: auto;
}
.sidebar-subscribe-box-email-field {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #fff url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 0 -27px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #444;
    margin: 0 0 15px;
    padding: 10px 40px;
    width: 68%;
}
.sidebar-subscribe-box-email-button {
    background: #09f;
    border: 1px solid #007fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;
    color: #fff;
    cursor: pointer;
    font-family: verdana;
    font-weight: 700;
    padding: 10px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.4);
    text-transform: uppercase;
    width: 100%;
}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus {
    background: #1ca4ff;
}
.sidebar-subscribe-box-email-button:active {
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    outline: 0;
}
iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table {
    width: 100%;
}
embed {
    border-radius: 3px;
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    background: #FFF;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin: 0;
    padding: 4px 4px 4px;
}
#footer-section {
    background: #f5f5f5 url(http://1.bp.blogspot.com/-n5s9Bu0JCgg/UA_AfQ5qLkI/AAAAAAAAFMU/G9FOuh4SP7k/s0/bg-pattern.png) repeat top left;
    border-top: 1px solid #aaa;
    box-shadow: inset 0 4px 6px -3px #aaa;
    font-family: cambria;
    font-size: 14px;
    height: 100px;
    margin: 10px -30px 5px;
    padding: 0 30px;
    text-align: center;
    width: 100%;
}</style>
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our email newsletter & receive updates right in your inbox.
</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=labstrike" 
class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=labstrike',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="labstrike" /><input name="loc" type="hidden" value="en_US" />
<input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now!" /></form></div></div></div>

Also see: Other Beautiful Newsletter Forms for Blogger

Dont forget to replace labstrike [line no: 86, 87 & 89] with your FeedBurner username. Hope you added this attractive subscription widget to your blog. In case you need any more customization, feel free to mention via comment provided below. Widget style: HackingUniversity.