How To Add Tabbed Email Subscription Box In Blogger

Socialize It →

Tweet

11

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.

Tabbed Subscription Box (DEMO)

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRjIZ_sSA6OKtYwtqnNCW1Ae_hmB75s3bLsrMKEpIsMtZSEP8RMpIw9mbKdpcjfWJ5FF8pcmkfxLemFRL0oZ5-JNthPw56OLMnRVrcs5-kueTVPngzuostJFF30hq17YT9S14jifJUKWo/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:

• Dashing Subscribe Now Box
• Elegant Rss Email Subscription Widget
• Scrolling Subscribe Now Bar With Hide/Show Button

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

About the Editorial Team

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