Numbered Page Navigation for Blogger

Blogger is a good blogging platform for new people and it is easier and of course Free.

Despite so many cool things, Blogger sucks in most of the areas, I mean it is good if you're beginning but as you progress and for more professionalism you'll find yourself disabled with blogger and a strong urge of switching to Wordpress will rise but if you can't afford Wordpress Hosting, that doesn't mean that you can't make a professional looking blog with Blogger.

 

There are a lot of Widgets and Add ons which can make Blogger Awesome. With Widgets, we can add cool features for better blogging and navigation. Today we'll talk about one such feature and that is 'Numbered Page Navigation'.

How to Add Numbered Page Navigation to Blogger

This is a common feature, I don't know why Blogger lacks this feature but anyways we can add it to our blogs. If you want to add Numbered Page Navigation to your blogs then follow the steps given below.

Step 1: From Blogger Dashboard, Go to Layout

Step 2: Now Click on 'Add a Gadget' and Select 'HTML/Javascript' Widget.

Step 3: Now Paste the following code inside the Widget (HTML/Javascript)

<style type='text/css'>

    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    border:1px solid #aeaeae;
    margin:0 3px;
    padding:3px 7px;
    text-decoration:none;
    }
    .showpageNum a:hover {
    background-color:#0a8be5;
    border:1px solid #000000;

    }
    .showpagePoint {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#aeaeae none repeat scroll 0 0;
    border:1px solid #aeaeae;
    color:#333333;
    margin:0 3px;
    padding:3px 7px;
    text-decoration:none;
    }
    .showpageOf {
    margin:0 3px 0 0;
    padding:3px 7px;
    text-decoration:none;
    }
    .showpage a {
    border:1px solid #aeaeae;
    padding:3px 7px;
    text-decoration:none;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link, .showpage a:link {
    color:#333333;
    text-decoration:none;
    }

    </style>


    <script type='text/javascript'>

    var home_page_url = location.href;

    var pageCount=1;
    var displayPageNum=3;
    var upPageWord ='Previous';
    var downPageWord ='Next';

    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"><span  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  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;
    }

    }

    </script>
    <script type='text/javascript'>

    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>

Step 4: Now Click on Save button.

Congratulations! Now you've successfully added Numbered Page Navigation to your Blogger blog. This is How it'll Look,

Hope you guys liked this tutorial, Please leave your comments below. More tutorials coming soon.

About Author
Jimmie Luthra is founder of The-Area51.com. He is a Cadet in Merchant Navy and a Part time Blogger. He is 20 and lives in Mumbai. You can Follow him on Twitter, Facebook and Google+

SHARE

About Jimmie Luthra

Jimmie Luthra is a Mariner, Tech enthusiast, Blogger and Gadget reviewer. He is fond of technology and is usually found playing with some piece of tech. He is also a Guitarist, Music lover & fitness freak.