Changing the Blogger Title Tag

This widget will change the Blogger's title tag to help amplify relevant keywords to your blog which improve the search engine ranking of your blog.

How does it work?

By default, your Blogger's title on the top left displays your blog title, and if it's in the items page, it'll include your post title as well.
e.g. Widget-based XML: Changing the Blogger Title Tag

By default, Blogger templates come with a 'smart' tag that automatically puts the title of your blog in the title tag if you are on the main page and on article pages it uses the format: BlogTitle: Article Title.
I wanted to change my blog's title tag so that is puts the title of my post first followed by the name of my blog. Here is the code if you want to do the same:
<title>
<MainOrArchivePage><$BlogTitle$></MainOrArchivePage>
<ItemPage><Blogger><$BlogItemTitle$></Blogger> - <$BlogTitle$></ItemPage>
</title>
Use the above code in place of: <title><$BlogPageTitle$></title>

It works the same way for labels and archives pages.

Installation

Find the following codes, near the top of your template:

<title><data:blog.pageTitle/></title>

Replace with the following code:

<!-- Start Widget-based: Changing the Blogger Title Tag -->
<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='comments' var='post'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> ~ <data:blog.title/></title></b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='nextprev'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<!-- End Widget-based: Changing the Blogger Title Tag -->

The trick is rather simple for the older Blogger version, but it's nearly impossible with Blogger beta without risking a little XHTML validation. This widget works well but it's only limited to items page. Meaning it'll go back to Blogger default in index, labels and archives pages.