Simple Numbered Page Navigation Widget For Blogger

Blogger default templates do not have numbered page navigation. But visitors need page navigation for reading all posts of your blog easily. So, you need a Numbered Page Navigation Widget for your Blogger Blog. I am providing a simple Numbered Page Navigation Widget here. I personally use this widget in my blogger blog!

SCREENSHOT PREVIEW:

HOW TO ADD THIS WIDGET:

1. Log in to your Blogger account.

2. Click on Layout option of your blog.

3. Click on Add a Widget option. A new window will appear.

4. Select HTML/JAVASCRIPT option. Then copy-paste the following widget code in the box.

5. Click on SAVE and check your blog!

WIDGET CODE:

<style type=’text/css’>
.showpageArea a {
text-decoration:none;
}
.showpageNum a {
display: inline-block;
padding: 0px 9px;
margin-right: 4px;
border-radius: 3px;
border: solid 1px #c0c0c0;
background: #e9e9e9;
box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #717171;
text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}
.showpageNum a:hover {
padding: 0px 9px;
margin-right: 4px;
border-radius: 3px;
border: solid 1px #c0c0c0;
background: #de7d26;
box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #717171;
text-shadow: 0px 1px 0px rgba(255,255,255, 1)
}
.showpagePoint {
display: inline-block;
padding: 0px 9px;
margin-right: 4px;
border-radius: 3px;
border: solid 1px #c0c0c0;
background: #e9e9e9;
box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #717171;
text-shadow: 0px 1px 0px rgba(255,255,255, 1)
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
display: inline-block;
padding: 0px 9px;
margin-right: 4px;
border-radius: 3px;
border: solid 1px #c0c0c0;
background: #e9e9e9;
box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #717171;
text-shadow: 0px 1px 0px rgba(255,255,255, 1)
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}
</style>
<script type=’text/javascript’>
var home_page_url = location.href;
var pageCount=5;
var displayPageNum=4;
var upPageWord =’Previous';
var downPageWord =’Next';
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 class=”showpageOf”> Pages (‘ (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 class=”showpageOf”> Pages (‘ (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;
}
}
</script>
<script type=’text/javascript’>
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){
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>