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 (II)

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:-

Business Fables and Management Lessons

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.

Hyperlinks and Image Links

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.

© 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

34 comments:

Ray said...

What great information, due to this article I was able to do some awesome things to web site!

Nymeth said...

Hi - I hope you don't mind me asking this, since it's not directly related to this post, but your blog has been infinitely useful to me and I don't know where else to look for help.

Today I added a picture to my blogger profile, but in my blog it has an ugly thick black border around it, and I can't get rid of it. Do you have any idea of how it could be removed? Thanks in advance, and sorry if asking this is out of place.

bizwhiz said...

Thanks Ray. :)

Hi Nymeth - You can go to Edit HTML and look for this

profile-img {
border: 4px

You will notice that your border is at 4px. Change this to 0px if you don't want the border.

There is also another graphic ending with rails_main.gif which causes the strange border to the side of your posts. If you don't want that, you may also remove this graphic. Cheers!

Nymeth said...

Thank you so much! And yes, I'd been wanting to get rid of that border as well.

Matt said...

Used some of your information on your site and it was very useful, keep up the good work and check out my blog if you could.

http://ASKaCOLLEGEkid.blogspot.com

JIDON ISKANDAR said...

Hello bizwhiz,

You have a great blog for bloggers and it's very informative.

Actually, I have some problem with my template, when I add HTML Code and try to save it. It appears 'The page cannot be displayed'.

I'm very confuse what is the real problem, please help me. I'm appreciate if you can find or give me a hint about this. Thanks a lot bizwhiz.

Regards,
Iskandar
Project AGLOCO

bizwhiz said...

Hi Iskandar

Can only think of a few possibilities:-

1. That particular program is blocked by your computer's firewall or security software.

2. Your comp is affected by malicious prog, and a thorough scan of your computer should eliminate this possibility.

3. Sometimes it may be the security setting of your browser. If you are using IE, different levels of security setting may prohibit different types of program. If you have Firefox as well, test it on Firefox and see if you face the same prob.

4. The HTML you want to add may not be properly formed.

Hope this helps.

sstarfox2 said...

This is very useful information and I will be coming back. Thank you for posting.
Mine Own Store
http://sstarfox2.fscstore.com
www.freewebs.com/sstarfox2

Military Mommy said...

I couldn't find the link to email you - I just nominated you for a blogger's choice award for best blog about blogging.

http://www.bloggerschoiceawards.com/

Thanks for your wonderful site. It basically helped me build my blog step-by-step.

Blessings,
Michelle

bizwhiz said...

Hi Michelle

I'm deeply honored.

Personally, I don't think that I am anywhere in the league of the great bloggers, having started finding out and learning about blogging only about a couple of months ago. But I'll work hard though.

And I am already very happy that what I wrote has made a difference to some people. As long as there are readers like you who find this blog useful, I'll continue posting. Thank you once again.

Cheers!

Madhavi said...

Hi!
I need some elaborate help.I am trying to upload a picture to the leftside of my blogger header.Using this article "Hyperlinks and Image Links (II)" I tried.What I did was uploaded the picture I wanted to in picasa ->published it to my blog as an untitled post using picasa
->came to my blog,clicked on the picture -> copied the url ->pasted it in the following part of html code in my blog
#header img {
margin-left: auto;
margin-right: auto;


But after all this I found no change in my blog.The current template Iam using is minima .if possible,plz go through my blog.I would be more than glad If you can help me with this.
Thank you
Madhavi

bizwhiz said...

Hello Madhavi

If you are inserting image into the blogger header, you may want to look at the other article "Background image for Blogger Header".

In the alternative, you can first follow the guide to "Add Page Element to Blogger Header". After that, go to Template -> Add a Page Element, choose HTML/JavaScript. Use the "Image Tag" code provided in this guide.

Feel free to let me know how it goes.

Madhavi said...

Hi BizWiz!
Madhavi again here!This time I tried with add page element from template section->add HTML/Java Script->added the image tag from your article->replaced the "image url" part with my image url from the blog->saved and tried to drag and drop the HTML/JavaScript box into Blog header part.
but again,no change.Am I doing anything wrong?plz let me know

bizwhiz said...

Hello Madhavi

Could you test whether the URL of image works by entering that URL into your browser and press Enter? Do you see the image? If you don't, would you like to try saving the image in Photobucket, Flickr or other image host? Because if you are doing everything right, the possible problem may then be with the image URL. Would you like to test it?

Madhavi said...

Yes BizWiz!I tried copying the url and pasting it into browser.It works.I can see the image.Now What?

bizwhiz said...

Hi Madhavi

Blogger has a latest feature which makes it easier to add a background image to your Blogger Header. We have written an article on that and you may want to have a look at the steps in "Background Image for Blogger Header (New)". Feel free to let us know if you have problems installing it using that method.

Shawn Lim said...

Hi BizWhiz, need your help. I followed your instruction, entered the html code into my blog, then now all my buttons on my sidebar was all covered by agloco image.

how come like this? Help!
you help is very much appreciated!
http://themillionairesecrets.blogspot.com/

Shawn Lim said...

Hi.. sorry to disturb..
now ok already, everything back to normal.. i forgot that i added some html into my templates..

thx for your teachings!
Cheers!

Cloak said...

Bloody Brilliant bit of HTML, that. Thank you so much! :-)
10/10, lol.

Esther R said...

I posted 2 pictures on the header, but only the upper half of the pictures are showing. At the level where the "description" starts, the photo's on the side look "covered up". What can I do?

bizwhiz said...

Hi Esther R

Since you have no blogs listed in your profile, we are unable to determine the possible cause. How did you post the pictures - by inserting adding a Picture page element, a javascript, or inserting the code directly into your template?

If it is for the header, perhaps an easier way to put the pictures would be to use the new header feature. You can merge both pictures into one using an image editor. Determine the spacing between them, the size that you want. After that, edit the header and upload the image from your computer.

Anonymous said...

Gràcies per la informació!

Many thanks for the information, it helps me creating my own personal blog.

Best regards!

Ankush Kohli said...

I've an image in my blog, which I want to Digg but the url is like http://bp1.blogger.com/jhfjdfh.............../jh.jpg so if I Dugg this image it'll provide traffic to blogger, not my personal blog but I want that traffic to my own blog.

I hope u understand. Now please let me know how to get benefit from that impressive image to my personal blog.

Thanks.

Anonymous said...

Hi BizWhiz

Your tips have been very very clear and helpful in setting up my blog. I have one qyestion about formatting the pop-ups (in title tags). I would like to make them sticky - i.e, I would like thtem to stay till the mouse moves away.

Also, is there a way to have multiple lines in the pop-ups? And have a fixed width for the pop-up?

Thanks again.
Regards
BeWell

Yassar Khan said...

Hey your blog is the best. My image links look perfect on Mozilla Firefox but I'm having trouble with my image links on the Internet Explorer. The image links overlap each other and their alignment is all messed up. Can you please help me sort this out.

KC Lim said...

Hi, I'm new to blogging and I have been using your tips to build my blog-http://freeaccountinglessons.blogspot.com. Great information and I truly appreciate what you guys have done. I have a problem about showing the Link To This Blog html code. I remember I have tested this and it worked well until today. I found someone has amended the url I have put up earlier to http://freeaccountinglessons.blgspot.com, mimicking my blog! The difference is this url is not exactly the same as mine as it is "blgspot.com" and not the usual "blogspot.com" for blogger sites. Of course I have corrected this but I don't know how they did this and I don't feel secure about the extent of control I have over my blog. Is this legal? Any prevention measures I should adopt to stop this from happening in future? Please advise.

Tiffany said...

That was so helpful! I found your site through a google search. I will be bookmarking it to return when I have more questions. It was very easy to understand and follow! Thanks!

Neha said...

hi , i need some help.
where d i save my html files in blogger?

Anonymous said...

Hi, I just want to ask. How do you make image links have effects when you hover over them?

Nice blog by the way. I used your articles to edit my blog a lot of times. :)

her said...

I have a little issue - when I try to put a picture on my sidebar, it appears to be incredibly squished to the point of being barely recognizable. As well, when you hover over it, it says my blog address followed by the one I would like to link to, not just the one I'm linking to (therefore resulting in a bad link)
Please help!

Neel said...

Hello Bizwiz,


I saw your templete changinge blog with third coloumn i really liked it, but i m using templete 565. Is it possible to add third coloumn to this templete also?
If yes i m really looking forward to see your tips on this...

Thank you
Bye
Have nice time

Anonymous said...

Your blog is always a gift!

Is it possible to change the link color just inside the gadget?

Thanks in advance.

Kolarbear said...

Hi Bizwhiz

I have problems trying to place my home icon at my desired location. Can you help advise me on where can I place the codes to specify the location?

I have a 'back' icon placed at the bottom right of the post column. How do i remove the "older posts" link but maintaing the 'back icon'?

Appreciate to here fm you.

Anonymous said...

I am enjoying your blog; much helpful information. Thank you for putting it out there for blogging newbies such as myself.

Is there any way other than using an image hosting service to place graphics or logos into a sidebar? This seems to be an overly complicated way of accomplishing this task -- as opposed to being able to merely load files from one's own computer.

Thanks in advance for your response.