08 September 2009

Adding a Link Bar Below Your Blog Header

[Edit - If you arrived here looking for the non html static pages tutorial look here]
Those of you who read my blog regularly (thanks! especially for all your lovely comments recently) may have noticed that I have added a navigation bar at the top just below my blog header - cool isn't it!  I have a few regular post types on my blog and I think that having a links bar across the top that has the familiar look of a 'proper' website will encourage people to look through my posts or take a look at my shops.

I did this a few weeks ago, there are quite a few tutorials for how to do this but I ended up referring to about 5 of them to get it right and I'm not sure which was the original piece of code as it's very similar on all the sites, code is code I guess! I have finally got the look I wanted so thought I'd share it as a tutorial.  It doesn't seem to matter if you have a two column or three column blogger blog.  It may look long and daunting but it wont take you that long, most of it is copying and pasting - use CTRL C to copy and CTRL V to paste.


Basically how this works is we add some html code to the template which creates a horizontal link list which you can easily edit using your blogger dashboard - so you wont have to mess with the html every time to update it, it's just like updating your blog list.
  • Open up you blogger dashboard and go to layout
  • Click on Edit HTML
  • SAVE YOUR EXISTING TEMPLATE NOW!  Click on Download Full Template, and then save to somewhere that you will easily be able to find it is very simple to upload again if you somehow manage to muddle things up and want to go back to your original template.
  • Now you need to do a search for some code so that you can place the new code in the right place.  The easiest way to do this is by pressing Ctrl and F which brings up a search box, scrolling through code can make you dizzy.
  • Find the code that says
  • </b:skin>
  • Now insert this code in red immediately above the code in green -

    /* ----- LINKBAR ----- */
    #linkbar {
    margin: 6px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    position: relative;
    background: #FFF;
    border: 0;
    border-bottom: 0;

    #linkbar ul {
    margin: 0px 0px 0px 0px;
    padding: 5px 5px 7px 5px;
    text-align: center;

    #linkbar li {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;

    #linkbar h2 {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: none;
    visibility: hidden;

    #linkbar a {
    clear: both;
    margin: 0px -4px 0px 0px;
    padding: 3px 20px 3px 20px;
    font-family: arial, sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #999;
    border-right: 1px solid #CCC;

    #linkbar a:hover
    color: #000;
    background: #FF66CC;

  • Now find the code that looks like this (in green below), scroll down the html from where you have just inserted the above code and you should easily find it, use ctrl F to search if you have difficulty.  It looks like this or similar, your's wont say 'haptree and me' of course and may be layed out slightly differently.

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='haptree and me(Header)' type='Header'/></b:section></div>
  • Now insert this code below it  -

    <div id='linkbar-wrapper'><b:section class='linkbar' id='linkbar' showaddelement='no'><b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'><b:includable id='main'>

    <b:if cond='data:title'><h2><data:title/></h2></b:if>

    <div class='widget-content'><ul><b:loop values='data:links' var='link'><li><a expr:href='data:link.target'><data:link.name/></a></li></b:loop></ul>

  • Ok now click preview. Remember we haven't added links yet so it should be a new empty bar, if you have a white background like me it may appear invisible at this point!  If you are happy or you think you are, click save - remember you can always revert to your saved template if there's any problems and start over.  I am not an html whizz kid by the way, I'm just learning a few little bits at a time to make my blog pretty so do not do anything unless you have a saved version of your template as I cannot be held responsible!
  • Now you can go back to your blogger dashboard and you should find a new section at the top called linkbar - click edit and then add your links, it's really easy now to change the links whenever you like!
  • If you want to add a link to all your posts pertaining to one label then using your labels link (most people have one of these) click on the label you want and then copy the url address of this search into the section 'new site url' when you are editing your link bar.  You will then have a link to that group of posts, I have used this on my 'garden' and 'mini treasury' links if you want to see how it looks.
I hope you like it?  If you don't like the colours - I suppose not everyone will want a pink highlight when they mouse over then it's easy peasy to change them, you will need a list of html colour codes like this one from Visibone - its very pretty isn't it.
  • Head back into your html code and find the first piece of code you just added, starting /* ----- LINKBAR ----- */
  • To change the background colour find where it says background: #FFF.  The letters FFF are what makes it white, you can change this to virtually any colour just remove FFF which is white and replace with your chosen colour for example 000 is black, some colours have 6 digits - I used white as it blends into the background nicely and looks like it's supposed to be there and not some alien addition!
  • To change the colour of the text find where it says  color: #999; (it's in the 5th section of the code we added first) and edit the #999 which is a lovely grey colour that blends with my other titles.
  • The colour of the little line which appears between the posts is controlled by border-right: 1px solid #CCC.  #CCC is grey, so change to whatever colour you like and the 1px is the thickness so you can change that too - just experiment a little.
  • To change what happens when you mouse-over or hover over with the cursor  - mine is a rather haptree hot pink on black text, you need to edit the section color: #000 and background: #FF66CC; #000 is the text colour and #FF66CC the background.
  • To change the spacing of the tabs alter this line - "padding: 3px 20px 3px 20px" Adjust the 20px to a smaller number to have them closer together or larger if you want them further apart.
  • I was recently emailed by Richard from http://toadtryouts.blogspot.com/ who mentioned to me that you need to be aware of how your link bar looks in other browsers - on his advice I have reduced the padding between my posts so that they do not spill over onto two lines when viewed in Firefox.

Let me know if you use this I'd love to see what colours you chose!

I have reposted this to my new blog http://craftbloguk.blogspot.com/ please take a look over there for more articles including how to add the new 'static' blogger pages!

[EDITS - I have edited the code so that the tabs are now automatically centralised - if you want them to be left or right aligned adjust the part of the code that reads text-align; center - change center to right or left]