You may have often wondered how many of those Blogger hosted blogs have numbered page navigation below the posts on home page. Its a nice little hack, but has a good effect. There's no doubt about the fact that such navigation links make a blog look way more professional, as well as user friendly.

Today I will show you how exactly you can implement that on your own blog.

As you know, by default, Blogger hosted blogs have those not so useful "Older posts" and "Newer Posts" links at the bottom. These can be useful, but only if the visitors know about them. While the fact is that most don't. So lets give them a better option, shall we?

Okay so first backup your blog template before starting anything.

Steps to follow:

1. Sign into your Blogger account.
2. In the Dashboard, select the blog, and go to » Settings » Posts and comments.
3. Set the maximum number of posts you want to display on homepage using the "Show at most" option.
4. Now go to Template and click "Edit HTML"
5. When you get the whole code of your template, find this at the bottom:

</body>

6. Now paste this whole code just before the above tag.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>

<script type='text/javascript'>

//<![CDATA[

function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}

//]]>

</script>
</b:if>
</b:if>

7. See the part highlighted in red in the above code? That determines the number of posts to be displayed per page. Set it to be equal to the number you set in Step 3.
8. Find (using Control + F) all the occurrences of this code in your template:

'data:label.url'

and replace them with this:

'data:label.url + "?&max-results=5"'

Once again, the number highlighted in red should be the same as in step 3.

So now the basic thing is done and by default it should look like this:

]]></b:skin>

 Paste the following code just before the above code:

.showpageArea a {
text-decoration:underline;
background: #ffffff;
padding: 10px 10px 10px 10px;

}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
border-top: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Now its all done. Save your template. See if everything worked as desired.

1. While publishing your post the first time, create a shorter title, around 35 characters long, that adequately summarises the content of the post, and publish the post.
2. Now edit the same post and replace the shorter title with your preferred longer one. And publish the post again.

This tutorial explains how to improve Search Engine Optimization (SEO) of your Blogger blog by optimizing your post title tags for search engines like Google, Yahoo and Bing. How to improve search engine results by optimizing post title tags.

By default, Blogger is not quite search engine friendly, but with easy tricks, you can make it good enough for search engines to rank them in good positions.

By default, Blogger blogs don't have search engine friendly title tags, while many blogging platforms have inbuilt or enhanced SEO plugins which give them a slight advantage compared to Blogger blogs.

Search engines give more importance to the first words of the title of a webpage. But in Blogger blogs, the title is ordered by the blog name followed by the post title, like this, Blog name: Post title.


Now this can highly hamper you site's SEO as many a times the main keywords in your post title won't even get indexed by search engines if its too long.

Fortunately, a small tweak comes to the rescue in this situation. All you have to do is to reorder your blog name and page title sequence from the template. It will make it look like this, Post title: Blog name.

Follow these simple steps and you are done:

1. Login to your Blogger blog.

2. Navigate to Design > Edit HTML.

3. Backup your Blogger template by clicking Download Full Template and keep it safe in your computer. Remember, its better to do this everytime you do a template edit to be on the safe side in case you encounter any problem.

4. Check the Expand Widget Templates box.

5. Find this code within the blogger template code(using CTRL+F):

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

  
   Replace it with this code:

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

6. Click on Save Template. You are done.
 

To check the effect, go to your blog and click on an individual post link. You will notice that your post title is now followed by blog name.

   If you experience any error, you may try replacing    

   <b:if cond='data:blog.pageType == &quot;item&quot;'>

   with

   <b:if cond='data:blog.pageType == "item"'>

This tweak is surely going to help your search engine ranking for your preferred keywords. And this is almost a must if you want to drive significant organic traffic to your blog.

So here you have just learnt how to optimize your Blogger blog's title tags to improve its Search Engine Optimization(SEO) to improve search engine ranking and increase its organic traffic.

If you have any question, feel free to post a comment and I will try my best to solve your query.

Thank you for reading.