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

rais maraya said...

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

Nasrullah Halim said...

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

Godingo Gryswera said...

Thank gan
kunbal www.godingo99.blogspot.com

Qorry Ashari said...

yes berhasil! terima kasih buat tutorialnya :))

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

Hima Ali'ul Ma'wa said...

sob saat buka gagaet label kok posting lama masih ada ya

OM HADI 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

Syamsul Alam said...

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

Akarsana Kosmetik said...

Terimakasih Gan, semoga jad amal baik

Andrian SA said...

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

DragoLonirzt said...

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

Crazy Men said...

thanks bro

Faisal Akbar said...

makasih banyak gan

Post a Comment