Home » Blog Tutorial » Put Page Number Navigation

Dida 19:10 Blog Tutorial Edit

Put Page Number Navigation

Maybe his gentlemen who never saw the blog under the column there is navigation posting form of numbers from the page, before I figured that if the page number will appear automatically after posting in the blog a lot.
It turns out that I think a big mistake and it turns out these navigational pages can appear if we make it.

As for how to create a navigation page numbers for blogger or blogspot there are two kinds of ways, namely as follows:

First Mode :
Namely by putting code in the code your own template. The trick is as follows:
1. Login to Blogger.com.
2. Select and click Layout Menu.
3. Click Edit Html Menu and Check the small box beside writing Expand Widget Templates.
4. Further search the following code:

]]></b:skin>

If you have found, copy the CSS code below and put it above the code:

<br />/*--- Page Number Navigation ---*/<br />.showpageArea a {<br />text-decoration:underline;<br />}<br />.showpageNum a {<br />text-decoration:none;<br />border: 1px solid #cccccc;<br />margin:0 3px;<br />padding:3px;<br />}<br />.showpageNum a:hover {<br />border: 1px solid #cccccc;<br />background-color:#cccccc;<br />}<br />.showpagePoint {<br />color:#333;<br />text-decoration:none;<br />border: 1px solid #cccccc;<br />background: #cccccc;<br />margin:0 3px;<br />padding:3px;<br />}<br />.showpageOf {<br />text-decoration:none;<br />padding:3px;<br />margin: 0 3px 0 0;<br />}<br />.showpage a {<br />text-decoration:none;<br />border: 1px solid #cccccc;<br />padding:3px;<br />}<br />.showpage a:hover {<br />text-decoration:none;<br />}<br />.showpageNum a:link,.showpage a:link {<br />text-decoration:none;<br />color:#333333;<br />}<br />.comment-body-author {<br />background:#99FF00;<br />border:1px dotted #FF6600;<br />margin:0;<br />padding:0 0 0 20px;<br />}

5. Then find code below :

</body>

If you have found a copy code below and put it in code or code below:</head>

7. Click the button marked Image to see the results of a mate changes made before the template is stored.
8. If you are in accordance with the wishes buddy, click the button marked Save Template.
9. Done.

Both Ways
This method is much easier than the above. As for how to make it as follows:
1. Click Layout Menu.
2. Click Add Gadget writing, select HTML / Javascript.
3. Then copy code below and paste it on the box that appears:

<style><br />.showpageArea a {<br />text-decoration:underline;<br />}<br />.showpageNum a {<br />text-decoration:none;border: 1px solid #ccc;margin:0 3px;padding:3px;<br />}<br />.showpageNum a:hover {<br />border: 1px solid #ccc;background-color:#ccc;<br />}<br />.showpagePoint {<br />color:#333;text-decoration:none;border: 1px solid #ccc;background: #ccc;margin:0 3px;padding:3px;<br />}<br />.showpageOf {<br />text-decoration:none;padding:3px;margin: 0 3px 0 0;<br />}<br />.showpage a {<br />text-decoration:none;border: 1px solid #ccc;padding:3px;<br />}<br />.showpage a:hover {<br />text-decoration:none;<br />}<br />.showpageNum a:link,.showpage a:link {<br />text-decoration:none;<br />color:#333;<br />}<br /></style><br /><br /><script type="text/javascript"><br />function showpageCount(json) {<br />var thisUrl = location.href;<br />var htmlMap = new Array();<br />var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";<br />var isLablePage = thisUrl.indexOf("/search/label/")!=-1;<br />var isPage = thisUrl.indexOf("/search?updated")!=-1;<br />var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";<br />thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;<br />var thisNum = 1;<br />var postNum=1;<br />var itemCount = 0;<br />var fFlag = 0;<br />var eFlag = 0;<br />var html= '';<br />var upPageHtml ='';<br />var downPageHtml ='';<br /><br /><span style="color: rgb(255, 0, 0);">var pageCount=5;</span><br />var displayPageNum=6;<br />var firstPageWord = 'First';<br />var endPageWord = 'last';<br />var upPageWord ='Back';<br />var downPageWord ='Next';<br /><br />var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';<br />for(var i=0, post; post = json.feed.entry[i]; i++) {<br />var timestamp = post.published.$t.substr(0,10);<br />var title = post.title.$t;<br />if(isLablePage){<br />if(title!=''){<br />if(post.category){<br />for(var c=0, post_category; post_category = post.category[c]; c++) {<br />if(encodeURIComponent(post_category.term)==thisLable){<br />if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />if(thisUrl.indexOf(timestamp)!=-1 ){<br />thisNum = postNum;<br />}<br />postNum++;<br />htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;<br />}<br />}<br />}<br />}//end if(post.category){<br />itemCount++;<br />}<br />}else{<br />if(title!=''){<br />if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />if(thisUrl.indexOf(timestamp)!=-1 ){<br />thisNum = postNum;<br />}<br />if(title!='') postNum++;<br />htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;<br />}<br />}<br />itemCount++;<br />}<br />}<br />for(var p =0;p< htmlMap.length;p++){<br />if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br />if(fFlag ==0 && p == thisNum-2){<br />if(thisNum==2){<br />if(isLablePage){<br />upPageHtml = labelHtml + upPageWord +'</a></span>';<br />}else{<br />upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';<br />}<br />}else{<br />upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';<br />}<br />fFlag++;<br />}<br />if(p==(thisNum-1)){<br />html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';<br />}else{<br />if(p==0){<br />if(isLablePage){<br />html = labelHtml+'1</a></span>';<br />}else{<br />html += '<span class="showpageNum"><a href="/">1</a></span>';<br />}<br />}else{<br />html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';<br />}<br />}<br />if(eFlag ==0 && p == thisNum){<br />downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';<br />eFlag++;<br />}<br />}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br />}//end for(var p =0;p< htmlMap.length;p++){<br />if(thisNum>1){<br />if(!isLablePage){<br />html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';<br />}<br />}<br />html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;<br />if(thisNum<(postNum-1)){<br />html += downPageHtml;<br />}<br />if(postNum==1) postNum++;<br />html += '</div>';<br />if(isPage || isFirstPage || isLablePage){<br />var pageArea = document.getElementsByName("pageArea");<br />var blogPager = document.getElementById("blog-pager");<br />if(postNum <= 2){<br />html ='';<br />}<br />for(var p =0;p< pageArea.length;p++){<br />pageArea[p].innerHTML = html;<br />}<br />if(pageArea&&pageArea.length>0){<br />html ='';<br />}<br />if(blogPager){<br />blogPager.innerHTML = html;<br />}<br />}<br />}<br /></script><br /><script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

4 . Done and click button marked Save.

Description:
var pageCount=5 => shows the number of posts that appear on one page.

Finish and see good luck.