Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Apr 25, 2007

Digg This Story

Hyperlinks and Image Links (I)

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="" 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.

Hyperlinks and Image Links

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

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button


Bev Schweigert said...

Wow! Great information! I'm bookmarking this one to keep for future reference! Thanks!


fabdo said...

Thank you very much for you great information work! I've already bookmarked you!
I am a real dummy in those things and you'll understand it better from my question. I would like to insert images, little icons (email, print, bookmark, etc)on the sidebar of my blog. I've read your article, but i can't understand where to insert the html code you give for this reason (image link). Can you please explain it to me?

bizwhiz said...

Hi fabdo

If your question is "where to insert the html code", there is a part that reads:-

"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."

It might be easier for you to let me know which part of the instructions you have problems with and I shall address that part.

fabdo said...

Hallo Bizwhiz! :D
I really thank you for taking the time in answering me :D
I guess I haven't express my "problem" properly.
I just would like to add on the sidebar one or more buttons (like the many you have on your left sidebar) and I would like to create a link on them, for example "e-mail" or "favourite" or "print".
It's here I get lost.I think I have first to insert the image (in this case the button) and then follow the procedure you suggest to create a link on it. Did I get it right? I do hope so :| :D
Thank u again for your expertise and kindness!

bizwhiz said...

Hi Fabdo

Have you read the second part to this article - "Hyperlinks and Image Links (II)"? The details on image tags and image links are in this part.

The first step is to host the images somewhere, by uploading them onto a free web server. After you have the Image URL (locations where the images are saved), you can begin to insert them into your sidebar.

If you read part (II), you will see a code that you can use to insert the image, and to link the image to your email or web address.

The article doesn't cover commands like Print or Favorite this page because these are not addresses to point readers to, but commands for the system to take certain actions. There are javascripts for that, and we might cover that in future writeups. People can of course access their print or bookmark functions through their browsers too and these scripts are additional tools.

Feel free to read Part (II) and experiment. If you have further problems, let us know.

fabdo said...

Hi Bizwhiz,
I've finally managed to do it, I can't believe it!
Thank you indeed for your help.
You have been crucial!!!
Ciao :D

fabdo said...

Hallo Bizwhiz,
I've solved the "width" problem following your suggestion. Tnx!
Now I've add on the sidebar, through "Add page element" a link list. The problem is that when you click the link, this doesn't open in a new page but in the same. How can I fix this issue?
From what I've read in your article the target in the code should be "_blank". But where should I insert this command?
Ciao Ciao Donatella

bizwhiz said...

Hi Fabdo

Just to let you know I have addressed your query in a new article "Links, Labels open in New Window" since a number of readers had asked that question.

Thanks and Cheers.

Piggy said...

Hi, your information is really helpful. I am new to blogger and these info are excellent!
There are somethings that I can't catch very well though. If I create a link that will bring me to another URL, it means I will need to create a new URL first? My intention is to load some photos and when a link on the homepage is clicked, it will bring me to another page with these photos. How do I do that? Thanks!!

bizwhiz said...

Hi Piggy

Yes, you will need to host your photos somewhere first and make it accessible to public (rather than private). Once you have uploaded these photos, there will be a URL (web address). It may be the URL of the whole album, individual folder, or individual photo. To see if you have got the correct URL, copy and paste that URL into your browser and press Enter. This will be what your user will see when they click your link.

Use the HTML code provided in this article to create a link to that album, folder, or photo URL. You can also go to Template -> Page Elements -> Add a Page Element and choose Link List to create a link.

Piggy said...

Hi bizwhiz,

I'm halfway through getting the idea.:)
If the photos are to be loaded on a webpage that is similar-looking as the homepage I have created, do I need to register another website with blogger? ie, if there are 5 different links, i need to have 5 more URLs?
Can you elaborate on these new URLs and how can I go about creating them? Thanks much!!

bizwhiz said...

Hi Piggy

I have posted a more detailed answer to your query here - Photo Page in Blogs.

If you have further queries, feel free to let us know.

Hilda said...

Hi there, as always you're a lifesaver, is there a way to change the general template so that all hyperlinks in posts automatically open in a new window? (that is, I know how to do it individually as you point out here, I'm looking for the place in the template where I would insert this command so that it does it for every post) or perhaps I've missed this in one of your posts.

bizwhiz said...

Hi Hilda

As we understand it, this feature of having links open in new windows cannot be put into the CSS template.

Other than individual links, we are able to have the links in the sidebars open in new windows. When we are able to do that with the post body, we shall update the article.

Anonymous said...

hi - excellent site - thanks - ended up here trying to track down the reasons for incompatibility between ie and firefox as far as the display of the html a (anchor) tag - specifically where the a tag will render as a hotlink in ie but render as static text in firefox? - ie. the same code that renders as a hotlink in ie fails to do so in firefox - have you ever encountered this problem and if so any words of wisdom to impart? axelnelson sydney australia

bizwhiz said...

Hi axelnelson

When we were doing up this article, we learned that Firefox is case-sensitive while IE does not appear to be so. This explains why the codes fail sometimes.

From what we read on the net, several others have raised queries in online forums regarding the compatibility issues. I'm afraid we do not know more than what have been discussed at these forums.

Anonymous said...

hi bizwhiz - alrighty well thank you for the prompt response and i wish the solution was something as simple as the case - if i get to the bottom of the matter i will let you know - regards axel

Hilda said...

Hi again,

I know you said that links from posts don't open in new windows, but would you take a look at something for me? The links in the post in my english food blogs window do open in a separate page, and I'm not sure how that happened other than I altered the links originally in the main page before copying them into that separate page (as in, I changed the html for that category of links when they were all on the main page and then I copied them into a new blog named my english food blogs), does that make sense?
My French food blogs window does not do this as in the links open in the same window, so I've been trying to compare the html code for both blogs to see if I can find the difference...

bizwhiz said...

Hi Hilda

Could you let us know the URL of your English food blog? Your profile shows only one French blog.

Hilda said...

to be more specific, try the first link (Desert Candy) and the second link (Dessert comes first) for example. I just added Desert Candy today so it doesn't open in a new window, but Dessert Comes First was copied from the link list I had created in my homepage originally where I had altered the html to do so before I copied the links into this new blog in the post, and it opens in a new window. Any ideas?

bizwhiz said...

Hi Hilda

If you go back to the post under 'Edit HTML' mode, instead of 'Compose mode', you will see that the links in the rest have a target="_blank" in the code which make them open in a new window. The first link Desert Candy doesn't. Whatever homepage you copied the code from may have that automatically inserted.

Your question was how to make all the links in your post open in new windows. To that, we have no answer, except to insert the target="_blank" into each link when you write your post. Maybe there is a way but we don't know how at this point in time. Rest assured that when we do more reading and find it out, we shall let you know.

Azel Kilheeny said...

Hello bizwhiz!

I've basically redo my new blog template based on your comprehensive tips! Thank alone is not enough to express my gratitude on your teachings! I have learn a lot and your tips are easier for me to digest being zero knowledge in html the first place.

My question is that I've tried to create my own blogger badge (image) link and updated in on my social networks site. Now apparently when I tested it after few days I have found it link to a advert-like page. Have you come across this before? How to rectify it?

Your feedback on this is really appreciated!

Azel Kilheeny said...

Hello again!

I just notice your (profile) logo appear on your comment form. I am new to blogger and want to confirm that this is a standard blogger feature or you have implemented hack on it?

If it is a hack, can you direct me to the related post?

Thanks a lot!

Azel Kilheeny said...

Hello bizwhiz!

It's me again! I realized my error of typo on my blog url link. I've checked again and it shows as blogpsot instead of blogspot. I guess they see it as an open oppurtunity. Sorry to trouble you.

Thanks again.

bizwhiz said...

Hi Azel Kilheeny

For the profile, what we did was to host an image on a free server, and created a link to our profile page. You can do that too with the image link code provided in the second part of this article.

Dee said...

First thank you for this amazing resource.
Please can you help me. I'm Trying to add an Amazon product link to my blogspot blog. The template is minima. I copied my amazon code, went to "edit HTML" at my blog, and pasted in every line in the sidebar section (one at a time).

Each time I click preview, I get this message: Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The reference to entity "tag" must end with the ';' delimiter.

Pls can anyone tell me what it means and how to fix it? Thank you.

bizwhiz said...

Hi Dee

Is it already in your template? What is your blog URL?

Dee said...

Hello Bizwhiz,
Thanks for your response. Is what in my template? the URL is
Thank you

bizwhiz said...

Hi Dee

I trust that you can add the Amazon code via Template -> Page Elements -> Add a Page Element -> HTML/JavaScript. I suggest you add it using this method.

If you want to add it directly into the template, you would have to parse the code. Take a look at Difference - HTML and XHTML article and amend the character entities.

Dee said...

oh bizwhiz, thank you so much. I'll go look at both

Dee said...

Dear Bizwhiz,
please can you help some more? So I'm trying to add the amazon code through page elements. I'm trying to add the product image only. But it asks me to Save the image to my server. How do I do that?

Dee said...

Hi Bizwhiz, Thank you for the page elements tip. I've added adsense to my blog - hurray! But my amazon link is still shrouded in deep mystery. I battle on...

bizwhiz said...

Hi Dee

If that is what you must do, then download the image into your computer, and then upload it onto an image server. There are many free image servers listed in our article Manage Blogger Image Storage Space. After you have uploaded the image, take note of the image URL and insert that into the relevant part of the Amazon code.

Oryx Orange said...

You continue to answer clearly and concisely all of the most relevant questions that would occur to a Blogger interesting in improving the quality of his/her blog. Thank you a million times over.

Tom said...

Please add How to create"Link to us"widget for blogger.

Windhorse Publications said...

I'd like to add titles to the links in my link list but am unable to find where i insert the code.In the html template i can find the code for linklist1 but not the code for the actual links.If i go to the edit option in the page element there is no option edit the html. What do i do? any help would be gratefully recieved!! my blog is

nicólle said...

Thank you for the multitude of information. Your blog is my "Bible" for all things blog related!


alice said...

Thank you thank you thank you! I have been so confused and lost trying to figure out linking and your instructions have made it understandable to even an html illiterate blogger like myself. I just tried it out and I let out a little shreik of joy when I saw it worked. Definitely bookmarking your page... thanks again!

ice_hot said...

this is amazing stuff!


the earning student