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 ]]> and and add this CSS code below above ]]> 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 )

Now Add This script just below the .



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



Now Add  script below just below the .

    ')             }else{document.write('')             }         }    

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





change with code below

And Click “save template”