Trang chủ \ 17:31

Tạo phân trang (page navigation) cho Blogspot

Thanh điều hướng cho Blogger được viết bởi Anhvo, đây là phân trang mình đánh giá cao cùng với phân trang của Abu Farhan bởi tính nhẹ nhàng. Chỉ dựa vào tổng số lượng bài viết và ngày tháng bài đăng mới nhất toàn blog hoặc từng nhãn được lấy từ feed. Tổng số lượng bài viết chỉ cần thông tin đầu tiên từ feed và dữ liệu được ngắt bởi max-results=0, ngày tháng bài đăng mới nhất được ngắt bởi max-results=1 có chứa thông tin của bài đăng mới nhất toàn blog hoặc từng nhãn. Việc không lấy toàn bộ dữ liệu từ feed để tạo phân trang không những giúp blog tải nhanh mà còn không bị lỗi với blog có trên 500 bài viết, đây là số lượng bài viết tối đa mà feed lưu trữ.

page navigation


Vào Thiết kế chọn Chỉnh sửa HTML, đánh dấu Mở rộng Mẫu Tiện ích và tìm đoạn mã:
<b:include name='nextprev'/>

Thay thế nó bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType == "index"'>

<style type="text/css">
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
}
</style>

<div align="center" style="margin:5px;"><form action="#" name="pager20"><span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span>
</form></div>

<script type="text/javascript">
var blogID = "6628069224773557671";
var home_page = "/";
var pager_max_main = 5;
var pager_first_text = "First";
var pager_last_text = "Last";
var pager_prev_text = "Prev";
var pager_next_text = "Next";
</script>

<script type='text/javascript'>
//<![CDATA[
var pager_max_results = 20;
if(location.href.match("max-results=")){
pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("\&")[0]);
} else if(!location.href.match("/search/label/")){
pager_max_results = pager_max_main;
}
var per_page = pager_max_results ;
if(!location.href.match('/search/label/')) {
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary";
pager_pageurl = home_page+"search";
}
else {
label = location.href.split("/")[5];
label = label.split("?")[0];
label = label.replace(/ /g,"%20");
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;
pager_pageurl = home_page+"search/label/"+label;
}
var pager_opening = 1;
if(location.href.match("popening=")){
pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("\&")[0]);
}
var num_pages = 1;
function createBlogPager(){
var script = document.createElement('script');
script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script)
}
function countnumpost(json) {
var posts = json.feed.openSearch$totalResults.$t;
num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
var a1 = document.createElement("a");
a1.className = "blogpager";
a1.title = "Jump to page: (1)";
a1.href = "javascript:page(1)";
a1.innerHTML = pager_first_text;
document.getElementById("vwg-pager-first").appendChild(a1);
var a4 = document.createElement("a");
a4.className = "blogpager";
a4.title = "Jump to page: ("+num_pages+")";
a4.href = "javascript:page("+num_pages+")";
a4.innerHTML = pager_last_text;
document.getElementById("vwg-pager-last").appendChild(a4);
var prev = (pager_opening!=1) ? pager_opening-1 : 1;
var a2 = document.createElement("a");
a2.className = "blogpager";
a2.title = "Jump to page: ("+prev+")";
a2.href = "javascript:page("+prev+")";
a2.innerHTML = pager_prev_text;
document.getElementById("vwg-pager-prev").appendChild(a2);
var next = (pager_opening!=num_pages) ? pager_opening+1 : num_pages;
var a3 = document.createElement("a");
a3.className = "blogpager";
a3.title = "Jump to page: ("+next+")";
a3.href = "javascript:page("+next+")";
a3.innerHTML = pager_next_text;
document.getElementById("vwg-pager-next").appendChild(a3);
document.pager20.showingpage.value = pager_opening;
document.pager20.pagestotal.value = num_pages;
}
function checkpager(){
var uinput = parseInt(document.pager20.showingpage.value);
if((uinput <= num_pages)&&(uinput >= 1)) {
page(uinput);
}
else {
alert("Invalid page number. Please try by another!");
document.pager20.showingpage.focus() ;
document.pager20.showingpage.select();
}
}
function getDateAndGo(json){
var date2 = json.feed.entry[0].published.$t;
ss = parseFloat(date2.substring(17,19));
if(ss<59) ss++;
if(ss<10) { ss = "0"+ ss; }
date4 = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length));
location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening;
}
function page(startindex) {
pager_opening = startindex;
var i = per_page*(startindex-1)+1;
var script2 = document.createElement("script");
script2.src = pager_feedx+"?start-index="+i+"&max-results=1&alt=json-in-script&callback=getDateAndGo";
document.getElementsByTagName('head')[0].appendChild(script2)
}
createBlogPager();
//]]>
</script>

</b:if>

Thay thế 6628069224773557671 thành BlogID của bạn và 5 thành số bài đăng bạn muốn hiển thị trên 1 trang.
Chia sẻ Phần mềm và Tài liệu cho người dùng Windows, Ubuntu. Hướng dẫn Thủ thuật cho người dùng Blogger, Blogspot.

Chia sẻ

49

Nhận xét
1

cho em hỏi làm khung đặt code giống như anh làm sao vậy?
chỉ em dc không

Reply
2

Bạn tìm hiểu về CSS sẽ làm được thôi. Thêm đoạn code sau vào vào style sheet:
.post code{font-family:"Courier New",monospace;line-height:1.3em;border:4px dotted #DDD;background:#F4F4F4 url(http://lh6.ggpht.com/_u7a1IFxc4WI/TKhXhTG4XyI/AAAAAAAAAOQ/Eb8r-QnWqtA/Code.png) top right no-repeat;margin:10px 0;padding:10px 10px;font-size:13px;display:block}
Khi viết bài muốn hiển thị code trong khung thì thêm thẻ code. Ví dụ:
<code>Đặt code tại đây</code>

Reply
3

thanks a nhiều lắm.Chúc a 1 ngày vui vẻ :))

Reply
4

Hi! Tại sao bạn ko đưa code trực tiếp ra bài viết nhỉ?

Mình đã download code trên, mình nhận ra có nhiều thẻ <Br /> dư thừa & code javascript đã bị xóa dòng bản quyền tác giả. Tác giả code trên là Anhvo, sư phụ của mình :)

Reply
5

Trước tớ có dùng code đó để phân trang cho blog nên nếu đưa code trong bài thì phân trang bị lỗi. Quả thật tớ chẳng biết ai là Anhvo, trước đây khi làm quen với Blogger tớ có tìm được thủ thuật phân trang này, readmore và bài viết liên quan của hoctro.blogspot.com nhưng có lẽ ở một blog nào đó mà không đề tác giả. 3 thủ thuật này trước tớ có dùng nên post lên đây.

Reply
6

Mình tiện nói thui chứ ko có ý gì :) Hì hì

Chắc là bạn mới gia nhập Blogger ko lâu nên ko bít Anhvo :-O. Anhvo là Blogger Việt du học Nga. Các sản phẩm hiện giờ Pager 2.0 ở trên, Auto Readmore, Recent Post, Recent Comment, Ban ID Blogger,... được cải tiến khá nhiều nhưng nguồn gốc cũng từ Anhvo, Btemplate.com hiện nay cũng sử dụng nhiều code của ảnh.

Đáng buồn Anhvo đã mất tăm hơi 2 năm rồi, Vietwebguide.com cũng hết hạn & bỏ hoang. Thật tiếc :((

Reply
7

@Rin Ừ đúng rồi, tớ tham gia hồi tháng 7/2010, đến tháng 9 thì mới tập trung sau khi bị mất tài khoản cũ. Btemplates là nơi tớ tham khảo nhiều code trong các template của họ, một nơi cung cấp temp chất lượng và chuyên nghiệp.

Reply
8

Btemplates chỉ đơn thuần là tổng hợp template từ nhiều nguồn khác nhau rồi upload lên host của họ thôi. Có một số template của mình làm cũng bị up lên mà ko ghi nguồn nữa. Không nên tôn vinh những trang web như vậy.

Reply
9

@Duy Pham Không ngờ chỉ một thời gian ngắn mà bạn tận tường cấu trúc của mã nguồn Blogger như vậy, mình thấy một số bài viết về tip blogger của bạn rất hay. Thật tuyệt =D>

@Taiki Xúc phạm thần tượng ghê :-t Mình nhớ ko lầm trước giờ mình xem các temp từ Btemplates đều có ghi nguồn trong bài đăng, nhất là dưới footer của trang Preview. Nếu bạn nói Btemplates lấy một số temp của bạn thì bạn có thể đưa ra một vài dẫn chứng để chứng minh những điều đó ko :-?? Vì biết đâu: Cũng có thể ngược lại là bạn đã lấy các temp từ Btemplates =)), Cũng có thể chính bạn đã cung cấp temp cho Btemplates nhưng ko ghi nguồn :D, Cũng có thể bạn từng share temp cho ai đó và người đó đã share lại cho Btemplate mà không ghi nguồn :-SS, Cũng có thể bạn và Btemplates đã cùng rip lại từ một tác giả khác @-)

Reply
10

Ôi ECF Blogger lại lag. Mình định nói là Taiki có thể đưa một vài dẫn chứng ko?

Reply
11

Btemplates, theo tôi biết thì là một trong những trang web đầu tiên cung cấp template blogger số lượng lớn. Có thể vì vậy mà nó nổi tiếng, nhưng tôi tự hỏi có bao nhiêu template là họ tự làm ra ? Nếu cậu Rin thường vào btemplates.com chắc hẳn cũng phải nhận ra chứ ? Nếu cậu tôn vinh nó thì đó là quan điểm của cậu, riêng tôi thì không, đơn giản là vì không thích kiểu kiếm lời trên sức lao động của người khác như vậy. Vậy nhé, tôi không muốn tranh cãi vô bổ ở đây đâu.

Đa số template trên đó đều có ghi nguồn, xui làm sao temp của mình làm lại không ghi, chắc do cung cấp temp trên site tiếng Việt nên họ không hiểu, tưởng chôm của ai. Bây giờ mà đem mấy cái temp đó ra để làm dẫn chứng thì xấu hổ quá, bởi mình làm mấy cái đó trong lúc đang tìm hiểu về blogger, kiến thức còn non kém nên trông nó không pro lắm :(. Thôi thì bác Rin cứ cho là tôi chém gió nha =))

Reply
12

Cái phân trang này do Anh Võ phát triển là đúng rồi. Mọi người xem nhé =))
=D> :D :P
:-O :-? :-SS :-t [-( @-) b-(

Reply
13

so great, đúng cái em đang cần...mà không biết kiếm nơi mô
:))

Reply
14

Nếu không thích nữa thì gỡ nó như thế nào?

Reply
15

@Dunlee 0977300246Làm ngược lại với hướng dẫn là dc.

Reply
16

Mình sẽ làm bài hướng dẫn ngược lại vấn đề này lấy tên là Hướng dẫn gở bỏ phân trang navigaion duy phạm thấy được không? =))

Reply
17

Duy cho mình hỏi: Bài đăng của mình được chia ra làm 2 cột, phân trang hoạt động tốt trên cả Label page nhưng có cách nào khắc phục để khi số bài viết là số lẻ thì phân trang này nằm ở dưới chứ như hình này thì xấu quá: http://1.bp.blogspot.com/-uyhRBve6o1M/TolVbbwUoAI/AAAAAAAAAJQ/M9lUB5RaAiE/s1600/error.png
Trang vnbooks đó Duy!

Reply
18

@PetitBác thêm <div style='clear:both'/> vào trước <div align="center" style="margin:5px;"> nhé.

Reply
19

@Duy Pham Thanks Duy! Đã fix được lỗi :)

Reply
20

Hì, sẵn cho mình hỏi tiếp, bây giờ mình muốn hiển thị tên người đăng bài, ngày đăng, số lượng comment trên trang chính thì phải di dời code như thế nào? Hiện mình đã ẩn date-header bằng lệnh display:none vì khi nó xuất hiện thì nó xuất hiện ở ngoài bài đăng và làm cho trang bị bể khung.

Reply
21

@PetitTrong thẻ <b:if cond='data:top.showAuthor'> là để hiển thị tên người viết bài, <b:if cond='data:top.showTimestamp> là hiển thị thời gian, <b:if cond='data:post.allowComments> là số comments. Bác đặt code vào nơi muốn hiển thị.

Reply
22

@Duy Pham Thanks Duy! :D

Reply
23

Nhận xét này đã bị tác giả xóa.

Reply
24

Muốn thu hẹp khoảng cách giữa bài đăng và khung comment thì mình phải làm thế nào Duy? Khoảng cách lớn quá trông không được đẹp lắm :D

Reply
25

@PetitBác xem margin của .post và .comments hoặc #comments lớn quá thì cho nhỏ lại.

Reply
26

Phải thêm giá trị margin-bottom: -85px; vào .post mới ổn, thanks Duy!

Reply
27

cảm ơn code của anh rất nhiều :D

Reply
28

Cám ơn code của bạn. Mới lạ và rất hay. Tôi có khó khăn một chút là sao có thể tạo cái hình nền cho cái page navigation này ???? Và sao một số code khác mà trước đây tôi chèn vào blog mình lại tìm kiếm để xóa đi thì lại không thấy. Trong khi blog vẫn hiện thấy rõ.
Blog của mình : http://luckyday1984.blogspot.com/

Reply
29

Xin lỗi cho mình hỏi với code này mình chạy tốt trên google chrome nhưng khi chạy trên firefox 12 thì bị lỗi là các nút next pre first last khi kick lần đầu vào chỉ mở ra tab mới mà ko chuyển trang.

Ko biết bác nào bị giống mình ko hay mình cài sai ???

Reply
30

@zhugeliangvnBạn đang sử dụng <base target='_blank'/> để mở link trong tab mới nên mới bị vậy.

Reply
31

@Duy Pham
Oh, không ngờ bác quan tâm các comment và reply nhanh đến vậy.
Hình như bác hơi hiểu nhầm e một tí, để em miêu tả kỹ:
Với chrome: ngon ko lỗi nào.
Với FF 12:
Lần đầu tiên bật firefox lên load trang, nếu kick vào first, next, pre, hay last sẽ bật sang trang mới new tab trắng tinh (trang trống).
Nếu dùng nút go để tìm trang thì sau khi dùng các nút pre next last first sẽ dùng lại được bình thường (không bật tab mới trắng tinh và load nội dung về trang hiện tại).

Đây là blog của em: bác vào xem giúp e đc ko ạ? linkmf.blogspot.com

Lưu ý là e dùng FF 12 mới có hiện tượng đó còn dùng chrome vẫn ok.

Reply
32

@zhugeliangvnVẫn câu trả lời như vậy. Bạn đang sử dụng tag <base target='_blank'>. Bạn chỉ đặt ở trang chủ nên các link ở đây sẽ mở trong tab mới, qua các trang khác k có tag này nên k sao. K bị trên Chrome vì có lẽ cách sử lý onclick của nó khác FF.

Reply
33

Oh, cảm ơn bác, em đã kiểm tra lại và quả thực là đúng như vậy.
Vậy em muốn hỏi bác là giờ em muốn dùng <*base target='_blank'/> để mở các link trong tab mới thì có cách nào để tránh xung đột ???

Có thể dùng lệnh khác đc ko ạ.

Reply
34

Anh Duy Pham ơi, sao blog của em nó hiển thị có 1 post/ 1 trang à : http://www.smgoddess9.blogspot.com

Reply
35

Readmore, tự thêm readmore cho bài nào dài. Chán phải nói đi nói lại điều này quá.

Reply
36

Bác duypham à, bác có thể cho em vài dòng css để chỉnh kiều font và màu chữ của tiện ích này ko ạ.
Em cài vào blog thì màu chữ xung đột ko giống màu link trong blog ạ.
Blog em: demo-linkmf.blogspot.com

Reply
37

Hic, vừa chỉnh được rồi bác ạ.
Thanks bác nhé.

Reply
38

Nhà mình vừa mới cài xong cho trang nhà.
Không hiểu sao làm theo những cái tut khác thì không được.
Chán nản thì nhớ tới Duy Pham (^^).
Càng ngày càng thích trang này.
d.l.h

Reply
39

Cam on rat nhieu ! Search tren Google cha~ ra cai gi toan ko dc

Reply
40

Blog của em có 2 cái chẳng biết thay cái nào :(
Cho mình hỏi lun. Trên Mobile có dùng phân trang được không??

Reply
41

Đừng chọn cái của phiên bản mobile. Mobile cũng phân trang được, nhưng phải chọn mobile custom và cần code lại để có ?m=1 vào sao url.

Reply
44

Admin giúp t cái code phân trang trên mobile với :(
Với lại cho t hỏi lun cái title Blogspot sao nó khong hiện ra Google mà chỉ hiện tên Domain nhỉ :( http://3.bp.blogspot.com/-KsRkJJZSzb8/UOu5dKe8wmI/AAAAAAAABd8/SyBT29X6Bf8/s1600/untitled.JPG

Reply
42

Duy pham cho t xin code phân trang treenmobile đi :) Cám ơn nhiều nhé :)

Reply
43

Ban Duy giup Trang de duoc phan trang di...minh khong biet lam sao?...theo su huong dan cua ban nhung minh khong biet chen the nao....cam on ban nhieu nhe..

Reply
45

Duy cho mình hỏi làm thế nào có được khung nhận xét như web của Duy vậy...?

Reply
46

Cho mình xin cái này về dùng nhé
Thank!

Reply
47

tìm hoài không thấy đoạn , nó ở chỗ nào vậy bác?

Reply
48

Phân trang này khá cũ rồi, temp mới giờ thay đổi nhiều, bạn đang dùng temp gì?

Reply
Nặc danh 1/5/17 09:04
49

z

Reply

Đăng nhận xét

Cancel reply

• Những nhận xét spam sẽ bị xóa.
• Public tài khoản Blogger để được trợ giúp.
• Nặc danh thường không được chào đón.