Tutorial: Letak Navigation Page Number Pada 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 BEFORE it.

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }
 
.showpageArea a {
  color: #fff;
  }
 
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #363636 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNfwNHgZFknVk8tqNlCcU4n9Z0eYQFmii_i4fdR9qvoTnzDm6X3HEMDB9NOqJjqqS9kKzVE6rhmap7HZXPllc_xu3pAptzNma-ophCQtKB9pkHtUBAmMBKJQVHhmVCPrO7EpZ8DH1OxRM/s1600/wp3.jpg) 0 -25px repeat-x;
  }
 
.showpageNum a:hover {
  background: #044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNfwNHgZFknVk8tqNlCcU4n9Z0eYQFmii_i4fdR9qvoTnzDm6X3HEMDB9NOqJjqqS9kKzVE6rhmap7HZXPllc_xu3pAptzNma-ophCQtKB9pkHtUBAmMBKJQVHhmVCPrO7EpZ8DH1OxRM/s1600/wp3.jpg) 0 -50px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNfwNHgZFknVk8tqNlCcU4n9Z0eYQFmii_i4fdR9qvoTnzDm6X3HEMDB9NOqJjqqS9kKzVE6rhmap7HZXPllc_xu3pAptzNma-ophCQtKB9pkHtUBAmMBKJQVHhmVCPrO7EpZ8DH1OxRM/s1600/wp3.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

STEP 2 - Adding JavaSript

Look for

</body>

And add following code BEFORE it.

&lt;script type='text/javascript'&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
&lt;/script&gt;
&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;&lt

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 + "?&max-results=7"'  

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.

Source: ABU

Sila baca selanjutnya → Tutorial: Letak Navigation Page Number Pada Blog!