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

SHARE
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. :)


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.

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.

<style>
/* ----------------------------------------------------
Sidebar Subscription Box Widget = V.2
Designed by :: http://www.TwistBlogger.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(http://4.bp.blogspot.com/-kYVqV9JYDHY/VPMC8jPKTGI/AAAAAAAAA28/zxv0TYRIZe4/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;
}
</style>
<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=TwistBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="Enter your email address...">
            <input type="hidden" value="TwistBlogger" name="uri">
            <input type="hidden" name="loc" value="en_US">
            <input value="Join Now" class="button" type="submit">
            </form>
            </div>
<div class="bottom_lock_policy">We Respect Your Privacy | <a href="http://www.twistblogger.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/TwistBlogger" target='_blank' rel='nofollow' title="Join on Facebook"><i class="fa fa-facebook"></i></a>
<a href="http://www.twitter.com/TwistBlogger" target='_blank' rel='nofollow' title="Follow on Twitter"><i class="fa fa-twitter"></i></a>
<a href="http://plus.google.com/+SatbirPatial" target='_blank' rel='nofollow' title="Follow on Google+"><i class="fa fa-google-plus"></i></a>
<a href="http://www.pinterst.com/twistblogger" target='_blank' rel='nofollow' title="Follow on Pinterest"><i class="fa fa-pinterest"></i></a>
</div>
            </div>

Editing:-
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 TwistBlogger which is highlighted two times in the HTML. Replace mine with yours two times.

4) Removing the Backlink
My backlink to this post is highlighted in Light Blue color so remove it or keep it. :)

<a href="http://www.twistblogger.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 highlighted in Red Color 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.

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!
Author

Article By: Satbir Patial

I manage this blog and post tutorials related to Blogger, SEO, Plugins, Widgets, Software Tools, CSS/HTML and Social Media. Did you find this blog helpful? Would You Please Socialize? Thanks for Your Support Buddy :)


Stay connected, You'll not be disappointed!

41 Replies so far - Join Conversation

  1. 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!!
    selenekendra

    ReplyDelete
  2. Anonymous03:44

    The email icon does not appear

    ReplyDelete
    Replies
    1. Anonymous :: Hi, it could be better you share your blog address? So that I can check it live and let you know.
      Regards!

      Delete
  3. 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,
    Olga

    ReplyDelete
    Replies
    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)

      Regards!

      Delete
  4. This is awesome. I want this but, can you teach me how to decrease the height?

    ReplyDelete
    Replies
    1. Hello folk, Kindly mail us regarding this problem. We will try to solve your problem soon..

      Mr. Invictus

      Delete
  5. 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

    ReplyDelete
    Replies
    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 :)

      Regards!

      Delete
  6. 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.

    thanx

    ReplyDelete
  7. Hello Sir
    @Satbir Patial
    i am using 2 widget from here 1st one is This Subscription box and Second is Floating Sharing Box but both have some problems.
    In floating sharing button the sign of "Stumble upon " is missing and in Subscription box "Join Now" button is touching post warper. So please see my blog using My Blog Link and help me to fix these problems.
    I am waiting for your instruction to solve these problems.

    ReplyDelete
  8. 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. :)

    ReplyDelete
    Replies
    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 :)

      Delete
  9. 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/

    ReplyDelete
  10. Replies
    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.

      Delete
  11. 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

    ReplyDelete
    Replies
    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"

      Regards!

      Delete
  12. Thanks You moch BEAUTIFUL WIDGET

    ReplyDelete
  13. bro please help me edit templete on my site
    www.trickytrick.in

    ReplyDelete
  14. Brother it is appearing too long in height..how can i solve this?

    ReplyDelete
  15. I LOVE THE DESIGN ....

    ReplyDelete
  16. 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

    ReplyDelete
  17. Mr.Patial visit my blog and suggest me the best suggestion about the look.
    plz help me , I am a new blogger.

    https://afsanamera.blogspot.in/

    ReplyDelete
  18. how can i integrate this email list with mailchimmp? i don't wanna use feedburner.

    ReplyDelete
    Replies
    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!
      Regards!

      Delete
    2. where's the link to contact? what's the service charge?

      Delete
    3. Pyros :: Please use contact form on contact us page (link is on top) and send me an email!
      Regards!

      Delete
  19. Hlw satbir... on my blog a subscription widget already installed but i want to remove that widget... please tell me how to remove

    ReplyDelete
  20. your plugins really help to make my blog attractive

    ReplyDelete
  21. Hi sabit,please how can i reduce the height of the widget....

    ReplyDelete
  22. 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

    ReplyDelete
  23. HELLO ADMIN, I'V COME THROUGH THIS AND LOV IT, VERY INTRESTING...... BUT PLS HOW CAN I EDIT THOSE FEEDBURNERS EMAIL SENT TO SUBSCRIBERS AND MRE SO ITS DISPLAY UR TWIST BLOGGER ALWAYS,,, HOW CAN I CHANGE THIS TO MY OWN SITE NAME.

    ReplyDelete
  24. Hi, satbir, how can i make it show on a mobile platform and below post on desktop like yours, instead of sidebar

    ReplyDelete
  25. 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..

    Regards
    Bharat

    ReplyDelete
    Replies
    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!

      Delete
  26. 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

    ReplyDelete
  27. 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:

    https://feedburner.google.com/fb/a/mailconfirm?k=rqSqyfXFHTnT418wUGWsT8sA0Kg

    Pls something is wrong i edited everything still d same

    ReplyDelete
    Replies
    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".

      Delete
  28. 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

    ReplyDelete