Blogging Tips For Beginner: How To Add Next Page Button Within Your Blog

By: Hendra Suhendra on 09:02

How are you doing today? I hope it is all in good condition. This article has been written by me within my Indonesian language blog. But now I will share it within English language.

You could see, many bloggers have the next page button on their blog to give easiness to the visitors to find the next article within their blog. This button was located under the blog's posts.

So, let us see these steps carefully. The process only need less then 10 minutes.

1. The first step is how to setting the total of posts that will be showed on the main page within your blog.

Please log in to your Blogger account HERE.

Click Setting --> Post and Comments --> Change your total posts on the main page. See the following picture :

Click Save Settings

2. The second step is how to copying the code and put it into your blog.

Click Layout --> Add a Gadget --> Add HTML/JavaScript. See the following picture :

Copy the following code into your blog :

</style>

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=5;
var displayPageNum=6;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Previous';
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"> Pages '+(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>

Click Save.

Then click Save arrangement.

Now you have got your own next page button within your blog.

THIS IS THE SAMPLE OF THE NEXT PAGE BUTTON

The visitors now can enjoy reading each article within your blog and they will enjoy their visit within your blog with your new next page button.

Hope it is useful...

Thursday 5 February 2015

How To Add Next Page Button Within Your Blog

No comments:

Post a Comment