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:

Numbered Page Navigation Widget for Blogger

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>

The Author

Dr. Sujon Paul

Hello! I am Dr. Sujon Paul. I am professionally a doctor, but love to write blogs and update SUJONHERA.COM regularly with fresh contents. Thank you for visiting SUJONHERA.COM. Contact me on Facebook, Twitter & Google Plus. Don't forget to subscribe SUJONHERA.COM on Facebook, Twitter & Google Plus.

Leave a Reply

Type your comment, your name and email address in the below boxes. Then click on the Post Comment button. Your email address is required, but will not be published.

  1. Thanks for nice sharing about add page number navigation widget. It is an excellent post for add nice page navigation in blogger blog. I must use this post for my site. Thanks again.

  2. This post is very effective post and useful plugins which I was looking for.
    This post has increase my Knowledge.
    So thanks for this post.

  3. Nice and Helpful tips for blogger website. See more

SUJONHERA.COM © 2012-2016 | About | Contact | Sitemap | Disclaimer | Privacy Policy | Copyright Plocy | Terms and Conditions
Shares