Creating Links in Blogger

During my surfing sessions I have see many weblogs created in Blogger that still have the "Edit Me" links shown. Many times on a blog that the author has obviously devoted a great deal of time on by way of regularly updated posts. Yet Cyberphobia has kept them from entering the dreaded HTML code and adding some links. This has inspired me to devote time to explaining the basics of creating links.

What is a link? A link is either text, or a image that when clicked on will take you to a page on the internet. This is called the pages URL (Uniform Resource Locator), which is the address that specifies the location of where a pages source code is stored on the Internet. All URL's begin with: http:// (e.g. Blogatechs URL or address is http://blogatech.blogspot.com)

So the first step in creating a link in Blogger is determining what the address of the page you want to link to.

In this screenshot of Xtra's web page The red arrow is pointing to the browsers address bar. This is where you can find the address of whatever page you are presently viewing. In this case it is http://xtramsn.co.nz/home/

We are going to create a link to this site and place it in our blog. Once we are at Xtras site we go to the address bar, click and drag our mouse across the address to highlight it. Then we right click and select copy. The address is now stored on our clipboard and we can paste it anywhere we want. The clipboard cannot be viewed but whatever we have copied will remain there until we copy something else.

Now we go to Blogger, log in to the dashboard for our blog and select the Template tab. This is where the HTML code for our blog is stored and where we want to create our link at. Scroll down through the code until you see something like this in the sidebar section:

<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://news.google.com/">Google News</a></li>
<li><a href="http://EDITME">Edit-Me</a></li>
<li><a href="http://EDITME">Edit-Me</a></li>
</ul>

The above code show a list of three links. The first is of Google and the next two are waiting for you to enter the address and description of your links. The area in blue is where you want to paste the Xtra address we copied and the area in red is the description you want to be displayed for this link. Which i'm going to call Xtra Site.

Here is the code after these changes have been made:

<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://news.google.com/">Google News</a></li>
<li><a href="http://xtramsn.co.nz/home/">Xtra Site</a></li>
<li><a href="http://EDITME">Edit-Me</a></li>
</ul>

The link we just created would look and behave like this:
Xtra Site

You could edit the third link by entering any other address by following the sam procedures we used for the Xtra Site link. Also if you wish to add even more links, all you have to do is add additional line of code to be edited such as this:

<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://news.google.com/">Google News</a></li>
<li><a href="http://xtramsn.co.nz/home/">Xtra Site</a></li>
<li><a href="http://EDITME">Edit-Me</a></li>
<li><a href="http://EDITME">Edit-Me</a></li>
<li><a href="http://EDITME">Edit-Me</a></li>
<li><a href="http://EDITME">Edit-Me</a></li>
</ul>

In the next post in this series we will learn how to create a link using a image or photograph.

Powered by Qumana

Technorati Tags: creating links, blogger, weblogs