How to change blog title tags

Today, I will show an esay tip that can make your blog post likely listed in Google search results. And this has been implemented by many bloggers already. But if you haven't done this, it would be useful for you. As you can see an example below for my blog:

Which one is better? The first one is absolutely the best because Google would read your blog post title first, then blog title (in the first one); and if your blog title is too long, it would be a big disadvantage for you if your blog is still displaying as the second example. Thus, now I will guide you how to change blog title tags in every blog post. You can see the instruction below:

1. You're in draft.blogger.com , go to Template
2. Scroll down until you find Backup/Restore Template >> Click on it, then Download full template
3. Click on Edit Template >> Tick the Expand Widget Templates
4. Find this code (to find it, press Ctrl + F)

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

5. Replace it with this code

<b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> |<data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>

6. Click Save Template

Note: if you just want to show the post title only which can even make your blog posts ranked higher in search engine, you can replace 

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

with the following code

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>