Cara Membuat Navigasi Nomor Halaman di Blogger

Pada halaman beranda/homepage blogger akan tampil beberapa postingan terbaru saja yang baru di-publish. dan untuk melihat postingan terdahulu kita perlu mengklik nomor halaman.

Dan pada kesempatan kali ini saya akan berbagi tutorial bagaimana cara membuat navigasi nomor halaman dengan mudah

Manfaat adanya nomor navigasi halaman pada blog adalah untuk memudahkan pengunjung membuka postingan lama dan postingan terbaru hanya dengan mengklik nomor yang tersedia dan untuk kembali kehalaman utama tinggal klik beranda atau home. mudah dan praktis bukan? 

 

Berikut contoh hasilnya 

contoh hasil

 

Cara Membuat Navigasi Nomor Halaman di Blogger  

1. Masuk ke Dashboard blog anda

2. Pilih menu Tema >> Edit HTML

3. Copy script berikut ini, dan tempelkan di atas tag </body>

<b:if cond='data:view.isMultipleItems'>
  <script> //<![CDATA[
    /* Page Navigation with Number */
    var postperpage = 7; // Jumlah halaman yang tampil
    var numshowpage = 3; // Jumlah angka / nomor di menu navigasi
    var upPageWord = 'Prev'; // Kata untuk navigasi halaman sebelumnya
    var downPageWord = 'Next'; // Kata untuk navigasi halaman berikutnya
    var urlactivepage = location.href;
    var home_page= '/';
  //]]></script>
  <script src='https://cdn.rawgit.com/igniel/blogger/96670462/pagination.js'/>
</b:if> 

4. Selanjutnya copy CSS berikut ini, dan tempelkan di atas tag </style>

/* Page Navigation with Number */
#blog-pager {clear:both; width:auto; line-height:17px; position:relative; display:block; text-align:left; overflow:visible; margin:0px; padding:0px}
.showpage a, .showpageNum a, .showpagePoint {position:relative; background:#2f303f; display:inline-block; font-size:13px; color:#fff; margin:0 4px 0 0;padding:7px 13px; text-decoration:none; border-radius:3px; transition:all .3s}
.showpageOf {float:right; color:#666; display:inline-block; font-size:13px; margin:0; padding:7px 0;}
.showpageNum a:before{ content:''; position:absolute; top:0; bottom:0; left:0; right:0; box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02); transition:box-shadow 0.5s}
.showpage a:hover, .showpageNum a:hover {background:#008c5f; color:#fff; position:relative}
.showpagePoint, .showpagePoint:hover {background:#008c5f; color:#fff}
span.label-info a.label-block:nth-child(n+2) {display:none} 

5. Terakhir Simpan 

Semoga tutorialnya bermanfaat