Pasang Navigasi Nomor Halaman di Blog

Halo sobat ketemu lagi di Tip Blogger

Kali ini saya akan membahas bagaimana Cara Pasang Navigasi Nomor Halaman di Blog

Mungkin para sobat sekalian pernah melihat Blog yang di bawah kolom postingannya terdapat Navigasi berupa Nomor-nomor dari halaman,

Berikut Cara Pasang Navigasi Nomor Halaman di Blog :

Pertama :
Login ke Blogger
Klik Rancangan (Yang dulunya Tata Letak)
Klik tab Edit HTML
Klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget,
Kemudian cari kode ]]></b:skin>

Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3).

Jika sudah ketemu, Copy kode CSS dibawah ini dan letakkan diatas kode tersebut :

/* Navigasi Nomor Halaman
----------------------------------------------- */
.showpageArea a {
text-decoration: underline;
float: left;
}
.showpageNum a {
border: 1px solid #CCCCCC;
background-color: #eeeeee;
text-decoration: none;
margin: 0 3px;
padding: 3px;
float: left;
}
.showpageNum a:hover {
border: 1px solid #CCCCCC;
background-color: #000000;
}
.showpagePoint {
color: #000000;
text-decoration: none;
border: 1px solid #CCCCCC;
background: #CCCCCC;
margin: 0 3px;
padding: 3px;
float: left;
}
.showpageOf {
border: 1px solid #CCCCCC;
background-color: #eeeeee;
text-decoration: none;
padding: 3px;
margin: 0 3px 0 0;
float: left;
}
.showpage a {
background-color: #eeeeee;
text-decoration: none;
border: 1px solid #ccc;
padding: 3px;
}
.showpage a:hover {
color: #000000;
background: #000000;
text-decoration: none;
}
.showpageNum a:link,.showpage a:link {
text-decoration: none;
color: #333;
}

Kedua :
Cari kode seperti berikut :

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

Kalau sudah ketemu, letakkan kode dibawah ini tepat di bawah kode tersebut :

<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 =
5
;
var displayPageNum =
5
;
var upPageWord = 'Previous';
var downPageWord = 'Next';

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"> Pages ('+(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>

Keterangan : Angka (5) yang saya cetak biru adalah jumlah dari nomor yang akan muncul pada halaman. Contoh : 1, 2, 3, 4, 5
Dan pada tulisan com yang juga saya cetak biru adalah domain dari blog sobat. 

Jika sobat memakai domain co.cc maka tulisan com tersebut harus di ganti dengan co.cc dan kalau tidak berhasil, parse dulu kode pada langkah ke dua.

Simpan selesai dan lihat hasilnya.


Selamat Mencoba