Scrolling Subscribe Now Bar With Hide/Show Button

Socialize It →

Tweet

35

Advertisements

These days scrolling sticky bar have provided an entire new trend to the blogosphere. This is the reason why every one is going gaga about sticky bars, especially one which scrolls with our screen. After the successful release of Notification Bar, we thought to take our blog to the next level. Therefore after spending two days in hard hitting Html coding, finally I and my brother were able to prepare a masterpiece. I will not take too long to disclose it name, and the widget I am talking about is a Scrolling Rss Subscribe Now Bar with Show and Hide Button.  This widget is so eye-catching that users would be attracted by its beauty, and due to its excellent looks it will force users to subscribe to your blog. And hence, you will receive a precious subscriber without doing any enormous efforts.

We know you would love to preview the widget, so here is the live demo give it a try. Remember: Wait for few secounds so the pages loads completly 

MBL Scrolling RSS Feed Subscribe Now Bar (LIVE DEMO)

Features Of MBL Scrolling Subscribe Now Bar:

• Easy to use interface built with Jquery while no compromise on sites speed.
• Optimized with Social networking Touch me buttons.
• Built with Hide/Show Buttons allows you to maintain user friendly experience.
• Attractive and professional design provides tremendous user experience.
• Optimized with JavaScript, allows the widget to Scroll while you roll up or down on the page.

Credits:

These codes below are the property of MBL Blog we are the original copyright owner. So we request Bloggers and Web developers to kindly attach an acknowledgment link back to this page, if they desire to share this tutorial with their readers.

Note: We have noticed most of our gadgets are being redistributed on several blogs without credits attached. All such blogs are constantly reported to Google DMCA, Adsense and Dmca.com. Therefore, some readers are advised to utilize our resources for non-commercial use only.

How To Install It On Blogger:

These steps are straightforward, we have organized the entire tutorials in such a way that every thing will work in a circle. And within 10 minutes you will be witness wonderful result. Let’s get to work now.

1. Go To Blogger > Template
2. Backup your template
3. Click Edit HTML
4. Click Proceed
5. Then Search For ]]></b:skin> and above it paste the following CSS Code. 

/*----- MBL Scrolling Subscribe Now Bar-----*/        
                           
#bobar {
    z-index: 100000;
}


.barimage {
    height: 91px; 
    padding: 0px 0px 0px 3px; 
    float: left;
    background: transparent;
    line-height: 1em;
}
.bartext {
    height: 50px; 
    padding: 0px 0px 0px 5px; 
    float: left;
    text-align: left;
    text-transform: none;
    background: transparent;
}
.bartext .bartitle {
    margin: 8px 0px 0px -10px; 
    font-size: 42px; 
    letter-spacing: -1px; 
    font-weight: bold;
    font-family: 'Share';
    color: #ffffff;
    line-height: 28px;
}
.bartext .barsubtitle {
    font-size: 24px; 
    font-family: 'Share';
    font-weight: normal;
    letter-spacing: -2px; 
    padding: 0px 0px 0px 0px;
    color: #ffffff;
    line-height: 12px;
    word-spacing: 3px;
    margin: -5px 0px 0px 0px;
}
.bartext .fineprint {
    color: #ffffff; 
    padding: 0px; 
    line-height: 10px; 
    font-size: 10px;
    margin: 0px 0px 0px 1px;
    font-family: Arial;
    font-weight: normal;
}
#bobar #bar_topborder {
    width: 100%; 
    border-top: 3px solid black;
    padding: 0px;
    margin: 0px;
}
#bobar .searchbox_header {
    color: #ffffff; 
    padding: 2px 0px 2px 0px; 
    font-size: 13px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0px;
}
#bobar #inner {
    width: 1030px; 
    height: 65px; 
    margin: 0 auto;
}
#bobar .bar_arrow {
    padding: 0px 20px 0px 10px;
}
#bobar div.search {
    margin: 0; 
    padding: 1px 0px 0px 320px; 
    text-align: left;
    line-height: 18px;
}
#bobar div.search input[type="text"] {
    color: #000000; 
    height: 24px; 
    width: 250px; 
    padding: 3px 0px 3px 7px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 12px;
    font-family: arial;
    margin-top: 1px;
}
#bobar div.search input[type="submit"] {
    color: black;
    width: 120px;
    height: 34px;
    font-size: 14pt;
    font-weight: normal;
    margin: 0px;
}
#bobar div.search input[type="submit"]:hover {
    cursor: pointer;
}


#bobar div.plusone {
    float: right; 
    margin: 0; 
    padding: 9px 0 0 10px; 
    width: 80px; 
}
#bobar div.twitter {
    float: right; 
    margin: 0; 
    padding: 5px 0 0 0; 
    width: 116px; 
}
#bobar div.fb {
    float: right; 
    margin: 0; 
    padding: 5px 0 0 0;  
    width: 96px;  
    text-align: left;
}


#bobar .message {
    font-size: 14px;
    line-height: 25px;
}


#bobar .success {
    color: #039c33;
    font-weight: normal;
}


#bobar .error {
    color: #ff0000;
    font-weight: normal;
}


/*----- bar style -----*/
.jx-bar {
    height: 65px;
    padding: 0px;
    width: 100%;
    background-color: #00B0E6;
    border-top: 1px solid black;
    margin: 0px;
}


.jx-bar-rounded-tl {
    -webkit-border-top-left-radius: 0px;
    -khtml-border-radius-topleft: 0px;    
    -moz-border-radius-topleft: 0px;
    border-top-left-radius: 0px;
}
.jx-bar-rounded-bl {
    -webkit-border-bottom-left-radius: 0px;
    -khtml-border-radius-bottomleft: 0px;    
    -moz-border-radius-bottomleft: 0px;
    border-bottom-left-radius: 0px;
}
.jx-bar-rounded-tr {
    -webkit-border-top-right-radius: 0px;
    -khtml-border-radius-topright: 0px;    
    -moz-border-radius-topright: 0px;
    border-top-right-radius: 0px;
}
.jx-bar-rounded-br {
    -webkit-border-bottom-right-radius: 0px;
    -khtml-border-radius-bottomright: 0px;    
    -moz-border-radius-bottomright: 0px;
    border-bottom-right-radius: 0px;
}


/*----- bar separator -----*/
.jx-bar span {
    width:1px;
    height:100%;
    background-color: #000000;
}
.jx-separator-left {
    float:left;
}
.jx-separator-right {
    float:right;
}


/* tooltip point direction */
.jx-tool-point-dir-down {
    background-image:url('http://cdn.utilcave.com/bobar/ttd.gif');
    background-repeat:no-repeat;
    background-position:center bottom;
    height:5px;
    width:auto;
}


.jx-tool-point-dir-up {
    background-image:url('http://cdn.utilcave.com/bobar/ttu.gif');
    background-repeat:no-repeat;
    background-position:center bottom;
    height:5px;
    width:auto;
}


/*----- bar button -----*/
.jx-bar-button ul {
    margin:0px;
    padding:0px;
}
.jx-bar-button li {
    float:left;
    list-style:none;
}
.jx-bar-button-right li {
    float:right;
    list-style:none;    
}
.jx-bar-button li {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    cursor:pointer;
    padding: 4px 8px 4px 8px;
    border: 1px solid #00B0E6;  
    margin: 2px;
    line-height: 1em;
    background: transparent;
}
.jx-bar-button li:hover {
    background-color: #000000;
    border: 1px solid #000000;
    padding: 4px 8px 4px 8px;
    margin: 2px;
}
.jx-bar-button-rounded li:hover {
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;    
    -moz-border-radius: 3px;
    border-radius: 3px;
}


/* default button's anchor text style */
.jx-bar-button li a:link, .jx-bar-button li a:visited {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666666;
    text-decoration: none;
    padding: 1px;
}
.jx-bar-button li a:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333333;
    text-decoration: none;
}


/*----- bar text container and button arrow indicator -----*/
.jx-bar div, .jx-bar iframe {
}
.jx-bar div {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666666;
    padding: 2px 8px 2px 8px;
    margin: 2px 0px 2px 0px;
    padding: 0px;
    margin: 0px;
}
.jx-bar div a:link, .jx-bar div a:visited {
    color: #666666;
    text-decoration: none;
}


.jx-bar div a:hover {
    color: #0099FF;
    text-decoration: none;
}


.jx-bar iframe {
    margin:4px 0px 4px 10px;
}


/*----- button tooltip -----*/
.jx-bar-button-tooltip {
    height: auto;
    padding: 5px 10px 5px 10px;
    color: #fff;
    background-color: #36393D;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}
/* rounded tooltip */
.jx-bar-button-tooltip {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}


/*----- nav menu -----*/
.jx-nav-menu {
    padding: 2px;
    background-color: transparent;
    border:#ccc solid 0px;
}
.jx-nav-menu-rounded {
    -webkit-border-radius:3px;
    -khtml-border-radius:3px;    
    -moz-border-radius:3px;
    border-radius:3px;
}
.jx-nav-menu ul {
    margin:0;
    padding:0;
    list-style:none;
}
.jx-nav-menu a:hover {
    background-color:#4096EE;
    color:#fff;
    text-decoration:none;    
}
/* styles for menu items */
.jx-nav-menu ul li a {
    display:block;
    text-decoration:none;
    color:#777;
    background:#fff; /* IE6 Bug */
    padding:8px;
    border:1px solid #eee; /* IE6 Bug */
    border-bottom:0px;
}
/* active menu button */
.jx-nav-menu-active {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    cursor:pointer;
    background-color:transparent;
    padding:4px 8px 4px 8px;
    margin:2px;
}
/* active menu button (rounded) */
.jx-nav-menu-active-rounded {
    -webkit-border-radius:3px;
    -khtml-border-radius:3px;    
    -moz-border-radius:3px;
    border-radius:3px;
}


/* hide and show/unhide item */
.jx-hide {
    float:right;
    background-image:url(http://cdn.utilcave.com/bobar/hide_dark.gif);
    background-repeat:no-repeat;
    height:16px;
    width:16px;
}
.jx-hide-top {
    float:right;
    background-image:url(http://cdn.utilcave.com/bobar/show_dark.gif);
    background-repeat:no-repeat;
    height:16px;
    width:16px;
}
.jx-show {
    height:30px;
    padding:0px;
    width:40px;
    background-color: #00B0E6;
    border: 2px solid yellow;
    border-bottom: 0px;
}
.jx-show-button {
    float:right;
    background-image:url(http://cdn.utilcave.com/bobar/show_dark.gif);
    background-repeat:no-repeat;
    height:16px;
    width:16px;
}
/* if showOnTop is TRUE, use "hide.gif" instead of "show.gif" */
.jx-show-button-top {
    float:right;
    background-image:url(http://cdn.utilcave.com/bobar/hide_dark.gif);
    background-repeat:no-repeat;
    height:16px;
    width:16px;
}
.jx-hide-separator {
    width:1px;
    height:100%;
    background-color: #335c9d;
    float:right;
}


.jx-bar-button li {
    margin: 2px 0px 0px 0px;
}


.jx-bar-button li:hover {
    margin: 2px 0px 0px 0px;
}


/*--------Subscription Form ------*/ 


.emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}


  .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 185px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}


    .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}




/*--------Touch Me Sharing Widget ------*/ 
.touchme a { 
display:block; 
height:50px; 
width:40px; 
padding:0 4px; 
float:right; 
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat; 
-webkit-transition: ease-in 0.2s all;    
-moz-transition: ease-in 0.2s all;    
-o-transition: ease-in 0.2s all;    
-ms-transition: ease-in 0.2s all;    
transition: ease-in 0.2s all; 
cursor:pointer;
}


.touchme a.googleplus { 
background-position: 0px -58px;
} 
.touchme a.googleplus:hover { 
background-position: 0px 0px; 
}


.touchme a.twitter { 
background-position: 0px -290px;
} 
.touchme a.twitter:hover { 
background-position: 0px -232px;
} 
.touchme a.facebook { 
background-position: 0px -406px;
} 
.touchme a.facebook:hover { 
background-position: 0px -348px;
}


.touchme a.rss { 
background-position: 0px -174px;
} 
.touchme a.rss:hover { 
background-position: 0px -116px;
}

  
   5.Now Look For </body> once you find it, just above it paste the following HTML code. 

<div id='bobar'>

    <div style='float: right;'><ul class='jx-bar-button-right'/></div>

    <div id='inner'>

        <div style='height: 100%; width: 100%;'>

            <table border='0' cellpadding='0' cellspacing='0' id='t_bdakfjl' style='padding: inherit; border: 0px; margin-top: inherit; margin-bottom: inherit;'>

                <tr>

                    <td style='padding: inherit;'>

                        <ul>        

                            <li style='border: 0px;'><a href='#' id='logoclick'/>

                                <ul id='barlogo'>

                                    <li class='barimage'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD8-2dG8D2lmS9bKSxKtCvkpG2w0MI7sFj8oCnMhS8j5Ts_w0zPHNawlTrIQwk73BSkDTOV2Uza3TSdKGH6Q52CylD4RpQNZZu8ctZD7hPI4p4ykucvkTZ_yTWi0mTE4GGiSFL5uTsrJs/s1600/Email_MBL.png'/></li>

                                    <li class='bartext'>

                                        <div class='bartitle'>Free Pro Tricks</div>

                                        <div class='barsubtitle'>in your Inbox every day!</div>

                                        <div class='fineprint'>Delivered directly to your email. Get it now.</div>

                                    </li>

                                </ul>

                            </li>

                        </ul>

                    </td>

                    <td style='vertical-align: top; padding: inherit;' valign='top'>

                        <div class='text-container search' id='bobar_search'>

                                    <td class='bar_arrow' style='padding-top: inherit; padding-bottom: inherit;'>

                                        <img align='top' border='0' src='http://cdn.utilcave.com/bobar/arrow.gif' style='vertical-align: top;padding-top: inherit; padding-bottom: inherit; padding-top: inherit; padding-bottom: inherit;'/>

                                  

                                    <td style='vertical-align: top; padding-top: inherit; padding-bottom: inherit; padding-left: inherit; padding-right: inherit;'>

                                        <table border='0' cellpadding='0' cellspacing='0' style='padding-top: inherit; padding-bottom: inherit; border: inherit; margin-top: inherit; margin-bottom: inherit;'>

                                            

        <div class='touchme'> 

<!--RSS--> 

<a class='rss' href='http://feeds.feedburner.com/MyBloggerLab' rel='external nofollow' target='_blank'/>

<!--Google Plus--> 

<a class='googleplus' href='https://plus.google.com/u/0/106374439082237286396' rel='external nofollow' target='_blank'/>

<!--Facebook--> 

<a class='facebook' href='https://www.facebook.com/MyBloggerlab' rel='external nofollow' target='_blank'/>

<!-- Twitter --> 

<a class='twitter' href='https://twitter.com/#!/MyBloggerLab' rel='external nofollow' target='_blank'/>

 <div class='emailupdatesform'>

<br/><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Your-RSS-Feed-Name&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='emailupdatesinput' gtbfieldid='10' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email here...&apos;;}' onfocus='if (this.value == &apos;Enter your email here...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email here...'/><input name='uri' type='hidden' value='MyBloggerLab'/><input class='joinemailupdates' type='submit' value='Submit'/></form></div></div></table></td></td></div>

                                        

                                            </td></tr>

                                            <tr>

                                            </tr>

                                        </table>

                                    

                        </div>

                    

        </div>

    </div>

   6.Now Look For </head> when you find it, paste the following JavaScript code above it.  

<script src="https://www.google.com/jsapi?                                  key=ABQIAAAAWvH7lmtbXPVbvOqmVVU9VRQdDxq4C7wyBnVikl0uwU8F0c1b7hTtX9ZL_MgGQCkMAayuC2BlaK4QRQ" type="text/javascript"></script><script type="text/javascript">google.load("jquery", "1.4.3");</script><script type='text/javascript' src='http://mybloggerlab.com/Scripts/jquery.cookie.js'></script><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> <script src='http://cdn.printables4kids.com/ez_display_au_fillslot.js' type='text/javascript'></script><script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script><script type="text/javascript">  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-23768243-22']);  _gaq.push(['_trackPageview']);_gaq.push(['_trackPageLoadTime']);  (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();</script><script type="text/javascript">window.google_analytics_uacct = "UA-23768243-22";</script><script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.jixedbar.js"></script><script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-fonteffect-1.0.0.js"></script><script type="text/javascript" src="http://mybloggerlab.com/Scripts/bobar.js"></script>

Customization:

Replace http://feeds.feedburner.com/MyBloggerLab with your Rss Feed Url.

Replace https://plus.google.com/u/0/106374439082237286396 With your Google Plus Url.

Replace  https://www.facebook.com/MyBloggerlab with your Facebook Page Url.

Replace  https://twitter.com/#!/MyBloggerLab with your Twitter Home Url.

Replace Your-RSS-Feed-Name with your Rss Feed Name, to activate Email Subscription.

  7. All done simply press the Save Template Button and view your blog, its picture perfect. 

Why To Choose FeedBurner To Deliver Free Updates To Your Readers:

Getting Millions of daily subscribers attracted to your Blog/Website is the biggest dream of a Blogger and webmaster. A blogger burns day in and day out to produce outstanding content, but he doesn’t recognize that content is not the whole lot. This does not mean it is immoral to fascinate our readers with gorgeous content. By creating fresh content, we will attract few readers but an enormous bunch of peoples will remain empty handed. We need to find a way which would facilitate our readers by providing our content directly into their Inbox, but the question is that how we will distribute out our content? So in this situation we can take full benefits from Google’s Feedburner.com, which provides overwhelming features to bloggers and webmasters. Feedburner.com provides remarkable services, but email subscription is the most prominent among their services. For more information see the following link.

• Using Feedburner to Create your Own Website Feeds

From The Editors Desk:

So, guys I hope you would love this unique subscribe now bar. If you face any difficulty while adding this widget feels free to ask. If you have any query do send us an email, and don’t forgot to give your suggestions. Soon we will share more highly-professional widgets till then peace, blessings and happy scrolling.

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