These days scrolling pasty bar get got provided an entire novel tendency to the blogosphere. This is the argue why every i is going gaga nigh pasty bars, specially i which scrolls amongst our screen. After the successful unloose of Notification Bar, nosotros idea to get got our weblog to the adjacent level. Therefore afterwards spending 2 days inwards hard hitting Html coding, in conclusion I together with my blood brother were able to laid upwards a masterpiece. I volition non get got equally good long to discover it name, together with the widget I am talking nigh is a Scrolling Rss Subscribe Now Bar amongst Show together with Hide Button. This widget is so eye-catching that users would hold out attracted past times its beauty, together with due to its splendid looks it volition strength users to subscribe to your blog. And hence, you lot volition have a precious subscriber without doing whatever enormous efforts.
We know you lot would beloved to preview the widget, so hither is the alive demo give it a try. Remember: Wait for few secounds so the pages loads completly
Features Of MBL Scrolling Subscribe Now Bar:
- Easy to utilisation interface built amongst Jquery spell no compromise on sites speed.
- Optimized amongst Social networking Touch me buttons.
- Built amongst Hide/Show Buttons allows you lot to keep user friendly experience.
- Attractive together with professional person pattern provides tremendous user experience.
- Optimized amongst JavaScript, allows the widget to Scroll spell you lot curl upwards or downwards on the page.
Credits:
These codes below are the holding of MBL Blog nosotros are the original copyright owner. So nosotros asking Bloggers together with Web developers to kindly attach an acknowledgment link dorsum to this page, if they wishing to percentage this tutorial amongst their readers.
Note: We get got noticed most of our gadgets are existence redistributed on several blogs without credits attached. All such blogs are constantly reported to Google DMCA, Adsense together with Dmca.com. Therefore, roughly readers are advised to utilize our resources for non-commercial utilisation only.
How To Install It On Blogger:
These steps are straightforward, nosotros get got organized the entire tutorials inwards such a agency that every affair volition piece of employment inwards a circle. And inside 10 minutes you lot volition hold out witness wonderful result. Let’s teach to piece of employment now.
- Go To Blogger > Template
- Backup your template
- Click Edit HTML
- Click Proceed
- Then Search For ]]></b:skin> and above it glue the next 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 enterprise 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 enterprise #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 mode -----*/
.jx-bar {
height: 65px;
padding: 0px;
width: 100%;
background-color: #00B0E6;
border-top: 1px enterprise 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 bridge {
width:1px;
height:100%;
background-color: #000000;
}
.jx-separator-left {
float:left;
}
.jx-separator-right {
float:right;
}
/* tooltip quest administration */
.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 clit -----*/
.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 enterprise #00B0E6;
margin: 2px;
line-height: 1em;
background: transparent;
}
.jx-bar-button li:hover {
background-color: #000000;
border: 1px enterprise #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 mode */
.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 together with clit 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;
}
/*----- clit 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 carte du jour -----*/
.jx-nav-menu {
padding: 2px;
background-color: transparent;
border:#ccc enterprise 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 carte du jour items */
.jx-nav-menu ul li a {
display:block;
text-decoration:none;
color:#777;
background:#fff; /* IE6 Bug */
padding:8px;
border:1px enterprise #eee; /* IE6 Bug */
border-bottom:0px;
}
/* active carte du jour clit */
.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 carte du jour clit (rounded) */
.jx-nav-menu-active-rounded {
-webkit-border-radius:3px;
-khtml-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
/* shroud together with show/unhide particular */
.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 enterprise 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, utilisation "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 enterprise #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 enterprise #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 lot honor it, exactly to a higher house it glue the next 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/AVvXsEgUHjBlCCEasC7a5EXUbNyD26cboRsoW2oqPYrAvTvaGkVT9K583NT_lBGJ7ALsvDmXLcpKPB-BH7bI0OKVOfKpo2ewSc73IUWbxi_4Dt6qYsk8tWs09IYjgQz4mUb7wVOMzShyphenhyphenZ6zAvvY/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 straight 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 electronic mail here...';}' onfocus='if (this.value == 'Enter your electronic mail here...') {this.value = '';}' type='text' value='Enter your electronic mail 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 lot honor it, glue the next JavaScript code to a higher house 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 amongst 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 only press the Save Template Button together with stance your blog, its pic 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 together with webmaster. Influenza A virus subtype H5N1 blogger burns 24-hour interval inwards together with 24-hour interval out to reach outstanding content, but he doesn’t recognize that content is non the whole lot. This does non hateful it is immoral to fascinate our readers amongst gorgeous content. By creating fresh content, nosotros volition attract few readers but an enormous bunch of peoples volition stay empty handed. We demand to honor a agency which would facilitate our readers past times providing our content straight into their Inbox, but the enquiry is that how nosotros volition distribute out our content? So inwards this province of affairs nosotros tin get got total benefits from Google’s Feedburner.com, which provides overwhelming features to bloggers together with webmasters. Feedburner.com provides remarkable services, but electronic mail subscription is the most prominent amid their services. For to a greater extent than data come across the next link.
From The Editors Desk:
So, guys I hope you lot would beloved this unique subscribe immediately bar. If you lot human face upwards whatever difficulty spell adding this widget feels complimentary to ask. If you lot get got whatever query reach transportation us an email, together with don’t forgot to give your suggestions. Soon nosotros volition percentage to a greater extent than highly-professional widgets till together with so peace, blessings together with happy scrolling.
No comments:
Post a Comment