• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Một kiểu phân trang đẹp cho blogspot

46
12/02/2011

Hiện nay trên cộng đồng Blogger có khá nhiều kiểu phân trang khác nhau cho blogspot. Mỗi kiểu đều có nét đẹp và ưu điểm riêng cho nên bạn cần lựa chọn kiểu nào phù hợp nhất để cài đặt cho blog của mình. Bạn có thể dùng từ khóa “phan trang” để tìm trên blog này một số kiểu phân trang cho blogspot.

Script cho các kiểu phân trang dường như có những điểm na ná giống và cách cài đặt cũng vậy. Ở đây Bloggerism xin giới thiệu một kiểu phân trang cũng khá đẹp.

Xem Demo.

Để cài đặt kiểu phân trang này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.

.showpageOf{background:#006666;margin-right:3px;padding:4px 7px;color:#FFF;text-shadow:1px 1px 1px #000;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpagePoint{background:#FFF;border:1px solid #006666;margin:0 3px;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a,.showpageNum a:visited{background:#006666;margin:0 3px;padding:4px 7px;color:#FFF;text-shadow:1px 1px 1px #000;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a:hover,.showpageNum a:active{background:#FFF;border:1px solid #006666;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;text-decoration:none}

Bước 2. Đặt đoạn code bên dưới vào trước thẻ </body>.

<script type='text/javascript'>var home_page=&quot;/&quot;;
urlactivepage=location.href;postperpage=7;
numshowpage=5;
upPageWord=&#39;Prev&#39;;
downPageWord=&#39;Next&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
var nopage;var jenis;var first;var lblname1;PageNavi();function loophalaman(a){var e="";nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=first-nomerkiri;if(mulai<1){mulai=1}last=parseInt(a/postperpage)+1;if(last-1==a/postperpage){last=last-1}akhir=mulai+numshowpage-1;if(akhir>last){akhir=last}e+="<span class='showpageOf'>Page "+first+"/"+last+"</span>";var g=parseInt(first)-1;if(first>1){if(first==2){if(jenis=="page"){e+='<span class="showpageNum"><a href="'+home_page+'">'+upPageWord+"</a></span>"}else{e+='<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">'+upPageWord+"</a></span>"}}else{if(jenis=="page"){e+='<span class="showpageNum"><a href="#PageNo='+g+'" onclick="redirectpage('+g+');return false">'+upPageWord+"</a></span>"}else{e+='<span class="showpageNum"><a href="#PageNo='+g+'" onclick="redirectlabel('+g+');return false">'+upPageWord+"</a></span>"}}}if(mulai>1){if(jenis=="page"){e+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{e+='<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>'}}if(mulai>2){e+="..."}for(var f=mulai;f<=akhir;f++){if(first==f){e+='<span class="showpagePoint">'+f+"</span>"}else{if(f==1){if(jenis=="page"){e+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{e+='<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>'}}else{if(jenis=="page"){e+='<span class="showpageNum"><a href="#PageNo='+f+'" onclick="redirectpage('+f+');return false">'+f+"</a></span>"}else{e+='<span class="showpageNum"><a href="#PageNo='+f+'" onclick="redirectlabel('+f+');return false">'+f+"</a></span>"}}}}if(akhir<last-1){e+="..."}if(akhir<last){if(jenis=="page"){e+='<span class="showpageNum"><a href="#PageNo='+last+'" onclick="redirectpage('+last+');return false">'+last+"</a></span>"}else{e+='<span class="showpageNum"><a href="#PageNo='+last+'" onclick="redirectlabel('+last+');return false">'+last+"</a></span>"}}var c=parseInt(first)+1;if(first<last){if(jenis=="page"){e+='<span class="showpageNum"><a href="#PageNo='+c+'" onclick="redirectpage('+c+');return false">'+downPageWord+"</a></span>"}else{e+='<span class="showpageNum"><a href="#PageNo='+c+'" onclick="redirectlabel('+c+');return false">'+downPageWord+"</a></span>"}}e+="<div></div>";var d=document.getElementsByName("pageArea");var b=document.getElementById("blog-pager");for(var h=0;h<d.length;h++){d[h].innerHTML=e}if(d&&d.length>0){e=""}if(b){b.innerHTML=e}}function firstpost(a){var c=a.feed;var b=parseInt(c.openSearch$totalResults.$t,10);loophalaman(b)}function PageNavi(){var a=urlactivepage;if(a.indexOf("/search/label/")!=-1){if(a.indexOf("?updated-max")!=-1){lblname1=a.substring(a.indexOf("/search/label/")+14,a.indexOf("?updated-max"))}else{lblname1=a.substring(a.indexOf("/search/label/")+14,a.indexOf("?&max"))}}if(a.indexOf("?q=")==-1&&a.indexOf(".html")==-1){if(a.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){first=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{first=1}document.write('<script src="'+home_page+'feeds/posts/summary?max-results=1&alt=json-in-script&callback=firstpost"><\/script>')}else{jenis="label";if(a.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){first=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{first=1}document.write('<script src="'+home_page+"feeds/posts/summary/-/"+lblname1+'?alt=json-in-script&callback=firstpost&max-results=1" ><\/script>')}}}function redirectpage(a){jsonstart=(a-1)*postperpage;nopage=a;var c=document.getElementsByTagName("head")[0];var b=document.createElement("script");b.type="text/javascript";b.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");c.appendChild(b)}function redirectlabel(a){jsonstart=(a-1)*postperpage;nopage=a;var c=document.getElementsByTagName("head")[0];var b=document.createElement("script");b.type="text/javascript";b.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");c.appendChild(b)}function finddatepost(b){post=b.feed.entry[0];var a=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var d=encodeURIComponent(a);if(jenis=="page"){var c="/search?updated-max="+d+"&max-results="+postperpage+"#PageNo="+nopage}else{var c="/search/label/"+lblname1+"?updated-max="+d+"&max-results="+postperpage+"#PageNo="+nopage}location.href=c};
//]]>
</script>

Bạn có thể điều chỉnh số bài viết hiển thị ở mỗi trang tại tham số postperpage=7.

Bước 3. Tìm bất kỳ dòng nào như thế này 'data:label.url'

Rồi thay thế nó bằng dòng 'data:label.url + &quot;?&amp;max-results=7&quot;'

Lưu Template là OK.

{46 bình luậnAdd yours ?}

17:18:00, 12 thg 2, 2011

Em cũng từng dùng cái phân trang này nhưng không thích lắm :)

Mà lộ cái blog tiếng Hán rồi nhé :51)

Reply
17:29:00, 12 thg 2, 2011

Bạn ơi giúp tớ cái này với, http://hochanhso1.blogspot.com/2011/02/hoi-ap-hoc-tap.html bạn vô xem tại sao ngoài Comment của admin ra thì các comment khác không hiển thị vậy

Reply
20:03:00, 12 thg 2, 2011

Bạn ơi cái này có phân trang cho label lun ko nhỉ, nếu ko bạn chỉ mình cách phân trang cho label giống của bạn đi. Tks :64)

Reply
07:10:00, 13 thg 2, 2011

phần js khá dài, vì vậy các bạn nên gộp thành 1 file js, dư vầy sẽ làm blog đọc js nhanh hơn, nếu ko sẽ chậm lắm

Reply
07:35:00, 13 thg 2, 2011

Anh Hà xem cái Navigation của em có ngon ko :51)
chỉ cần chỉnh phần Border là ok :62)

Reply
10:25:00, 13 thg 2, 2011

@L� Truong Vinh Trung Bước 3 là để phân trang cho Label đó bạn

Reply
10:29:00, 13 thg 2, 2011

@Nguyễn Đức Vẫn bình thường mà bạn, comment của Admin bạn và các comment khác đều ok mà.

Reply
10:45:00, 13 thg 2, 2011

Ồ style này giống y chang bên blog duypham thì phải. Chúng có bà con gì không Hà ? :53)

Reply
13:00:00, 13 thg 2, 2011

Bạn ơi, bạn bít làm bài viết ngẫu nhiên có hình ảnh ko chỉ mình với, mình cần cái đó trang trí thêm cho blog. Tks bạn :53)

Reply
17:48:00, 13 thg 2, 2011

mới làm blog mới http://ictssoft.blogspot.com/ hi vọng bác qua ghé thăm mà này add lại link nhé bác . Bác hướng dẫn mình chỉnh cái màu nền phần hear thành màu xanh đi

Reply
18:33:00, 13 thg 2, 2011

@Minh Quân: Bạn tìm đoạn code này trong site của bạn:

background:#e54414 url(http://lh3.ggpht.com/_JgEGJbRLYj4/Sykq_d5kXDI/AAAAAAAABlc/_fDFcWBN0iE/headerbg.png) top left repeat-x;

Và bạn chỉ việc thay link màu nền background mà bạn muốn. Hoặc bạn có thể thay đoạn code sau:

background: Green; top left repeat-x;

Bạn có thể thay Green thành bất cứ màu nào mà bạn thích! ;;)

Reply
07:55:00, 14 thg 2, 2011

@iTechPlus Cái này mình giới thiệu lên đây để bà con tham khảo từ blog Duy Phạm, còn k biết tác giả gốc là ai, nói chung script các phân trang đều na ná giống nhau cả. Mà hiện nay nhiều trang blogspot có kiểu phân trang giống nhau

Reply
20:15:00, 14 thg 2, 2011

Lúc trước dùng code phân trang có sẵn trong template nó toàn bị mất bài, thay lại code của bác Hà bây giờ ok rồi :54)

Reply
09:23:00, 16 thg 2, 2011

Anh ơi chỉ giúp em cách làm nút bấm như trang http://blogtruyen.com/ với http://blogtruyen.com/

Reply
11:46:00, 16 thg 2, 2011

Bạn ơi mình mới tạo tên miền .tk cho blog của mình: http://vn-share4u.tk/
Nhưng khi mình nhấp vào mấy label khác thì link web vẫn là vậy, còn khi ở blogspot thì nó ra link http://vn-share4u.blogspot.com/search/label/Vui%20c%C6%B0%E1%BB%9Di?&max-results=7
Có cách nào khắc phục ko bạn :(

Reply
12:50:00, 16 thg 2, 2011

@Lê Trương Vĩnh Trung Eo ơi ! :|

Reply
14:29:00, 16 thg 2, 2011

Thủ thuật phân trang trên được em phát triển từ widget của Abu Farhan. Đến thời điểm này thì duy nhất em decode widget đó để fix một vài lỗi hiển thị, với những blog phân trang cùng kiểu bác sẽ thấy code đều được encode. Sở dĩ em không viết bài để giới thiệu thủ thuật đó vì nó dính đến vấn đề bản quyền. Nếu biết đến deluxetemplates.net thì bác sẽ thấy là blog này cũng dùng thuật phân trang này nhưng nói rõ là chỉ dành cho mình deluxetemplates.net mà thôi. Em nghĩ là bác cũng nên tôn trọng vấn đề bản quyền.

Reply
15:21:00, 16 thg 2, 2011

Ban đầu anh cũng thấy kiểu phân trang này giống của Abu Farhan. Anh viết bài này chỉ mang tính sưu tầm cho mọi người xài, trong các comment anh có nói là từ blog Duy Pham, một là tôn trọng công sức của Duy Phạm, hai là né bản quyền nên trong bài viết không đề cập đến Duy Phạm.

Reply
17:56:00, 16 thg 2, 2011

Abu bảo chỉ không được edit cái script thôi, nếu muốn edit thì phải liên hệ tác giả.

Ở đây anh Hà không edit gì chỉ là giới thiệu thôi, nhưng em nghĩ nên ghi nguồn từ Abu Farhan :53)

Reply
19:56:00, 16 thg 2, 2011

Hjc, ko ai giúp mình ah :(, chứ link như vậy send cho bạn sao đúng ngay bài mình đưa đc

Reply
20:14:00, 16 thg 2, 2011

@Noct script trên em đã decode và edit nên mới thấy rõ những câu lệnh như vậy, code gốc của Abu là code được encode. Nếu viết bài giới thiệu và ghi nguồn từ Abu em nghĩ nên dùng chính code của tác giả, có dòng widget by Abu Farhan.

@Lê Trương Vĩnh Trung bạn chỉ cài đặt tên miền kiểu forward chứ không phải cài đặt DNS nên mới như vậy.

Reply
12:06:00, 17 thg 2, 2011

Sao mọi người ko dùng if & các function tích trong xml để tạo pager nhỉ :-/ Khỏi phụ thuộc script & cái feeds cùi của blogger mất bài wài :67) :67) :67)

Reply
20:48:00, 13 thg 3, 2011

Chào Nhật Hà, có lẽ bạn cũng đã từng đến site traidatmui.com. M la quản trị của site này tên Nguyễn Văn Đình, thấy site của Hà cũng có nội dung tương đồng nên mong chúng ta có thể trao đổi liên kết để cùng nhau phát triển. Ý của H thế nào? Mong nhận được hồi âm!

Nick: traidatmui88
Email: admin@traidatmui.com
Web: http://www.traidatmui.com

Reply
15:03:00, 14 thg 3, 2011

Đã add link của Traidatmui. Bạn kiểm tra nhé.

Reply
21:39:00, 24 thg 3, 2011

Ok! m cũng đã add link của Nhat Ha.Chuc vui ve và ngay cang phat trien.

http://www.traidatmui.com

Reply
23:52:00, 24 thg 3, 2011

bác Hà trao đổi link với em ko :58). em add link bác 2 tháng nay rồi đó :65)

Reply
07:09:00, 25 thg 3, 2011

Ok, sorry nha, để tớ đưa vào danh sách Friend Blogroll nha. :51)

Reply
08:41:00, 25 thg 3, 2011

cám ơn bác nhiều :51)

Reply
02:28:00, 13 thg 4, 2011

Cho mình hỏi! để đổi màu của kiểu phân trang này từ màu xanh sang màu khác thì làm như thế nào vậy?

Reply
07:26:00, 13 thg 4, 2011

Tại thuộc tính background:#006666, bạn thay mã màu bằng mã màu bạn thích nhé

Reply
15:26:00, 7 thg 6, 2011

Mình làm được rồi.
Cách này rất hay so với các kiểu phân trang khác.

Tham khảo nhé:

http://ebookforchildren.blogspot.com

Reply
01:03:00, 4 thg 7, 2011

Cái này mình thử rồi xong lại phải tháo ra, vì nõ chỉ hoạt động tốt trên trang Home của Blog, nếu bạn vào Chủ đề con, nó sẽ không hiển thi đúng số lượng bài trong Chủ đề, ngoài ra số bà hiện ra trên trang cũng không hiển thị đúng, cụ thể mình để là 5 nhưng chỉ hiện 4, để 8 hoặc 10 cũng chỉ hiện ra 4, trong Chủ đề con có 6 bài chỉ hiện 4. Mr. Hà cùng khắc phục cho anh em nhé.

Reply
04:04:00, 14 thg 8, 2011

sao của em khi cho đoạn mã đầu tiên lên trên thẻ ]]>. là nó hiển thị ra trang chủ nguyên văn cả đoạn đó luôn chứ ko hoạt động được bác HA ạ, mong bác giúp

Reply
04:08:00, 14 thg 8, 2011

@DNNT

bác bỏ đoạn code trước thẻ ]]> đi là tiện ích phân trang xài bình thường ah, bác xem thử đây http://ghost2s.blogspot.com

Reply
23:24:00, 30 thg 8, 2011

Tôi là một người mới toanh. Tôi cũng thử trên blog của tôi cách phân trang này mà sao nó không chịu. Không biết tôi đã sai ở chỗ nào ?
Hình như của bạn là ]]>. còn của tôi thì chỉ có nên không được hay sao ấy.
Admin xem giúp tôi với nhé ?

Reply
23:51:00, 30 thg 8, 2011

To chị Việt Phương: Đối với mọi blogspot thì đều có thẻ b:skin ở Bước 1 như nhau cả. Chị đặt code Bước 1 sau dòng .post-thumbnail{float:right;margin-left:20px} trong Template của blog chị nhé.

Reply
23:34:00, 4 thg 9, 2011

Cám ơn admin.
Tôi đã làm được. Đã lưu rất cẩn thận nhưng tôi không biết phải làm sao để ... phân trang cả. (Có lẽ giống ngố quá).Admin giúp tôi thêm một lần nữa nhé ?
Cám ơn thật nhiều.

Reply
23:42:00, 4 thg 9, 2011

Chào chị Phương,bữa nào em chọn cho cái temp khác có phân trang đẹp để dùng cũng được.Nhưng mà chị nghĩ kỹ nha.Cái temp chị đang dùng SEO rất okie,em thử rồi,mấy cái bình luận của em khi gõ G đếu thấy cả,thậm chí cả mấy cái cuối tháng 8 luôn.
Hehe,xin lỗi pác Hà tí.Đây là bà chị tớ,cũng ngố như tớ thui.Hihi

Reply
23:49:00, 4 thg 9, 2011

Hê lố chị Phương,chị em mình ngố như nhau.Hihi
Xin lỗi cả nhà tí,đây là chị tớ

Reply
08:48:00, 7 thg 9, 2011

Cảm ơn HNH về thủ thuật này !
Nhưng mình có chút ít rắc rối xảy ra :
Page 1/3123Next
Đó là cái mình hiển thị , bị dính liền với nhau .
Bạn có thể giúp mình được không ,giản cách ra một chút ^^

Reply
10:16:00, 7 thg 9, 2011

To Bựa Nhân: Bạn k share hồ sơ của bạn, lấy đâu địa chỉ blogspot của bạn nữa mà xử chứ :51)

Reply
11:40:00, 7 thg 9, 2011

@Huỳnh Nhật Hà
http://www.buanhan.info/ Đây nè bạn , hjhj

Reply
19:53:00, 11 thg 9, 2011

em đàn dùng cái này... Nhưng mà cho em hỏi cái này nó có cả chức năng next post và prewev post nữa hả anh... Em nếu thình thoảng em thấy cái old post và new post của em lại xuất hiện. Loại bỏ nó kiểu gì anh??? Nếu như cái này có chức năng đó rồi.

Reply
20:09:00, 11 thg 9, 2011

E đọc bài cài đặt Next Post - Prev Post để hiểu thêm nhé.

Reply
00:20:00, 20 thg 11, 2011

BẠn có thể cho mình biết lỗi này là lỗi gì không?

Thanks
http://www.xemtruyen.net/search?updated-max=2011-11-02T03%3A37%3A00-07%3A00&max-results=14#PageNo=2

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn