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
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.
- Go To Blogger > Template
- Backup your template
- Click Edit HTML
- Click Proceed
- 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('http://feedburner.google.com/fb/a/mailverify?uri=Your-RSS-Feed-Name', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input class='emailupdatesinput' gtbfieldid='10' name='email' onblur='if (this.value == '') {this.value = 'Enter your email here...';}' onfocus='if (this.value == 'Enter your email here...') {this.value = '';}' 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.
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.
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).
35 comments
@Faizan - Thanks for fulfilling my request. Just going to try it!
See my <a href="http://www.geekyparigyan.blogspot.in>blog</a>. The space which is used to enter email address is beinng cut half at the end. Please check it out
hot post...
syed i use this in my blog...make a comment about it...
Sunil getripstuff.blogspot.in
@Parigyan Tamuly
Brother, The Reason why Its Getting Hidden is that, you have used Lots of TEXT. Please Reduce the Text. Or Try To Make your Font size Smaller. Then It will Work Perfectly. Peace
@sunil bishnoi
Thanks Dude!! Yeah it is a Hot Post. Peace
@ADMIN
Thanks Brother For Using Our Widget on your Blog We Appreciate it. Peace and Blessings
Scrolling Subscribe Now Bar With Hide/Show Button ~ My Blogger Lab
@Faizan- What text are you talking about? By the way how to remove that close/hide button?
@Parigyan Tamuly
I Am Talking About"Free PRO tips in your Inbox every day" And "Get Greeky With Us" Reduce This Text. And Brother If We Remove the Hide/Show Button It will irritate Readers, so its better to use it. Peace
Done bro! Still the same probs :(
@Parigyan Tamuly
Brother Give me Admin Access Let Me Handle it, I Think You Have Done Lots Of Editing. You Have my Email Send me an Invite. Peace
I;d like to see a live demo
@Tech Gyrl
We Have Already Mentioned the Link Of Live DEMO Above in the Post. However, If you are unable to see it then No problem Here is the Link Of Live Demo Give it a Try. http://mbllab.blogspot.com/ Peace and Blessings
super post brother..
I will try it in my Blog
Nice
Increase Backlinks of Your Blog
Nice Stuff ! Keep it up :)
wwww.androidaspect.com
this is great! i already tried it on dustent.blogspot.com
but how can i remove the free pro tricks logo... my blog is not about blogging
Thanks For Liking it Brother. You can Change the Text according to your Need. In Above coding Search For "Free Pro Tricks" And replace it with your text. Peace and Blessings
its not working on my blog. The space which is used to enter email address is beinng cut half at the end. this is the problem please help me
yourgenuinepc.blogspot.in
I Can't See The Coding at your Blog?
why u can't see, i want this widget please help me
You haven't integrated the Widget in your site dude. Follow the steps. or send your blogger template in XML format so we can help.
now i have integrated the widget. now tell me
tell me wht i have to do now i have added the codes.
You are using too many Scripts like Social POP, Scroll Back To TOP and etc that is causing the scripts not to work properly.
now tell me how to solve this problem. bt i cant remove other widget
I can't do anything without checking the TEMPLATE, Please send me your template in XML format @ contact.mybloggerlab.com Peace
ok i am sending the template but please dont spread it
LOL, Why I would spread it, Please after sending Template wait for at least 5 days till our team checks it. Peace
whts ur email
Contact me @ >>> contact.mybloggerlab.com
gmail is showing this error... ( The address "contact.mybloggerlab.com" in the "To" field was not recognised. Please make sure that all addresses are properly formed.)
contact@mybloggerlab.com is ur email
Dude ITs not Email Adress visit Contact.mybloggerlab.com and Just Paste your Template Downloading Link and thats it. It is a contact us page. Peace
No, Just Visit Contact.mybloggerlab.com And Follow the instructions there
why it doesn't work for progrey blogger template ?
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.