Cara Membuat Navigasi Halaman Bernomor Responsive Pada Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Bicara mengenai SEO, Navigasi Halaman Bernomor Responsive adalah termasuk SEO pada sebuah Website atau Blog. Saya mengatakan demikian karena Website atau Blog lebih profesional dengan adanya navigasi halaman yang bernomor untuk memudahkan dan memanjakan pengunjung pada sebuah Website atau Blog. Menggunakan template yang simple saja ini dibutuhkan untuk memenuhi SEO suatu Website atau Blog apalagi template yang indah dan profesional, bagi Website atau Blog profesional, navigasi halaman bernomor atau "Numbered Page Navigation" sangat diutamakan sehingga jika ini tiada maka tidak dikatakan profesional karena tidak peduli kepada pengunjung dan juga tanpa navigasi halaman bernomor boleh dikata web cacat atau blog cacat.
Saya rasa anda sendiri pun sangat menyukai bahkan merindui untuk mengunjungi Website atau Blog yang mempunyai navigasi halaman bernomor karena anda merasa mudah dan nyaman dalam menjelajahinya. Dan pastinya anda juga merasa kesal ketika anda melawat sebuah Website atau Blog yang tidak mempunyai navigasi halaman bernomor, apalagi bagi anda yang sangat terburu-buru mencari bahan atau tutorial pada sebuah blog, misalnya seorang pelajar di perguruan tinggi mencari bahan skripsi yang sesuai dengan mata kuliahnya akan lebih cepat dalam menjelajahi pencariannya pada suatu blog.

Apalagi pada blog yang mempunyai banyak artikel postingan bahkan sampai puluhan ribu artikel maka navigasi halaman bernomor merupakan faktor wajib pada sebuah blog, ia merupakan pemudah, pemandu atau petunjuk arah pada suatu blog disamping menu navigasi multi dropdown. Saya sangat merekomendasikan pemasangan navigasi halaman bernomor pada Website atau Blog anda, saya telah menambahkan fitur responsif dan adaptif pada navigasi halaman bernomor yang kini saya bagikan.

Fitur Navigasi Halaman Bernomor Responsive:
1. Responsif dan adaptif pada perangkat Desktop, Tablet dan Mobile,
2. Desain yang simple tetapi tidak hampa dalam arti simple profesional,
3. Hover pada nomor dan prev / next,
4. Boleh menampilkan atau menyembunyikan "Show Page Of" sesuai dengan keiginan anda,
5. Multi tampil dan mengarahkan urutan pada halaman utama / home page / main dan pada laman label / category.

Untuk hasilnya boleh anda lihat pada hlaman utama / home page / main dan laman label / category pada blog saya ini, sekarang mari ke tutorialnya.

1. Login ke Blogger>Template>Edit HTML

2. Letakkan CSS berikut diatas / sebelum tag ]]></b:skin>⇩

/***************************************************************
Numbered Page Navigation Responsive By www.BloggerAutodidact.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: Jika anda tidak ingin menampilkan "Show Page Of" maka hapus .showpageOf{display:none}

3. Letakkan JavaScript berikut diatas / sebelum tag </body>⇩

<!-- Numbered Page Navigation Responsive By www.BloggerAutodidact.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.BloggerAutodidact.com Ends -->

4. Save Template.

Catatan: Anda boleh menukar jumlah "var postperpage" dan jumlah "var numshowpage" sesuai dengan pengaturan pada blog anda atau sesuai dengan keinginan anda, perlu anda tahu bahwa:
➧ "var postperpage" ialah jumlah atau bilangan tampilan post atau artikel perhalaman,
➧ "var numshowpage" ialah jumlah atau bilangan tampilan nomor pada navigasi halaman.

5. Alhamdulillaah, tutorial sudah siap.