How To Add Tabbed Email Subscription Box In Blogger

Advertisements
Do you want to convert your Readers into Followers by letting them subscribe to the website’s Feed? Let us assume that someone arrived on your website. Ongoing through the website’s content the visitor loved its quality, so he decided to subscribe to the website, but soon he realized that there is no way of doing that. In this situation, a Webmaster loses lots of potential subscribers. Therefore, it is essential to display all the available subscribing opportunities so that a visitor can easily select his favorite social platform and start getting updates directly into his Inbox. Thanks to MBL Developers, who have coded an ideal Tabbed Subscription Widget that is sleek and has all the subscribing options that a webmaster needs. Today we will be sharing a Stylish Tabbed Subscription Box to Blogger.



Featured of MBL Tabbed Subscription Box:

  • It is compact in size so it can be implemented on the smallest part of a website.
  • It works perfectly on all browsers including Chrome, Firefox and etc.
  • It will not going to affect the speed of a website because we have integrated a highly compressed Jquery file in this widget.
  • It has two Tabs out of which one tab has links to Facebook, Twitter, Google plus and the other tab has the RSS Email Subscription box.

How To Install Tabbed Subscription Box in Blogger:

The steps are extremely straightforward, and it would take less than 5 minutes to complete the process. To integrate this widget in blogger enabled website, just follow the following instructions 
  • Go To Blogger.com >> Template
  • Select Edit HTML >> Proceed. 
  • In the template, search for ]]></b:skin> and above it Paste the Following CSS Code.
/* MBL Tabbed Subscribe NOW TABs*/
#mbl_subscribe_tabs {color:#333;font-family:ProximaNovaRgRegular,"Helvetica Neue",Arial,sans-serif;font-size:14px;margin:0 auto 0;padding:0;border-top:2px solid #333;}
#mbl_subscribe_tabs a,a:visited{color:#5A7A9B;text-decoration:none;}


#mbl_subscribe_tabs small{font-size:11px;} ul{padding:0;margin:0;} img{padding:0;margin:0;} img a{padding:0;margin:0;}
#mbl_subscribe_tabs{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;clear:both}
#mbl_subscribe_tabs .list-block{background:#fff;padding:5px;margin:0;width:241px;-webkit-border-radius:0 4px 4px;-moz-border-radius:0 4px 4px;border-radius:0 4px 4px}

/* For Internet Explorer */
html>body hr{margin-right:0;width:100%;height:1px;background-color:#ddd;border:none;background:#ddd}


/* For Gecko-based browsers */
html>body hr{} /* For Opera and Gecko-based browsers */
ul{list-style:none}


#mbl_subscribe_tabs{padding:7px;margin:0 0 15px 0;background:#ccc;width:251px}
#mbl_subscribe_tabs ul li a{border-bottom:1px dotted #eee;padding:5px 0;display:block;margin:3px 5px;font-size:12px;}
#mbl_subscribe_tabs ul li a:hover{background:#f8f8f8;color:#222}
#mbl_subscribe_tabs .nav{overflow:hidden}
#mbl_subscribe_tabs .nav li{padding:0;float:left;margin:0 5px 0 0}
#mbl_subscribe_tabs .nav li.last{margin-right:0}
#mbl_subscribe_tabs .nav li a{margin:0;display:block;border:none;padding:4px 7px;color:#333;text-align:center;clear:both;background:#bbb;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}
#mbl_subscribe_tabs .nav li a:hover{color:#fefefe;}
#mbl_subscribe_tabs li a.current{background:#fff;color:#222;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}
#mbl_subscribe_tabs li a.current:hover{background:none;}
#mbl_subscribe_tabs .nav li a.current:hover, #mbl_subscribe_tabs .nav li a.current:hover:focus{background:#fff;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;color:#333}
#mbl_subscribe_tabs .nav li a:hover, #category_tabs .nav li a:focus{background:#777;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}

/* Sidebar Tabs*/
.subscribe-button {width:70px; height:30px;background:#507aa5;display:inline-block;padding:4px;color:#fff;text-decoration:none;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:none;cursor:pointer;margin:0;}
.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 130px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-right:5px; margin-top:2px;}
.subscribe-button:hover{background:#515151}
.rssemail {line-height:140%;padding:2px}


/* Category Tabs*/
#category_tabs{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;clear:both}
#category_tabs .list-block{background:#fff;margin:0;width:241px;overflow:hidden;padding:5px;-webkit-border-radius:0 4px 4px;-moz-border-radius:0 4px 4px;border-radius:0 4px 4px}
#category_tabs{padding:7px;margin:0 0 15px 0;width:251px;clear:both;background:#ccc}
#category_tabs ul{list-style:none}
#category_tabs ul li a{float:left;padding:3px 7px;display:block;margin:3px;font-size:12px;background:#f7f7f7;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}
#category_tabs ul li a:hover{background:#587898;color:#fff}
#category_tabs .nav{overflow:hidden}
#category_tabs .nav li{padding:0;float:left;margin:0 5px 0 0}
#category_tabs .nav li.last{margin-right:0}
#category_tabs .nav li a{margin:0;display:block;border:none;padding:4px 7px;color:#333;text-align:center;clear:both;background:#bbb;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}
#category_tabs li a.current{background:#fff;color:#222;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}
#category_tabs li a.current:hover{background:none;}
#category_tabs .nav li a.current:hover, #category_tabs .nav li a.current:hover:focus{background:#fff;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;color:#333}
#category_tabs .nav li a:hover, #category_tabs .nav li a:focus{background:#777;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}

/* Sprites */
.rss-sidebar,.twitter-sidebar,.digg2,.fbook-sidebar,.ff-sidebar{padding:1px 0 2px 23px}
.rss-sidebar,.twitter-sidebar,.fbook-sidebar,.ff-sidebar {background:url(http://1.bp.blogspot.com/-rM_pl-KW9Ac/UJ1IthRiKTI/AAAAAAAAHWA/ntt9sIMgsk0/s1600/sprites.png) no-repeat top left}
.fbook-sidebar,.s-facebook{background-position:0 -76px !important}
.ff-sidebar{background-position:0 -114px !important}
.rss-sidebar,.s-rss{background-position:0 -506px !important}
.twitter-sidebar{background-position:0 -711px !important}

  • Now again in the template Search for </head> and just above it Paste the Following JavaScript Coding.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.4.2'></script>

<script type='text/javascript' src='https://mybloggerlab.googlecode.com/files/tabs.js'>
</script>

  • Save the template by pressing “Save Template” button and proceed to the next step.

Adding Tabbed Subscription Box To Blogger:

Since, we have installed all the CSS and JavaScript coding to our Blog let’s head towards the next step and that is to add HTML Coding. Follow the instructions mentioned below. 
  • Go To Blogger >> Layout >> Add a Gadget. 
  • From the list select Add HTML/JavaScript and paste the Following HTML Code.

<div id="mbl_subscribe_tabs">
        <ul class="nav">
            <li><a href="#subscribe" class="current">Subscribe &amp; Follow</a></li>
            <li><a href="#emailrss">RSS via Email</a></li>
        </ul>
        <div class="list-block">
            <ul id="subscribe" class="test">
                <li><a rel="nofollow"  href="http://feed.feedburner.com/MyBloggerLab" title="Follow us via RSS"><span class="rss-sidebar">RSS Feed <span class="grey">- 33344 Subscribers</span></span></a></li>
                    <li><a rel="nofollow"  href="https://plus.google.com/u/0/106374439082237286396/" title="Follow us on Google+"><span class="ff-sidebar">Google+ <span class="grey">- 2707 Followers</span></span></a></li>
                    <li><a rel="nofollow"  href="http://twitter.com/MyBloggerLab" title="Follow us on Twitter"><span class="twitter-sidebar">Twitter <span class="grey">- 41371 Followers</span></span></a></li>
                    <li><a rel="nofollow"  href="http://www.facebook.com/MyBloggerLab" title="Follow us on Facebook"><span class="fbook-sidebar">Facebook <span class="grey">- 20318 Likes</span></span></a></li>
            </ul>
            <ul id="emailrss" class="hide">
                    <li class="rssemail">To recieve our RSS updates via email, enter your email address below &amp; click subscribe.</li>
                    <li> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerLab', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="MyBloggerLab" name="uri" type="hidden" /><input value="Submit" class="subscribe-button" type="submit" /></form>  </li>
     
            </ul>
         </div>
 </div>

All Done: After customizing the highlighted coding press “Save” Button and the Tabbed widget is successfully integrated. Now go ahead and enjoy the picture perfect Subscribe now Box.

Related Widgets:

From The Editor’s Desk:

Hope you have enjoyed the combination of Social Networking websites with the RSS Email Subscription Plugin. What are your thoughts about this Plugin? Any more features that you want to see in the next version of this plugin? Feel free to leave your precious comments. Take a lot care buddies till then Peace, Blessings and Happy Subscribing.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

11 comments

November 9, 2012 at 11:31 AM

thanks Syed

November 9, 2012 at 11:55 AM

Nice One Faizan you really did hard work on it

November 9, 2012 at 6:29 PM

Really Its Good And helpful.I Like It.

November 9, 2012 at 7:51 PM

Nice one brother...

November 9, 2012 at 7:59 PM

The email subscribe should be first shown

November 10, 2012 at 1:44 AM

hi syed! u would be glad to know that adsense is now enabled on MPT! www.mypremiumtricks.com! ;)

November 10, 2012 at 1:45 AM

please write a user friendly post to speed up websiste. and please see my website and tell me what can i do to speed my webiste more. i would be very greatful to you! :)

November 10, 2012 at 1:45 AM

Hi Syed, I want to know, that how to register a website?

November 10, 2012 at 1:48 AM

hey syed! when any1 comment on my website, it only shows reply option, not delete.. please could u figure it out?

November 10, 2012 at 4:29 AM

Why don't you make widgets like this for Wordpress...

Tech Ravers

November 12, 2012 at 5:11 AM

Hey dude i Have Movie Website i want To Register & take copyrights of site. plz tell me the procedure.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.