#7 Stylish Page Number Navigation Widget For Blogger Blog
7 Stylish Page Number Navigation Widget For Blogger Blog - Hello friends, welcome to the Tutbig today I will show you Blogger is a wonderful platform for new and additionally for expert bloggers as well. Blogger has many facets that you may now not even conscious of it. One of such hidden feature is that, if you don’t have page wide variety navigation in your blogger then you can effortlessly set it up by way of going to Settings sajian Post and remarks and selecting the Show at most post potion.
When your blog post is increased to the quantity that is set by default, you will in a position to see as Older Posts and Newer Posts. So, rather of the usage of such older and newer posts links, you can help you, weblog readers, to immediately go and bounce to a particular number and navigate as per their wish.
This will additionally assist your site visitors to know precisely the total number of the publish has been published in that precise category or in your whole blog.
So, you will get some of the most stylish, good-looking wide variety of navigation widget with simply simple steps that will make your blog seem rushing and professional. Just comply with the steps and you will be accomplished in no time. How to add the custom numbered web page navigation to your blogger blog.
You just need to go only two simple steps
1. Adding the CSS code in your blogger template and
2. Adding the script.
1 Adding the CSS code
a. Login to your Blogger blog and select Template and click on Edit HTML.
b. By pressing Control + F together and type ]]></b:skin>
in the search box and press Enter.
c. Now select any of the custom designs that you like or that fits your blogger theme color and paste the code above the ]]></b:skin> code.
1. Page number navigation with Grey current page tabs
1: #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}2: .blog-pager {background: none;}3: .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}4: .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}5: .showpageOf{display:none!important}6: #blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}7: #blog-pager .pages{border:none;}
2. Page number navigation with Dark and blue current page tabs.
1: #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}2: .blog-pager {background: none;}3: .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}4: .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}5: .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}6: a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}7: #blog-pager .pages{border:none;background: none;}
3. Page number navigation with Dark and Orange current page tabs.
1: #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}2: .blog-pager {background: none;}3: .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}4: .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}5: #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}6: .showpageOf{display:none!important}7: #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
4. Page number navigation with Grey and blue current page tabs.
1: #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}2: .blog-pager {background: none;}3: .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}4: .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}5: #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}6: .showpageOf{display:none!important}7: #blog-pager .pages{border:none;}
5. Pagination on a green with orange and pink hover colors.
1: #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }2: .blog-pager {background: none;}3: .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}4: .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}5: #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}6: .showpageOf{display:none!important}7: #blog-pager .pages{border:none;}
6. Page number navigation with Grey and red current page tabs.
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }.blog-pager {background: none;}.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}.showpageOf{display:none!important}#blog-pager .pages{border:none;}
7. Page number navigation with Orange and Red current page tabs.
1: #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }2: .blog-pager {background: none;}3: .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}4: .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}5: #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}6: .showpageOf{display:none!important}7: #blog-pager .pages{border:none;}
2 Adding the script
a. Now again find by pressing Control + F and Type </body>
in the search box and hit Enter.
b. Then add the below script just above the </body> tag.
a. perPage
This will show how many posts will be shown on each page of your blog (7 by default).
b. numPages
This will show how many pages will be shown in the page navigation (6 by default).
c. var first text, var last text, var prevent and var nextText
These just the words that will show up to your visitors for navigation. So, you can type your own within the codes. (First, Last, Previous and Next).
Fixing the Labels
Blogger will show up 20 of your blog post on the label pages by default but you can also make this widget appear on label pages by just cutting down the value in per page variable.
Find each occurrence of the following code snippet:
Replace it with the below code.
Here 7 is the number of your blog posts that will appear on per page.
Lastly, click on Save Template.
I hope you enjoy this post and the photos. 7 Stylish Page Number Navigation Widget For Blogger Blog
1: <b:if cond='data:blog.pageType != "item"'>2: <b:if cond='data:blog.pageType != "static_page"'>3: <script type='text/javascript'>4: /*<![CDATA[*/5: var perPage=3;6: var numPages=3;7: var firstText ='First';8: var lastText ='Last';9: var prevText ='« Previous';10: var nextText ='Next »';11: var urlactivepage=location.href;12: var home_page="/";13: if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}14: pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}15: if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}16: if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}17: if(pageStart>2){html+=' ... '}18: for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}19: if(pageEnd<lastPageNo-1){html+='...'}20: if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}21: var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}22: if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}23: var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}24: if(pageArea&&pageArea.length>0){html=''}25: if(blogPager){blogPager.innerHTML=html}}26: function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}27: function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}28: if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}29: document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}30: if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}31: document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}32: function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}33: function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}34: function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}35: location.href=pAddress}36: /*]]>*/37: </script>38: </b:if>39: </b:if>
How to configure default page number navigation settings When you have finished adding the CSS code and the script, you might want to change my default settings as per your requirements. So, in order to change the default settings, just follow the steps.
perPage: 7,numPages: 6,var firstText ='First';var lastText ='Last';var prevText ='« Previous';var nextText ='Next »';}
a. perPage
This will show how many posts will be shown on each page of your blog (7 by default).
b. numPages
This will show how many pages will be shown in the page navigation (6 by default).
c. var first text, var last text, var prevent and var nextText
These just the words that will show up to your visitors for navigation. So, you can type your own within the codes. (First, Last, Previous and Next).
Fixing the Labels
Blogger will show up 20 of your blog post on the label pages by default but you can also make this widget appear on label pages by just cutting down the value in per page variable.
Find each occurrence of the following code snippet:
1: expr:href='data:label.url'
Replace it with the below code.
expr:href='data:label.url + "?&max-results=7"'
Here 7 is the number of your blog posts that will appear on per page.
Lastly, click on Save Template.
I hope you enjoy this post and the photos. 7 Stylish Page Number Navigation Widget For Blogger Blog
0 Response to "#7 Stylish Page Number Navigation Widget For Blogger Blog"
Post a Comment