| 6 comments ]

Professionally looking header and footer sections of a blog are very important not just because overall good impression but also because of easy navigation of your visitors. I have seen many articles which were talking about how to customize header section and how to add horizontal navigation bar under header. But what if readers scroll down to the bottom of your page? Wouldn’t it be better to put navigation links into footer section so it will be easier to navigate through your blog also from the bottom?

I have seen this feature in many professional Wordpress blogs and I wanted it for my blogspot blog as well. Unfortunately I was unable to find any guide how to do it. But I don’t give up easily. Despite I know very less about html and css coding after few hours I find surprisingly simple way how to put navigation links into the center of the footer blogspot section.

*Please keep in mind I am not professional coder, so maybe my language will not be that clear.


Here is the guide how to add links into the footer section

This method require modification of the html source of your blogspot template, therefore before we start make sure you save your current blog template.

1. Saving current template - Log in to your blogspot blog. Click Layout and then Edit HTML. From here you can download your current blog template.

1_31.jpg (56 KB)

2. Cleaning your footer section – If you use customized template it will probably have also customized footer section. If we want to create simple and professional looking footer we have to get rid of all that unnecessary sections which can be implemented into the footer (for example I originally had 3 columns in my footer bordered by white lines).

So while we are in Edit Html, find the footer section of html code (click ctlr+f and write “footer” – without quotation marks, it will be in CSS section of your html source). Now you have to experiment a bit with this section, to get rid of all unnecessary parts. Your goal is to reach clean footer without anything (just clean image of your footer). So delete one part, click preview to see what happened, it can be time consuming from beginning but after some time you will be able to identify and delete all unnecessary parts. Don’t forget to save your template when you will be satisfied with the results.

Just for inspiration, this is how my footer section looked after I cleaned it up.

3_15.jpg (32 KB)

3. Add links into footer section – Now when we have nice and clean footer, it is time to add navigation links. Click Layout, now we are going to add text gadget into the bottom of your layout. Click on Add a Gadget and add Text gadget.

2_4.jpg (34 KB)

4. If you want to add following links HOME – ABOUT ME – CONTACT – RSS into your footer add the code below to the Text gadget (click on Edit Html option in Text gadget) Here is the code you have to add:



Now you have to change my links for yours, so find out in the code above links which point to my blog (http://www.onlinebusinesspeak.com) an replace them for your links which point to your home, about me, content and rss pages.
You can also add more links or change the name of current links.

That is it, please if you have any unclearness, don’t hesitate to ask them here or contact me through the email. I will be happy to help!

6 comments

business said... @ August 19, 2009 at 9:38 PM

Easy-to-follow tutorial. Thanks for posting about this. I have a blogspot blog and wondered how to create navigation in the footer.

Kids Storage said... @ September 11, 2009 at 4:58 AM

Good information. I need to add a link to my wordpress blog header rather than the footer. I don't really know php...

home lighting said... @ October 5, 2009 at 12:54 PM

Thanks, I have learn through your blog how to add link in footer section.

izdelava spletnih strani said... @ November 13, 2009 at 2:23 PM

yup, very easy to install thaxn been trying with this for a long time,

izdelava strani said... @ November 13, 2009 at 2:25 PM

very easy to install

Facebook Marketing /Promotions said... @ May 5, 2010 at 7:12 AM

Hi there, I found your blog via Google while searching for facebook marketing & promotion and your post looks very interesting for me.

Post a Comment