How to convert template tags to data tags for social bookmarking

In the now feature complete fancy new Blogger, formerly
known as Blogger Beta, old Blogger (classic Blogger) template tags are no more.

Template tags representing the current post's title,
permalink or direct URL, date, unique ID, or your blog's title or blog URL etc,
are often used in code to help people add your posts to Del.icio.us, Furl and
other Web 2.0 or social bookmarking sites like Digg or track who's linking to
your post according to e.g. Technorati or BlogPulse or Bloglines, or appear in
other add-ons like Haloscan trackback etc - that sort of code seems increasingly
to be called "badges" or "widgets".

With new Blogger "layouts" you have to use "data tags"
instead. E.g. <data:post.title/> instead of <$BlogItemTitle$> for a post's
title, and <data:post.url/> instead of <$BlogItemPermalinkURL$> for its URL.

But they don't work in the same way as the old template
tags. If you look at the data tags help you might be forgiven for thinking for
instance that instead of [corrected mistake!] <$BlogItemTitle$> you now just
substitute <data:blog.title/> or <data:post.title/>. Well that's not strictly
correct, and if you try to do that it may not work.

Now, you could just copy and paste codes or follow
instructions which others have kindly provided for New Blogger (e.g. Vivek's for
social bookmarks and Logical Philosopher for Haloscan, or Web Messenger for
Technorati link count). Or you could just quickly add a third party page
elements widget that someone else has created, like my Technorati link count
widget.

But if you want to understand how the new equivalent of
template tags now works, and how to convert old template tags for New Blogger so
that you can sort out for yourself other codes not already covered and add new
badges or widgets to your New Blogger blog for other websites or services in
future, here's my explanation and step by step howto, as Blogger still haven't
documented this fully at the time of writing this post.