Thursday, November 3, 2011

HTML Code - Blog Tip

Do you ever notice that sometime when you click on a link, you leave the blog/site/page/post and go to the new page?

Example: My most popular blog post

But sometimes you click on a link and the new blog/site/page/post opens up in a new tab?

Example: My most popular blog post

Which do you prefer?

As a reader, I much prefer the new site to open up in a new tab.  I can browse the new site and then just close the tab rather than hitting the back button to get back to the original site.  It's a time saver to have the new site open in a new tab. 

As a blogger, I much prefer to have my links open up in a new tab so you do not forget to come back and look at my blog for a bit longer.  :-)

Now, I am going to tell you how to create that new tab when you are adding links to your blog.

First I need to explain how the code for a link works.  Your basic empty code would be:

<a href=""></a>

The location or URL would go in between the quote marks, your highlighted text would go in between the greater than and less than sign.  ><

So, lets say that you want to add a link to a post that takes a reader to Life at Willow Cottage when they click on the words: vegetable recipes.

The code for that would be:

<a href="http://lifeatwillowcottage.blogspot.com">vegetable recipes</a>

See how the URL for Life at Willow Cottage went in between the quote marks and vegetable recipes went in between the greater than sign and the less than sign.

Now we are going to add one little element to that code so that the URL opens up in a new tab.

<a href="" target="new"></a>

I added target="new" to the code.  Make sure that there is a space between the quote marks that come after the URL address and the new code element.  So if we add the new element to our link it would read as:

<a href="http://lifeatwillowcottage.blogspot.com" target="new">vegetable recipes</a>

I do have a few notes.  Most URL's are very long.  The code for specific sites can be several lines long.  Just look for the basic code elements to find out where to insert the target element.


My second note is that you should always test your element.  If you forget a space or have a typo in the code, it will not work.  HTML code is very precise.  If your link is not working, double check it and fix the error.

Good luck and have fun!  If you have any questions, please email me at lifeatwillowcottage@gmail.com and I will try to help you out. 

1 comment: