😍 Loving this theme? Download

Please enter at least 3 characters.

New Stylish Sidebar Subscription Box Widget For Blogger - V.2

Get Professional looking Stylish Sidebar Subscription Box Widget for Blogger with Social icons. You must give it a try.
New Stylish Sidebar Subscription Box Widget For Blogger - V.2
Stylish Sidebar Subscription Box Widget For Blogger
More subscribers mean more power to you in terms of free and instant highly targeted traffic to your every new blog post.

So I came up with another version of sidebar subscription box widget for blogger which is more elegant than the previous version of this widget, just evolving by the time. :)

Previously designed subscription box  widget was an average just because I had used some out of box type settings and you had to customize it's settings in CSS to make it look like as it was shown in the screenshot.

But this time it is super easy to customize and you need not to play with the CSS part except changing the color codes which is a super easy task, anyone can do it.

Key Features Of This Subscription Box Widget

1) Fully Responsive Design.
2) Super easy to customize the colors and text content.
3) Social Profiles' Links in the bottom.
4) Use of Font Awesome icons with beautiful hover effect.
5) Made with pure CSS and HTML so it loads very fast.
6) Needs not to mention but it is stylish. :)

Stylish Sidebar Subscription Box Widget For Blogger

NOTE:- You do not have permission to COPY and SHARE my code on your blog. Neither you can remove the Credits given in the CSS comments. CSS comments do not appear on your blog. Neither they provide me any backlink nor they affect your blog in anyway so keep them intact. Respect the hard-work of others'. Play it safe and clean. :)
*BONUS:- I have included a backlink in the bottom of subscription box and you can remove it simply from the HTML part if you wish to. Choice is yours! My blogger widgets are always neat and clean, just all what you need.

So here we go with the Demo Screenshot of our new stylish subscription box widget, see below.

Demo Screenshot of Stylish Sidebar Subscription Box

So did you like this widget? Here is how to install it into your template step by step.

Installing Sidebar Subscription Box Widget to Blogger Template

First of all we need to add the Font Awesome icons' CSS Stylesheet link to our blog in case you are not using it already.

Step 1) Logged into your blogger account? Now select your Blog > go to Template Section > Click on Edit HTML. Now let the template code box load.

Step 2) Now click anywhere inside the template code box and press Ctrl+F to open a search box inside. Now find out this opening <head> tag and just below it, paste the Font Awesome icon's link given below as it is.
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>
Note:- I have used Oswald font family in demo but I am not including it in the code below because your template may be using a different font family already. So avoid using multiple font families to maintain our blog load speed, it is necessary. I am using inherit for font-family so that your blog's default font family will automatically be loaded.

Recommended: Stylish Horizontal Email Subscription Box For Blogger

Step 3) Now save your Template code and go to Layout Area of your blog. This time click on "Add a gadget" link in the sidebar and add a HTML/JavaScript widget. Now paste the whole CSS and HTML code given below after making required changes given just below the code in editing step.

/* ----------------------------------------------------
Sidebar Subscription Box Widget = V.2
Designed by :: https://www.twistBlogg.com
Keep These Credits Intact, Do Not Remove
#twist-blogger-sbox-v2 {
  padding: 0;
  padding-bottom: 5px;
  font-family: inherit;
  display: block;
  margin: 0;
  width: 100%;
  border-radius: 1px;
  border: 0;
  background: #363636;
#twist-blogger-sbox-v2 .main_tagline {
  padding: 0px 0px;
  line-height: 2.5em;
  font-size: 26px;
  margin: 0;
  height: 95px !important;
  overflow: hidden;
  font-weight: normal;
  color: #FFF;
  text-align: center;
  border: 0;
  background-color: #FF5959;
#twist-blogger-sbox-v2 .email_icon {
  display: table;
  margin: -35px auto 0px;
  font-size: 25px;
  padding: 12px;
  height: 25px;
  width: 25px;
  background-color: #363636;
  color: #FFF;
  border-radius: 50px;
  border: 10px solid #FFFFFF;
  line-height: 0;
#twist-blogger-sbox-v2 p {
  font-size: 15px;
  color: #F9F9F9;
  text-shadow: 0px -1px 0px #000;
  line-height: 27px;
  padding: 5px 10px 5px;
  text-align: center;
  width: 80%;
  margin: 5px auto 20px;
  border-bottom: 2px solid #6A6A6A;
  border-radius: 20px;
#twist-blogger-sbox-v2 .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
#twist-blogger-sbox-v2 .rssform input {
  padding: 8px;
  margin: 20px auto 15px;
  font-size: 13px;
  color: #000;
  text-align: center;
  display: block;
  font-family: inherit;
  font-weight: normal;
  width: 90%;
  height: 38px;
  text-transform: uppercase;
  outline: none !important;
  border: 1px solid #FFFFFF;
  border-radius: 1px;
  background-color: #FCFCFC;
  box-sizing: border-box !important;
#twist-blogger-sbox-v2 .rssform .button:hover {
  background: #000000;
#twist-blogger-sbox-v2 .rssform .button {
  background: #FF5959;
  color: white!important;
  border: 1px solid #FFFFFF;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  padding: 5px 2px !important;
  float: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
#twist-blogger-sbox-v2 .bottom_lock_policy {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJml5xs8AHuZ7uIfXX9D5S1lvb6wm_7iohyphenhyphenZXWf_HIln9TZNrgm-mQqABSesTQfcdS3W27suRfFzYYlwmAbkDF36QZIl46iIvF_Ezc_cxt0B-0y75FoqFfRPqoo4wCiu9GF1nnhA2Oxs/s1600/Lock-twistblogger.png) no-repeat 3% -2px;
  color: #959595;
  text-align: center;
  font-size: 12px;
  margin: 0;
  padding: 3px;
  line-height: 25px;
#twist-blogger-sbox-v2 .bottom_lock_policy a {
  color: #959595;
  text-decoration: none !Important;
#twist-blogger-sbox-v2 .social_profiles {
  line-height: 1.2em;
  display: table;
  float: none;
  margin: 0px auto;
  text-align: center;
  min-width: 157px;
  padding: 5px 0px;
  border: 0;
#twist-blogger-sbox-v2 .social_profiles a:hover {
  color: #FFF;
  background-color: #FF5959;
  border-color: #FFF;
#twist-blogger-sbox-v2 .social_profiles a {
  color: #000000;
  margin: 0 5px;
  text-align: center;
  float: left;
  display: table;
  padding: 4px 5px;
  background-color: #FFFFFF;
  border-radius: 50px;
  border: 2px solid #2D2D2D;
  width: 15px;
  height: 15px;
  line-height: 0;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
#twist-blogger-sbox-v2 form {
  margin-bottom: 10px !important;
<div id="twist-blogger-sbox-v2">
            <div class="main_tagline">Join Our Newsletter</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
                 <p>Get All The Latest Updates Delivered Straight Into Your Inbox For Free!</p>
   <div class="rssform">
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TwistBlogg', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="Enter your email address...">
            <input type="hidden" value="TwistBlogg" name="uri">
            <input type="hidden" name="loc" value="en_US">
            <input value="Join Now" class="button" type="submit">
      <div class="bottom_lock_policy">We Respect Your Privacy | <a href="http://twistblogg.blogspot.com/2015/07/new-stylish-sidebar-subscription-box-widget-for-blogger.html">Get This Widget</a>   </div>
   <div class="social_profiles">
   <a href="http://www.facebook.com/uzzy.tech" target='_blank' rel='nofollow' title="Join on Facebook"><i class="fa fa-facebook"></i></a>
   <a href="http://www.twitter.com/softsyard" target='_blank' rel='nofollow' title="Follow on Twitter"><i class="fa fa-twitter"></i></a>
   <a href="http://plus.google.com/+InvictusHaxor" target='_blank' rel='nofollow' title="Follow on Google+"><i class="fa fa-google-plus"></i></a>
   <a href="http://www.pinterst.com/invictushaxor" target='_blank' rel='nofollow' title="Follow on Pinterest"><i class="fa fa-pinterest"></i></a>
Recommended: Add Beautiful Social Media Buttons to Blog

1) Changing the color scheme
For changing the default color, just find out this color code #FF5959 and replace it with the color code of your choice. Please note that you'll find this code three times in the above CSS so just replace it three times with the same color code of your choice. Be careful with the text color too because white text may not appear properly in some colors so just change the text color too.

2) Changing Main Headlines
They are highlighted in the very beginning of above HTML code so change those all if you wish to or let them as it is.

3) Changing FeedBurner Address
This is the important step so change my feedburner address TwistBlogg which is highlighted two times in the HTML. Replace mine with yours two times.

4) Removing the Backlink
My backlink to this post is provided in the above code, so remove it or keep it. :)

<a href="http://twistblogg.blogspot.com/2015/07/new-stylish-sidebar-subscription-box-widget-for-blogger.html">Get This Widget</a>

5) Final step is just to remove my Social Profile Links and add yours. These links are at the bottom of HTML so replace them with yours.

Finally save your HTML/JavaScript widget and visit your blog to check if it is working.

*Available Now : Premium WordPress Like Email Subscription Box For Blogger*

If anyhow something goes wrong or your did not understand what to change or anything else, just hit me back and I am there to support you with the complete installation process or I'll do it for you.

This is all in this post and now I am working on a Landing page template (simple) to which you can use to promote some Affiliate products. Hopefully I'll share it in a few days so stay tuned if you wish to use it. :) If you want to create a landing page on your existing blog then just follow this ultimate guide to create Squeeze Pages or landing pages on blogger.

Now you can help me by sharing this post on at least one social media platform of your choice, your support is all I need to keep going. Connect with me on Facebook by liking my page or adding me on Google plus or by following on twitter. Stay Blessed!

Share this post

Explore more articles by Satbir


Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. Wow nice and useful articles Thanks Satbir Patial:):),
  2. Wow nice and usefull article keep up good work and thanks for sharing this article
  3. This subscription button is wow..

    I had issues in the installation. But I'd revert to backup and started afresh till I finally got it.
  4. Thanks Satbir Patial:):), your stuffs are cool & it works. You're the best
  5. hats off to you brother for such a cool and responsive subscription sidebar... i was really searching for sidebar subscription box ... but finally i got that... i really like to thanks to you for this.. as am using it on my own blog, it is responsive and gives best result in all screen resolutions...

    Thanks thanks thanks thanks and many more thanks :)
    Highly waiting for more :D
  6. when i test the subscription box it gives me this email
    You received this message because someone requested an email subscription for nzubechip@gmail.com to a FeedBurner feed. If you did not make this request, please ignore the rest of this message.

    Hello Buddy, Satbir Here From Twist Blogger Blog,

    You recently requested an email subscription to TwistBlogger.com and We can't wait to send the updates you want via email, so please click the following link to activate your subscription immediately otherwise we can not send any future updates:


    Pls something is wrong i edited everything still d same
    1. Hi Peter ::
      You must have not edited it two times yet and my blog's feedburner address will be there. Please edit my FeedBurner address in the HTML form which is highlighted in Yellow color two times, "TwistBlogger".
  7. Hi please check my blog... i am using a responsive sevida template and the load more post is not opening other previous posts. You can check it here http://www.bouncemedia.ml try it and see. But i want to remove it and add number pages instead i need help. Thanks
    1. Dear Andrew! Maybe this infinite scrolling or load more posts button can help you. Check it.
  8. Hi Satbir, First I want to say that, you have listed very interesting stuffs for bloggers in you blog.
    While I am implementing this code on my blog there is an error occur, it is showing a dialogue box- "The feed does not have subscriptions by email enabled"
    Will you please help me to fix this problem?
    My domain name is anchored with the name..

    1. Bharat:: Hi,
      You need to enable email subscription for your blog feed.

      Open your feedburner feed, click on top "Publicize" tab then on left side you'll see "E-mail Subscription" link. Click on it and now at the end click on enable subscription box. That is it!
      Hope it helps!
  9. Hi, satbir, how can i make it show on a mobile platform and below post on desktop like yours, instead of sidebar
  11. i m getting problem to setup this widgets so please help me how i can use my feedurl instead your url and i get an error feed does't supported so please help me to doing step 3 which you discuss
  12. Hi sabit,please how can i reduce the height of the widget....
  13. your plugins really help to make my blog attractive
  14. Hlw satbir... on my blog a subscription widget already installed but i want to remove that widget... please tell me how to remove
  15. how can i integrate this email list with mailchimmp? i don't wanna use feedburner.
    1. Pyros :: Hi,
      You can use my service for that. I'll integrate it with any AutoResponder like aweber, mailchimp or any other for a reasonable price!
    2. where's the link to contact? what's the service charge?
    3. Pyros :: Please use contact form on contact us page (link is on top) and send me an email!
  16. Mr.Patial visit my blog and suggest me the best suggestion about the look.
    plz help me , I am a new blogger.

  17. hello sir
    i have put popular post widget but it comes only 1 at a line
    Means it comes single single, not like your popular post as two a time.

    how to make it two a time
  18. I LOVE THE DESIGN ....
  19. Brother it is appearing too long in height..how can i solve this?
  20. bro please help me edit templete on my site
  21. Love it
  22. Thanks You moch BEAUTIFUL WIDGET
  23. hey! This is a beautiful widget. I added it to my blog but changed the color scheme to fit the theme of my blog :D check it out www.savingmilky.com
    1. Milky :: Hello,
      I checked your blog and saw that widget. Looking cool :) just one thing to change is black text shadow. Remove it and fonts will look cool.

      So you are customizing your template. I visited your blog without adding www and showed me an error 404.

      It simply means those who will visit your blog without adding www before your domain name, they will not be redirected to your domain name and instead to a 404 error page.
      So just go to settings area of your blogger dashboard and under Basic setting > click on edit link of your blog address.

      Now just check the box which says "Redirect savingmilky.com to www.savingmilky.com"

    1. Hello Ravi : Sorry for late reply. Actually I am busy with other stuff.
      Ok so I checked your blog and it seems like you removed the widget. If you still need some help then you can send me an email using contact form.
  25. thanks satbir. there is a problem with social icon alignment and length and width of the widget i want approximatly same lenght and widget as shown in ur own blog.please help me my site link http://www.untoldreality.com/
  26. Thanks Satbir for this wonderful post. I put up the widget on my website http://www.biboard.org. It is working fine and I have retained your backlink as well. Hope that would help. :)
    1. BIB :: Your welcome buddy. Checked it and it is looking awesome :)
      Thanks a lot for remaining the backlink, it surely helps in a way or two :)
  27. hello admin,
    thanx for this widget. i added it today.and its looking very beautiful.
    but i want some changes over there i want a youtube icon in place of pinterest. please send me its code. and i want to adjust 'join now' button. please visit my website www.karaokekart.in and have a look.

  28. Satbir,
    I like your every thing. I am here to ask you that can I able to promote your widgets on my website without your backlink. I want to create post, I will not copy your content only widget Codes
    1. Muhammad Rizwan :: Thank you so much for liking my widgets/content. And about copying my codes, BIG NO NO. I spend sleepless nights to brainstorm and writing and testing these codes. This is what blogger users come on my blog for so if everyone will start copying my codes then who will visit my blog? And duplicate content will create serious problems for both of us.

      I hope you understand the matter buddy :)

  29. This is awesome. I want this but, can you teach me how to decrease the height?
    1. Hello folk, Kindly mail us regarding this problem. We will try to solve your problem soon..

      Mr. Invictus
  30. Hello Satbir.

    Subscription box are WONDERFUL and effective. I apply one on the blogg but it seems I haven't done something right. Box appeared well as well as the text and colours but the icons for the mail and social networks didn't. Only white circles appeared without icons.

    Can you help me fix it ?

    Thanks in advance.

    Best regards,
    1. Olga Kostic :: Hi,
      No icon appeared? That means FontAwesome icons are not working and reason for that may be you did not add the FontAwesome Stylesheet link to your template code? Please check again that your followed the Step 2 correctly?

      Still if you're not able to do it then just drop me an email using Contact Form (link is on top of the header)

  31. The email icon does not appear
    1. Anonymous :: Hi, it could be better you share your blog address? So that I can check it live and let you know.
  32. I love those! i don’t think I can do it on blogger though, can’t wait till i get an actual website but i want to make sure that i am serious about it first!

    Thank you!!
Post a Comment