Page Number Navigation

Actually, I have long wanted to give my blog page number navigation. In an unexpected moment, my friend 'ERGE' provides information on the navigation page numbers. I am certainly very grateful for what I want, finally I can get. I also ask permission to my friends 'ERGE', so that science would be given the post here.

There are 2 versions that I will discuss about the navigation page numbers here, namely through the 'Edit HTML' and 'Add Widget'.

Through the Menu 'Edit HTML'

1. Login to Blogger Dashboard and navigate to Layout > Edit HTML

2. Don’t click the checkbox which says ‘Expand Widget Templates’

3. Now search code :

]]></b:skin>

Replace with the following code :

.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;
}
]]></b:skin>

This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need.

4. Next is the JavaScript part. Search code :

</body>

Replace it with :

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js' type='text/javascript'/>
</b:if>
<!--Page Navigation Ends-->
</body>

5. Save your Template & Finish.

Customizable parameters code

var pageCount=5;

This code determines the number of posts that would be displayed per page.

var displayPageNum=5;

This code determines the number of additional page navigation numbers that will be displayed on the page.

var upPageWord ='Previous';
var downPageWord ='Next';

Now you should have the Blogger Page Navigation working perfectly on your blog.


Through The 'Add Widget'

1. Login to Blogger Dashboard and navigate to 'Layout'

2. Choose 'Add a Widget'

3. Then Select 'HTML/Javasript'

4. Copy the code below :

<style>
.blog-pager {
text-align: center;
margin-top: 10px;
font-size: 0.75em;
font-weight:
bold;
}

.showpageArea a {
text-decoration:underline;
padding: 2px 6px 2px 6px;
color: #333;background: #101010;
margin: 2px;
}
.showpagePoint {
padding: 2px 6px 2px 6px;
color: #FF6600;
background: #a0c800;
border: 1px solid #ccc;
margin: 2px;}

/*Current page*/
.showpageOf {
padding: 2px 6px 2px 6px;
color: #333;
background:#101010;
border: 1px solid #ccc;
margin: 2px;
}

/* Page (1), Page(2) ... */
.showpageNum a {
text-decoration:none;
padding: 2px 6px 2px 6px;
color: #0066cc;
background: #101010;
border: 1px solid #ccc;
margin: 2px;
}

.showpageNum a:hover {
border: 1px solid #aaa;
background-color:#ccc;
color: #ff9600;
}

.showpageNum a:link {
text-decoration:none;
color:#333;
}

.showpage a {
text-decoration:none;
padding: 2px 6px 2px 6px;
color: #0066cc;
background: #F20808;
border: 1px solid #ccc;
margin: 2px;

} /* Next, Prev...*/
.showpage a:hover {
padding: 2px 6px 2px 6px;
color: #F20808;
background-color:#FF6600;
border: 1px solid #aaa;
margin: 2px;
}

.showpage a:link {
text-decoration:none;
color:#333;
}
</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=3;
var displayPageNum=6;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
var downPageWord ='Next';


var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span class="showpage"> Page '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

5. Paste on the box 'HTML/Javasript' and 'Save'.

6. Drag & drop below the 'Widdget box post'



7. Finish