Thursday, February 28, 2013

Changing Blog Page By the Page Number Navigation

at 10:19 AM
6 Comments

In general, the navigation to move pages in blogspot typically use a link with the text "Older Posts (old post)" and "Newer Posts (new post)". Differences with wordpress that can navigate shaped figures that can make it easier to skip a few pages to post that old and new. This tutorial I will explain how to change the link "Older Posts (long post)" and "Newer Posts (new post)" a figure as shown below:

Page Number Navigation

To make the "blog page" like the above way is quite easy, here are the steps:


  1. Go To Blogger > Design > Edit HTML
  2. Back up your template
  3. Search (Ctrl+F) for  ]]></b:skin>
Past below code above ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

 4. Then look up the code </ body> and add the following code on it:

<!--Page Navigation Starts--><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='https://bloggerknown.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends --> 
 5. Click the preview first, if there is no error click save.

Change page count 5 and display page Num 5


Get Free Updates:

6 comments:

Your feedback is always appreciated. we'll try to reply to your queries as shortly as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please don't spam Spam comments will be deleted immediately upon our review.

Regards,
Mohammad Azeem