Membuat Navigasi Halaman Untuk Blogger

Mas Operator. Assalamu'alaikum Wr. Wb. Salam sejahtera untuk kita semua, selamat datang kembali di Blog Saya ini (Mas Operator), dan tidak lupa Saya ucapakan terimakasih sebesar-besarnya kepada seluruh pengunjung yang sudah sudi mengunjungi/mampir ke Blog Saya ini. Pada artikel/postingan kali ini kembali Saya akan memberikan sebuah tips/turoial mengenai cara untuk mengedit halaman Blog, dan kali ini yang akan Saya bahasa adalah cara untuk membuat navigasi halaman.

Navigasi halaman pada sebuah blog atau pun website akan berguna sekali , terutama untuk mempermudah pengunjung blog/website yang kita kelola. Dengan adanya navigasi halaman ini pengunjung bisa lebih mudah untuk berpindah dari satu halaman ke halaman yang lain pada halaman blog/website kita.

Tutorial ini Saya adaptasi dari salah satu master blogger yaitu Igniel dan sudah Saya terapkan di Blog Saya ini, Sobat Blogger bisa melihanya langsung pada halaman Blog Saya ini, di bawah postingan ada sebuah navigasi halaman yang bisa Sobat Blogger manfaatkan untuk berpindah dari halaman 1 (satu) ke halaman yang lainnya.

Dan berikut merupakan cara/langkah-langkahnya :

1. Login ke Dashborad Blog

2. Silahkan Copy Kode di bawah ini :
  

<b:if cond='data:view.isMultipleItems'>
  <script> //<![CDATA[
    /* Page Navigation with Number */
    var postperpage = 5; // Jumlah halaman yang tampil (seperti blog Saya ini)
    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>

3. Klik Menu Tema/Thema, kemudian Klik Edit HTML, cari kode </body>, kemudian paste/tempel kode yang sudah kita copy (pada langkah ke 2) tepat diatas kode </body> yang ada di halaman edit HTML template blog kita. Perhatikan gambar di bawah ini :

4. Masih di halaman edit HTML template Blog, kali ini silahkan cari kode </style>, kemudian copy kode di bawah ini di atas kode </style> tadi :

/* 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}

NB : untuk warna (warna halaman yang aktif bisa Anda ganti dengan cara mengganti kode yang ditandai dengan warna merah pada kode di atas.


5. Silahkan simpan templatenya, dan lihat hasilnya

Mudah bukan?

Demikian artikel mengenai "Membuat Navigasi Halaman Untuk Blogger" semoga apa yang sudah Saya sampaikan pada artikel/postingan kali ini bisa bermanfaat untuk kita semua, sekian, terimakasih, dan Salam Operator Sekolah!!!

Share :