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.

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

Manchester United Tech | Berita Sepak Bola

September 11, 2011 at 5:01 AM

@Jennifer it's good page nav

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