Cách phân trang cho blog và một số style

Cách phân trang cho blog và một số styleBài viết này sẽ hướng dẫn cách phân trang cho Blog với một số style đẹp đã được thiết kế sẵn

Chúng ta đều đã biết rằng Blogger vốn chỉ cung cấp 2 link "Previous" và "Next" để chuyển bài, điều đó hiển nhiên không làm thỏa mãn người dùng. Vì thế có nhiều hack cho Blogger ra đời. Hack lần này trình bày về cơ bản không khác các hack trước, chức năng cũng không nổi bật hơn nhiều, chỉ có duy nhất 1 điểm là nó được viết lại hoàn toàn theo phong cách của 1 plugin nổi tiếng cho WordPress - WP-PageNavi.

CÁCH THỰC HIỆN

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm dòng code có dạng tương tự sau:

Những chữ tô xanh không cần phải giống nhau với các template.

- Thêm vào sau nó đoạn code sau:

if(e<=1){return} // Bỏ dòng này đi, nếu muốn các bài đăng trong 1 label nào đó ít hơn "perPage" mà vẫn hiển thị được phân trang. (Nó có dạng "Pages 1 of 1" - để người đọc biết được rằng số bài đăng trong label này chỉ có thế)

Bước 2: Tìm dòng

- Thay thế nó bằng đoạn code sau:

Bước 3: Tìm dòng code ]]>

- Thêm vào trước nó một trong 7 mẫu code sau:

Mẫu 1:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi     clear:both;
     margin:10px auto;
     text-align:center;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a     padding:3px;
     margin-right:5px;
     background:#fff;
     border:1px solid #c20c0c;
}

/*Màu link đã xem qua*/
.pagenavi a:visited{ 
     color:#c20c0c;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current     background:#c20c0c;
     color:#fff;
     text-decoration:none;
}
.pagenavi .pages,.pagenavi .current     font-weight:bold;
}
.pagenavi .pages

Mẫu 2:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi     clear:both;
     margin:10px auto;
     text-align:center
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a { 
     font-size:12px;
     padding: 2px 4px 2px 4px;
     margin: 2px;
     border: 1px solid #dfdfdf;
     color:#000;
}
.pagenavi a:visited{}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current      color:#FFF;
      background-color:#e81d1d;
      border: 1px solid #fb1515;
      text-decoration:none;
}

Mẫu 3:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi     clear:both;
     margin:10px auto;
     text-align:center;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a      background:#0e0f10;
     font-size:12px;
     padding: 3px 5px;
     margin: 2px;
     border: 1px solid #333;
     color:#fff;
}

.pagenavi a:visited{}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current     color: #FFF;
     background-color: #33393f;
     border: 1px solid #444;
     text-decoration:none;
}

Mẫu 4:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi    clear:both;
    margin:10px auto 20px;
    text-align:center;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a    background:#24bde2;
    border:1px solid #4adcff;
    padding:3px 8px;
    color:#fff;
    margin:2px;
    font-size:12px;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current    color:#fff;
    background:#ff6734;
    border:1px solid #ddd;
    text-decoration:none;
}
.pagenavi .pages{display:none}

Mẫu 5:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi    background:#f1f1f1;
    clear:both;
    margin:12px auto 20px;
    text-align:center;
    border:1px solid #bfbfbf;
    padding:3px 0;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a    border:1px solid #f1f1f1;
    padding:1px 4px;
    color:#000;
    margin:2px;
    font-size:12px;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current    border:1px solid #bfbfbf;
    background:#fffdf0;
    color:#000;
    text-decoration:none;
}

Mẫu 6:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi    background:#3498b9;
    clear:both;
    margin:12px auto 20px;
    text-align:center;
    border:1px solid #2f7a93;
    padding:4px 0;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a    font-weight:bold;
    padding:7px 8px;
    color:#fff;
    margin:1px;
    font-size:11px;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current    background:#236e8f;
    color:#fff;
    text-decoration:none;
}

Mẫu 7:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi    clear:both;
    text-align:right;
    margin:25px 0 10px 0;
    font-size:.714em;
    font-weight:600;
    line-height:1.4em;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a    background:#e1e1e1;
    color:#555;
    border:1px solid #555;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:0 1px 0 #FFF;
    -webkit-box-shadow:0 1px 0 #FFF;
    box-shadow:0 1px 0 #FFF;
    margin-left:5px;
    padding:4px 6px 3px;
    text-shadow:0 1px 0 #C2C2C2;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current    background:#29A07C;
    border:1px solid #00203B;
    text-shadow:0 -1px 0 #00203B;
    color:#fff;
    text-decoration:none;
}

.pagenavi .pages