- which allows yous to navigate the page alongside out going to move past times of the page.
- when yous scroll downwardly the page it volition perish along next yous till real end.
- which volition only appear when yous scroll downwardly the page.
- if yous scroll dorsum to move past times it volition teach dorsum to its original position.
These are the characteristic which produce attract us although Google Dynamics has Scrollable sticky bar but it was not available for Blogger Custom Template
After the research work of iii days and today's 5 hours of coding Finally I was able To Create MBL Scrollable Sticky Navigation Bar For Blogger.It basically plant on jQuery when e'er yous scroll downwardly it converts your electrical flow navigation bar into a scrolling bar together with when yous perish dorsum to move past times it comes dorsum to its original position.So allow us starting optimizing our weblog for Scrollable Sticky Navigation Bar.it volition just Transform your Old navigation Bar into a Scrollable Navigation Bar.
I know yous would dear to preview The MBL Scrollable Sticky Navigation Bar take a hold off at it.Remember:Your navigation bar remains the same but it volition become Scrollable and sticky
Important:To Get the Preview Please Scroll the DEMO pages together with yous volition endure able to come across the Scrollable Sticky Navigation Bar.
Adding CSS Style In Template
First nosotros volition add together styles sail to the blogger template i.e CSS hence outset perish to
- Blogger.com >> YourBlog >> Template >> EDIT HTML >> Proceed
- Search For ]]></b:skin> and exactly higher upward it glue the next code together with salve the template
/* MBL-Sticky-Navigation-Bar */
body, h1, h2, h3, p {
margin: 0;
padding: 0;
}
::selection {
background: #c00;
color:#fff;
}
::-moz-selection {
background: #c00;
color:#fff;
}
/* full general styles */
body {
background: url(img/bgnoise_lg.png);
font: 20px 'Open Sans Condensed', Tahoma, Geneva, sans-serif;
}
a {
color:#c00;
text-decoration:none;
}
#MBL-Sticky-Navigation-Bar {
width:940px;
margin: 0 auto;
}
header {
text-align:center;
padding:70px 0;
}
header h1 {
color:#999;
text-shadow:0 0 0 transparent, 0 1px 0 #fff, 0 -1px 0 #555;
font-size:40px;
}
header h2 {
display:inline-block;
border: 1px dashed #999;
padding: 2px 10px 5px;
margin: 10px 0 0;
border-radius: 5px;
box-shadow: 0 1px 1px #fff;
font-size:20px;
}
nav {
background:url(img/nav-bg.png) no-repeat;
height: 90px;
width: 960px;
margin-left: -5px;
line-height:50px;
position: relative;
}
nav:after {
background:url(img/nav-shadow.png) move past times repeat-x;
position: middle;
height:30px;
width:980px;
left:10px;
top:60px;
content:'';
}
nav p {
padding: 0 70px;
}
nav a {
color:#fff;
text-shadow: 0 0 0 transparent, 0 -1px 1px #900;
}
#content {
background: #fff;
height: 1500px; /* presetting the superlative */
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
#content p {
padding:20px 60px;
}
.fixed {
position:fixed;
}
<!--
a {color:blue;}
a:hover {text-decoration: underline;color:#E1B2B2;}
-->
Adding JQuery To Your Template:
Now We ask to insert Jquery equally it is the exclusively affair which is responsible to brand your navigation bar Scrollable.
- Go To Blogger.com >> Your Blog >> Layout >> Add Influenza A virus subtype H5N1 Gadget
- Add Html/JavaScripts >> Then paste the next code in that location >> And save it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Calculate the superlative of <header>
//Use outerHeight() instead of height() if stimulate got padding
var aboveHeight = $('header').outerHeight();
// when scroll$(window).scroll(function(){//if scrolled downwardly to a greater extent than than the header's heightif ($(window).scrollTop() > aboveHeight){// if yes, add together "fixed" shape to the <nav>// add together padding move past times to the #content (value is same equally the superlative of the nav)$('nav').addClass('fixed').css('top','0').next().css('padding-top','60px');} else {// when scroll upward or less than aboveHeight, take away the "fixed" class, together with the padding-top$('nav').removeClass('fixed').next().css('padding-top','0');}});});</script>
Making Your OLD Navigation Bar Scrollable:
Now this is the virtually of import measuring where nosotros volition covert your Static navigation bar into a scrolling navigation bar.simply perish to
- Blogger.com>>Template>>EDIT HTML>>Proceed>>
- Now Search For your Navigation Category Name i.e Home or whatever other allow us take example of MyBloggerlab.com inwards the navigation bar I have Blogger Tricks as my second main category hence I volition search Blogger Tricks inwards the template Remember:The category you are searching should endure the outset ane or second one inwards your navigation bar.
- When yous uncovering it yous would endure able to see I.e <div id='Navbar'> which is the ID of your navigation bar. .Remember:You Might non teach the same div Id equally all the templates are differently coded but it would endure related to it i.e <div id='Nav'> , <div id='Navcontainer'> id='NavbarMenu'> and etc
- Now exactly higher upward the div id of your navigation bar paste <nav>
- Just afterwards adding <nav> tag search for </div> which volition endure at the terminate of your navigation coding. Remember:You ask to uncovering exactly next </div> closing tag to your navigation settings
- Replace </div> with </div></nav>
- And straightaway Save your Template perish together with preview your template together with it volition endure a photograph finish
Still Confused :( Watch This Video Tutorial :)
So thats how yous tin displace convert your static Navbar into a Sticky Scrollable Navigation bar.If yous experience whatever problem experience gratis I would dear to deal you.This is the outset e'er Scrollable Navigation Release over Blogger.So in that location are withal room for improvement together with from coming post service surly more improved and optimized Scrollable Sticky bars would endure shared till yous teach it done till together with hence peace approbation happy scrolling:)
No comments:
Post a Comment