Artisteer Tutorials, Tips & Tricks: Add numbered page navigation to your Artisteer template (REQ)

Add numbered page navigation to your Artisteer template (REQ)

Wednesday, May 04, 2011 |

Posted by ArtisTutor | Edit Post

1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find ]]></b:skin>. Above him paste the next code:

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPYmhT2dUIS02-LUJVBGJkXL6DTtAfRFalFe4lbXrTFvClKxCwZCHYBo3TNgzCi4V_EDO5bDFDa9exHMXGt_Z_lrCOV_oUlMMpYPnmr8hauS7la1fOeI89arj4KK25v_UXuak1Dj4QGOM/s1600/wp1.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPYmhT2dUIS02-LUJVBGJkXL6DTtAfRFalFe4lbXrTFvClKxCwZCHYBo3TNgzCi4V_EDO5bDFDa9exHMXGt_Z_lrCOV_oUlMMpYPnmr8hauS7la1fOeI89arj4KK25v_UXuak1Dj4QGOM/s1600/wp1.jpg) 0 -25px repeat-x;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPYmhT2dUIS02-LUJVBGJkXL6DTtAfRFalFe4lbXrTFvClKxCwZCHYBo3TNgzCi4V_EDO5bDFDa9exHMXGt_Z_lrCOV_oUlMMpYPnmr8hauS7la1fOeI89arj4KK25v_UXuak1Dj4QGOM/s1600/wp1.jpg) 0 0 repeat-x;
text-decoration: none;
}

4. The next step is to find:

</b:section>
        
        </div>    
</div>
    <div class='cleared'/>
    
        </div>
    </div>
    <div id='footer-wrapper'>
        <b:section class='footer' id='footer'/>

and between </b:section> and </div> paste the following code:

<script type='text/javascript'>

var home_page_url = location.href; 


var pageCount=7;
  var displayPageNum=9;
  var upPageWord =&#39;Previous&#39;;
  var downPageWord =&#39;Next&#39;;


function showpageCount(json) {
  var thisUrl = home_page_url;
  var htmlMap = new Array();
  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;;

 

 

for(var i=0, post; post = json.feed.entry[i]; i++) {

 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
  timestamp = encodeURIComponent(timestamp1);


  var title = post.title.$t;

 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;&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){
  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){
  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++;
  }
  }
  }

  if(thisNum&gt;1){
  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;;


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;
  }


}


function showpageCount2(json) {

var thisUrl = home_page_url;
  var htmlMap = new Array();
  var isLablePage = thisUrl.indexOf(&quot;/search/label/&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 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;;
  var thisUrl = home_page_url; 


for(var i=0, post; post = json.feed.entry[i]; i++) {

 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
  timestamp = encodeURIComponent(timestamp1);



  var title = post.title.$t;

 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/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;&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){
  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;&#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){
  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;&#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++;
  }
  }
  }

  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;;

  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;
  }


}


</script>

<script type='text/javascript'>

 var thisUrl = home_page_url;
  if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
  if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
  var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
  }else{
  var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
  }
  }

 var home_page = &quot;/&quot;;
  if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){ 
  if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){ 
  document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;)
  }else{document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/full/-/&#39;+lblname1+&#39;?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;)
  }
  }
  </script>

Change the value of var pageCount=7; with the number of post to appear on the page. This number must be the same with the number of post setup in the settings of your blog.
The settings can be found by going to Dashboard -- Setting -- Formatting -- Show -- 7 posts

5. Save the template.

| | | |

Save on Delicious

Get Latest Updates For Free!

Subscribe via Email

8 comments

Jennifer

May 5, 2011 at 2:50 PM

Thanks. It' working just fine for my blog.

Manchester United Tech | Berita Sepak Bola

September 11, 2011 at 5:01 AM

it's good page nav

Amy

May 7, 2011 at 6:29 PM

For some reason this isn't showing! Help!

ArtisTutor

May 7, 2011 at 9:08 PM

Give me the link to your blog

Rebel_Spirit06

June 25, 2011 at 10:01 AM

Hmmm I just added the 3 column bottom link and now this has disappeared. I ended up trying to install the code again but after previewing it I ended up taking the code out all together. Help!

June 25, 2011 at 11:00 AM

I don't understand what you say. Put a print screen or something to see it .

June 26, 2011 at 12:44 AM

will do

Charlotte

September 30, 2011 at 4:34 PM

Thanks! I will try it out and see if it works ;-)

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Add numbered page navigation to your Artisteer template (REQ)

Get Latest Updates For Free!

8 comments

Click to Add a New Comment

Leave your comment

Popular Posts

Find us on Facebook

Followers

Categories

Stay in touch

Add numbered page navigation to your Artisteer template (REQ)

Other Tutorials For You To See:

How to add Twitter Follow me button to Artisteer made templates

How to show only post title in homepage, labels and archive in an Artisteer made template

How to add a signature to your posts

How to have numbered comments in your blog

How to add Facebook Like and Twitter button to your Artisteer made template (updated)

How to change "Older post, Newer post and Home" links with images in blogger templates

Get Latest Updates For Free!

8 comments

Click to Add a New Comment

Leave your comment

Popular Posts

Find us on Facebook

Followers

Categories

Stay in touch