3.04.2009

Membuat Navigasi Halaman Bernomor/Paging

Setelah lama saya mencari akhirnya dapat juga, jika biasanya pada halaman pada blog anda hanya ada older post ternyata itu bisa di ganti dengan halaman bernomor seperti gambar berikut:


penasaran bagaiman cara membuatnya, langsung aja :
yang paling penting anda harus login dulu
2. masuk ke tata letak (layout) >> element halaman
3. tambah gedget >> pilih HTML/java script
4. copas dan code berikut:

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;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 #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;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 #333;
color: #000000;
background-color: #FFFFFF;

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


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
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 #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.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=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
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 += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></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 = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

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>

5. text yang berwarna merah bisa anda ganti dengan tetx seperti: first menjadi home,
next menjadi lanjut, Previous menjadi kembali last menjadi terakhir
6. letakkan di bawah posting blog seperti gambar berikut:

7. simpan template, lihat hasilnya . . .



Baca juga post ini:



29 comments:

  1. tnx bgt infonya mas . .
    blog saya jadi anda paging nya . .
    :o

    ReplyDelete
  2. sUmPAh keReN bGT mAs..eIA sAyA BArU NIh bIKin BlOG NTuNK ADA maS??:D;;)

    ReplyDelete
  3. thanks, posting kamu semua sangat bermanfaat, tolong donk, liat blog saya dann kasih saran buat ngubahnya, karena, blog saya masih baru

    ReplyDelete
  4. mas bisa ga ajarin saya buat bikin...kaya mas gtu yg ada posting lama/posting barunya..
    emmm...yg buat halaman baru...di blog..saya pusing bgt gmna sih carannya?:(

    ReplyDelete
  5. Om Cara Nambah Halaman bernomornya gimana.
    Ko dah di copi scrip atas cuman ada 2.
    Di Gambar Atas Ada 6 tuh.
    Nambahnya gimana Om.
    Kasi tau ke:
    FS:eaah@yahoo.com
    Ato Om kasi tau ke:
    YahooMail:raldizzz@rocketmail.com

    ReplyDelete
  6. akhirnya aku nemuin juga tutorial ini... makasih sob... langsung aku kopas...

    ReplyDelete
  7. bos di tempatku ko ga muncul pagingnya yh...knapa ya...tlong bantuin bos

    zeusky182@yahoo.com
    url: http://puguh182.blogspot.com

    ReplyDelete
  8. thanks thanks.... thanks 2 u.... bro... check my blog yooo

    ReplyDelete
  9. Byak yang g jadi, pa aku yang salah menerapakan ya

    ReplyDelete
  10. punya saya udah bisa mas....thanks buangettttttt....

    http://trick-ponsel.blogspot.com/

    ReplyDelete
  11. thx bro infonya.....keren !!!

    Salam kenal :D

    http://altardunia.blogspot.com/

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. thx...bgt gan...

    w blajar bnyak dari lo..

    tkz ya gan...

    NI BLOG W SKRG... agil-wk.blogspot.com

    biarpun ga sebagus puna lo....w bkal trus blajar...

    tkzzz :)

    ReplyDelete
  14. and dont forget..keep posting...!!!!

    ReplyDelete
  15. Hy, Q blh mnta code music pnya qm gak

    ReplyDelete
  16. Makasih Nya Tips Nya Blog Ku Jadi Keren Ni Tolong Kunjunggi www.labibcheatlsdanpb.blogspot.com

    ReplyDelete
  17. bagus gan... tolong kunjungi yAh... http://dark-newbie.blogspot.com/

    ReplyDelete
  18. mantrap bozz trik nya.
    tq yaw..
    salam dari reph
    http://raflyilham.blogspot.com/2012/09/membuat-email-dengan-domain-yang-keren.html

    ReplyDelete