Cara Membuat Navigasi Halaman DI Blog

Cara mudah membuat navigasi halaman di blogspot. Navigasi yang dimaksut disini adalah jumlah number page pada laman disuatu blog, saat anda mencari artikel di blog ini atau saat home page pada menu utama maka akan muncul jumlah page atau halaman pada blog ini, maka dari itu hal yang seperti itulah yang akan kita buat.

Jika belum tahu juga dengan yang saya maksut maka bisa dilihat dibagian gambar dibawah ini.


Jika anda meu membuat seperti yang saya gunakan ini maka ikuti tutorial dibawah ini. OK. Langsung saja kita bahas cara membuat navigasi halaman di blog.

1. Silahkan masuk ke blogger anda.
2. Masuk ke dosbar => Laman template => Masuk ke editor blogger template.



3. Selanjutnya anda sudah masuk  di editor blogger template dan letakkan kode dibawah ini tepat diatas dari kode ]]></b:skin> klik lihat kode untuk melihat kodenya.

Klik
#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;
}


4. Selanjutnya letakkan kode dibawah 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'>
/*<![CDATA[*/
var perPage=8;
var numPages=3;
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>
Ket :
  • Warna biru adalah jumlah postingan saat cek page halaman.
  • Warna merah adalah jumlah laman tampil.
5. Simpan dan selesai.

Sekarang di blog anda sudah muncul navigasi halaman, silahkan anda edite sendiri sesuai dengan selera sahabat. OK, Navigasi halaman cukup terlihat santai dan bagus untuk blog. Semoga bermanfaat.

Sekian dan salam jabat tangan.

Subscribe to receive free email updates: