How To Create Numbered Page Navigation Responsive On Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Talking about SEO, responsive navigation is numbered pages including SEO on a website or blog. I say so because a website or blog will look more professional with a numbered page navigation that makes it easy and pamper the visitor on a website or blog. Using a simple template that this is necessary to meet the criteria for SEO on a website or blog, let alone template beautiful and professional. For your website or blog professionals, navigation pages numbered so that it is preferred if no then do not say this because no matter professional to visitors and also without navigation pages numbered virtually disabled website or blog disabled.

I think you yourself already love even yearned to visit the website or blog that has a complete numbered page navigation as you feel easy and comfortable in visiting them. And of course you also feel annoyed when you visit a website or blog that has no navigation pages numbered, let alone you really hurry to find material or tutorial on a blog, for example, a student of college find material of paper that fits his courses will be faster in the surf in search of a blog.

Moreover, in a blog post that has many articles and even tens of thousands of articles, then numbered page navigation is mandatory factor in a blog. It is a facilitator, a guide or directions on a blog in addition to multi dropdown navigation menu. I highly recommend the installation of a numbered page navigation on your website or blog, I've added a responsive and adaptive features on navigation pages numbered that I share with you now.

Feature Responsive Numbered Page Navigation:
1. Responsive and adaptive in Desktop, Tablet and Mobile,
2. The design is simple but not simple vacuum within the meaning of the professional,
3. Hover on the numbers and previous / next,
4. Be able to show or hide the "Show Page Of" in accordance with your desire,
5. All show and ordered sequence on the main page / home page / main and on the label / category.

For the results you can see on the front page / home page / main and the label / category on my blog, now let us into the tutorial⇨

1. Login to Blogger> Template> Edit HTML and put the following CSS above / before the ]]></b:skin> tags⇩

/***************************************************************
Numbered Page Navigation Responsive By www.BloggerDiscreet.com
***************************************************************/
#blog-pager{display: block;-webkit-border-radius: 0;-moz-border-radius: 0;-o-border-radius: 0;border-radius: 0;padding: 0;margin: 0 0 30px;list-style: none;font-size: 0;text-align: center;}
.blog-pager,#blog-pager{clear:both;font:normal 16px Open Sans;text-align:center;padding:15px 10px}
.showpageNum a,.showpage a{background:#fff;text-decoration:none;white-space:nowrap;color:#222;margin:10px 3px;padding:5px 10px;border:1px solid #e4e4e4;}
.showpageNum a:hover,.showpage a:hover{color:#fff;text-decoration:none;background-color:#006600;border:1px solid #e4e4e4;}
.showpageOf{color:#fff;text-decoration:none;background-color:#006600;font-size:16px;margin:10px 3px;padding:5px 10px;border:1px solid #e4e4e4;}
.showpagePoint{color:#fff;text-decoration:none;background-color:#006600;font-size:16px;margin:10px 3px;padding:5px 10px;border:1px solid #e4e4e4;}
.feed-links{clear:both;line-height:2.5em}
@media screen and (max-width:640px) {
#blog-pager {padding:12px;}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 0px 2px 0;box-shadow:0 1px 2px 1px rgba(0,0,0,0.1);}}
@media screen and (max-width:320px) {
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
.showpageOf{display:none}

Note: If you do not want to show "Show Page Of", then remove .showpageOf{display:none}

2. Put the following JavaScript above / before the </body> tags⇩

<!-- Numbered Page Navigation Responsive By www.BloggerDiscreet.com Starts -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
    var postperpage=6;
    var numshowpage=3;
    var upPageWord =&#39;&#171; Previous&#39;;
    var downPageWord =&#39;Next &#187;&#39;;
    var urlactivepage=location.href;
    var home_page="/";
  </script>
<script src='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-JavaScript-JS/69aaa803/JavaScript(JS)-Numbered-Page-Navigation-Blogger-Responsive-By-Rahmat-Arif.js' type='text/javascript'></script>
</b:if>
</b:if>
<!-- Numbered Page Navigation Responsive By www.BloggerDiscreet.com Ends -->

3. Save Template.

Note: You can change the number of "var postperpage" and the "var numshowpage" suitable with the settings on your blog or your own, you should know that:
"var postperpage" is the amount or number of articles per page view or post,
"var numshowpage" is the number or numbers of the numbers on the navigation page.

Alhamdulillaah, tutorial is ready.