Cara Membuat Navigasi Halaman Model Nomor Di Blog

Diposting pada

Cara Membuat Navigasi Halaman Model Nomor Di Blog

Cara Membuat Navigasi Halaman Model Nomor 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 Nomor 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 Model Nomor 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.

Itulah cara membuat navigasi halaman model nomor yang simple. Dan untuk contoh kalian bisa lihat pada gambar cover di atas, kurang lebih seperti itu.

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 Nomor Di Blog. Selamat mencoba!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *