Membuat nomer halaman pada blogger

Membuat nomer halaman pada blogger

Membuat nomer halaman pada blog sebenarnya mudah (tapi bagi yang sudah tau, hehe..). Sobat hanya perlu menambahkan beberapa baris kode CSS dan HTML saja. Kode CSS ini dibuat dan diletakkan pada template blogger  untuk mengganti tampilan "HOME", "NEXT" dan "PREV" yang merupakan bawaan dari template default blogger.

Contoh tampilan nomer  halaman pada blogger seperti yang ada di blog ini ( gambar disamping), dan inilah cara membuatnya :

1. Letakkan kode css dibawah ini diatas tag </head> pada template blogger sobat.

/* CSS untuk Nomer Halaman */
#blog-pager {
clear: both;
margin: 30px auto; 
text-align: center; 
padding: 30px;
} 

.blog-pager {
background: none;
} 

.displaypageNum a, .showpage a, .pagecurrent {
padding: 5px 10px;
margin-right:5px; 
color: #fff; 
background-color: #800080; 
border: 1px solid #404042;
} 

.displaypageNum a:hover, .showpage a:hover, .pagecurrent {
background:  #D01414;
text-decoration: none;
color: #000; 
border: 1px solid #800080;
} 

#blog-pager .showpage, #blog-pager, .pagecurrent {
font-weight: bold;
color: #000;
}
.showpageOf {
display: none!important
} 

#blog-pager .pages {
border: none;
}


2. Letakkan kode HTML dibawah ini diatas tag </body> pada template blogger sobat

<div class='cleared'/>
<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=4;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Prev';
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>
</div>

Penjelasan untuk kode CSS diatas:
Untuk mengganti warna latar belakang kotak-kotaknya, tinggal mengubah kode warna pada "background-color". Dan untuk mengganti warna teks/angka tinggal mengganti warna pada "Color".

CATATAN :
Hapus atau non aktifkan fungsi blog-pager bawaan dari blogger, jika sobat ingin menon aktifkan saja tanpa menghapus caranya seperti ini :

/*
#blog-pager-newer-link{float:left}
#blog-pager-newer-link a{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguqICVP0VL-IPJtd0a_H9Kz3g1TokB36MEmMLP9S-51obs6GXAFshhf3vANxrcSrp5s3oLLLb5nddlF73MQiy60-_o8f0lZeLcjJBr-bcln-XqxwN5S0nYgpDcmETyNYH_6MOE6UCj3IhP/s1600/arrow-leftpink.png) no-repeat scroll center center; display:block; height:48px; text-indent:-9999px; width:48px}
.home-link{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaEsztky9Lmm7rJGm_kZTMVm6Nmsfd3OM9-Nghham5zuCPNFWv65EDvW-YwGeJRaWuJF463kQRn5ECHuAYPv2WxX-3VeeYehNSHC-t7AL2BMyswc5dzIcnDdhFZFxTZuWztM9FWdU9oKtH/s1600/homepink.png) no-repeat scroll center center; display:block; height:32px; margin:0 auto; text-indent:-9999px; width:32px}
#blog-pager-older-link{float:right}
#blog-pager-older-link a{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinstlw5GVEO5RPVuUwhPSQXem0vbYZEf_2yxuM8BVFA60M0MNs_W-lQCmrY3Huy-W0qi1-3kt6qtwZoaJ3fIskLE-KvKMihcFEyOESVu5GB86JZAmILibrF6FVy5ndkK7MtLvvVYyXCHbw/s1600/arrow-rightpink.png) no-repeat scroll center center; display:block; height:48px; text-indent:-9999px; width:48px}
#blog-pager{padding:30px; clear:both; text-align:center}
feed-links{}
*/

tanda garis miring dan bintang pada kode diatas berfungsi untuk menon aktifkan kode tsb.


Penjelasan untuk kode HTML diatas:

var perPage=4;  --> ini adalah kode untuk menampilkan jumlah postingan pada tiap halaman. Sobat tinggal menggantinya.

var numPages=6; --> ini kode untuk menampilkan jumlah maksimal kotak yang terlihat di halaman

CATATAN :

Sesuaikan jumlah pos per halaman yang ada pada "setelan" di template sobat. Silahkan lihat di "setelan" lalu klik "pos dan komentar"

Jangan lupa kasih komentar ya :)