Stylish Email Subscription Widget For Blogger Blogs

Sunday, 16 April 2017

Stylish Email Subscription Widget For Blogger Blogs

Posted by Samba Siva
Do you need a stylish Email Subscription widget for Blogger Blog ?

Tired with normal and colourless subscription widgets ?

In thia blog post, we will give you a Stylish Email subscription box for free. It is very different when compared to all the other widgets available in the internet. That's why it looks almost a paid widget.

Email subscription is a very important aspect of every blog. Because, we need some subscribers to get regular traffic. Actually, all blogs get traffic and visitors, But no one turns into a regular reader by just watching your blog posts.

To convert a normal visitor into a regular reader, we need to make them our blog subscribers.

For this purpose, we need a subscription widget. But no one likes to give out their E-mail address to a spam looking blog. That's why, our subscription box must be good looking. In this blog post, we will give you a stylish email subscription widget for Blogger blogs.

Stylish email subscription widget for Blogger

1. Go to

2. Click on Layout and click on add new gadget.

3. Select HTML/Javascript

4. Copy the below code and paste it in the HTML box :

Code Creation credits: Codiblog

Code editing rights : Blogger Wp Hacks

Social profile addition credits : Blogger Wp Hacks

<style type='text/css'>#sidebar-subscribe-box{background-color: #6ca4c8; repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background-color: #6ca4c8; repeat scroll 0 0 #f7f7f7;color:#FFFFFF;font-size:14px;line-height:20px;padding:10px 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( 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:#000;border:1px solid #000000;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:#000000}.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( 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="" class="sidebar-subscribe-box-form" method="post" onsubmit="', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="MaintainABlogEasy"/><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 id="images_hz">

<a href=""> <img src="" width="50" height="50"/> </a>

<a href=""><img src="" width="50" height="50"/> </a>

<a href=""><img src="" width="50" height="50"/> </a>

Change MaintainABlogEasy to your Feedburner address. ( It can be seen 2 times in the code, Replace with your Feedburner ID 2 times ).

Change bsamba_siva ( My twitter ID ) to your twitter ID.

Change to your Facebook page or profile.

Change to your Google profile or about page.

Note : This Stylish email subscription widget for Blogger is created by Codiblog. The real widget would look like :

I altered the code, changed the colours of background, Text etc. At the same time, to make it cool looking, I added Social profile icons to the widget.

Demo : See the widget in my sidebar

Advantages of this widget

Lightweight : The code of this widget is written using CSS and HTML and some images ( Hosted on Picasa online, So images won't affect your blog speed ). HTML is also a very fast language and it won't affect any blog load time. Spped is also a ranking factor for search engine rankings. So maintaining a proper blog load time is really important.

More Subscribers : The blue colour of the widget attracts your readers to give out their E-mail address for your blog. Thus, you can get more subscribers in less time for free and no giveaways too.

More traffic : As you got so many subscribers, Your blog posts start getting so much traffic. So you can make more money. If any subscribers loves the post, He will surely share it through facebook or Twitter and it will improve some SERP rankings of your blog. Hey, Social sharing is also an important aspect of Seo.


This is the stylish email subscription widget for blogger. I already said that this is created by Codiblog, But is fully altered, So I have only given code credits with a hyperlink for CodiBlog. Don't copy this code, I have the editing credits and Codiblog has the creation rights. You can use this widget without any attribution, But you must shouldn't use this code as your property.