Cara mengganti PAGE NAVIGATION Postingan Lama Dengan Page Number

   Hy sobat kali ini saya akan memposting tentang Cara mengganti PAGE NAVIGATION Postingan Lama Dengan Page Number, ini adalah sebuah trik agar tidak perlu ribet-rubet untuk merubah script template yang kita punya hanya untuk mendapatkan sebuah tampilan pada tulisan postingan lama menjadi tampilan Page Number seperti gambar dibawah ini :

Kita hanya perlu bermain dengan Elemen halaman Pada Tata Letak Template kita, maka tulisan Postingan Lama otomatis hilang dan diganti dengan Page Number. Jika sobat menginginkannya, silahkan ikuti tutorialnya sebagai berikut :

1.  Login Blogger
2.  klik rancangan/Tata Letak
3.  Pilih Elemen Halaman>>>Lalu tambah gadget : HTML/JavaScript

* Selanjutnya Copas Script di bawah ini :

Spoiler:

<style type="text/CSS">

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #7AA1C3;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #7AA1C3;
background-color:#F6F6F6;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #7AA1C3;
background: #F6F6F6;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #7AA1C3;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#7AA1C3;
}
</style>

<script type="text/JavaScript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount = 9;
var displayPageNum = 4;
var upPageWord = 'Sebelumnya';
var downPageWord = 'Selanjutnya';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Jumlah Halaman ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>

4. Lalu simpan
5. Jika kalian kurang puas dengan tampilannya, maka kalian hanya perlu konsentrasi pada code yang saya cetak merah. Berikut :

var pageCount = 9;
var displayPageNum = 4;
var upPageWord = 'Sebelumnya';
var downPageWord = 'Selanjutnya';

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Jumlah Halaman ('+(postNum-1)+')</span>'+html;

Keterangan dari kode diatas :

• pageCount merupakan jumlah artikel yang akan tampil perhalaman jika kita klik halaman 2 dan selanjutnya.
• displayPageNum adalah tampilan nomor halaman selain halaman yang sedanga tanpil, jika kita isi dengan 4 maka akan adalah 5 page number, 1 halaman yang sedang tampil dan 4 halaman yang merupakan suatu link.
• upPageWord merupakan tampilan kata untuk menuju halaman sebelum halaman yang sedang tampil (previous).
• downPageWord adalah tampilan kata untuk menuju halaman berikutnya (next).
• html ….. html; merupakan informasi jumlah halaman, Kalimat “Jumlah Halaman” bisa diganti dengan kalimat lain. 

 Mudah bukan?
Mudah-mudahan postingan saya kali ini bermanfaat

Selamat mencoba,,,semoga berhasil, jangan lupa komentar ya,,, terima kasih!!!