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.

One of the most important features that is almost a must have for every blog is the Related Posts feature/plugin. Why is it necessary you may wonder. I tell you, when I say its a must have, its really a must have.

It makes your blog a lot more user friendly. When a visitor is looking for a particular topic, he/she gets a nice list of other posts related to the topic. This way your visitors spend more time on your blog, and that's what you want, right?

Another reason for adding Related Posts widget is Search Engine Optimization. Related Posts in a way means lots of internal linking within the site, which makes the search engine crawlers crawl more number of pages, hence helping your blog's SEO.

But one huge problem is that most bloggers are not good with codes. So its not so easy for them to edit the HTML and add the appropriate codes for Related posts list to work. So in this article, I'm going to list few very nice Related Posts plugins that will take hardly few minutes to install, and no coding knowledge is required at all.

There are quite a few Related Post plugins, but I will list only a few, that are popular and stable.

1. LinkWithin: It appears at the botton of each post in the form of thumbnails.


Pros: It is free, supports thumbnails, no registration is required to use this plugin.
Cons: Adds a LinkWithin credit below the thumbnails.


2. Outbrain: It looks similar to LinkWithin, and comes with an optional Post Rating feature.



Pros: It is free, supports both text and thumbnails, no registration is required to use this plugin. Moreover the added Post Rating system supports both star ratings and thumb recommendations.
Cons: Couldn't find any.

But all these third party plugins have a common issue, they can make your blog load slow, the reason being the fact that they use their own servers and all scripts are installed there, not in our blogger blog.

This is very important if you consider about your site SEO.Adding the nofollow attribute to your blogroll, would nullify any link juice with Google.If you like to add Nofollow attribute to your blogspot blogroll simply follow the steps below:

1.Login to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to till you see your Blogroll widget code :

(Note : You may also can find it by searching <b:widget id='BlogList )

Your Blogroll widget code will look like this:

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'>
<b:includable id='main'>
 <!-- only display title if it's non-empty -->
 <b:if cond='data:title != &quot;&quot;'>
   <div id='blog-list-title'>
     <h2 class='title'><data:title/></h2>
   </div>
 </b:if>

 <div class='widget-content'>
   <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
     <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
       <b:loop values='data:items' var='item'>
         <li expr:style='data:item.displayStyle'>
           <div class='blog-icon'>
             <b:if cond='data:showIcon == &quot;true&quot;'>
               <input expr:value='data:item.blogIconUrl' type='hidden'/>
             </b:if>
           </div>
           <div class='blog-content'>
             <div class='blog-title'>
               <a expr:href='data:item.blogUrl' target='_blank'>
                 <data:item.blogTitle/></a>
             </div>
             <div class='item-content'>
               <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                 <b:if cond='data:item.itemThumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:item.blogUrl' target='_blank'>
                       <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                     </a>
                   </div>
                 </b:if>
               </b:if>
               <b:if cond='data:showItemTitle == &quot;true&quot;'>
                 <span class='item-title'>
                   <b:if cond='data:item.itemUrl != &quot;&quot;'>
                     <a expr:href='data:item.itemUrl' target='_blank'>
                       <data:item.itemTitle/></a>
                   <b:else/>
                     <data:item.itemTitle/>
                   </b:if>
                 </span>
               </b:if>
               <b:if cond='data:showItemSnippet == &quot;true&quot;'>
                 <b:if cond='data:showItemTitle == &quot;true&quot;'>
                   -
                 </b:if>
                 <span class='item-snippet'>
                   <data:item.itemSnippet/>
                 </span>
               </b:if>
               <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                 <div class='item-time'>
                   <data:item.timePeriodSinceLastUpdate/>
                 </div>
               </b:if>
             </div>
           </div>
           <div style='clear: both;'/>
         </li>
       </b:loop>
     </ul>

     <b:if cond='data:numItemsToShow != 0'>
       <b:if cond='data:totalItems &gt; data:numItemsToShow'>
         <div class='show-option'>
           <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
             <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
           </span>
           <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
             <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
           </span>
         </div>
       </b:if>
     </b:if>

     <b:include name='quickedit'/>
   </div>
 </div>
</b:includable>
</b:widget>

4.Now add rel='nofollow' to your blogroll widget code as the example below:

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
  <div id='blog-list-title'>
    <h2 class='title'><data:title/></h2>
  </div>
</b:if>

<div class='widget-content'>
  <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
    <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
      <b:loop values='data:items' var='item'>
        <li expr:style='data:item.displayStyle'>
          <div class='blog-icon'>
            <b:if cond='data:showIcon == &quot;true&quot;'>
              <input expr:value='data:item.blogIconUrl' type='hidden'/>
            </b:if>
          </div>
          <div class='blog-content'>
            <div class='blog-title'>
              <a expr:href='data:item.blogUrl' rel='nofollow' target='_blank'>
                <data:item.blogTitle/></a>
            </div>
            <div class='item-content'>
              <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                <b:if cond='data:item.itemThumbnail'>
                  <div class='item-thumbnail'>
                    <a expr:href='data:item.blogUrl' rel='nofollow' target='_blank'>
                      <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                    </a>
                  </div>
                </b:if>
              </b:if>
              <b:if cond='data:showItemTitle == &quot;true&quot;'>
                <span class='item-title'>
                  <b:if cond='data:item.itemUrl != &quot;&quot;'>
                    <a expr:href='data:item.itemUrl' rel='nofollow' target='_blank'>
                      <data:item.itemTitle/></a>
                  <b:else/>
                    <data:item.itemTitle/>
                  </b:if>
                </span>
              </b:if>
              <b:if cond='data:showItemSnippet == &quot;true&quot;'>
                <b:if cond='data:showItemTitle == &quot;true&quot;'>
                  -
                </b:if>
                <span class='item-snippet'>
                  <data:item.itemSnippet/>
                </span>
              </b:if>
              <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                <div class='item-time'>
                  <data:item.timePeriodSinceLastUpdate/>
                </div>
              </b:if>
            </div>
          </div>
          <div style='clear: both;'/>
        </li>
      </b:loop>
    </ul>

    <b:if cond='data:numItemsToShow != 0'>
      <b:if cond='data:totalItems &gt; data:numItemsToShow'>
        <div class='show-option'>
          <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
            <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
          </span>
          <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
            <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
          </span>
        </div>
      </b:if>
    </b:if>

    <b:include name='quickedit'/>
  </div>
</div>
</b:includable>
</b:widget>

5.Now save your template and you are done.

Steps to add jQuery Scroll To Top Button to Blogger:

1. Login to Blogger.

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. Find this code within the blogger template code(using CTRL+F):

</head>

5. Paste the following code just before the above line.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

}

});

});
//]]>
</script>

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

<body>

7. Replace the above tag with the below one.

<body id='top'>

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

</body>

9. Paste the following code just before the above line.

div id='goingtop'>
<a href='#top' title='Go Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFKHjpXY2tXBsHCEr5JUv7epmTm4ZKNvkCgoOxCreUGd1_Oz6r25E1yQ3ykdPtApK61h1hGNWGeQxU72HU2ZYwurivFGjPqkYCITA23eY9e1DLJTV9ot_OTUkuhTgG1H8PgW94cThtaSSr/' style='right:20px; bottom:20px; position: fixed;'/></a></div>

You can use any other image in place of the above one(in bold).

10. Click on Save Template. You're done.

This trick will add different Meta Tags individual posts of Blogger blog.

Steps to Add Meta Tags to a Blogger/Blogspot Blog's Individual Posts:

1. Login to Blogger.

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>

6. Paste the following code immediately below the above line.

<b:if cond='data:blog.url == "URL OF YOUR POST"'>
<meta content='KEYWORDS RElATED TO THE POST' name='keywords'/>
<meta content='A SHORT DESCRIPTION OF THE POST CONTENT' name='description'/>
</b:if>

7. If you are using Blogger Home Page Meta Tags hack, then put the above code under the home page meta tag code.

7. Enter the keywords of your post between the single quote marks under keywords. Separate each keyword or keyword phrase by a comma. Around 180-200 characters should be optimal.

8. Enter your post description between the single quote marks under description. Around 130- 150 characters should be optimal.


9. Click on Save Template. You're done.

This trick will add Meta Tags only to the Home page of your Blogger blog, not to any other page.

Steps to Add Meta Tags to a Blogger/Blogspot Blog Home Page:

1. Login to Blogger.

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>

6. Paste the following code immediately below the above line.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='PUT YOUR BLOG DESCRIPTION HERE' name='description'/>
<meta content='PUT YOUR BLOG KEYWORDS HERE(SEPARATED BY COMMAS)'
name='keywords'/>
<meta content='PUT AUTHOR NAME HERE' name='author'/>
</b:if>

7. Enter your blog description between the single quote marks under description. Around 130- 150 characters should be optimal.

8. Enter the keywords of your blog between the single quote marks under keywords. Ensure you separate each keyword or keyword phrase by a comma. Around 180-200 characters should be optimal.

9. Click on Save Template. You're done.

This trick will add Meta Tags to all pages of a blogger blog. But its not very recommended as it will add the same meta tags to all pages of the blog. If you want to add a particular meta tag to the home page only, check Blogger Home Page Meta Tags hack. If you want to add separate meta tags to individual posts of your blog, check Blogger Individual Post Meta Tags hack.

But if you don't want to add separate meta tags to different pages, continue reading.

Steps to Add Meta Tags to a Blogger/Blogspot Blog:

1. Login to Blogger.

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>

6. Paste the following code immediately below the above line.

<meta content='PUT YOUR BLOG DESCRIPTION HERE' name='description'/>
<meta content='PUT YOUR BLOG KEYWORDS HERE(SEPARATED BY COMMAS)'
name='keywords'/>
<meta content='PUT AUTHOR NAME HERE' name='author'/>

7. Enter your blog description between the single quote marks under description. Around 130- 150 characters should be optimal.

8. Enter the keywords of your blog between the single quote marks under keywords. Ensure you separate each keyword or keyword phrase by a comma. Around 180-200 characters should be optimal.

9. Click on Save Template. You're done.