This template does not have the Numbered Page Navigation code embedded into the template so you have to manually add it to your blog as a widget after uploading this template to your blog. Below is the entire code for the Numbered Page Navigation widget as displayed on this blog.
To add the widget to your blog.... copy all the code below and then go to your "Page Elements" tab. Click on any "Add a Gadget" and then select a "HTML/Javascript" gadget from the "Basic" list. Paste the entire code into that gadget then scroll down to the very bottom of all the code. At the very bottom of the code you have to replace my blog's url (which I have highlighted in red) with your blog's url. You only need the first part of your url that comes after the "http://". Remember, do not add the extra .blogspot.com after the first part of your url otherwise you will have to delete the extra .blogspot.com.
Before you click on "save" you might want to change the number of posts that will be displayed on each page. Scroll down to the number 2 which is highlighted in blue and change it to another number.
(The line of code to change is: var pageCount=2;)
If, for example, you want 5 posts to be displayed on each page, change the 2 to a 5.
The orange coloured 10 you might want to also change.
(The line of code to change is: var displayPageNum=10;)
This particular number to be changed displays how many page numbers (page numbers that are visible within the widget itself) that will be displayed on your blog. For example, if you have 100 pages on your blog with 7 posts per page (standard feature to blogger), then the first 10 pages tabs will be displayed on the widget. So, it will show page 1, page 2, page 3, page 4, page 5, page 6, page 7, page 8, page 9, and page 10 on the widget, as well as the "next" and "last" on your home page. It will also show the "previous" on any other page if using that page navigation feature. So, make sure you pick a number that is not too large for your blog, so that you don't have too many page numbers to choose from to click onto.
Once you have done that then you can click on "save" to save the widget. Finally, move that widget to below your blog posts and click on "save" on the top right hand side of that page (Page Elements) and you are done, well, almost. You then need to click on the "edit" button on the "blog post" section whilst still on the "Page Elements" section. At the very top of that section change the number of posts to be displayed to match the number in your Numbered Page Navigation widget, then click on "save". Now you are done.
Start copying the code below!
<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
font-weight: bold;
text-decoration:none;
border: 1px solid #00ff00;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ff0000;
background-color:#ff0000;
}
.showpageNum a:visited {
color:#00ff00;
}
.showpagePoint {
color:#fff;
font-weight: bold;
text-decoration:blink;
border: 1px solid #00ff00;
background: url(http://www.mikesfreegifs.com/main4/alien/earthclr.gif);
margin:0 3px;
padding:3px 6px 3px 6px;
}
.showpageOf {
color:#ffffff;
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
color:#ffffff;
text-decoration:none;
border: 1px solid #00ff00;
margin:0 3px;
padding:3px;
}
.showpage a:hover {
border:#ff0000 1px solid;
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#ffffff;
}
</style>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-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 pageCount=2;
var displayPageNum=10;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
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!=''){
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] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
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+'T00%3A00%3A00%2B08%3A00&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){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
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"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
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++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 0px solid #00ff00; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
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;
}
}
}
</script>
<script src="http://aliensaliensandmorealiens.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
