How To Add A Header With Opacity Using jQuery For Blogger ~ mascimot.com

Do you want to share?

Do you like this story?

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.

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

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

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

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