In order to get our site higher ranking, we can optimize keywords, links, tags, get quality backlinks, and so on. However, title tags are important in optimizing your site too. As I mentioned before, crawlers read only text, and if you customize the title tag properly, this will improve the visibility of the site when spiders crawl over your site. Besides, this will also help users to easily obtain their information if you customize them properly.

Before customizing, your title tag should be like this:

Where the results of the searches are like below images:   
It's quite ugly, and messy. If you search for ‘links’, what you hope to see in the search results are about ‘links’. However, if the search results display your blog title first, this will cover some important keywords of the post title. And, this make sense, they will select others' site rather than yours. For the extent, to be realistically, who cares about your blog’s title, they just care about what they wanted to find. ='(

But also search engines, they like to crawl your sites with post title first then only your blog title. Well, Google owned blogger, sarcastically, blogger are not prepared readily for the purpose of SEO though. So, you got to change your title tag in order to improve visibility in search engines. Don't worry, there are few easy steps then you can completely customize your title tag for the needs of SEO.

Tutorial

1. Sign in your blogger account, and go to Design>Edit Html
2. IMPORTANT: Download your template before editing.(backup)
3. Find the following code:

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

4. Then, replace it as:

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

5. Next, click save template.
6. Done! 

And, now you have change the title tag. However, you got to wait for few days for the google make the changes. The results would be something like this: