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