Fast Loading Email Subscription Widget for Blogger

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

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

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

Add this Email Subscription Box to your Blog

• 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB5z34yMDV0fQ9B5ztEsOlv-482X871K8pG7JTlyiIhfMTc1LJgaLLRFLILEmtxUdd81Na_PJFk6pDxcxnDZ1M2Lfa8FY6gIFBdUajLBrZ3O_BIiXlRVbd65jMcpV7XZT76PlASmrLNFCU/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigC5sYHPCkt5IW8ByEpYxTQjtRnUNvilEzcm053Dlt87nJGzFry0sbSHsh1rfatrhUcoinkh43W9OBZpWe90VF-7SXj2_IYErKU8Jx_MssDVqdetDpDX_zXl2QKzhy3xtQcvKYPIpM02yP/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzXDGroQdUogKjEEXZSpdkzJ1liOi8uOLdBJGPB8scdKT3Z6xlkVV9dSf9nypqnC8Lj5HdwAGy5BQWOKBb6kjBQ7GRHFfWOSjT4f5lJMC6YlO2nJVqQbTHXQI8B8znud34b4frOgyYb3XS/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKCJ6GSkrjldwPpLtwhSkpWUvCNhE3pBkECGEWB-TQa6AXgWqhGcFVXFouu0i83pRHfIOX0_GP2tqpr6WvklTR6q7XC2wx4KsPuDR2iJWN8RfN0cCmPvbSIkCo_Tr4t56FO6qKOw8qKdUi/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=themeshero"class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=themeshero','popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="themeshero" /><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>

Don’t forget to replace themeshero 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

Stylish Email Subscription Widget For Blogger

Today we are going to learn “How To Add Stylish Subscription Widget / Box for Blogger”
The Widget itself is unique creation, actually it is adapted from Wordpress widgets, but you can install it on blogger for free.

Features & Whats New ?

• The Widget is made up of Pure CSS Scripts
• Easy to Install without any Internel HTML Coding
• Doesn’t Slow Down your Blog’s Loading Time.
• Its really Soft and Beautiful.
• Added Social Subscription Buttons.

How To Add This Widget To Your Blog ?

It is really easy to install on your blog, just follow the steps :
1. Go to Blogger
2. Click Layout.
3. Click Add Gadget.
4. Select HTML /Java Script.
5. Copy the Following Code and Paste in it.

<div align="center" id="bloggertipstricks"> <div id="ig-subscription-optin" filter: progid:dximagetransform.microsoft.gradientundefined startcolorstr='#55AAEE', endcolorstr='#003366',gradienttype=0 ); width: 265px;"> <h4 id="bloggertipstricks-title-text" style="color: 000; font-size: 20px;"> SUBSCRIBE OUR NEWSLETTER</h4> <div id="bloggertipstricks-sub-title-txt" style="color: 000; font-size: 14px;"> Join us for free and get valuable content delivered right through your inbox.</div> <br /> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=themeshero', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="name" id="bloggertipstricks_Subscriber_name" name="name" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Name" /><br /> <input class="email" id="bloggertipstricks_Subscriber_email" name="from" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <input name="uri" type="hidden" value="themeshero" /><input name="loc" type="hidden" value="en_US" /> <input id="bloggertipstricks_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form> </div> </div> <style> #ig-subscription-optin {margin: 0px;padding: 10px;height: auto!important;padding: 0px 10px 15px 15px !important; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px; margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif; padding: 5px;border: none;}#ig-subscription-optin input.name { background: white urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDEE1t1ZDoxYx2CQMHeos9gbnV2B_Lxwlp3HWnLfk8RA2W8648UkpyF586u83Jwn9qqvQuGMkpr_WoiIbJXmxMoXccjF23NOQtyaMRGwC7Y1WFoYK9XQtFWDkC5wUYPWO90iCZ8kbxvSG/s1600/subscribe-name.png) no-repeat center right;} #ig-subscription-optin input[type="text"] {border: 1px solid #111 !important; font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;} #ig-subscription-optin input.email {background: white urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYyl3Skgdh_gQpxGZklDQ4eXr0zquk4n9PHiZm4rZ9_rg2jednojt0p9k4C0ZYItBdgmEEJ1bIKFovQcctMPEUwUmxd2iImBfdu0uz1AEUGfnD3FWKO6TC8JEpAqU9m45j8u-zk9cSdX6V/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input { font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h4 {margin-bottom: 8px !important; font-weight: bold !important;line-height: 26px !important;letter-spacing: normal; text-transform: none;text-decoration: none; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif; border: none;padding: 0px !important;float: none;}input:hover[type="submit"] { background-color: #0094D2;border: 1px solid #0094D2;color: red;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2; color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input { color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #f6640e; border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important; padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;} #ig-subscription-optin input[type="submit"]:hover {color: #FFFC00;}</style> <div style="text-align: right;"> <span style="font-size: xx-small;"><a href="http://themeshero.blogspot.com/2013/07/stylish-subscription-widget-for-blogger.html" target="_blank">get this widget</a></span></div>

6. Now before saving the widget you have to make some changes.
7. Change “themeshero” with your blog’s feed name.
8. After changes, Hit Save. Move your widget to any desired postion where you want to place it. 

Thats it, go to your blog and check any post, you will see our widget on your blog.

Important Note : Please don’t remove our attribution link from this widget.


Why You should not remove our attribution link?

I've spent many hours customizing and developing these widgets and I think these little attribution links are worthy of my hardwork, and ofcourse it doesn't affect on your blog as its size it extra small, so kindly help Us by do not removing our attribution links from the widget you are going to install on your blog.

If you want to show us some followship then you can add our Badge to your blog

Flat Diary - Premium Responsive Blogger Template

Template Name: Flat Diary
Platform: Blogger / Blogspot
Release date : 18, November 2013

Author : www.seobloggertemplates.com

License : Creative Commons Attribution 3.0

Flat Diary is a simple yet attractive blogger template with lots of customization options which are hard to find in most Blogger templates. Flat Diary has been designed to present content in a beautiful way and we've tried our best to keep clutters away. Your readers will fall in love with the simplicity and easy-to-use interface of this template!

Features of Red Hood Portfolio Blogger Template:

• Responsive Design: Flat Diary is a fully responsive Blogger template that automatically adjusts the resolution of the screen to support all devices and browsers of different resolutions.
• Browser Compatibility: Flat Diary is compatible with almost all browsers. Its responsive designs gives it the extra ability to perform the actions just accurately.
• SEO Friendly: When you talk about SEO, we are the best. With some high quality and extra-smart plugins, we have done some really awesome SEO work on this template. Its not just you, its about ranking your content at the top of Google search engine.
• Unlimited Color Style: You can change theme color with just one click. You don't need to edit any of the theme code to change its color.
• Google Fonts: Flat Diary has custom as well as Google build fonts, allowing your site to have a flourishing speed. At the same time, providing you the real quality of pure fonts.
• Social Media Icons: we have added some high quality and fast loading social media icon. You can also change it color with just one click.
• Advanced Admin Panel: It is one of the best feature of this theme. It will help you to customize your theme layout easily, you can easily ad or remove new widget from your blog using this admin panel.

More Features: Recent posts, Social Links, Social Sharing counter buttons, Related posts, Threaded commenting system, Multi Drop Down menu

DEMO     DOWNLOAD

Red Hood Portfolio Blogger Template

Template Name: RedHood Portfolio
Platform: Blogger / Blogspot
Release date : 18, November 2013
Author : www.templateism.com
License : Creative Commons Attribution 3.0

Red hood Portfolio Blogger Template is super stylish, and at the same time it is highly 100% responsive, perfect quality, super elegant, premium design Blogger Theme ideal for photography or picture based blogs or web portable.

If you are a photographer or a web developer and you want to showcase your work, then Red Hood Portfolio is a perfect example of what class and perfection is all about. It displays your portfolio is such a manner that your clients would love to hire you on a permanent basis.

Features of Red Hood Portfolio Blogger Template:

• 100% Responsive Blogger Template: Most of the blogger themes are not flexible enough to fit screens of different devices; even the responsive one fails to do it. However, we are giving you the certain a surety that this theme is 100% Responsive, following are the few screenshots we took while testing it on Android 4.3 and iPhone 5.
• Automatic Logo Generator: Unlike other Blogger templates, we have come up with a new and innovative idea. Some webmasters, who are not into Logo designing (Photoshop) can now make use of this amazing feature. We have integrated a flexible custom script, which would automatically create a beautiful logo for you. All you need to do is to select a 2 word title for your blog for example RedHood Portfolio.
• Portfolio Style Theme: This theme is ideal for Wallpaper, showcase, portfolio, artwork and picture based websites. Giving it a certain amount of awesome behavior Red Hood framework is perfect for all kinds of style (blog, magazine styles are coming soon).
• Tabbed Sidebar Widget Area: The tabbed widget gives you extra space in your sidebar. Those days are gone when tabbed widgets were un-friendly a not responsive. We have added an amazing Sidebar tabbed widget area which would surely grab your visitors’ attention.
• RSS Email Subscriber: Unlike our other themes, we have used this functionality for the first time and we are regretting why we didn’t use it before. It is a bulletin Blogger widget, we have given it a new look and touch with our amazing CSS3 abilities
• Featured Posts Via Labels: This feature is no more a new thing for Templateism Themes (almost all our themes have this feature unlike others). So, what is new here? We have designed it with real amazing CSS. We will not tell you, just go ahead and hover over the posts mentioned below the ticker.
• Finger Touch Friendly Image Slider: Since, it is a responsive theme, so we decided to integrate a touch slider that operates on finger touch (if a person is browsing from a device that supports finger touch.

More Features: Recent posts, Social Links, Social Sharing counter buttons, Related posts, Threaded commenting system, Multi Drop Down menu, Reddish blue color scheme and much more exciting features to enjoy.

DEMO     DOWNLOAD

VCard Responsive Blogger Template

Template Name: vCard Blogger Template
Platform: Blogger / Blogspot
Release date : 26, November 2013
Author : www.templateism.com
License : Creative Commons Attribution 3.0

vCard Blogger Template is a Professional and personal CV template made for personal information, resume and portfolio. vCard Blogger Template is stylish as well as elegant. We have designed it with pure techniques that will give a flow to your information. It has simple yet effective tab navigation which would help you to switch from the portfolio of your most recent work. This colorful theme is fully responsive which means it looks perfect on all standard devices. The flexible options and robust techniques used in this theme makes it the best CV Blogger template.

Featured of vCard Blogger Template:

• 100% Responsive Design: Like their previously released theme Red Hood, this template is 100% responsive. Which means, it supports and renders perfectly on all standard devices giving enough flexibility to your users to browse your site perfectly?
• Total Share Counter Buttons: Unlike other social counter buttons, we have first time included a Total share counter that actually displays the total sum of shares that you got from Facebook, Twitter, Google+ and etc. This works just like Mashable.
• Personal and CV Theme: Every blogger, web entrepreneur needs his personal blog to share what he is doing these days with his readers. It's just another way of interaction and communication with readers and fans. This theme gives you the best opportunity to blog and interacts with your fans.
• jQuery Page Load Effect: We have used some smart and fast jQuery to give some extra effects to your site whenever a new page is loaded. Check out the demo for more.

More Features: Colorful theme, Social buttons, 1 Column Theme, 3 Coolum Footer, No Sidebar, Full width Template. Portfolio and Blog style 2 in one.

DEMO      DOWNLOAD