Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » How To Add A Sticky Header With Opacity In Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Add A Sticky Header With Opacity In Blogger

How To Add A Sticky Header With Opacity In Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,030 views

On one of my previous posts I featured a tutorial that teaches you how to add a sticky footer at the bottom of your Blogger web page. This time I’ll be sharing a tutorial made by the guys from BloggerMint 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!

Liked It ? Please Share

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here