Cara mengganti Posting Lama Menjadi Angka

|| || || 13 komentar
Tutorial | Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Untuk mengubahnya Blogger Tutorial mau share koleksi widgetnya,
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini


Langkah - Langkahnya :
  • Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
  • Sobat pilih salah satu dari 3 model diatas (bebas)
  • Script nya ada dibawah ini, sesuai dengan tandanya (Model1,2,3)
  • Setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum/diatas kode tersebut







Model 1



.showpageArea {
padding:2px;
margin:0px auto;
text-align: center;
}
.showpageArea a {border: 1px solid #FFFFFF;
color: #FF8000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;
}

.showpageNum a {border: 1px solid #FFFFFF;
color: #FF8000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #fff;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #FFFFFF;
color: #FF8000;
background-color: #000000;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;
}


Model 2
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}


Model 3
.showpageArea {
padding:2px;
margin:0px auto;
text-align: center;
}
.showpageArea a {border: 1px solid #5FB404;
color: #FE2E2E;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #5FB404;
color: #FE2E2E;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #5FB404;
color: #fff;
background-color: #5FB404;


}

.showpage a:hover {font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;
}




 

  • setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum/diatas kode tersebut.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->

  • Kalau sudah silahkan dilihat hasilnya. Taraa, pasti sudah berhasil nih sahabat Blogger Tutorial, hoho, semoga bermanfaat :)


/[ 13 komentar Untuk Artikel Cara mengganti Posting Lama Menjadi Angka]\
Niwancandra Bagus said...

Thanks Sob! Sangat Bermanfaat

Unknown said...

thx sob, di tunggu kunbalnya.
aaw71.blogspot.com

Nasrullah Halim said...

Mantap sob, saya coba dulu, thanks for share ...

Unknown said...

Thank gan
kunbal www.godingo99.blogspot.com

Oi Qorry said...

yes berhasil! terima kasih buat tutorialnya :))

yang suka makan, kunjungi blog aku ya qorryashari.blogspot.com

DJhiaNChoEgH said...

sob saat buka gagaet label kok posting lama masih ada ya

Administrator said...

Jadi Gan Older/News. Tks..
Sesama Blogger Wajib Saling Berkunjung
Biar Blogger Indonesia Jadi No 1 di DUNIA.
So... Kunbal Yah www.bloggeradsme.blogspot.co.id

Unknown said...

nemu juga caranya..mau dicoba dlu gan..thanks banyak ya...

Unknown said...

Terimakasih Gan, semoga jad amal baik

Anonymous said...

Buat yg lagi cari Game kunjungi http://andrie533.blogspot.com

Unknown said...

udk aku pasang tapi, tombol Last nya kok gk ada ya?

Unknown said...

makasih banyak gan

Made_iN said...

gk bs

Post a Comment