Wednesday, January 24, 2007

Linda's How-Do-I Series? How Do I Make A Clickable Link List?

Did you ever wonder how everyone makes all those clickable link lists for the sidebars of their blog?

Well, if you have here's how they do that.

Let's say, for example, that I want a list for all the articles on all the Arts and Craft Blogs that I've reviewed on my "I Love Crafts and Craft Blogs" and want to put this list on sidebar of that blog or on the sidebar of another one of my blogs.

The HTML coding to do so would be as follows (minus the ***'s which allows you to see the HTML coding in this post):

<***h2 class="sidebar-title">Art And Craft Blogs Reviewed on<***a href="http://ilovecraftscraftblogs.blogspot.com/"> "I Love Crafts and Craft Blogs"<***/a> Blog<***/h2><***li><***a href="http://ilovecraftscraftblogs.blogspot.com/2007/01/adrians-adrians-embellishments-blog.html">Adrian's "Adrian's Embellishments" Blog<***/a><***/li><***li><***a href="http://ilovecraftscraftblogs.blogspot.com/2007/01/cindys-adventurers-in-x-stitching-blog.html">Cindy's "Adventures in X-Stitching" Blog<***/a><***/li><***li><***a href="http://ilovecraftscraftblogs.blogspot.com/2006/12/arlees-albedo-designs-blog.html">Arlee's "Albedo Designs" Blog<***/a><***/li>

and that would produce this:

  • Adrian's "Adrian's Embellishments" Blog


  • Cindy's "Adventures in X-Stitching" Blog


  • Arlee's "Albedo Designs" Blog



  • The <***h2 class="sidebar-title"><***/h2> string creates the title and h2 determines the font size. Heading can be h1, h2, h3, h4, h5, or h6 with h1 being the largest.

    The <***li><***/li> string indicates this is a separate item in the list.

    The <***a href="http://ilovecraftscraftblogs.blogspot.com/2007/01/adrians-adrians-embellishments-blog.html">Adrian's "Adrian's Embellishments" Blog <***/a> string indicates the particular post that I want the reader to be able to click to.

    In this instance I made the URL the actual archive URL location of the post and not the main URL of my "I Love Crafts and Craft Blogs" blog as I wanted the reader to read that particular post and not redirect them to my main blog where they would have to search for it.

    If I wanted to redirect them back to the main page of my blog that string would look like this:

    <***a href="http://ilovecraftscraftblogs.blogspot.com">Adrian's "Adrian's Embellishments" Blog<***/a>

    Clickable list links can be used for all sort of lists that you want your readers to be aware of. They can be a list of all your websites, all your picture albums, friends blogs that you like, other websites that you want to direct you readers to. All sorts of things.

    All you need to do to do this is change the URL's and text for the particular websites that you want and just keep adding the following strings to the list (minus the ***'s which allow you to see the HTML code here):

    <***a href="http://WEBSITEURL">WEBSITE TEXT NAME<***/a>

    All of the lines of coding and sections above contain 3 ***'s. They are there only to allow for you to view the html code above and should not be included in your html code.

    I hope this helps you create your own clickable link lists for the sidebars of your blogs.

    Of course, in Beta.Blogger.com they have provided you with a List module in your template "layout" already that is very easy to use as all you need to do is add the URL and the name and then "add link" and "save" the changes to the module. You could use that or add the above as an HTML module in your template "layout."

    If you are still using a Classic Template for your Blogger.com blog then you would need to add the HTML coding above to the sidebar within your blogs template.


    Posted by Linda Walsh Originals- "Doll Patterns for Grown-up Girls!"
    Linda Walsh Originals E-Patterns - "Instant Download E-Patterns for Grown-up Girls!"

    No comments:

    Post a Comment