How to Add Page Pagination in Blogger

Page Navigation is very helpful to navigate the posts in your blog,and it helps your readers to move deep archive. It can include Beautiful page navigation in your blog. Here i give a small step-By-step guide to add this to your blog . Myself also included this navigation in my blog.Have a Look at it. :)

Copy the CSS Code Below and Paste it in HTML code before </b:skin>

div.pagination {

font-size: 11px;

font-family: Tahoma, Arial, Helvetica, Sans-serif;

padding:2px;

background-color:#c1c1c1;

}

div.pagination a {

padding: 2px 5px 2px 5px;

margin: 2px;

background-color:#c1c1c1;

text-decoration: none; /* no underline */

color: #000;

}

div.pagination a:hover, div.pagination a:active {

background-color:#99ffff;

color: #000;

}

div.pagination span.current {

padding: 2px 5px 2px 5px;

margin: 2px;

font-weight: bold;

background-color: #fff;

color: #303030;

}

div.pagination span.disabled {

padding: 2px 5px 2px 5px;

margin: 2px;

background-color:#c1c1c1;

color: #797979;

}

Now Search for :

<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>

Now add Below Code after the above Code.

&lt;script type=&quot;text/javascript&quot;&gt;



function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;

var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;

var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;

var thisLable = isLablePage ?   thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length)   : &quot;&quot;;

thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ?   thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) :   thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= &#39;&#39;;

var upPageHtml =&#39;&#39;;

var downPageHtml =&#39;&#39;;



var pageCount = 5;

var displayPageNum = 5;

var upPageWord = &#39;Previous&#39;;

var downPageWord = &#39;Next&#39;;







var labelHtml = &#39;&lt;span   class=&quot;showpageNum&quot;&gt;&lt;a   href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;



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!=&#39;&#39;){

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] =   &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

}

}//end if(post.category){



itemCount++;

}



}else{

if(title!=&#39;&#39;){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



if(title!=&#39;&#39;) postNum++;

htmlMap[htmlMap.length] =   &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

itemCount++;

}

}



for(var p =0;p&lt; htmlMap.length;p++){

if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

if(fFlag ==0 &amp;&amp; p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

upPageHtml = &#39;&lt;span   class=&quot;showpage&quot;&gt;&lt;a   href=&quot;/&quot;&gt;&#39;+ upPageWord   +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}

}else{

upPageHtml = &#39;&lt;span   class=&quot;showpage&quot;&gt;&lt;a   href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+   upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}



fFlag++;

}



if(p==(thisNum-1)){

html += &#39;&lt;span   class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;

}else{

if(p==0){

if(isLablePage){

html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

html += &#39;&lt;span   class=&quot;showpageNum&quot;&gt;&lt;a   href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;

}

}else{

html += &#39;&lt;span   class=&quot;showpageNum&quot;&gt;&lt;a   href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+   (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}

}



if(eFlag ==0 &amp;&amp; p == thisNum){

downPageHtml = &#39;&lt;span   class=&quot;showpage&quot;&gt; &lt;a   href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+   downPageWord   +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

eFlag++;

}

}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

}//end for(var p =0;p&lt; htmlMap.length;p++){



if(thisNum&gt;1){

if(!isLablePage){

html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;

}else{

html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;

}

}



html = &#39;&lt;div   class=&quot;showpageArea&quot;&gt;&lt;span   style=&quot;COLOR: #000;&quot;   class=&quot;showpageOf&quot;&gt; Pages   (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;



if(thisNum&lt;(postNum-1)){

html += downPageHtml;



}



if(postNum==1) postNum++;

html += &#39;&lt;/div&gt;&#39;;



if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName(&quot;pageArea&quot;);

var blogPager = document.getElementById(&quot;blog-pager&quot;);



if(postNum &lt;= 2){

html =&#39;&#39;;

}



for(var p =0;p&lt; pageArea.length;p++){

pageArea[p].innerHTML = html;

}



if(pageArea&amp;&amp;pageArea.length&gt;0){

html =&#39;&#39;;

}



if(blogPager){

blogPager.innerHTML = html;

}

}



}

&lt;/script&gt;



&lt;script   src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;;    type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

}

Now Save it .And refresh your Blog.

Terimakasih anda telah membaca artikel tentang How to Add Page Pagination in Blogger. Jika ingin menduplikasi artikel ini diharapkan anda untuk mencantumkan link https://kadangkumatmyblog.blogspot.com/2011/05/how-to-add-page-pagination-in-blogger.html. Terimakasih atas perhatiannya.

kadang - kumat myblog

Related Posts