Membuat Halaman Navigasi Di Blog

Halaman navigasi mempunyai peranan yang cukup penting bagi website atau blog yang memiliki banyak artikel karena dengan adanya halaman navigasi dapat memudahkan orang untuk mencari suatu artikel di halaman tertentu.

Biasanya template suatu blog memiliki halaman navigasi, tetapi ada beberapa template yang tidak memiliki halaman navigasi. Untuk itu bagi blog yang tidak memiliki halaman navigasi atau ingin mengganti halaman navigasi, berikut cara membuat halaman navigasi di blogger.

Login ke blogger
Pada bagian Dashboard pilih Template » Edit HTML
Cari kode ]]></b:skin> pada template tersebut. Untuk lebih mudahnya tekan Ctrl + F pada keyboard
Masukkan kode berikut ini di atas kode ]]></b:skin>

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}</div>
<div class="MsoNormal">
.blog-pager {background: none;}</div>
<div class="MsoNormal">
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px;
color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px
rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50,
0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}</div>
<div class="MsoNormal">
.displaypageNum a:hover,.showpage a:hover,
.pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}</div>
<div class="MsoNormal">
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}</div>
<div class="MsoNormal">
<span style="mso-spacerun: yes;"> </span>.showpageOf{display:none!important}</div>
<div class="MsoNormal">
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50,
50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow:
0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.firstpage, .lastpage {display: none;}

Selanjutnya cari kode </body>. Kode tersebut pada umumnya letaknya di bawah
Lalu masukkan kode berikut ini di atas kode </body> tersebut

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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://www.geocities.ws/usmankurniawan/pagenation.js"/>
</b:if>
</b:if>

Simpan Template
Maka hasilnya akan seperti berikut ini

Untuk tampilan halaman navigasi yang lain, berikut beberapa kode yang dapat kamu letakkan di atas kode ]]></b:skin>. Silahkan pilih sesuai selera kamu.

Hasilnya :

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;} .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;} a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;} #blog-pager .pages{border:none;background: none;} .firstpage, .lastpage {display: none;}

Hasilnya :

Membuat Halaman Navigasi Di Blog

CATEGORIES