Learn How To Become a blogger ,Free Templates,Blogger Widgets, Blogger Gadgets,Blogger Tricks And Tips ,Download browsers,software,Net

Thursday, August 9, 2012

New And Easy Numbered Page Navigation for Blogger

Page Navigation for Blogger,add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friendly visitor. Now here is a completely new script and work for numbered page navigation for Blogger.This new script allows you to add numbered page navigation to blogger/ blogspot blog with page numbers starting(1, 2, 3, 4 ….) like those of a book.











Step 1 : Apply Style
  1. Login to Blogger Dashboard and navigate to Template> Edit Html
  2. Don't click the checkbox which says “Expand Widget Templates” Find this
  3. Find this
]]></b:skin>
 and replace it with
/*------- pages-numbers-www.bloggertofree.blogspot.com/-----------*/
.showpageArea{font-family:verdana,arial,helvetica; color:#000; font-size:18px; margin:10px}
.showpageArea a{color:#000; padding-top:40px; text-shadow:0 1px 2px #fff; font-weight:400}
.showpageNum a{padding:0px 8px 0px; margin:1px 4px; text-decoration:none; border:2px solid #0090D5; -webkit-border-radius:3px}
.showpageNum a:hover{background-color:#000; color:#fff; padding:0px 8px 0px; border:1px solid #6F6F6F}
.showpageOf{margin:0 8px 0 0}
.showpagePoint{color:#fff; text-shadow:0 1px 2px #333; padding:0px 8px 0px; margin:2px; font-weight:400; -webkit-border-radius:3px; border:1px solid #2A2A2A; background-color:#ff0000; text-decoration:none}
/*------- pages-numbers -----------*/

Step 2 : Aplly Javascript
Find This :
</body>
Replace with :
 <script style='text/javascript'>
var pageCount=3;
var displayPageNum=5;
var upPageWord=&quot;<img onmouseout='this.style.opacity=0.80;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='http://2.bp.blogspot.com/-WFeg4S6qfqE/UBoSawhxhZI/AAAAAAAABWE/gE5NHPg0FkI/s1600/leftarrow.png' style='opacity:0.80;filter:alpha(opacity=80)'/>&quot;;
var downPageWord=&quot;<img onmouseout='this.style.opacity=0.80;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='http://2.bp.blogspot.com/-Ygt15OKAbeQ/UBoSCAvIteI/AAAAAAAABV0/7q1SEGjOTqU/s1600/rightarrow.png' style='opacity:0.80;filter:alpha(opacity=80)'/>&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var home_page_url=location.href;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='';var upPageHtml='';var downPageHtml='';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!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&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){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">'+thisNum+'</span>'}else{if(p==0){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++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-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 labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';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!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&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){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'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++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script></body>
Change based on your blog setting :
var postperpage=5;
var numshowpage=3;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

I hope to gain your admiration , develop by me

0 comments:

Post a Comment

Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
JeHad Hussein

Note: Only a member of this blog may post a comment.

Subscribe via email for free

Activate your subscription by clicking on the link in an email from Feedburner. We respect your privacy.

Most Popular

 

random topics

Followers

Are you looking for?

Become a Fan On Facebook!

Follow @Bloggertofree