Web page Design 101 would teach you that when inserting a link in to your website or blog that connects to an outside web page, you should always have the link open in a new window. By doing this, you are able to keep the viewer connected to your page, while still offering helpful links. If the web link opened in the same window, the viewer would be navigated away from your page and may not come back.
Doing this entails editing HTML code...never fear, it is easy. The following directions show the process within Blogger, but the essentials are the same across platforms.
To start the process add your links via your blog program. In the example above I have highlighted the first link. In this instance I have directed my readers to a previous post on my blog through a hotlink on the word "here." In order to have this open in a new window you must find the link within the HTML code. Shift modes from "compose" to "Edit HTML." In Blogger, you do this by selecting the tab circled in the image below. I have highlighted the same hotlink of "here" as it looks in the HTML code.
The HTML code for this link begins with "
) to tell the computer to open the link in a separate window. Find the word or phrase that you have linked to an outside website within the code. In this example it is "here." Look just prior to the hotlink and you will notice the ">" symbol. We will insert our new code just before the greater than symbol. Cut and paste the following code in to that space: target="blank". (Note: Do not put the period in the code)
Do this for each link in your blog post and be sure to test it when complete to make sure it works. You can also insert this code into links to images to ensure they open in a new page. Blogger pulls the images we upload from the Picasa website. In order to set your embedded images to open in new windows, insert them the same as you would your web links and then find their associated code within the Edit HTML window. In the example below I have referenced the image of a screen shot.
This is how the image looks in the Compose mode of Blogger. Switch to the Edit HTML mode and you see the code below.
All of the highlighted code pertains to the image. It tells the web program how to place the image in my blog. This may seem intimidating, but the only code we need worry about here is that which pertains specifically to the location of the image link, as highlighted below:
Note that this HTML code looks similar to the code for a web page link. The "href" attribute in the beginning of the highlighted code specifies the destination of the link. Essentially, this code is telling the program where to find the link for the photo (the Picasa web site) and the amount of margin to leave on each side of the image, which is based on the template of my blog. Within the brackets of this portion of code is where we will insert our code indicating that the image should open in a new web browser window (target="blank").
The above image shows where to insert the code. As with the web links, be sure to test your links before posting. I have found that the Preview option of Blogger does not always allow me to test links so you may need to publish your blog post to effectively test it.
To read more about HTML code visit
W3Schools.com, a great resource that outlines HTML codes and shows what each attribute and tag does.
1 comment:
I always wondered how this worked, I have bookmarked this post so that I can do it in the future. Thanks.
Post a Comment