Skip to main content

Putting Anchors, and HTML, In Your Posts

Blogger blogs are coded in HTML.

This post is displayed in two sections.

If you want to include something besides plain text in your post, you code it in HTML.

Displaying HTML

The HTML is displayed as ("rendered into") whatever you code (when you get it right). One very useful feature of HTML is Anchor Tags, which you can find described in my Anchor Tags tutorial, below.

This works great, when you want to display something interesting. Occasionally, though, you will want to instruct someone else how to display something interesting. My tutorial on using images in your blog, Image Test (OK, I know it's a lame name), is me trying to show you how to code HTML. So I have to show you both the HTML, and what the HTML produces.

Look at the Hyperlink example in the tutorial.
<a href="http://blogging.nitecruzr.net/
2006/07/image-test.html#Picture">
Check This Out</a>

How did I display the HTML here, rather than the link itself?
Check This Out


Well, wouldn't you like to know?
No, Chuck, don't be a jerk.

OK, I will be nice here. It's a simple enough process, anyway. HTML is nothing but a lot of special code, enclosed in "<" and ">" characters (see my Hyperlink example, for instance).

1. This is the code used ...
&lt;a href="http://blogging.nitecruzr.net/
2006/07/image-test.html#Picture"&gt;
Check This Out&lt;/a&gt;

2. ... to display this.
<a href="http://blogging.nitecruzr.net/
2006/07/image-test.html#Picture">
Check This Out</a>
And that is the code used ...

3. ... to display this
Check This Out

If I want to instruct how to code #3, I display #2, by putting #1 into the post editor window.

If you want more information about using "&" code, see (among many articles on the web) HTML Goodies So, You Want An "& Command", Huh?.

I'll leave it to you to figure out how I typed "&lt;" and "&gt;", without getting "<" and ">".

Anchor Tags

Anchors are an entirely different feature. In order to show how you use anchors, though, I included the subject of Anchors with my tutorial on posting HTML.

To explain how I display the code below, I'll refer you to the HTML Display tutorial, above. And that's basically why I put both subjects into one post.

If you have a long post, with multiple sections, like this article, you can carve the post into logical sections. You can link to the various sections, just as you link to individual posts. From here, we can jump (back) to the HTML Display tutorial. Click it and see.

So, how did I do that? Well, this trick is in two parts.

  • The anchor.
  • The link to the anchor.
I'll show two examples here.
  • At the top of this article, we have an invisible ("blind") anchor. You don't see it, though it's there.
    <a name="HTMLTutorial"></a>
  • And here, we have a plain old hyperlink, but one pointing to that anchor.
    From here, we can jump (back) to the <a href="#HTMLTutorial">HTML Display tutorial</a>. Click it and see.
  • This section of this article is headed by a visible ("sighted") anchor.
    <a name="AnchorTagsTutorial"><span style="font-weight:bold;">Anchor Tags</span></a>
  • And, we can likewise jump (back) to the top of this section, the Anchor Tags tutorial. Click it and see.
Of course, the whole idea of anchors is to allow you to jump straight to sections of a long post, from outside the post. So we will again look at Image Test, within which you find my Hyperlink example anchor.
<a name="Hyperlink"><span style="font-weight:bold;">A Hyperlink</span></a>
Please go there, and see for yourself. And, in the immediately above example,
So we will again look at <a href="http://blogging.nitecruzr.net/ 2006/07/image-test.html">Image Test</a>, within which you find my <a href="http://blogging.nitecruzr.net/ 2006/07/image-test.html#Hyperlink">Hyperlink example anchor</a>.

After you add anchor links to your post, don't move between "Edit HTML" and "Compose" modes, when editing your post. Learn to stick in one mode - or you will regret your editing. Of course, you can always examine the code for any specific page element, if you're using Firefox. Or check out the W3 Schools tutorials, that tell you all about each HTML tag, as used above.

Comments

gordon said…
Hi,

I would like to test a hyperlink that I learned to use here Thanks if it works.
thekatsmeow said…
Hi, do you know why it works when you create the blog post but if I go back into the post to edit in any way, the links automatically change from #whatever to http://www.(the url of my edit page)#whatever ?

Thanks!
Chuck said…
Meow,

No, I don't know. And that has always intrigued me.
meowsqueak said…
That reversion to the edit URL is really, really annoying.
Chuck said…
That reversion to the edit URL is really, really annoying.

Many things Blogger does are really, really annoying. Why not tell us more about what you need to do - sometimes, there's a workaround for the annoyances.
so what i am trying to do is rather than have the anchor on the same page of my blog, lets say from home with all my posts, i would like to go to an anchor on the about me page. is this possible and please let me know how it may be done.
thanks,
dg
PipSqueak42 said…
Thank you so much for this post! This really helped me figure out what I needed to do, and helped me make my page work the way I wanted it to. So excited it finally worked!!!
tommy said…
Hey,
Thanks for the info. I didn't understood the thing with the anchors, but I viewed your source code and I got it now :D
Thanks again
fahim raza said…
Nice post Its really helpful.

Popular posts from this blog

Custom Domain Migration - Managing The Traffic

Your blog depends upon traffic for its success.

Anything that affects the traffic to your blog, such as any change in the URL, affects the success of your blog. Publishing the blog to a custom domain, like renaming the blog, will affect traffic to your blog. The effects of the change will vary from blog to blog, because of the different traffic to every different blog.Followers. People who find your blog because of recommendations by other people.Search engines. Robotic processes which methodically surf your blog, and provide dynamic indexing to people who search for information.Subscribers. People who read your content from their newsfeed reader, such as the dashboard Reading List.Viewers. People who read your content from their browser.No two blogs are the same - and no two blogs will have the same combinations of traffic sources.

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.