Cara Memasang Navigasi Halaman Blog (Numbered Page Navigation) dengan Angka

Pentingnya Navigasi Halaman Blog bagi Pengguna (User)

Sobat. Salah satu parameter di dalam sebuah blog berkualitas adalah tersemat akan nilai "user friendly". Makna User Friendly adalah sebuah blog yang "akan mempermudah" pengguna atau pembaca. 

Forum blogger ini akan membagikan tips cara memasang navigasi halaman blog (numbered page navigation) dengan angka atau nomor. Apa pentingnya navigasi tersebut? Pada dasarnya, NAVIGASI akan bekerja seperti sebuah link baik berupa link internal atau eksternal. Link ini akan mengarahkan pengguna atau pembaca pada halaman tertentu sesuai dengan maksud dan arahan dari Admin blog, alias Anda sendiri.

Navigasi yang dibuat dengan menerapkan pola angka atau nomor ini sudah digunakan oleh para desainer website terkenal. Salah satu contoh penerapannya pada situs Petunjuk Islam.  Atau lihat saja di blog ini, sama kok.

Langsung saja berikut cara pemasangannya pada blog kita:
1. Masuk akun blogger
2. Template > cari kode ]]></b:skin>
3. Copy dan paste kode di bawah ini tepat di bawah kode ]]></b:skin>

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}

.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

4. Copy paste kode di bawah ini di atas 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'>
/*<![CDATA[*/
var perPage=7;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

5. Save template
6. Lihat perubahan blog sobat sekarang

Demikian tips kali ini. Semoga menambah baik kualitas blog Anda.

Source:

http://www.contohblog.com/2014/12/cara-membuat-navigasi-halaman-blog.html