The user who visits your site also found it too difficult to find what he want. So you can give your visitors an idea about the topics you are blogging about by adding a menu to your blog. If you are blogging about Linux then you can add menu items like News, Tips and Tricks, Softwares, Resources etc. By clicking on these links they can easily navigate to each section in your blog. This adds more professionalism to your blog and it also make your blog more easy to navigate.
I will tell you how to add a CSS based menu in your blog. First what you need is an image that can be used as the menu. You can use this image.
Upload your image to a free image hosting service like Picasa web albums. Then copy the URL of this image and paste it in a notepad file because you need it to continue this tutorial.
You now have successfully hosted your image and have the URL of it with you. Now we are going to add the CSS script to your blog. I think you all know what CSS is. It is used to add styles to web documents. It is used to format images and text contained in a webpage. So we have the image and its URL. We have to format this image using CSS and add it to our blog. Here is the CSS script that we are going to use.
#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
It is time to add this script to your blog. So first login to your blogger account. Now click on the Layout tab and select Edit HTML. This will show you the HTML code of the template of your blog. You are going to edit this template. So make sure that you take a backup of the current template.
Press CTRL+F and enter the following lines in the Find search box.
Now enter the CSS script just above this line. Replace "tabrightH.gif" in the CSS script with the exact URL of the image. Click on the Save Template button to save changes to your blog template.
The next step is to add HTML script for this menu. To do that once again you have to click on the Layout tab. You have to select the "Add a Gadget" option. From the list that appears select HTML/JavaScript. Now place this Gadget just below your blog header image. Click on the Edit link to add HTML script to this Gadget. Here is the HTML script you are going to add.
Now you have to add some links to the "#" section in this script. I think you have labeled all the post in your blog. So replace this section with "http://youblog.blogspot.com/search/label/lablename". Replace label name with a label you have used in your blog. Say, if you have a blog about Linux and you labeled some posts with "TipsnTricks" then replace labelname with TipsnTricks. Replace Link1, Link 2, Link 3, Longer Link Text, Link 5, Link 6, and Link 7 between the opening and closing span section with the names you want to give to these links. Click on Save button to save your changes. Also save changes to your template.
You have successfully added a CSS menu to your blog. Visit exploding boy website for more CSS menus and scripts.
I hope you enjoyed this post!
0 comments:
Post a Comment