Cara Membuat Navigasi Halaman Yang Simple Model Nomer Di Blog

Model Navigasi Halaman setiap template bervariasi model nya. Dan pasti nya setiap template mempunyai Navigasi halaman, walaupun terkadang fitur tersebut saya yakin jarang sekali pengunjung untuk mengeklik tombol navigasi halaman itu. Tapi yang pasti navigasi halaman wajib dan memang harus ada di masing - masing template.

Apakah di template sobat sudah ada navigasi halaman? Bila tidak ada segerahlah untuk memasang navigasi halaman untuk melengkapi fitur dari template yang sobat gunakan. Dan di bawah ini saya akan mencoba berbagi bagaimana cara memasang Navigasi Halaman Yang Simple Model Nomer Di Blog Sobat.

Tapi bila di template sobat sudah ada mungkin model nya berbeda dari model yang navigasi halaman yang saya share ini dan sobat ingin mencoba sesuatu yang baru atau mungkin untuk sebagai bahan pembelajaran, sobat bisa mengikuti tutorial di bawah ini.

Cara Membuat Navigasi Halaman Yang Simple Model Nomer Di Blog

Langkah pertama silahkan sobat copy kode di bawah ini lalu letakan kode tersebut di atas kode </body> pada template sobat.

<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/MbenkDroid/Blogger/84e08fa9/pagination.js'/>
</b:if>

Lalu copy kode CSS di bawah ini dan letakan kode tersebut di atas kode </style> pada template sobat.

/* 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:#D8261C; color:#fff; position:relative}
.showpagePoint, .showpagePoint:hover {background:#D8261C; color:#fff}
span.label-info a.label-block:nth-child(n+2) {display:none}

PERHATIAN : Bila di template sobat sudah ada yang nama nya kode CSS seperti kode CSS di atas harap di hapus terlebih dahulu. Dan bilamana di template sobat sudah ada kode JavaScript seperti di atas atau model semacam nya silahkan di hapus juga. Agar tidak terjadi bentrok dengan kode di atas.

Tapi bilamana di template sobat sama sekali tidak ada yang sudah saya sebut kan di atas, sobat bisa langsung menerapkan nya.

Bagaimana menurut sobat, mudah dan simple bukan! Untuk demo sobat bisa lihat pada Navigasi halaman model nomer pada blog ini ( kalo belum berubah ). Atau pada gambar cover di atas.

Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini. semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara Membuat Navigasi Halaman Yang Simple Model Nomer Di Blog. Selamat mencoba!

Share this post