April 9, 2008

How to Create Hyperlink on Blogger Post

Well, this time I make a basic simple tutorial. For all advanced geek who read this blog, please ignore this post... I just wanna help myself not to teach the same basic thing on every newbies friends that really need help.

OK guys, back to the howto...

There are two ways to create a hyperlink on your blog post. One is the simple GUI way and the other is coders way. I prefer the coder way as I can have more control on it.

I like to teach by example. So, let say you wanna create a hyperlink on this line of words...

You can go here to see my art blog

where you wanna link the word "here" to the other page on your blog or on the internet. In this example, I wanna link it to my Art Of Apogee Blog post with the address:
http://artofapogee.blogspot.com/2008/03/gimp-best-free-photoshop.html

And here is how to do it using both ways...

The simple GUI way

If you rollover every button on your Compose toolbar, you can see one button called "Link" where the word Link will pop up when you hover the button like this:

Now, all you have to do is to highlight or select the word "here" on that phrase, click the link button or press Ctrl+Shift+A, type or paste the URL (the link address) and press Enter or click OK.

Pretty fast huh?... here is the slow motion...
1. Select the word "here"


2. Click on the Link Button or press Ctrl+Shift+A


3. Type or paste your link address (Um... technically it is called URL) and click OK



Believe it or not, it's done...

The Coder way

The coder way may be a bit hard for newbies who's not familiar with HTML tags. But it is good if you wanna have more control on your resulting output...

Using the same example situation, now go to the Edit Html tab. It is on the top-right of your typing area.

And using the same method, select the word, click the Link Button or press Ctrl+Shift+A, paste the URL and click OK. But now, you can see the text should look something like this:

You can go <a href="http://artofapogee.blogspot.com/2008/03/gimp-best-free-photoshop.html">here</a> to see my art blog

Actually, it is basically done but I personally would love to add more things to that link code. For example, if I want a descriptive word to pop up and say "Art Of ApOgEE Blog", I can simply add this line of code:

title="Art Of ApOgEE Blog"

just before the > character. And I can also add this line:

target="_blank"

if I want my visitor to open up new window or tab if they click on that link. Very helpful for web surfer like me who don't wanna get lost from my main reading and have to click back button to reload my currently reading page...

Hey, there is more you can do with the HTML tag. You can do further reading on HTML Anchor tag and use your imagination to add more.

As usual, Here's the result of this howto:

the code:


You can go <a href="http://artofapogee.blogspot.com/2008/03/gimp-best-free-photoshop.html" target="_blank" title=" Art Of ApOgEE Blog ">here</a> to see my art blog

the output:

You can go here to see my art blog

OK mates, that's all for now. Hope it helps all of you and you can start hyper linking your blog. Feel free to add a link to my blog too hehehehe... Have Fun!!





Share This Article:


Bookmark This Article:
Feed Me Digg Technorati del.icio.us Best to Stumbleupon Reddit Blinklist Furl Spurl Yahoo Simpy

22 comments:

"the Dude" said...

makasih, it worked fine. :)

Andrea said...

ok - I figured since you helped me with my link question a while ago, you could help guide me on this question - how do I create a button? You know, where I want to have a picture and then have a code underneath so people can put the button on their site. Is that simple coding?

ApOgEE said...

Actually, a button is just an image/picture where you place your image <img> tag in between your <a> link tag.

For example:
<a href='http://coderstalk.blogspot.com'><img src='http://coderstalk.googlepages.com/coderstalk.png/coderstalk-medium;init:.jpg'></a>

you can simply copy and paste the code, change the image and the link.

Andrea said...

Thanks so much for responding! I appreciate it!

Tre said...

I just started blogging a few days ago, still trying to figure out the basics. Your tutorial on creating hyperlinks is GRRRRREEEAATTTT!!!
I will definitely be back for more helps as I need it. Thank you so very much. Tre, MotherEarthTreasureChest.blogspot.com

Kunjal said...

thanks!!!i was searching this since long:)

Lynné said...

thank you, thank you, thank you! I feel so dumb for not being able to figure it out on my own!

uh_I_dunno said...

thanks that's great especially for those of us who have just started
I love being able to ad the 'target=_blank' now

Shubhro said...

Thank you....very much..

The Half-Assed Housewife said...

Thank you so much for this! I've been trying to figure out how to make the whole link not appear!

ABDURAJIK said...

thanks, very helpful to newbie like me!

Gladys Kock said...

What's a helpful information for newbie like me, it's great to stumble upon this blog and I'll definitely bookmark it! Thanks!

Barbara Fowlds L.Ac. said...

I am soooo impressed by your understanding of how to describe "how to". I am just starting to learn to blog and can't thank you enough.
2 questions if I may.
1. Can I put a hyperlink in my header of my blogspot blog and if so how?
2. If I want to learn HTML/Java (knowing absolutely nothing right now) what book would you suggest?
Thanks
Barb

ApOgEE said...

Andrea, you're welcome ;)

Tre, Thanks ;)

Kunjal, welcome ;)

Lynné, welcome, welcome, welcome :D

uh_I_dunno, welcome.. glad to hear that ;)

Shubhro, welcome ;)

The Half-Assed Housewife, you're welcome ;)

ABDURAJIK, welcome.. glad it helps you ;)

Gladys Kock, you're welcome.. thanks for loving this blog. ;)

Barbara Fowlds L.Ac., no problem... I've created new post on How to Create Hyperlink on Blogger Header to answer your first question. And for the second, I would suggest you to read http://www.w3schools.com/. That's where I started years ago.

Thanks all of you for loving this blog... Feel free to show your love by having a link to my blog. Thank you! ;)

kecia said...
This comment has been removed by the author.
Room 13 Plimmerton School said...

Thanks for advice on how to put a hyperlink in my blog - it worked a treat!

Goog said...

Greetings,

First of all I would like to thank you Author for your teachings, learned something new :)

second) I would like to post a hyperlink on other blog sites that does not supply the link icon & I pretty much tried all of these link coding & nothing seems to work..

I've used codings..

target=blank

[link=

[a href=

[ url =

But other bloggers have created hyperlinks & it works fine.. One example blog site which I'm trying to post on is( http://www.blackeyedpeas.com/home/news/762693?msg=146#2167189 ) So can you please tell me on how I can create this special Hyperlink to work on this particular site? or similar blog commenting sites?

Your assistance will greatly be appreciated :) Thanks!

khaskins said...

I need to practice what you've taught. I just tried it on another site and it didn't work. I guess they don't allow links. It was a newspaper site. Read the article, thanked the Author, did a legitimate comment and tried to embed the following link for my company name. Hit the submit button but no link.

Americap Wealth Management

sugarbaby20111 said...

I am trying to connect a picture with a link, on my blog, when doing this the picture doesnt show, instead its the square with an x in it but if you click it it will take you where I want but whos gonna click a square x please help :(

www.LiedVirJuanita.com said...

I'm trying to create expandable post summaries and I'm following your tutorial.

I however can't find the following code in the html template after which to place you code.


What do I do?

Fotorolletje said...

Thanks!

maya's ideas said...

Thanks so much! This really helped! :)