Stylish - Sidebar Subscription Box Widget For Blogger

SHARE
Stylish Subscription Boxes
A subscription box widget helps blog owners to grow their mailing list and blog readers to get free email updates straight into their inbox. More email subscribers mean more power to you because you don't have to wait or promote the hell out of your new epic blog content to get targeted visitors who are in need of it. They are already there waiting for your email. You get free traffic, social shares, comments, followers and readers for free. So this is how important it is to have a subscription box just below the posts and in your blog's sidebar so that people who are interested in your blog niche, can subscribe with one click.



Although a subscription box is of no use if it is not eye catchy which attracts visitors like a magnet and lures them enough that they can't help but just put their email address and sign up. Overall this is why we use this widget, right?

This widget I am going to share is really unique and I put several hours to design it & make it perfect. A lot of trial and error made it possible for me to come up with this stylish widget working perfectly on every template.

Note:-
New Version 2 Released:- New Stylish Sidebar Subscription Box Widget For Blogger

Previously you may have installed so many other sidebar subscription box widgets and I bet most of them were not in alignment with your template when installed. Because of poor CSS styling and Sidebar Widgets' settings of one's template make these things problematic.

This widget will definitely work with every template as it is shown in the screenshot because I have taken care of everything. I tested it on different templates and made changes accordingly to everything that was preventing it from appearing as I wanted it to be.

A live example of it can be seen there on my blog's sidebar. Although, it is little different but basic theme is same. Older sidebar widgets provided on this blog might not have worked on your blog just because of the same problem but this time I learned it. Let us begin with the process.

(Note:  What You Can and What You Can't?
1) You do not have permission to share my code on your blog or making minor changes to CSS class/id names and saying you did it.
2) You can use this widget on your any (personal or commercial blog) without asking for permission.
3) You can Remove the footer credit link. You heard it right. You do not have to keep intact the footer credit link which is a link back to this post. This is your choice. If you want you can show your gratitude or else just remove it and enjoy as it is. You came to my blog for a reason and if that reason is fulfilled, I got my reward :)
4) You can Not Remove the comments added to CSS style code. Remain them intact, they do not harm in any case.

Recommended: Feedburner Email Subscription Popup Blogger Plugin

Here is How To Get This Widget Working Step by Step

See this screenshot and understand a few things so that you can change them later easily without frustration.

Things to Change in Subscription Box

First of all you must make a habit of taking the backup of your blog's template code before proceeding with the installation of any widget because you may end up doing things wrong and screw it. So it is always better to have a backup so that if in any case you did things wrong or just you did not like your new widget, you can go back quickly.

Important Note: Font family I used in this widget is "Oswald" which is a Google font. You can use this font family on your blog easily. Just follow the steps below.

Installing CSS code and Font Family "Oswald" into Your Blog

Step 1) What it could be other than logging back to your blogger account. :) Select your blog >> Choose Template >> Click Edit HTML and let the template code box load
Step 2) Save your template code into notepad as a backup.
Step 3) Open a search box by clicking inside the code box and pressing Ctrl+F on Windows or Cmd+F on Mac.
Step 4) Find this opening tag <head> and just below that paste the Google font family URL given below.
<link href='http://fonts.googleapis.com/css?family=Oswald%3A400&subset%3Dlatin%2Clatin-ext&ver%3D4.1' rel='stylesheet' type='text/css'/>
Now Google font family, "Oswald" is installed on your blog :)

Note: In-case you do not want to use the Oswald font family then please replace every appearance of the font-family Oswald from the CSS code below and add your own font-family.

If you want to use the default font of your blog then just replace every appearance of font-family: "Oswald",sans-serif; with font-family: inherit; and you good to go with it. Otherwise sans-serif fonts will be applied and it will look awkward to you.

Step 5) Find this code ]]:</b:skin> and just before that, paste the CSS code given below
(Note: To understand how to make changes like colors or font size then just follow the 6th step below the code)

/*------- Stylish Sidebar Subscription Box Widget by TwistBlogger.com------*/
#twist-blogger-sbox {
  padding: 0;
  margin: 0;
  width: 100%; /*---- Change width here - You can use pixels or in percentage -----*/
  height: 355px;
  border-radius: 1px;
  border: 0;
  background: #3A3939; /*------ Change background color of widget here--------*/
}
#twist-blogger-sbox .tagline {
  padding: 5px 0px 0px 0px;
  line-height: 35px;
  height: 45px;
  font-size: 25px; /*----- Change the Font Size of Main Tagline here -----*/
  font-weight: normal;
  font-family: "Oswald",sans-serif;
  text-shadow: 0px -1px 0px #999;
  color: #FFF;
  text-align: center;
  background: #FF7400; /*---- Change background color of Tagline here -----*/
  border: 5px solid #FD6A00;
  border-bottom: 7px solid transparent;
  border-bottom-left-radius: 50px;
}
#twist-blogger-sbox .sub-tagline {
  font-family: "Oswald", sans-serif;
  font-size: 19px;      /*--Sub Tagline Font Size - Change here ---*/
  color: #FFF;
  text-shadow: 0px -1px 0px #000;
  line-height: 30px;
  padding: 0px 10px 0px 10px;
  text-align: center;
  margin: 0;
}
#twist-blogger-sbox .item-list {
  margin: 10px 0px 0px 0px !important;
}
#twist-blogger-sbox .item-list > ul {
  padding: 0px 0px 0px 50px !Important;
  margin: 0 !important;
}
#twist-blogger-sbox .item-list > ul > li {
  font-family: "Oswald", sans-serif;
  font-size: 15px; /*----- Change Font Size of List here ------*/
  margin-left: 10px;
  color: #E8E8E8; /*------ Change font color of List here ----*/
  line-height: 24px;
  text-align: left;
  text-shadow: 0px -1px 0px #000;
  list-style: none !important;
  list-style-type: none !important;
  margin: 0px !important;
  padding: 0px !important;
  border: 0 !important;
}
#twist-blogger-sbox .rssform {
  padding: 0px 20px;
  margin: 16px 0px 16px 0px;
}
#twist-blogger-sbox .rssform input {
  padding: 8px;
  font-size: 13px;
  font-family: "Oswald", sans-serif;
  font-weight: normal;
  width: 100%;
  text-transform: uppercase;
  outline: none !important;
  border: none;
  border-radius: 1px;
  box-sizing: border-box !important;
  -moz-box-sizing:border-box;
}
#twist-blogger-sbox .rssform .button:hover {
  background: #ED6D00; /*----- Change Subscribe button hover color here -----*/
}
#twist-blogger-sbox .rssform .button {
  background: #FF7400; /*----- Change Subscribe button background color here -----*/
  color: #FFF!important; /*------ Change Font color here ------*/
  border: 0;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  width: 100%;
  padding: 6px !important;
  float: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}
#twist-blogger-sbox .lock-policy a {
  color:#818181;
  text-decoration:none !Important;
}
#twist-blogger-sbox .lock-policy {
  font-family: "Oswald",sans-serif;
  background: url(http://4.bp.blogspot.com/-kYVqV9JYDHY/VPMC8jPKTGI/AAAAAAAAA28/zxv0TYRIZe4/s1600/Lock-twistblogger.png) no-repeat 10px -2px; /*--- image URL of Lock appears in footer ---*/
  color: #818181;
  text-align: center;
  font-size: 12px; /*--- Font size of footer line ----*/
  margin-left: 10px;
  padding: 0px;
  line-height: 30px;
  margin-top: -5px;
}

Step 6) So you want some changes to this widget? In the above code, I have added proper comments in front of CSS code line where you can change what comment says. Read the comments and change what you can do for font family, color, size, width etc.

Save you template code now because HTML part will be added to the sidebar via template Layout Section.

Installing HTML Part of Widget - In Template Layout Section

Now we are done with CSS code so now it's time to add HTML part of this widget through Template Layout section.

Step 1) Go to Layout area of your blog then on the sidebar just add a new HTML/JavaScript widget.
Step 2) Now paste the HTML code after making compulsory Changes to it.

<div id='twist-blogger-sbox'>
            <div class='tagline'>
            Wait! Did You Know?
            </div>
                <div class='sub-tagline'>Why should you subscribe?</div>
<div class="item-list">
<ul>
<li><div style='color: #FF5700; display: inline-block; font-size:17px; letter-spacing: 4px;'>&#10004;</div> Free Photoshop .PSD Templates</li>
<li><div style='color: #FFE800; display: inline-block; font-size:18px; letter-spacing: 4px;'>&#10004;</div> Adobe Illustrator Tutorials</li>
<li><div style='color: #FF5700; display: inline-block; font-size:19px; letter-spacing: 4px;'>&#10004;</div> 3D Animation Tutorials</li>
<li><div style='color: #FFE800; display: inline-block; font-size:20px; letter-spacing: 4px; letter-spacing: 4px;'>&#10004;</div> Straight into your &#8594; INBOX</li>
</ul>
</div>
            <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="Subscribe Now" class="button" type="submit" />
            </form>
            </div>
<div class="lock-policy">
   Safe With Us | <a href="http://twistblogger.com/p/privacy-policy.html">Privacy Policy</a> | <a href="http://www.twistblogger.com/2015/03/stylish-sidebar-subscription-box-widget-for-blogger.html">Get This Widget</a>
</div>
            </div> 
Step 3) Tired? Now just change the highlighted things accordingly. Most important step to change is my Feedburner address TwistBlogger to yours otherwise you will be giving free subscribers to me :p

In the footer of the widget, I have used a Privacy Policy link so please change it to your blog's privacy policy page URL. This is highlighted in RED color at the bottom of HTML code. Green Color link is a link back to this post as a Credit, but I have allowed you to remove this link if you want.

Save this HTML/JavaScript widget and check out your blog for the changes. It must be working perfectly.

Wait, You might be thinking that why the heck did not I tell you to put the whole CSS+HTML to sidebar HTML/JavaScript widget, right? Well, there is no good reason or bad but I like to put the whole CSS code inside the template code altogether. We had installed the Google font too :)

So did this widget work for you? Was it as clean as shown in the Screenshots? Did you face any problem? Need help on template customization? Just ask me in comments and I'll do my best. Thanks for reading and using my widget for free. :p
Share this post, do comment and 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!

30 Replies so far - Join Conversation

  1. Hello Satbir, this is a great widget. I really like it. Can you help me by developming the same widget, matching my blog's color scheme. You can visit my blog at Blogging Easier I'll prefer the layout of blue and black widget with the color scheme yellow and black. You can get the correct colors from my blog

    Thank you in advance!
    Happy Blogging!

    ReplyDelete
    Replies
    1. Hey Naman, Nice to see you again :) and I am glad to know that you liked my widget.

      So you want to match it with your template color scheme. Its very easy and I have almost stated everything clearly about making changes in colors or width of every part of this widget.

      To change the background color of Main Tagline to yellow, just find out this color code in above CSS code of #twist-blogger-sbox .tagline { id

      #FF7400

      And Replace the above color code with your yellow color code. And you need to change the Text color code of same id too because it is white so in yellow background, white text will more likely not to show properly. So you can change the #FFF white color code to black #000

      And do the same to Button color, button hover color and its text color.

      Hope this helps.

      Delete
  2. I loved this widget Satbir. Good job!

    ReplyDelete
    Replies
    1. Rohan @ Glad to see you there buddy :) and congrats, finally you got a custom domain name for your blog.

      Delete
    2. Aw that is really kind of you to notice the changes on my blog. I really appreciate it! :)

      Delete
  3. Hi, Thanks for the widget but i a[[lied it on my blog and it did not work perfect, there was no design on it, just look so annoying that is my blog http://www.cashmakerweb.com

    ReplyDelete
    Replies
    1. I just checked your blog but I can't see it.. Did you remove it? I'll help you in installing it into your blog but before that your have to apply it on your blog first so that I can check it whats not working.

      Drop me an email using contact us form.

      Delete
  4. that is just awkward :)

    ReplyDelete
    Replies
    1. Stick to what makes sense to you SIR :)
      Thanks for taking time to leave a comment.

      Delete
  5. Nice post
    Thanks for sharing!!!

    ReplyDelete
  6. Hi,
    Your blog was so nice. i am using your subscription widget on my website instrumentationtools.com
    Your blog sitemap was very nice. Can you please share your sitemap code. so that i can use it on my website.
    Thanks for sharing,
    Bharadwaj

    ReplyDelete
    Replies
    1. S Bharadwaj Reddy:: Hello Friend,
      Sorry for late reply as I am little busy these days with real life commitments.
      Happy to know that you liked my blog and I checked your blog, it's really cool.
      I'll definitely share my sitemap code in my upcoming post as I have received the same requests multiple times.

      Thank you so much for taking time to leave your comment!

      Delete
  7. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Misterio:: Hi,
      You have to change it for two times in the HTML code. You'll find it no more than two times.

      First is:-
      http://feedburner.google.com/fb/a/mailverify?uri=TwistBlogger

      Second is:-
      <input type="hidden" value="TwistBlogger" name="uri"/>

      If you still are not able to make it work for you, shoot me an email.

      Delete
  8. Hi,
    Thanks for the immediate reply. I want to change the colour of the widget to match my blog theme. I preferred red color as it matches with my theme. You can check my blog here instrumentationtools.com. Please suggest how to change the color. I tried to change the color but the above heading was not fully changing.
    Thanks,
    Bharadwaj

    ReplyDelete
    Replies
    1. S Bhardwaj:: Hi,
      You're more than welcome buddy.
      To change the header color to match your theme design, find out these two color codes #FF7400 plus #FD6A00 and replace both with #D12F2F color code.

      To change the submit button color too then again find this #FF7400 code and replace it with #D12F2F code.

      List item area is also little off-track due to the left side padding so decrease the padding from 50px to 30px.

      Find this padding: 0px 0px 0px 50px!Important; code line and replace with padding: 0px 0px 0px 30px!Important; then save your template code.

      Delete
  9. HI,

    Thanks for the response & for sharing the sitemap code.

    Thanks
    Bharadwaj

    ReplyDelete
  10. how can i convert to wordpress this blogger widget?

    ReplyDelete
  11. Hi Satbir Patel,

    Your blog Comments system is awesome and looking good. Can you share the codes of your comment system. You can check out my site http://www.instrumentationtools.com/

    Thanks,
    S Bharadwaj Reddy

    ReplyDelete
  12. I have not working this code in my this blog http://www.apkmovies.com/ please help me when i add this code not working

    ReplyDelete
  13. Please provide me the sidebar subscription box coding which is on your site below author box....

    ReplyDelete
  14. Anonymous22:29

    bro can u send me the code of the subscriptio nbox you use in ur website !

    ReplyDelete
  15. Beautiful widget thanks to share this, i want to your blogger template please tel template name.
    My blog name www.ijankari.com and i want to use your template.

    ReplyDelete
  16. Very nice floating share. I used it in my blog www.entfire.com and looks awesome. So far this is the best

    ReplyDelete
  17. Wow.....Wonderful widget thanks,

    ReplyDelete
  18. Hey man you really got a great widget. Loved it.

    ReplyDelete
  19. Thanks, it worked for me

    ReplyDelete
  20. how can i let it show on my mobile template

    ReplyDelete
  21. Thanks brother... :D

    please give me ur comment widget cz this very god... :)

    ReplyDelete