g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Action Movies
Bible Basics
Romance Movies
Family Travel
Southwest USA

All times in EST

Full Schedule
g HTML Site

BellaOnline's HTML Editor


Customizing the Links Section of Your Blogger.com Blog

Guest Author - Diane Cipollo

Now that you have a good start on your blog, let’s start to customize the individual sections of the blog template. On most of these templates there is a LINKS section which is usually under the ABOUT ME section. This is the place where you will list important links. What makes a link worthy to be added to your blog is up to you. But, taking into account the purpose of your blog and the reason people will visit your blog will help you in choosing which links to add to this section.

So how do you change the default links to the ones you wish to use? You will do this by changing the HTML code in the template. Log in to your BloggerTM account and let’s get started. Click on the Template tab in the menu at the top of the page which will take you to the Edit Current template section. You will find the HTML code for the template in the box below. Scroll down the code until you reach the LINKS section. You will find it almost at the bottom of the code.

You will need to make two changes to the code for each of the three default links. If you don’t wish to use all three default links, simply delete the links you do not wish to use. (To find out more about the HTML anchor tag used to create these links, follow the link below to the HTML Basics Series.) For the links you will use, you will change the value of the href attribute to the URL of the webpage you wish to link to. Then, you will change the text between the opening and closing anchor tags to the name of that webpage. Let’s start by changing the default link named Google News.

  1. Remove the value of the href attribute by deleting the code between the quotation marks that follow the href=.

    <li><a href="">Google News</a></li>

  2. Replace the value of the href attribute by pasting the new URL between the quotation marks.

    <li><a href="URL of new link">Google News</a></li>

  3. Remove the name of the link by deleting the “Google News” text between the opening and closing anchor tags.

    <li><a href="URL of new link"></a></li>

  4. Replace the “Google News” text with the name of the webpage you are linking to.

    <li><a href="URL of new link">Name of Webpage for New Link</a></li>

Repeat these steps for the other two default links named Edit-Me.

If you want more than these three links in your LINKS section, you will need to create your own. But first, notice the anchor tag for each link is surrounded by an opening and closing <li> list item tag. This is because the links are part of an unordered list. (To find out more about the unordered list and list item tags, follow the link below to the HTML Basics Series.) Because you want the additional links to be aligned with the first three, you will need to use the <li></li> line item tags along with the anchor tags.

  1. For each new link, type the opening and closing line item and anchor tags. Notice that these tags are nested. Be sure to keep them in the correct order below.


  2. Add the href attribute to the opening anchor tag.

    <li><a href=""></a></li>

  3. Add the URL between the quotation marks for the href attribute.

    <li><a href="URL of new link"></a></li>

  4. Place the name of your link between the opening and closing anchor tags.

    <li><a href="URL of new link">Name of Webpage for New Link</a></li>

Repeat these steps for all the additional links you wish to add to your LINKS section. When you are finished, click the Preview button to preview your changes and test your new links. If all is correct, close that browser window to return to the previous webpage. Then, click on the Save Template Changes button. When you see the confirmation message indicating that the changes were saved, click on the Republish button. To verify that your blog has been updated, click on the View Blog tab in the menu at the top of the page. You may need to refresh your blog webpage to see the changes.

Screen shots reprinted by permission from Google Inc. GoogleTM, BloggerTM and BlogSpotTM are either registered trademarks or trademarks of Google Inc. in the United States and/or other countries.

This site needs an editor - click to learn more!

Add Customizing+the+Links+Section+of+Your+Blogger%2Ecom+Blog to Twitter Add Customizing+the+Links+Section+of+Your+Blogger%2Ecom+Blog to Facebook Add Customizing+the+Links+Section+of+Your+Blogger%2Ecom+Blog to MySpace Add Customizing+the+Links+Section+of+Your+Blogger%2Ecom+Blog to Del.icio.us Digg Customizing+the+Links+Section+of+Your+Blogger%2Ecom+Blog Add Customizing+the+Links+Section+of+Your+Blogger%2Ecom+Blog to Yahoo My Web Add Customizing+the+Links+Section+of+Your+Blogger%2Ecom+Blog to Google Bookmarks Add Customizing+the+Links+Section+of+Your+Blogger%2Ecom+Blog to Stumbleupon Add Customizing+the+Links+Section+of+Your+Blogger%2Ecom+Blog to Reddit

RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the HTML Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor