Page navigation with google style for blogger

I have inspiration to make page navigation with google style.Now I will give this for all of you if you want to use or modify base on you template style.

Step 1 : Log in to your blogger account and navigate to Layout section. Now go to the edit HTML subtab.

Step 2 : search this line ]]></b:skin> and and add this CSS code below above ]]></b:skin> code.

#nav a,#nav a:visited,.blk a{color:#000}
        #nav a{display:block}
        #nav .b a,#nav .b a:visited{color:#20c}
        #nav .i{color:#a90a08;font-weight:bold}
        .csb,.ss{background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png) no-repeat 0 0;height:26px;display:block}
        .ss{background-position:0 -88px;position:absolute;left:0;top:0}
        .cps{height:18px;overflow:hidden;width:114px}
        .mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
        #nav td{padding:0;text-align:center}

(If you blog black background color, change the address http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png becomes http://img683.imageshack.us/img683/1649/navlogo6.png)
Step 3 : Now search for this code or related in your template ( no need to expand widgets )

<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>

Now Add This script just below the </b:section> .

if you can’t find you can search (ctrl+f) by this key ” id=’main’ ”

Now Add script below just below the </b:section> .

<script type='text/javascript'>

    var home_page_url = location.href;

    var pageCount=10;
    var displayPageNum=6;
    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 ='';

    htmlMap[htmlMap.length]='/';
    postNum++;

    for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {


        var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
        timestamp = encodeURIComponent(timestamp1);
        var title = post.title.$t;
                if(thisUrl.indexOf(timestamp)!=-1 ){
                        thisNum = postNum;
                }

                postNum++;
                htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;

    }

    var banyaknomer = htmlMap.length;
    if (json.feed.entry.length % pageCount == 0){
        var banyaknomer = htmlMap.length -1 ;
        postNum=postNum-1;
    };


    for(var p =0;p< banyaknomer;p++){
        if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
            if(fFlag ==0 && p == thisNum-2){
                if(thisNum==2){
                    upPageHtml = '<a href="/"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
                }else{
                    upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
                }

                fFlag++;
            }

            if(p==(thisNum-1)){
                if(p==0){
                    html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
                }else{
                    html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
                }
            }else{
                if(p==0){
                        html += '<td><a href="/"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';

                }else{
                    html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
                }
            }

            if(eFlag ==0 && p == thisNum){
                downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>';
                eFlag++;
            }
        }
    }

    if(thisNum>1){
        html = ''+upPageHtml+' '+html +' ';
    }
    html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+')   </td><td class="b">';
    html3 = '</tr></tbody></table>';
    html = html2+html;

    if(thisNum<(postNum-1)){
        html += downPageHtml;
    }else{
        html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
    }


    if(postNum==1) postNum++;
    html += html3+ '</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 = '<a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
    var thisUrl = home_page_url;

    htmlMap[htmlMap.length]=labelHtml;
    postNum++;

    for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
        var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
        timestamp = encodeURIComponent(timestamp1);


        var title = post.title.$t;

                if(thisUrl.indexOf(timestamp)!=-1 ){
                    thisNum = postNum;
                }

                if(title!='') postNum++;
                htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

        itemCount++;
    }

    var banyaknomer = htmlMap.length;
    if (json.feed.entry.length % pageCount == 0){
        var banyaknomer = htmlMap.length -1 ;
        postNum=postNum-1;
    };

    for(var p =0;p< banyaknomer;p++){
        if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
            if(fFlag ==0 && p == thisNum-2){



                if(thisNum==2){
                    upPageHtml = labelHtml +'<span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
                }else{
                    upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
                }

                fFlag++;
            }





            if(p==(thisNum-1)){
                if(p==0){
                    html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
                }else{
                    html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
                }
            }else{
                if(p==0){
                    html = '<td>'+labelHtml+'<span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';
                }else{
                    html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
                }
            }


            if(eFlag ==0 && p == thisNum){
                downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>';
                eFlag++;
            }
        }
    }



    if(thisNum>1){
        if(!isLablePage){
            html = ''+upPageHtml+' '+html +' ';
        }else{
            html = ''+upPageHtml+' '+html +' ';
        }
    }

    html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+')   </td><td class="b">';
    html3 = '</tr></tbody></table>';
    html = html2+html;

    if(thisNum<(postNum-1)){
        html += downPageHtml;
    }else{
        html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
    }

    if(postNum==1) postNum++;
    html += html3+ '</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 && thisUrl.indexOf(".html")==-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>

Warning :

In the code above you can edit this line only :
var pageCount=10;
var displayPageNum=6;
1 : var pageCount = 10;
The Pagecount represents number of posts to be shown in single page. Change the digit to show as many pages you want.
for example :
In my example I have put that value as 10 . In each page you can see only 10 posts .
The number have to same with your setting

The picture show from Setting –> Formatting –> Show –> 10 posts
2 : var displayPageNum = 6;
here the digit 6 represents number of pages to be listed.
For example :
In my example I have chosen 6 , then 6 pages will be shown.

Step 4: Modification Step for Label :

1 : Add Label Gadget (Layout –> page elements –> Add Gadget –> Select Labels)

2 : From Layout –> Edit HTML . Don’t Forget to backup your template (Download Full Template)

3 : Search this
<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

change with code below

<script type='text/javascript'>
var lblname = "<data:label.name/>";

lblname2 = encodeURIComponent(lblname);
var feedlink = '/search/label/' + lblname2+'?&max-results=10';
document.write('<a href="' + feedlink + '">'+lblname+'</a>');
</script>

And Click “save template”

14 comments:

Click for comment Classic

April 6, 2010 at 5:56 PM
MOTA TM said...: keren.....
tapi sayang bahasa nya inggris.....
g bs baca................

Reply; April 6, 2010 at 5:57 PM
MOTA TM said...: boleh copas g?
drmn u dpt artikel ini, kok sembarang copy aja....

Reply; April 9, 2010 at 11:24 AM
http://najibblog2010.blogspot.com said...: bAGUS TAPI KEBANYAKAN SCRIPT...

Reply; April 9, 2010 at 1:57 PM
anas urba said...: semakin bagus ja blognya

Reply; April 9, 2010 at 2:26 PM
Cara mengganti IP komputer said...: Good Tutorial sob langsung di coba

Reply; April 9, 2010 at 4:55 PM
Anonymous said...: Blog Mu Keren Banget SOb.....

Artikelnya juga menarik semua, Please kunjungi blog saya juga ya... dan FOLLOW
1. Artikel Unik

2. Artikel Teknologi

3. Free Software

4. Berita Regional dan Internasional

Pokoknya lengkap deh...

Reply; April 10, 2010 at 10:52 AM
akhatam said...: Hmm.. very goood... Tx friend...!

Reply; April 11, 2010 at 11:41 AM
Oktri darmadi said...: :j: info yg bagus nie....

Reply; April 12, 2010 at 8:50 AM
Kumpulan Tutorial Ngeblog said...: mantap Sob... tapi banyak banget yak javascriptnya????

o iya, background petirnya keren Sob...

Reply; April 14, 2010 at 10:00 PM
secangkir teh dan sekerat roti said...: panjang berbhasa asing

Reply; April 16, 2010 at 2:08 AM
tukang colong said...: wah saya kurang fasih bahasa ingris..
jadi cuma mampir aja deh..
;)

Reply; April 16, 2010 at 1:24 PM
Seti@wan Dirgant@Ra said...: Tutorial yang mantap
Makasih banyak sobat..

Reply; April 16, 2010 at 2:08 PM
tukang colong said...: aku udah follow blogmu bos..
hehe
;)

Reply; April 19, 2010 at 8:07 PM
Suratman Adi said...: info nya mantap bos,kunjung blk ya ke tmpt ku dan follow.Aq jg dah follow di blog bos. http://suratman-jaya.blogspot.com

Fanbook

Labels

Followers

Page navigation with google style for blogger

14 comments:

Post a Comment

Recent Post

mampir

Popular Posts

My Blog List

Recent comment

read this

traffic rank

paceboox

Recent Post

Fanbook

Labels

Followers

Page navigation with google style for blogger

Related Posts

14 comments:

Post a Comment

Recent Post

mampir

Popular Posts

My Blog List

Recent comment

read this

traffic rank

paceboox

Recent Post