How To Add A Header With Opacity Using jQuery For Blogger

When I was looking for my next blog post, I came around a website, which has an opacity header in fixed position. The next thing came in my mind was to come make that same feature happen in Blogger. So to make that happen I used opacity script developed by David Walsh and I modified the script to make it work on Blogger platform. This tutorial will let you to add a header with opacity using jQuery and you can its easily editable to add more options within this feature and before heading into the tutorial, take a backup of your template. So here we go.

header with opacity for blogger

header with opacity for blogger

Live Demo

Step 1: Login to your Blogger dashboard and navigate to Layout > Edit HTML. Now check the “Expand Widget Templates” and search for the code <head> and replace it with the below code

<head>
<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>

In this step you can remove the jQuery script, if you have already initialized it on your blog.

Step 2: Now we are going to add the CSS code, which is responsible for appearing the opacity header on the top. So search for the code ]]></b:skin> and replace it with the below 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%;
}
]]></b:skin>

Here you can change the color of the header bar by changing the background value.

Step 3: At this stage, we are heading to insert the functions to be visible on the header bar. So here I inserted basic navigation link to be seen inside the header bar, but this can be changed according to your own ideas. Search for the code <div id='header-wrapper'> and replace the below code before <div id='header-wrapper'>

<div id='opacitybar'>
	<a href='#'>My Projects</a> |
	<a href='#'>Freebies</a> |
	<a href='#'>Tutorials</a> |

</div>

Save the template, to see the changes. If you have any troubles in making it work on Blogger platform, drop in your comments.

April 26, 2010. This entry was posted in Blogger, jQuery, Tutorials and tagged . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

9 Responses so far!

  1. Fantastic job Frank, you are doing a great job here.

  2. Thanks a lot Frank

  3. Good job friend. Thanks for sharing :)
    .-= Anup@Hack Tutors´s last blog ..10 Essential iCal Tips & Tricks You Should Know =-.

  4. Hi
    At first thanks for sharing
    But I have a problem
    I can’t find in my blog
    I use blogger not WordPress
    Could you help me??

  5. Nice job Frank, you are doing a great article here. thanks for sharing with us…

  6. GOOD JOB DUDE..

  7. Hi Frank,
    Thanks for your super cool widget.I have gone through a problem,my font and background color is not changing,It is one of your template,I had done what you said in the post ,it is not changing man and I wanted to put some search box in it.can Please help me with it…

    Thanks,

  8. Nyc man great one. I’m looking for this.
    Vtrickz

  9. Very useful, thanks for sharing. Works like a charm.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>