11 May 2009

How To Use Simple Image HTML Codes

Monday, May 11, 2009

My Profile Pic

Have you ever been wondering how to add an image like my profile photo above into a post or the sidebar without the help from a Blogger tool? I will try to write about this in my post here as best as I can. A simple image html code looks like this:

<a href="link location"><img src="image location"/></a>

You can change the link location and image location with any desired image data. But please remember to respect others creative copyrights and ask for their permission, if you want to link photos that don't belong to you. Give owners the deserved credits for their work.

Menu display after right clicking the photo

Back to the codes. I have right clicked my profile photo on the sidebar and then chose copy link location from the menu by left clicking it.

Highlight Link Location in HTML Code

Highlight link location in the simple image html code, and then paste the copied link location to replace it. Repeat the same step for image location. The image html code will look like this now:

<a href="http://www.blogger.com/profile/02425443102217805623" ><img src="http://2.bp.blogspot.com/_zrXGW5EMp3A/SW08WaxhNvI/AAAAAAAAAAg/Z2jeV9Dj210/S220/Profile+Pic.JPG" /></a>

By recognizing the beginning and ending point of this image html code (see the red marks) you can also try to rearrange your photos in the Edit Html section of a post, if you haven't uploaded them in a desired order. Hope this might help :)!

9 appreciated note(s):

Marie Reed said...

Your techie posts are always such a huge help!

Anonymous said...

I am so glad you added this. I didn't know this way as WordPress has an insert photo option and it does everything but I'm glad to know how to do this by coding now. Keep 'em coming. Mahalo for sharing :)

ANUAR ZAIN said...

This is too advance for me. I really need this service but I simply couldnt cope up. I need more extra classes to really comprehend this skill. Sigh..

Anonymous said...

Rosidah, I keep forgetting about your Music Monday - I'm so sorry! I've got to get in on that!

RA said...

@ Anuar Zain: I have added some images. Hopefully it will be more easier :)

@ Tricia: I would love you to join us at Music Monday :). The host is Lady Javaura.

Inday said...

Oh Rosidah, I don't need to get out of the house to learn advanced computing now. My friend, who works for the General Secretary here, adviced me to study IT. She reckons I am good at computing. Not really.

From comment link, now to Image link.
Blogger's are helpful really. All we do is just fill in the blank, spoon feeding technique to make work easier for the amateurs like me.

With your help, I am beginning to appreciate the work of computer wizard like yours.

May I copy this information so that I have my guiding tools for learning? I will study this again in my own time.

Thanks Rosidah. You are so helpful to people in the cyberworld. This is what I said long time ago, that there is a big plus about Internet and I was hoping people would use it constructively rather than destructively.

Smile with thanks.

I think the next thing we need to learn from you is how to post smileys in our comment and not just the double dot or colon and the half crescent moon whatever is that called. lol.

I'm having fun with my blogging. All my email suffers: The sacrificial lamb. lol

RA said...

I'm actually a beginner too, Bonnie. I got a lot of inspiration from my friend Alex at Banana Talk 2.0. Trial and error is also the best way to learn. Don't be afraid to make mistakes as long as you have a good backup ;). I'm glad, if this post can be helpful to you.

Unknown said...

how to use images placed in blogs like 2.bp.blogspot.com etc

Hi, i tried placing images present in 2.bp.blogspot.com, 1.bp...., 3.bp...., 4.bp.blogspot.com etc.. in my htm page

i am unable to see those images in my html page, but i am able to see if i copy the source code n paste the same in a browser..

people can you please trace out the problem n help me out

Admin - Yadlapati

Rogue Medic said...

Is there a way to post an image in a comment? Not an image with a link, but just an image. If not, I assume that using the html for a link to the page with the image is the next best thing (as you described in How To Insert A Link Into Your Comment). I include that, not to show off, but to demonstrate that I understand how to do that. However, adding an image remains beyond my limited grasp.

Thank you.