How To Add a Tabbed Subscription in Blogger

Most beautifully for your blog Add this In your blog This is fit in low as low property and show multiple function subscribe is most important thing for your blog
How To Add a Tabbed Subscription in Blogger

How To Add a Tabbed Subscription in Blogger


  • Go to Blogger.com
  • Open Template>Edit HTML
  • Find Press(CTRL+F) 

  • ]]></b:skin>

  • Paste Following Code Above ]]></b:skin>
/* 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/AVvXsEgmCCOqxhmm6p4OYshwkwwd334Nb11IXmouXgcdlTZmmcn_NWD8HeTGM-JLatvy2azQSiH5TkE0AVMeLmj4GmXgMqT1nqnTDah8AoqCIlua89SYAuDkVQw2EUeWi0mSkogwmppxpl6yczs/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}




  • Again Search </head>
  • And paste Following Code just Above </head> 
<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://onlinehelperblog.blogspot.googlecode.com/files/tabs.js'>
</script>




  • Save Template 
  • And Go to Layout
  • Add a Gadget>HTML java Script
<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/onlinehelperblog.blogspot" 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/onlinehelperblog.blogspot" 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/onlinehelperblog" 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=onlinehelperblog.blogspot', '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="onlinehelperblog.blogspot" name="uri" type="hidden" /><input value="Submit" class="subscribe-button" type="submit" /></form>  </li>
      
            </ul>
         </div>
 </div>


Important Step is You Must Check in Codes Highlight Code Replace With Your Links Thats all
Post a Comment (0)
Previous Post Next Post