Cara Memasang Navigasi Nomor Halaman Di Blogspot

Tips kali ini saya akan membahas tutorial blogger dimana tips ini masih mengenai cara mengembangkan desain blog yakni panduan cara Membuat Navigation Page Number di blogger. Namun sebelum itu saya disini akan menjelaskan apa itu Navigation Page Number atau Navigasi nomor halaman adalah sebuah navigasi dimana halaman akan berisikan sebuah nomor yang dapat memudahkan para pengunjung atau visitor berganti ke artikel lainnya dengan cara mengklik nomor tersebut.

Pada dasarnya cara memasang navigasi halaman ini sangat mudah dan cepat untuk dilakukan, kita hanya memberikan sedikit sentuhan pada template blog dengan cara menambahkan beberapa kode script css dan menambahkan beberapa struktur data. Fungsi dari navigasi halaman ini adalah menampilkan jumlah halaman serta tombol link suatu halaman untuk memunculkan postingan lain dari web atau blog. Guna memasang navigation page number untuk memudahkan pengunjung di dalam menulusuri postingan/artikel yang ada pada blog anda.

Pada artikel ini saya akan memberikan cara memasang navigasi halaman menggunakan nomor pada blog dengan menambahkan kode CSS melalui edit HTML. Oke langsung saja bagaimana caranya kita simak di bawah ini.

Cara Memasang Naviasi Halaman Pakai Nomor Di Blog

1. Masuk dan login ke dalam dashboard blog anda. Kemudian pilih menu Template > Edit HTML.

2. Tambahkan kode CSS dibawah ini tepat diatas </head>.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type="text/css">
.showpageNum a,.showpage a,.showpagePoint{margin-top:10px;margin-bottom:20px;background:#f35d5c;border:none;margin-left:5px;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;transition:all 0.3s ease-in-out;padding:10px 15px;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);}
.showpagePoint{background:#555;color:#fff;}
.showpageNum a:hover,.showpage a:hover{background:#555;color:#fff;}
</style>
</b:if>
</b:if>

3. Silahkan anda edit kode script CSS diatas sesuai dengan keinginan anda, mungkin dari merubah warna navigasi halaman hinggan merubah ukurannya.

4. Setelah anda melakukan hal diatas maka anda tambahkan juga kode di bawah ini tepat diatas kode </body>.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=8;
var upPageWord =&#39;Prev &#39;;
var downPageWord =&#39; Next&#39;;
</script>
<script src='https://googledrive.com/host/0B8WEGGjyXlaMMWdabjB6Q3RhRjg/PageNavigation.js' type='text/javascript'></script>
</b:if>
</b:if>

5. Pengaturan bagaimana cara memodifikasi sesuai keinginan anda.

Kode script var pagecount=5; digunakan untuk mengatur jumlah per halaman.
Kode script var displaypagenum digunakan untuk mengatur jumlah halaman yang ingin anda tampilkan.
Kode script var upPageWord digunakan untuk tombol Sebelumnya.
Kode script var downpageword digunakan untuk tombol selanjutnya.

Nah demikianlah bagaimana cara membuat navigasi halaman pakai nomor di blogger dengan mudah. Semoga bermanfaat.