Logo

In our previous articles, we discussed the code for making the text and image links in your Posts open in new windows or tabs when clicked. However, to have the links in a Link List and Labels that are normally in the sidebar widgets open in new browser windows or tabs, you would need to change the HTML code in your template. Here, we shall talk about the hack that you can put into your template.

Text Links and Image Links

To recapitulate what we mentioned in our guides at Hyperlinks and Image Links (I) and Hyperlinks and Image Links (II), a typical hypertext or text link code looks like this:-

<a href="URL" target="_blank" title="TITLE">Text</a>

The HTML code of a picture or image link looks like this:-

<a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description"></a>

The part of the code that tells the browser to open the link in a new browser window or new tab is the target attribute (in blue). If you want the readers to view the link in the same browser window, simply remove target="_blank" from the code.

Link List and Link Widget

The Link List that you create in your sidebar, using Template -> Page Elements -> Add a Page Element, will open links in the same window. Sometimes, these may not be what you want. For instance, we have configured our template such that the links for “My Blogs” open in new windows but the links in “Articles” open in the same window.

(By the way, many people have asked whether the Articles list is an archive hack. The answer is no. The list you see is created using a Link List. We think that it is better than Archive because it allows us flexibility in displaying and grouping the Articles regardless of date of post.)

To have the Link List open in new windows when clicked, we first go to Template -> Edit HTML. Check the “Expand Widget Templates” box. Backup your template by copying the template and saving it in an MS Notepad text file. You can also click the “Download Full Template” link that appears right after the words “Before editing your template, you may want to save a copy of it.”



Scroll to these lines and add the code in red.

<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2></b:if> <div class='widget-content'> <ul> <b:loop values='data:links' var='link'> <li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li> </b:loop>

Please Note:

You have to locate the correct Link List. Check against the Title if you have inserted a title for the List. If you have several Link Lists in your Blog, they will be numbered LinkList1, LinkList2, and so on. In case you did not insert titles into your Link Lists and you are not sure which Link widget is the right one, look at what is before or after the codes, and compare against what you see on your Blog. They are usually arranged in the order that they appear in your Blog.

Save and refresh your page to see the change.

Label List and Label Widget

If you have created a list of Labels through Template -> Page Elements -> Add a Page Element, you can also have your Labels open in new browser windows or tabs.

Scroll to these lines and add the code in red.

<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url' target='_blank'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop>

Add an identity to your Blog by customizing the text links in your post and sidebars with nice rollover effects, colors and highlights. Learn how to remove the underline under the links. For the purpose of this article, we have changed our template such that you will see a different text color when your cursor is over the links, and a highlighted background color when the cursor is over the post title. We have also changed our other Blog to let you see a further example of a combination of color and font change for the hover links. In this article, we shall discuss the common effects that you can create for your Blog.

Overview of Link Styles

Blogger templates use Cascading Style Sheets (“CSS”) to define how the pages should be displayed. There are four basic stylesheet entities for links:-

a:link { } a:visited { } a:hover { } a:active { }

a:link defines the style for links such that they stand out from the rest of the normal text.

a:visited defines the style for links that have been clicked or visited.

a:hover defines the style readers see when their cursor or mouse moves over the links.

a:active defines the style to an activated element.

The common rollover effects and styles that can be inserted into the { } are:-

color: #XXXXXX;

Changes the color of the text. By far the most common and effective style. For a list of color codes to be inserted in the XXXXXX, you may refer to the Hexadecimal HTML Color Codes and Names.

text-decoration: none; text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: blink;

Set to “none” to remove the underline under the links. Set to “overline” if you want a line above the text or set to “underline” for a line below the text.

font-weight: normal; font-weight: bold; font-weight: bolder; font-weight: lighter;

By default, the font is “normal”, so there is really no need to set it as that unless all your text is in a bold font and you want your hover links to be in the normal font.

font-style: normal; font-style: italic;

A common style used is “italic” for the hover links.

font-family: Verdana,Arial;

The “Verdana,Arial” font is just an example. You can insert the font family names or generic family names that you want as the typeface for the links.

font-size: 85%; font-size: 10px; font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: smaller; font-size: larger;

For percentages and fixed font size, you can specify the values accordingly.

background-color: #XXXXXX;

With this, the background of the text link will be highlighted. For a list of color codes to be inserted in the XXXXXX, you may refer to the Hexadecimal HTML Color Codes and Names.

text-transform: uppercase; text-transform: lowercase;

This changes the letters of the link either to uppercase or lowercase.

border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset;

This gives you a border around the link.

border-color: #XXXXXX;

If you have a border, you may want to specify the color of the border. For a list of color codes to be inserted in the XXXXXX, you may refer to the Hexadecimal HTML Color Codes and Names.

Change Link Styles in Template

Under Template -> Edit HTML, you will be able to find the first 3 stylesheet entities or lines that look like these:-

a:link { color:$linkcolor; text-decoration:none; } a:visited { color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; }

Changing these 3 will do significant wonders to the appearance of your Blog. In the Minima template, you can adjust the colors of the links, visited links, and hover links through Template -> Fonts and Colors. You can manually insert the color values too. Look at these examples and see the effects to understand what you can do to your Blog.

Example 1:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; }

Click this link for an example on how the link changes to red color when visited and green when mouseover.

Example 2:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-size: 120%; }

Click this link to see an example of how in addition to the green, the link is also bigger in font when you hover your mouse over it.

Example 3:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; background: #ffff66; }

Click this link to view an example of a yellow background when you place your cursor over the link.

Example 4:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-family: monospace; }

Click this link for an example of a different typeface or font when you place your mouse over the link.

Example 5:

a:link { color: #0066CC; text-decoration: none; } a:visited { color: #cc0000; text-decoration: underline; } a:hover { color: #2D8930; text-decoration: blink; }

Click this link and notice that the link blinks when you mouseover and it has an underline when you have visited the link.

Example 6:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; border-style: inset; border-color: #D462FF; }

Click this link for an example of a violet border around the link when you hover over it.

Example 7:

You can now combine some of these rollover effects into the link styles. For example, if you want the link to have a different font family, bold and bigger font, highlighted background, and it blinks when you hover the mouse over it, you can put all the styles under a:hover as follows:-

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-family: monospace; font-weight: bold; font-size: 120%; background: #ffff66; text-decoration: blink; }

Click this link to see an example of a combination of styles - a different font family, bold and bigger font, highlighted background, and it blinks when you hover the mouse over it.

Experiment with the combinations but avoid having too many styles. Be careful when using the font-size, font-family or font-weight as these may adjust the format of the text around the link. Note also that not all the effects are supported by every browser. For instance, Blink works in Firefox but not in IE.

Change Post Title Style

Under Settings -> Archiving, if you have set the “Enable Post Pages” to “Yes”, you will have a unique web page for each Post and the Title will link to that page.

If you want to set a hover style for the Post Title, look for this line and add the styles and effects after that:-

.post h3 a:hover {

Further reading:-

For specific text link and image link codes, you may read the guide at Hyperlinks and Image Links (I).

If you want to remove link underlines or have the underlines only in the Blog Posts or Sidebar areas, look up our guide at Remove Underline Below Text Links.

We continue from where we left off in Hyperlinks and Image Links (I). We have looked at how we can create text links and discussed the HTML code and common attributes. In this part of the article, we shall focus on adding Images and Image Links into your Blog. We will talk about the “title” and “alt” tags in image links which supposedly help in search engine optimization (SEO). We shall end off with the code you can put on your Blog to allow your readers to link to you from their Blogs.

Image Tag

I assume you have a ready picture, image, photo, or banner. Edit it and resize it using an image editing software. Other than Google's Picasa, there are other free image editing software offered on the net that you can try. As explained in Hyperlinks and Image Links (I), the image has to be uploaded onto an image server which allows direct link to the image. Copy the image URL.

The HTML code for a picture or image is this:-

<img src="Image URL" border="0" width="80" height="15" alt="Description" />

A couple of things to note:-

1. Unlike the anchor tag, the <img> (image) tag has no closing tag.

2. In the code, src means “source” and this is where you will insert the Image URL of the picture that you wish to display on your Blog.

3. Depending on your Blog's configuration, any picture you upload may automatically have a border surrounding it. In the above example, the border is removed. If you want a border, you can change the “0” to “1” pixel or any other value.

4. When your Blog page is downloaded, the browser normally allocates a space for the images contained in your page. Sometimes, the allocated space may be bigger than the image size and when the images are finally downloaded, the contents are adjusted to cater to the images. This adjustment may sometimes be the cause of a slower download. To resolve this, it is usually preferable to insert the width and height of the image (in pixels) to let the browser reserve the exact space for the image.

5. The width and height settings can also be used to resize the image, although the better way to resize any image is to use an image editing software to adjust the image to the size that you want before uploading it.

6. The alt attribute displays the alternative text that readers will see if the images are not successfully downloaded. Some people may disable image downloads to improve the speed of internet access. For the blind readers, this alternate text is what will be read out to them by their computers. Also, search engine spiders are said to read this alternate text and it is all the more advisable to include it for SEO purposes. As a matter of practice, it is good to enter a short Description into the code.

Alignment of image

There are times when you want an image to appear on the left or right of your header or body. You can do this by inserting the alignment tags. In the following example, the image will float to the right:-

<img src="Image URL" border="0" width="80" height="15" alt="Description" align="right" />

Margin around image

The image can appear in the midst of some text and you may want to set a margin or a space around the image where the text will not intrude. The attribute “hspace” sets the horizontal space and the “vspace” sets the vertical space between the image and the surrounding text. Adding on to the above example, the final code after inserting the margin settings (in pixels) will look like this:-

<img src="Image URL" border="0" width="80" height="15" alt="Description" hspace="20" vspace="20" align="right" />

Image Links

We have discussed the image tag and its common attributes. We shall now look at how to turn the image into a hyperlink, so that when people click on the image, they will be brought to a webpage, image, sound file, video file, or document. You can also have a clickable image in your Header that will bring your readers to your Home page. The details are in the article Add Picture Banner Link to Blogger Header.

If you have followed Part I of this article and understood how text links are created, image links are formed in similar manner, except that instead of Text, we insert the image tag.

To recall, the HTML code for a text link is this:-

<a href="URL" target="_blank" title="TITLE">Text</a>

The HTML code for an image hyperlink is this:-

<a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description" /></a>

See the similarities? I shall briefly explain what these attributes mean and why they matter. If you wish to have a clearer idea, please refer to Hyperlinks and Image Links (I).

1. The URL is the location that you want your readers to go to when they click the image. This could point to a webpage, file or document. To test whether the URL is correct, copy the URL, paste it into your web browser and press Enter. You should be able to see the webpage, image, or document, listen to the sound file or view the video file.

2. By inserting the target="_blank" attribute, the link will open in a new browser window or tab. If you want the link to open in the same window or tab, delete it. Should you have difficulty understanding this attribute, I have an example below for you to try out.

3. The TITLE is what you see as a pop-up when you hover your mouse over the link. Similar to the “alt” attribute discussed above, this is supposedly read by search engines and will enhance your SEO. It is good practice to insert the TITLE and the Description.

4. As for the image tag code, this has been fully explained above and I shall not elaborate further. Remember that the hyperlink code has to be closed with the </a> tag as shown in the example.

Putting it together, this code:-

<a href="http://fairy-tales-fables-business.blogspot.com/" target="_blank" title="Business Fables and Management Lessons"><img src= "http://i154.photobucket.com/albums/s255/ownlblog/fablesbanner80x15.gif" border="0" width="80" height="15" alt="Business Fables and Management Lessons" /></a>

Will give you this:-



Hover your mouse over it and you will see the pop-up Title. If you click this link, it will open in a new window or tab because of the target attribute. At this link, you will notice the image that has been inserted as a background to the Header. If you would like to have your own image in your Header, you may read this article.

How to insert image link HTML code

You can insert the HTML code in your posts. See that you are in the “Edit HTML” mode and not “Compose” mode when you insert the image link code.



If you want the image link to appear on your sidebar, you can go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. Copy the above hyperlink code, paste and save. The blog directory links that you see on the left sidebar of this Blog are done using this method.

“Link to Your Blog” HTML code

Would you like visitors to be able to create a link from their blogs to yours? Putting a code for visitors to copy and paste, akin to what you see on the left sidebar of this Blog requires additional HTML tags. Briefly explained, whatever HTML code you insert into your Blog post or template will be interpreted as a code rather than just lines of text. To tell Blogger not to act on this code, you will need to put the code in a text box or a form field. This is what you can use:-

<textarea rows="4" cols="25" name="NAME" readonly="true">LINK CODE</textarea>

The rows attribute defines how tall the text input box will be and the cols attribute defines how wide, based on the number of characters. You can change the values depending on how much space you want to allocate for the text. The name attribute is more for scripting purposes and you can insert any NAME that you want. Readonly attribute locks the field and while people can block and copy the text, they cannot change it. The LINK CODE in this case is the entire hyperlink code that will link to your Blog. This hyperlink can be either a text link or an image link.

If this still sounds confusing, don't fret. What I did on my left sidebar is to go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. You can use the code I have for this Blog but change the relevant particulars to yours:-

Link to Us <p></p> <textarea rows="3" cols="18" name="Link to Us" readonly="readonly"><a href="http://tips-for-new-bloggers.blogspot.com/" target="_blank" title="Tips for New Bloggers"><img border="0" alt="Tips for New Bloggers" src="http://i154.photobucket.com/albums/s255/ownlblog/tipsbanner80x15.gif" width="80" height="15" /></a></textarea>

We have a more detailed discussion of the textarea code in our Add Text Box and Textarea article.

Further reading:

If you have a Link List or Labels in your sidebar, and would like to make the links open in new windows or tabs, please refer to the guide at Links, Labels open in New Window.

In this article, we shall address the common queries on how to configure links such that they open in a new window when clicked, the HTML code for visitors to link to your blog, the various hyperlink HTML tags and attributes, etc.

A hypertext link or text link is a piece of text which when clicked will bring you to a section of a webpage, another webpage or an electronic document. If it is an icon or image that can be clicked, it is called a hypergraphic link or image link. For simplicity, both can be referred to as hyperlinks or links.

Text Links

To create a hypertext or text link, the HTML code is this:-

<a href="URL" target="_blank" title="TITLE">Text</a>

Allow me to explain:-

1. In HTML, the <a> (anchor) tag is used to create an anchor to link from. It should always be closed with the </a> tag.

2. HREF is an acronym for Hypertext REFerence and specifies the page to link to or the place that you want your readers to be taken to. This place that we are talking about can be a webpage, image, sound file, video file, or document. Replace URL in the above code with the location of the webpage, file or document. If it is anything other than a webpage, you will have to upload it onto a server and obtain the URL of that uploaded file.

3. You can read about using free hosts like Google Page Creator and Google Groups to upload your files. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. After uploading the file, take note of the URL of the file and insert that into the above code.

4. The target attribute tells the browser to open the link in a new browser window or new tab. If you want the readers to view the link in the same browser window, remove target="_blank" from the code.

5. The title attribute can be used for any page element, e.g. links, tables and images. Give your link a TITLE. In most browsers, when you hover your mouse over the link, the title will pop up. It is useful to insert this title as it is believed that search engine spiders read these words.

6. Text shown between the open and close of the anchor tag is what readers will see as the hyperlink. You can insert any character or words into the Text. In normal blog settings, these will either be underlined, or have a different color from the main text so that people can tell that they are clickable links.

To see how it is put together, this code:-

<a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank" title="Quotes for Blogs">Famous Motivational and Inspirational Quotes</a>

will give you this line:-

Famous Motivational and Inspirational Quotes

Hover your mouse over the link to see the title. Clicking it will open the page in a new browser window or new tab. If you are interested to do something like the scrolling text in the header of this Famous Quotes blog, you may refer to the article Scrolling Text - Marquee HTML Code.

Link to Section

If you have a long article, you may want to allow people to 'jump' to specific sections of the page so that they need not scroll a lot to locate the section they want. It can be done by using the anchor tag with name attributes.

This is best explained through an example. I have inserted this tag in the later part of this article:-

<a name="demo">Email Links</a>

The name within the code need not be called “demo”. You can call it anything you want - “top”, “bottom”, “label”, whatever.

Next, I create a hyperlink for you to click to go straight to that section.

The HTML code for the hyperlink is this:-

<a href="URL#demo">Click here to go to Email Links</a>

You can type whatever text you want within the above anchor tag. The URL is the URL of your post. To obtain this URL, you will have to save your post and refresh your page. With the URL, go back to yur post to edit it by inserting the URL of your post. Using the above code, this is what you will see and if you click it, you will jump to that section.

Click here to go to Email Links

To give you another example, I shall now use the simple “top” and “bottom” tags which you can use for your Blog. Before you click anything, here are the HTML codes:-

<a name="top"><a href="URL#bottom">Click here to go to bottom</a>

<a name="bottom"><a href="URL#top">Click here to go to top</a>

You can now click this to go to the bottom of this page and click that link again to come back to this segment.

Click here to go to bottom

Email Links

If you would like to have a link for people to click and send you an email, you can use the following code:-

<a href="mailto:EMAIL ADDRESS">Email Author</a>

Your EMAIL ADDRESS will have to be inserted into the code. This will open up the reader's Outlook Express or other default email software with your email address automatically inserted as the addressee. However, if the reader is using Gmail, Yahoo mail, Hotmail or other web-based email, he will have to log in to his account and type in your email address.

How to insert text link HTML code

You can insert the HTML code either in your posts or through a Page Element. The quick method of inserting a hyperlink is through the Blogger inbuilt tool. Look for an icon that looks like this shown in the picture below. Block the text that you want to create a link from and click that icon. Type in the URL that you want to link to and it is done.



If you want this link to open in a new window and have a title, manually type in the title and target attributes. Check that you are in the “Edit HTML” mode and not “Compose” mode when you insert the attributes.



Should you want the link to appear on your sidebar, you can go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. Copy the above hyperlink code, paste and save. The blog directory links that you see on the left sidebar of this Blog are done using this method.

If you have a number of links that you want to put on your sidebar, you may also choose “Link List” when you “Add a Page Element”. Note however that you will not be able to insert the other attributes. I shall cover in a separate article the tweaks that can be done to the template to change the attributes to the link list.

This article continues at Hyperlinks and Image Links (II)

Further reading:

If you have a Link List or Labels in your sidebar, and would like to make the links open in new windows or tabs, please refer to the guide at Links, Labels open in New Window. To have numbered or bulleted links, you may check out the article Numbered List and Bulleted List.


Click here to go to top