- which allows yous to navigate the page amongst out going to top of the page.
- when yous scroll downwards the page it volition overstep away along next yous till real end.
- which volition only appear when yous scroll downwards the page.
- if yous scroll dorsum to top 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 always yous scroll downwards it converts your electrical flow navigation bar into a scrolling bar together with when yous overstep away dorsum to top it comes dorsum to its original position.So allow us starting optimizing our spider web log for Scrollable Sticky Navigation Bar.it volition just Transform your Old navigation Bar into a Scrollable Navigation Bar.
I know yous would dearest 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 live on able to run across the Scrollable Sticky Navigation Bar.
Adding CSS Style In Template
First nosotros volition add together styles canvas to the blogger template i.e CSS thus starting fourth dimension overstep away to
- Blogger.com >> YourBlog >> Template >> EDIT HTML >> Proceed
- Search For ]]></b:skin> and exactly to a higher house it glue the next code together with salvage 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) top 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 meridian */
-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 take to insert Jquery every bit it is the solely affair which is responsible to brand your navigation bar Scrollable.
- Go To Blogger.com >> Your Blog >> Layout >> Add 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 meridian of <header>
//Use outerHeight() instead of height() if create got padding
var aboveHeight = $('header').outerHeight();
// when scroll$(window).scroll(function(){//if scrolled downwards to a greater extent than than the header's heightif ($(window).scrollTop() > aboveHeight){// if yes, add together "fixed" degree to the <nav>// add together padding top to the #content (value is same every bit the meridian of the nav)$('nav').addClass('fixed').css('top','0').next().css('padding-top','60px');} else {// when scroll upwardly or less than aboveHeight, take 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 nigh of import measuring where nosotros volition covert your Static navigation bar into a scrolling navigation bar.simply overstep away 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 thus I volition search Blogger Tricks inwards the template Remember:The category you are searching should live on the starting fourth dimension i or second one inwards your navigation bar.
- When yous abide by it yous would live on 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 every bit all the templates are differently coded but it would live on related to it i.e <div id='Nav'> , <div id='Navcontainer'> id='NavbarMenu'> and etc
- Now exactly to a higher house the div id of your navigation bar paste <nav>
- Just later adding <nav> tag search for </div> which volition live on at the halt of your navigation coding. Remember:You take to abide by exactly next </div> closing tag to your navigation settings
- Replace </div> with </div></nav>
- And straight off Save your Template overstep away together with preview your template together with it volition live on a photograph finish
Still Confused :( Watch This Video Tutorial :)
So thats how yous tin convert your static Navbar into a Sticky Scrollable Navigation bar.If yous experience whatever problem experience gratis I would dearest to assistance you.This is the starting fourth dimension always Scrollable Navigation Release over Blogger.So in that location are nonetheless room for improvement together with from coming post service surly more improved and optimized Scrollable Sticky bars would live on shared till yous teach it done till together with then peace approbation happy scrolling:)
No comments:
Post a Comment