These days scrolling viscous bar withdraw hold provided an entire novel tendency to the blogosphere. This is the argue why every i is going gaga most viscous bars, peculiarly i which scrolls amongst our screen. After the successful free of Notification Bar, nosotros idea to accept our weblog to the adjacent level. Therefore afterward spending ii days inwards hard hitting Html coding, in conclusion I together with my blood brother were able to laid upward a masterpiece. I volition non accept besides long to discover it name, together with the widget I am talking most is a Scrolling Rss Subscribe Now Bar amongst Show together with Hide Button. This widget is so eye-catching that users would hold upward attracted past times its beauty, together with due to its fantabulous looks it volition strength users to subscribe to your blog. And hence, y'all volition have a precious subscriber without doing whatsoever enormous efforts.
We know y'all would dearest 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 usage interface built amongst Jquery spell no compromise on sites speed.
- Optimized amongst Social networking Touch me buttons.
- Built amongst Hide/Show Buttons allows y'all to hold user friendly experience.
- Attractive together with professional person blueprint provides tremendous user experience.
- Optimized amongst JavaScript, allows the widget to Scroll spell y'all curlicue upward or downward 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 wish to portion this tutorial amongst their readers.
Note: We withdraw hold noticed most of our gadgets are beingness redistributed on several blogs without credits attached. All such blogs are constantly reported to Google DMCA, Adsense together with Dmca.com. Therefore, approximately readers are advised to utilize our resources for non-commercial usage only.
How To Install It On Blogger:
These steps are straightforward, nosotros withdraw hold organized the entire tutorials inwards such a agency that every affair volition piece of employment inwards a circle. And inside 10 minutes y'all volition hold upward witness wonderful result. Let’s larn 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 corporation 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 corporation #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 corporation 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 indicate 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 clitoris -----*/
.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 corporation #00B0E6;
margin: 2px;
line-height: 1em;
background: transparent;
}
.jx-bar-button li:hover {
background-color: #000000;
border: 1px corporation #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 clitoris 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;
}
/*----- clitoris 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 corporation 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 corporation #eee; /* IE6 Bug */
border-bottom:0px;
}
/* active carte du jour clitoris */
.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 clitoris (rounded) */
.jx-nav-menu-active-rounded {
-webkit-border-radius:3px;
-khtml-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
/* cover 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 corporation 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, usage "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 corporation #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 corporation #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 y'all uncovering it, precisely inwards 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 direct 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 e-mail here...';}' onfocus='if (this.value == 'Enter your e-mail here...') {this.value = '';}' type='text' value='Enter your e-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 y'all uncovering it, glue the next JavaScript code inwards 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 persuasion 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 hateful solar daytime inwards together with hateful solar daytime out to attain 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 uncovering a agency which would facilitate our readers past times providing our content direct into their Inbox, but the inquiry is that how nosotros volition distribute out our content? So inwards this province of affairs nosotros tin accept total benefits from Google’s Feedburner.com, which provides overwhelming features to bloggers together with webmasters. Feedburner.com provides remarkable services, but e-mail subscription is the most prominent amid their services. For to a greater extent than data run across the next link.
From The Editors Desk:
So, guys I hope y'all would dearest this unique subscribe similar a shot bar. If y'all confront whatsoever difficulty spell adding this widget feels costless to ask. If y'all withdraw hold whatsoever query attain shipping us an email, together with don’t forgot to give your suggestions. Soon nosotros volition portion to a greater extent than highly-professional widgets till together with then peace, blessings together with happy scrolling.
No comments:
Post a Comment