Add Page Navigation Widget On Your Blog

Page Navigation widget is an alternative for Newer post, Home and Older post links at the bottom of the blogger. The page navigation widget look more nice and better than Newer post, Home and Older post links. It is simple to add this widget on your blog. I will show you the process step by step. So lets start.

Add Page Navigation Widget On Your Blog

  • Go to Blogger>Design>Page Element
  • Click Add a Gadget option
  • Select HTML/JavaScript option. Copy Search Box Code from below and paste that code in it. 
<style type="text/CSS"> .showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #7AA1C3; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #7AA1C3; background-color:#F6F6F6; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #7AA1C3; background: #F6F6F6; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #7AA1C3; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#7AA1C3; } </style> <script type="text/JavaScript"> function showpageCount(json) { var thisUrl = location.href; var htmlMap = new Array(); var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".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 = 5; 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">'+thisNum+'</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 = ''+upPageHtml+' '+html +' '; }else{ html = ''+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } 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="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>
Note:
If you are using domain name other than blogspot.com or .com, then change the bolded red text .com from above code with your domain extension, such as .info or .net .
  • After you made the changes Save the widget and drag the widget just below your Blog Posts area as shown in picture below.

Happy Blogging :)

COMMENTS

Name

Aastha Band,1,Alcatel,1,Android,17,Android One,1,Anju Pant,26,Apple,18,ARK,3,Badri Pangeni,1,Basanta Thapa,2,Bhojraj Kafle,2,Bima Kumari Dura,6,Bimal Raj Chhetri,2,Bindu Pariyar,5,Birahi Karki,1,Bishnu Khatri,2,Bishnu Majhi,8,Blogger,130,Blogger Templates,16,Blogger Widgets,57,Blogging Tips and Tricks,74,BQ,1,Car Price in Nepal,2,Celkon,4,CG TV,1,Colors,9,Computer Tips,58,Dashain,1,Dashain Tihar Songs,43,Datsun,1,Deepak Limbu,8,Dell,2,Deuda,1,Devi Gharti,30,English Jokes,24,Entertainment,948,Facebook,39,FIFA World Cup,2,Fonts,5,Free Giveaway,6,Free Icons,3,Free SMS,5,Gionee,3,Google,16,Google Plus,5,Guest Post,32,Gurung Movie,2,Hemant Sharma,4,Hemanta Shisir,18,Hero,1,Hindi Jokes,5,Hollywood,1,How To,41,Huawei,15,Hum Gaire,2,Increase Blog Traffic,14,Indira Joshi,4,Info Dose,425,Internet Tips,92,Intex,1,Jokes Collection,97,Juna Shrish,6,Jyoti Magar,1,Kalpana Devkota (Poudel),6,Kamal Shrestha,1,Karbonn,1,Kauda Song,2,Keshu Gurung,1,Khuman Adhikari,9,Komal Oli,1,Korean Songs,1,Krishna Gurung,2,Kulendra BK,3,Laptop Price,2,Lava,5,LG,6,LG TV,2,Load Shedding Schedule,19,Lok Dohori Songs,268,Magar Bhasa,2,Mandavi Tripathi,6,Manju Poudel,2,Manoj Raj,7,Melina Rai,1,Micromax,12,Microsoft,2,Mobile Phone Price in Nepal,102,Movie Promo,80,Muna Thapa Magar,7,Narendra Pyasi,17,Ncell,18,Nepali Cricket,7,Nepali Full Movie,110,Nepali Jokes,72,Nepali Model,1,Nepali Movie Songs,199,NTC,22,Obi Worldphone,2,Online Banking,4,Online Earning,7,Page Navigation,4,Panasonic,3,Panasonic TV,1,Pashupati Sharma,5,Philips TV,1,Photo Gallery,7,Pinterest,2,Pokemon Go,1,Pop and Adhunik Songs,206,Poster Release,103,Prakash Katuwal,4,Pramod Kharel,11,Purnakala BC,29,Puskal Sharma,1,Radhika Hamal,6,Rajan Gurung,1,Rajesh Payal Rai,6,Rajina Rimal,11,Raju Gurung,2,Raju Pariyar,5,Ram Krishna Dhakal,4,Ramji Khand,15,Rishi Khadka,1,Roila Song,4,Roshan Gaire,1,Sabina Gurung,1,Salaijo,4,Samsung,22,Samsung TV,4,Sarada Tamang,1,Sardarji Jokes,5,SEO Tips,6,Sharmila Gurung,2,Shiva Pariyar,20,Shreedevi Devkota,2,Sindhu Malla,1,Smart Phones,23,Smriti Pun,1,SMS,1,Software Download,14,Sony,3,Sony TV,1,Sudip Adhikari,1,Swaroop Raj Acharya,10,Tata,1,Technology,264,Teej Song,49,Tejas Regmi,2,Tika Pun,16,Top List,2,Trishna Gurung,8,TU Notice,10,TV Price in Nepal,10,Twitter,8,Two Wheeler Price,2,Udit Narayan Jha,4,Useful Tools,10,Useful Websites,73,Videcon,1,Wallpapers,4,Windows 8,2,WordPress,2,Xiaomi,6,Yam Chhetri,4,Yamaha,1,YouTube,13,ZTE,1,
ltr
item
GulmiResunga.com: Add Page Navigation Widget On Your Blog
Add Page Navigation Widget On Your Blog
Add page navigation widget on your blog
http://4.bp.blogspot.com/-leAj8mUusuA/T2wvFxIRy9I/AAAAAAAAA64/BEJGkZsGzmo/s1600/page_navigation.PNG
http://4.bp.blogspot.com/-leAj8mUusuA/T2wvFxIRy9I/AAAAAAAAA64/BEJGkZsGzmo/s72-c/page_navigation.PNG
GulmiResunga.com
http://www.gulmiresunga.com/2012/03/add-page-navigation-widget-on-your-blog.html
http://www.gulmiresunga.com/
http://www.gulmiresunga.com/
http://www.gulmiresunga.com/2012/03/add-page-navigation-widget-on-your-blog.html
true
9098666623388878892
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy