Tutorial: Letak Navigation Page Number Pada Blog!

Tweet

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

Mengenai Penulis:

Kaki Wayang mula terlibat dan serius dalam dunia penulisan kreatif sejak tahun 2006. Beliau juga terlibat dalam penciptaan lagu dan lirik lagu Nasyid dan pernah menjulang nama Politeknik Muadzam Shah apabila menjuarai Pertandingan Lagu-lagu Patriotik di PNM, Kuala Lumpur pada tahun 2007.

Ikuti perkembangan terbaru beliau melalui @ Blog Paling Hangat! | Facebook