Pages

Tuesday 11 September 2012

How to to add a sticky Header with Opacity in Blogger



 This time I’ll be sharing a tutorial that teaches you how to add a sticky header.
The cool thing about their header is the opacity effect, which fades a bit once yourscroll down. So how do you apply it to your blog? Back up your template and then read the instructions below.
  1. On your Blogger dashboard, go to ‘Layout’ and then click on ‘Edit HTML
  2. Put check mark in the ‘Expand Widget Templates’ box
  3. By pressing ‘Ctrl+F’, look for the <head> tag in the code and then copy/paste the following code below it:
<script src='http://sites.google.com/site/bloggermint/jquery-1.4.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
var topbarME = function() { $(&#39;#opacitybar&#39;).fadeTo(fadeSpeed,1); }, topbarML = function() { $(&#39;#opacitybar&#39;).fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position &gt; topDistance &amp;&amp; !inside) {
//add events
topbarML();
$(&#39;#opacitybar&#39;).bind(&#39;mouseenter&#39;,topbarME);
$(&#39;#opacitybar&#39;).bind(&#39;mouseleave&#39;,topbarML);
inside = true;
}
else if (position &lt; topDistance){
topbarME();
$(&#39;#opacitybar&#39;).unbind(&#39;mouseenter&#39;,topbarME);
$(&#39;#opacitybar&#39;).unbind(&#39;mouseleave&#39;,topbarML);
inside = false;
}
});
})();
});
 </script>
(You can exclude the jQuery script (bold part) if you already have it initialized in your blog)
Now to add some style and give the header its opacity-look using some CSS
4. Again, by pressing ‘Ctrl+F’, look for ]]><b/:skin> and the right above  it, copy/paste this code:
#opacitybar     {
border-bottom:1px solid #ECF1EF;
background:#151715;
font-color:#000000;
padding:10px 20px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
 }
(Feel free to change the color of the header bar by changing the background value)
In this next part, we’ll be adding the navigation links on the sticky header bar.
5. By using ‘Ctrl+F’ again, look for <div id=’header-wrapper’> and then copy/paste the following code before it:
<div id='opacitybar'>
<a href='#'>My Projects</a> |
<a href='#'>Freebies</a> |
<a href='#'>Tutorials</a> |
 </div>
(Again, feel free to assign any menu options you like on the header bar. It doesn’t have to be the same ones in the above example)
6. Preview and Save your template and you’re done!

1 comment:

  1. Thank you very much for sharing such a good stuff. This code is quite helpful for me. I was looking for this problem but was not successful. This is a blessing for me read more

    ReplyDelete