Adding a link bar will make it easier for your readers to find all of your posts and enable you to categorise your posts into a number of sections just by adding the appropriate label. The link bar on this blog was created using this tutorial and I don't think this blog could function without it!
Use it to tidy up all of your varied posts, link to your online shop, your twitter, facebook or just your posts on family, crafting or gardening. Rather than starting a whole new blog this will help to divide up all of the posts you have so that readers can easily access the areas they are interested in.
Use it to tidy up all of your varied posts, link to your online shop, your twitter, facebook or just your posts on family, crafting or gardening. Rather than starting a whole new blog this will help to divide up all of the posts you have so that readers can easily access the areas they are interested in.
Adding a Link Bar - Blog 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;
list-style-type:none;
}
#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;
width:100%;
text-decoration:none;
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 laid 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>
</div></b:includable></b:widget></b:section></div> - 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 it will 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 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
- 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 soft grey colour.
- 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 - this example is a rather 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.
I wrote this post for my blog 'haptree and me' originally, I've just updated it a little but it's essentially the same - let me know if you have problems and I'll see if I can help.