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 :


Hasilnya :

Hasilnya :

Hasilnya :

Hasilnya :
Membuat Halaman Navigasi Di Blog Membuat Halaman Navigasi Di Blog Reviewed by Unknown on June 21, 2016 Rating: 5