Loading post navigation ...
 
 

Pro page

30
Nhận xét

Tạo thanh "Page Navigation" (phân trang) cho blog

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Page Navigation Hack for Blogger
[FD's BlOg] - Bài viết trước mình đã hướng dẫn việc thay đổi liên kết "xem bài cũ hơn" và "xem bài mới hơn" bằng hình ảnh. Bài này mình giới thiệu cách tạo 1 "Page Navigation" dùng để phân trang bài viết trong blog.

Đây là hình ảnh minh họa:


Các bước thực hiện:
1. Đăng nhập blog
2. Vào chỉnh sửa Code HTML (không nhấp vào Mở rộng tiện ích)
3. Chèn đọan code CSS bên dưới trên dòng ]]></b:skin>

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top: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;
}

Các bạn có thể chỉnh sửa code CSS theo sở thích của mình, như màu chữ, màu nền...

4. Tìm đọan code sau

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


thêm đọan Javascript bên dưới ngay sau dòng </b:section>

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


Chú ý 1 số đọan code sau:
var pageCount = 5;

Số 5 trong đọan code là để hiển thị số lượng các bài viết trong 1 trang. Thay đổi nó tùy theo bạn, có thể 2 hoặc 3...

var displayPageNum = 3;
Code này để hiển thị số lượng trang web được liệt kê trên thanh "page navigation".

Tham khảo và dịch từ internet
Chúc các bạn thành công.


Enter your mail address:

30

Thành Công - Lạy Chúa yêu là có tội thì đời này con mang tội Chúa ơi

bạn ơi sao mình save lại nó báo lỗi này là sao "The reference to entity "max-results" must end with the ';' delimiter." mà kiểm tra thì thấy có ; mà nó cứ báo vậy.Bạn coi lại dùm mình nha.Thank

fandung-tester

à, mình biết lỗi này rồi.

Nếu bạn chèn code javascript đó vào thẳng trong template thì nó sẽ báo lỗi.

Nhưng tạo 1 widget HTML/javascript và dán code Javascript vào thì nó không báo lỗi.

Để khắc phục lỗi trên, bạn phải mã hóa code Javascript trước khi chèn vào code template (nếu dán vào widget HTML/javascript thì bạn không cần mã hóa)Để đơn giản bạn tạo i widget HTML/javascript ở cuối phần "Bài đăng trên blog" (trong bố cục - phần tử trang) rồi dán code javascript là ok thôi.

Thành Công - Lạy Chúa yêu là có tội thì đời này con mang tội Chúa ơi

Mình cũng vừa mới làm bên Widget rồi cũng không thấy gì cả. Mà bạn, bạn nói mã hóa là sao cơ mình chưa hiểu ý này, mã hóa theo dạng nào hả bạn.Cám ơn vì đã Reply sớm cho mình :D

fandung-tester

ủa, kì vậy, hồi đó blog mình cũng có cài cái này, chạy được nhưng chạy không chính xác, nên gỡ rồi.

Mã hóa tức là thay các kí tự đặc biệt trong code thành các chuỗi kí tự thay thế

Bạn có thể tham khảo code này :
http://sites.google.com/site/fdblogsite/Home/code-page-navigation.txt


copy tòan bộ nó dán vào trong widget HTML/javascript . (code này là code mà blog mình đã xài, chạy bình thường mà)

Thành Công - Lạy Chúa yêu là có tội thì đời này con mang tội Chúa ơi

Cám ơn bạn đã share, để mình nghiên cứu kĩ lại coi nó bị sao.Thank :)

Thành Công - Lạy Chúa yêu là có tội thì đời này con mang tội Chúa ơi

Mình làm được rồi bạn ạ. Cám ơn bạn nhiều nha, mình thấy những bài post của bạn rất hay và sắc sảo. Ủng hộ bạn cả hai tay hai chân :D. MÌnh còn non tay lắm sẽ còn hỏi bạn nhiều thứ nữa

fandung-tester

cám ơn lời khen đầy khích lệ của bạn, sẽ cố gắng post thật nhiều thủ thuật cho mọi người

[g][h][0][s][t]

hix,mình cũng làm cái phân trang hoài mà nó không đựoc,thử đủ mọi cách.fandung giúp với
http://gh0st.tk

fandung

@[g][h][0][s][t] :Bạn có thể tham khảo cách như của mình đã hướng dẫn cho bạn Thành Công đó. Bạn thành công đa làm thành công đó.

Bạn có thể xem các comment phía trên sẽ rõ

The! Nick : Everything I Do !

Anh FD ơi giúp em với, em vừa chép đoạn code của anh về chạy thử nhưng không được, nó chạy bị sai, khi em nhấn trang 2 thì nó nhảy sang trang khác, không chọn được theo thứ tự trang liên tiếp, không biết bị sao nhỉ ?

fandung-tester

đúng rồi em à, thủ thuật này có khuyết điểm là ở chỗ đó. Nếu số bài viết trên 1 ngày của bạn nhiều hơn số bài viết hiện thị ở mỗi trang, thì sẽ gặp lỗi này. và Nếu nó lớn hơn nhiều thì sẽ bị nhảy nhiều trang hơn, có thể là sẽ nhảy qua trang 3 hoặc 4 chẳng hạn.

Tuy nó phân trang đúng, nhưng nó chỉ phân theo ngày, chứ không phân chi tiết theo giờ nên mới có lỗi này. Do vậy mà mình không xài thủ thuật này.

The! Nick : Everything I Do !

thế àh, vậy sao anh còn up lên làm chi, làm em điên từ qua đến h vì cái phân trang này, thế anh có cai code phân trang nào khác mà dùng được hem ? post cho em với, em thanks nhiều nhiều !!!!

fandung-tester

thực ra thủ thuật này anh xài 1 thời gian mới phát hiện lỗi, chứ đâu phải ngay lúc đầu post bài anh đã biết nó có lỗi.

The! Nick : Everything I Do !

uh, bun nhi ?

Nguyễn Ngọc Long

Hic, bài này là đi copy về mà, sao biến thành của mình vậy bạn :D

Phan Dũng

đúng rồi bạn, bài này mình tham khảo ở trang blog nước ngoài, rồi dịch về cho anh em tham khảo.

Với lại mình có nói rõ là giới thiệu, chứ mình đâu có nhận thủ thuật này do mình nghĩ ra đâu. Tuy có thiếu sót là quên ghi nguồn :D

beck007

Hì hì cái này tụi nó làm lâu rồi nhưng tiếc là lỗi và chẳng ai tìm hiểu cả nếu FD có thời gian nên tìm hiểu cái này vì nó phân trang rất đẹp và chuyên nghiệp mong FD ráng tìm cách khắc phục sớm và PM cho em biết nhe :D

fandung

@beck007 : cái này liên quan nhiều tới JS, nhưng mà mình ko rành lắm nên khắc phục nó cũng khó.

Khách (ẩn danh)

cái hình minh họa đâu rồi anh Dung ?

Asian VIP
Jacky

làm Widget bằng cách nào? mình chỉ mới lần đầu lam blog a! ;)

Hapoi48

Minh dang dung 1 template mau khong biet co lam duoc phan trang nay khong?? Vi minh tim doan code:

nhung khong thay.
Ban biet nguyen nhan tai sao khong?
Sry vi khong go duoc tieng Viet nhe

Hapoi48
Chíp Việt

FanDung ôi,bạn có thể xem lại code được ko?Hình nhu ko thay gi het ban ah.Tks ban

SoftPC

Blog hay quá.Nhìu thủ thuật hay.Cám ơn bạn và chúc thành công!

Quốc Hùng

Bạn thiết kế website đẹp quá! Không như các trang khác xem nhức mắt muốn chết.Chúc bạn luôn phát triển trang website của mình.

ĐỖ ĐÌNH DŨNG

anh ơi em đã làm như hướng dẫn nhưng không được nó báo lỗi ,anh hướng dẫn cụ thể lại đc không anh

toantinplus

The reference to entity "max-results" must end with the ';' delimiter
(Tham chiếu đến thực thể "tối đa kết quả" phải kết thúc bằng ';' dấu phân cách)
Anh hãy giải thích chổ này cho Em với. Vì em mới viết blog nên cung ko rành lắm.hi

Children

Thủ thuật rất hay nhưng mình muốn nhảy đến trang nào thì mình nhập trang cần nhảy đến thì phải làm sao?

Người khuyết tật

sao tui lam phân trang không được vậy anh em



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home