How to Make Footnotes in Blogger? ~ Tips for Bloggers

WELCOME!

This blog contains quick tips for Bloggers. For detailed explanations do visit the main blog at :

How to Make Footnotes in Blogger?

A Footnote is an explanatory note at the bottom of the page in a book which refers to a point in the text using a symbol like an asterisk or a number. When reading the page if you come upon such a symbol your gaze is automatically diverted to the foot of the page for the detailed explanation.



In the New Blogger every post is actually an independant page by default. You can also put Footnotes in your post using HTML1 tags.

Have a look at the number '1' following the word 'HTML' in the previous line. It is placed above the line using the superscript tag like this :

<sup>1</sup>

Type the above code in Edit Html tab of Post Editor when creating your post and you will get the letters enclosed ( in this case - the number '1' ) above your line.




When the reader comes across such a superscript when reading a book he automatically looks at the bottom of the page for details on 'HTML'. In a web page this is done by converting '1' into an anchor link2 pointing to the foot of the page. To do this we use this code :

<a href='#HTML'>1</a>

Now the number is converted into a link. The full code is :


<a href='#HTML'><sup>1</sup></a>



The Last step is to provide a target for the link so that when the viewer clicks on '1' the page rolls down immediately to the Footnote at the bottom. At the bottom of your post type

<a name='HTML'>HTML</a>

Check this out by clicking on '1' at the top and the page will roll down immediately to the explanation at the bottom.



1. HTML : Hypertext Markup Language.


2. Anchor Link : A link which jumps directly to a specific point on a page, instead of letting the user scroll around to find what he/she is looking for.


8 comments:

Anonymous said...

Thanks for much for your blog, as a new blogger I can use all of the help I can get :) Thank you

Lifesunknowns.blogspot.com

Starr_girl said...

Thanks for this info - I would NEVER have figured this out myself!

Yinsi Yat said...

Thanks for this tips. Really appreciate it.

KAGS said...

nice, its kinda AIO(All In One) lots of stuff to implement in any blog!!. Thanks!!

MONEYMANAGER said...

THANKS A TON
BEING NEW BEE, IT IS REALLY IN A NICE AND EASY WAY U MAKE UNDERSTAND
IT WAS THROUGH YOUR COMMENTS IN BLOG CENTRAL THAT I FOUND YOUR BLOG,
AND HAVE BEEN FOLLOWING IT FOR SOME TIME NOW, HEART FELT THANKS AGAIN.
ONE QUESTION, WHAT IF NOW THE READER WANTS TO COME BACK TO THE PLACE FROM WHERE HE HAD GONE TO BOTTOM, CAN THERE BE A LINK AT THE BOTTOM ALSO??
PL EXPLAIN
THANKS

Vin said...

MONEYMANAGER,

Have a look at How to add link to Skip to Top of Page?

Maurizio said...

Hello. I have followed your instructions but the blogger replaces the original code
<a href=’#REF1’><sup>1</sup></a>

to point to the following footnote:
<a name="REF1">Note 1.</a> the cat is under the table

into:
<a href="http://www.blogger.com/post-edit.g?blogID=34239159&postID=4071551860221357080#REF1"><sup>1</sup></a>

and there’s no way to change it.
Can you please help me in understand what’s wrong?

Vin said...

Maurizio,

First Publish your post.
Then get the permalink of the post.

Then open the same post for editing.
In the code for the link substitute :

http://www.blogger.com/post-edit.g?blogID=34239159&postID=4071551860221357080

with the permalink of the post.
Do not delete the #REF1 at the end.

Publish Post.

CLICK HERE TO LEAVE A COMMENT.



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above Search box to look for solutions before posting your valuable comments.

Comments posted on Tips for Bloggers are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

YATOC - Yet Another Table of Contents.

Loading...
Get This Gadget at YATOC.

Table Of Contents