Tạo phân trang (page navigation) cho Blogspot

Numbered Page Navigation hack for Blogger (New & Error free)

Specially thanks to Abu Farhan for this new script. As I already stated Page navigation allows us to number blog pages(1, 2, 3 ....) like those of a book. This replaces the 'newer' and 'older' post links and give users/visitors an ability to go to the deep into your blog.

So let's add this elegant hack to your blog.



STEP 1 - Adding CSS Style



Go to Blogger Dashboard > Layout > Edit HTML. Always Download Full Template for Backup. Do NOT click on Expand Widget Templates. Now look for

]]></b:skin>

Now add following code ABOVE it.

.showpageNum a {

padding: 3px 8px;

margin:0 4px;

text-decoration: none;

border:1px solid #999;

-webkit-border-radius:3px;-moz-border-radius:3px;

background: #ddd;

}

.showpageOf {

margin:0 8px 0 0;

}

.showpageNum a:hover {

border:1px solid #888;

background: #ccc;

}

.showpagePoint {

color:#fff;

text-shadow:0 1px 2px #333;

padding: 3px 8px;

margin: 2px;

font-weight: 700;

-webkit-border-radius:3px;-moz-border-radius:3px;

border:1px solid #999;

background: #666;

text-decoration: none;

}

This is a one style code. But you can choose your suitable one. All styles are created byAbu Farhan.



CSS Style



Style 1

Style 2

Style 3

Style 4

Style 5

Style 6

Demo of Above Styles







STEP 2 - Adding JavaSript



Look for

</body>

And add following code ABOVE it.

<script type='text/javascript'>

var home_page='/';

var urlactivepage=location.href;

var postperpage=7;

var numshowpage=4;

var upPageWord ='Prev';

var downPageWord ='Next';

</script>

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

Here you can change Prev and Next Text.

var postperpage=7;

var numshowpage=4;

Postperpage : How many Posts you want to show on one Page of blog.

Numshowpage : how Many number will show in Your page Navigation



e.g. If you want to show 5 posts per page then change var postperpage=7; to var postperpage=5;



Save your Template.





STEP 3 - Label Fix (Customization)



Again go to Blogger Dashboard > Layout > Edit HTML. This time Click on Expand Widget templates.

Look for

'data:label.url'

And replace it with

'data:label.url + &quot;?&amp;max-results=7&quot;'

Again here you have to change 7 to 5 if you want to show 5 posts per page.



Save your template and view your blog.