Monday, August 14, 2006

How to add hyperlinks in the sidebar

This post is a result of a request from a reader. There are various ways in which you can add links to your favourite websites in the sidebar. One of the easiest is to just modify the given codes for the links which most standard Blogger templates has. Look in the template, between
<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">
and
</div></div>
<!-- End #sidebar -->
for the following block of codes in the template.

<MainOrArchivePage>
<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://news.google.com/">Google News</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">
Edit-Me</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">
Edit-Me</a></li>
</ul>
</MainOrArchivePage>


What you have to do is to edit the URL and the text to be displayed (in the first link they are respectively http://news.google.com/ (URL) and Google News (text to be displayed). You will have to replace the URL with the URL you want the link to point to, and you will have to replace the text to be displayed with your own text. For example, I want to have 3 hyperlinks to point to the blogs "Blogger for dummies", "Blogger Tips and Tricks" and "Adsense Alert" (these are the texts that will be displayed in the links. The above will have to be edited to

<MainOrArchivePage>
<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://bloggerfordummies.blogspot.com/">Blogger for Dummies</a></li>
<li><a href="http://blogger-tricks.blogspot.com">
Blogger Tips and Tricks</a></li>
<li><a href="http://adsense-alert.blogspot.com">
Adsense Alert</a></li>
</ul>
</MainOrArchivePage>


These hyperlinks will appear in the main (index) page and the archives pages under a heading "Links", but will not appear in the individual post pages (permalink). If you want it to appear also in the individual post pages, you will have to remove the <MainOrArchivePage> and </MainOrArchivePage> tags. Also, you may change the text Links (which you will find in <h2 class="sidebar-title">Links</h2> to anything you want, like changing it to My favourite sites. If you want more links, you can just copy and paste the code for the hyperlinks. Just copy, paste and edit the line of <li><a href="http://news.google.com/">Google News</a></li>

If you want more sections for the links in other parts of your sidebar, you can copy and paste the codes to relevant parts of the template, and then edit them as described. For a guide as to which part of the template to paste them into, refer to the post Blogger template tutorial adding contents to via the template. And if your template doesn't have the codes already in the template (like for example the standared Blogger Sand Dollar template) you can always copy and paste the codes above into your template and then edit it. For a guide as to which part of the template to paste the codes, refer to the post Blogger template tutorial - adding stuff via the template

You can also add hyperlinks in other ways. The above uses unordered list, which leave big space between the links. If you want the list of links to be more compact, you can use the following codes instead:

<h3>Websites I visit</h3>
<a href="url 1">description 1</a><br />
<a href="url 2">description 2</a><br />
<a href="url 3">description 3</a><br />


As before, you can change the text "Websites I visit" to anything you want.

Books from Amazon

The Rational Guide to Google Blogger (Technical accuracy is assured by Biz Stone, Former Senior Specialist on the Google Blogger Team)

Essential Blogging : Selecting and Using Weblog Tools

OLDER POST
NEWER POST    

4 comments:

  1. Hi Peter

    I am a new blogger and am learning from your tips and tricks. Thanks!

    I am interested in finding the beginning and end of sidebars to add hyperlinks. But I have gone through many templates and could not spot them. Could you please direct me?

    ReplyDelete
  2. Hi Xiao Zhen,

    I am sorry I can't understand your question. Are you adding links using the "Add a Page Element" via the Layout, and then trying to look for them in the template? If so, you wouldn't be able to find out. Are you looking for them so that you can add a target="_blank" to make them open in new windows? (my guess). If so, you can find the hack to do that here: Making links in New Blogger Link List open in new windows

    Peter
    Dummies Guide to Google Blogger

    ReplyDelete
  3. Hi Peter,
    I have 2 page elements for a year on my site and cannot remove it, even if I go into edit page element, remove and saveit, it is still there.Pleease help
    Chris

    ReplyDelete
  4. Hi Chris,

    Probably a cache problem. Just use a different browser. Refer to Why you should be using more than 1 browser

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics