• 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

Thêm một kiểu phân trang đẹp cho blogspot

29
20/03/2011

Như các bạn biết thì Abu Farhan là người viết khác nhiều script phân trang cho blogspot. Tôi đã có nhiều bài viết giới thiệu một vài kiểu phân trang như vậy. Bạn có thể tìm ở tag Pagination trên blog này để tham khảo. Hôm nay xin tiếp tục giới thiệu một kiểu phân trang khác của Abu Farhan, tuy nhiên ở đây tôi có chút điều chỉnh để tạo dáng vẻ khác một chút cho kiểu phân trang này để cộng đồng Blogger Việt tham khảo.

Trước tiên bạn hãy xem hình minh họa bên dưới.



Để có dáng vẻ như vậy thì chúng ta cần tạo code CSS như bên dưới.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước dòng ]]></b:skin>.

#blog-pager{padding:4px 0;text-align:center;}
/* Số trang */
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
color:#fff;
}
/* Trang x trong y */
.showpageTotal {
margin:0 8px 0 0;
}
/* Trang hiện tại được đánh dấu */
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}
/* Trang trước – Trang sau */
.showpagePN a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpagePN a:hover {
border:1px solid #888;
background: #ccc;
color:#fff;
}
/* Liên kết tạo Widget */
.showpageWidget{
font-size: 10px;
float: right;
margin: 10px 10px 0 300px;
}

Bạn có thể lấy mã mầu để tùy biến CSS theo ý muốn của mình để có một style khác.

Nếu bạn muốn ẩn liên kết Set up on your blogspot thì thêm display:none vào class showpageWidget.

Bước 2. Đặt đoạn code sau đây vào trước thẻ </body>.

<script type='text/javascript'>
//<![CDATA[
var postperpage=10;
var numshowpage=4;
var total_pag='Page:';
var upPageWord ='&#171; Prev';
var downPageWord ='Next &#187;';
var widget_pag='Set up on your blogspot';
//]]>
</script>
<script src='http://goo.gl/rgegj' type='text/javascript'/>

Bạn cần định dạng số bài đăng trên trang chính tương ứng với tham số postperpage=10 ở trên (Vào Settings >> Formatting >> ).

Lưu Template.

Bước 3. Chọn Expand Widget Templates. Tìm tất cả các dòng 'data:label.url' rồi thay nó bằng dòng

'data:label.url + &quot;?&amp;max-results=10&quot;'

Lưu Template là OK.

Many thanks to Abu Farhan for his Script. :46)

{29 bình luậnAdd yours ?}

12:26:00, 20 thg 3, 2011

Giải đáp riêng cho bạn Minh Quân theo yêu cầu của bạn muốn style phân trang như trang duy.im (xem trang này khoái thật MQ nhỉ!).

Code CSS ở Bước 1.


#blog-pager {
text-align: center;
text-transform: capitalize;
font: bold 12px arial;
padding: 10px 0;
}
.showpageArea {
font-family: verdana,arial;
color: #000;
font-size: 11px;
margin: 10px;
}
.showpageArea a {
color: #000;
text-shadow: 0 1px 2px #fff;
font-weight: 700;
}
.blog-pager a, .showpageNum a, .showpageNum a:link, .showpageNum a:visited, .showpageNum a:active {
padding: 3px 8px;
margin: 0 2px;
text-decoration: none;
border: 1px solid #999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background: #ddd url(http://goo.gl/O5lZm) 0 -50px repeat-x;
color: #000;
}
.showpageNum a:hover {
border: 1px solid #888;
background: #ccc url(http://goo.gl/EQk7N) 0 -25px repeat-x;
}
.showpageOf {
margin: 0 8px 0 0;
color: #000;
}
.showpagePoint {
color: #fff;
text-shadow: 0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border: 1px solid #999;
background: #666 url(http://goo.gl/cV1YH) 0 0 repeat-x;
text-decoration: none
}

Code Javascript ở Bước 2.

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=5;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://goo.gl/hCKQi' type='text/javascript'></script>

Các bước cài đặt giống như trên. :51)

Reply
15:59:00, 20 thg 3, 2011

Mình đã add blog của Ha, hi vọng bạn add lại blog mình ^^
http://vn-share4u.blogspot.com/2011/03/trao-oi-link-lien-ket.html

Reply
16:19:00, 20 thg 3, 2011

Sao bước 3 mình làm nó báo lỗi nhỉ , thanks hà với cái phân trang đó nha

Reply
itb
19:58:00, 20 thg 3, 2011

Anh hà làm cái popup một bảng tin như mục tìm hiểu Banner quảng cáo của anh thì như thế nào?

Reply
07:17:00, 21 thg 3, 2011

@Minh Quân Bước 3 k thể nào lỗi được, chú ý Bước 2 đặt code thế này để tránh lỗi:

<script type='text/javascript'>
//<![CDATA[
var home_page="/";
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=5;
var upPageWord ='Prev';
var downPageWord ='Next';
//]]>
</script>
<script src='http://goo.gl/hCKQi' type='text/javascript'></script>

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

@itb Đây là món độc tại VN, mình chưa muốn share, để tạo đặc trưng tí, dạng popup có thể xem ở tag Popup trên sidebar :67)

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

@Lê Trương Vĩnh Trung Đã add rùi, e xem lại nhé

Reply
18:51:00, 22 thg 3, 2011

Sao cái bước làm bị lỗi quài thế nhỉ , bác coi giùm em xem

Reply
19:03:00, 23 thg 3, 2011

Hà xử lí giùm mình cái bước 3 đi lỗi quài

Reply
08:56:00, 2 thg 4, 2011

muon bo link toi blog cua anh thi` xoa kieu gi anh giup em

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

Như cuối Bước 1 đã nói: thêm display:none vào class showpageWidget, như vầy nè:

/* Liên kết tạo Widget */
.showpageWidget{
display:none
font-size: 10px;
float: right;
margin: 10px 10px 0 300px;
}
:67)

Reply
09:34:00, 2 thg 4, 2011

muon' max la 9999 post thi the nao ha anh :D

Reply
10:09:00, 2 thg 4, 2011

Sao muốn kỳ vậy, 10 bài mỗi trang là dài rồi, em muốn thế thì kéo tới đâu, nặng đứng luôn

Reply
10:26:00, 2 thg 4, 2011

Y' em muon hoi la` tat ca bai viet cua minh` tren 500 bai co hien thi. duo.c khong

Reply
10:30:00, 2 thg 4, 2011

À ra thế, cài này max 500 bài, quá không được em à, đúng là k dùng cho blog quá nhiều bài viết được.

Reply
10:32:00, 2 thg 4, 2011

vay co kieu nao phan trang duoc nhieu bai` khong ha anh ?

Reply
10:36:00, 2 thg 4, 2011

E tìm trang tag Pagination đó,rất nhiều kiểu tha hồ mà lựa chọn nha e :71)

Reply
10:41:00, 2 thg 4, 2011

http://www.mydigitallife.info/2008/10/19/add-page-number-with-first-and-last-page-navigation-link-for-blogger-blogspot-with-gadget-element-and-manual-hack/


anh xem qua cai nay roi post len :d hon 9999 post

Reply
10:49:00, 2 thg 4, 2011

Code đó hình như có từ rất xưa roi, lỗi lắm, em thử áp dụng xem

Reply
11:32:00, 6 thg 5, 2011

Hà ơi cái CSS của phân trang nó nặng quá , bác có cách nào làm nhẹ nó ko

Reply
13:27:00, 8 thg 6, 2011

sao mình có 340 bài mà nó chỉ phân 32 trang (mỉnh chỉnh 1 trang 10 bài ) và số trang chỉ hiện 2 -3 bài còn 1 số bài khác bị ẩn ! post bài tiếp thì nó mới hiện dần ! đó là lỗi gì vậy ta !

Reply
19:47:00, 26 thg 6, 2011

Em dùng code này nhưng không thể phân trang cho Label được anh Hà ạ

Reply
07:55:00, 21 thg 7, 2011

Cái này hạn chế chỉ phân trang ngoài index được thôi
Visit my Blogspot: http://lagquary.tk

Reply
23:04:00, 4 thg 10, 2011

hú hú, bác hà ơi cái đoạn code 'data:label.url' em tìm trong template ko có nơi:C)

Reply
19:29:00, 7 thg 11, 2011

Anh Hà Ơi cái này không áp dụng cho nhãn hả. Em xem nhãn nhưng không có phân trang. Chỉ trang chủ thôi là sao? http://a1k44.thptbatbat.com/search/label/Ngh%E1%BB%8B%20Lu%E1%BA%ADn%20V%C4%83n%20H%E1%BB%8Dc?&max-results=5

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

code này bị 1 lỗi đó là hiển thị bài viết ở các trang không đều, có trang hiển thị 10 bài theo ý mình nhưng có trang lại hiện 2 bài, 4 bài?

Admin có biết lỗi này do đâu không?

Reply
10:02:00, 16 thg 1, 2012

code này lỗi bạn ah. Để số post/page max là 7 thì ok trên 7 là có vấn đề: số post/page không đều

Reply
20:20:00, 20 thg 4, 2012

Hồi nào bạn muốn bày các bạn làm theo thì hãy nghĩ ra code ngôn ngôn tí! Còn không thì thôi, Đưa code lên mà bạn đọc cứ hỏi hoài thì thôi khỏi đưa đi!Do bạn đưa code dỡ quá mà "nêm người ta hỏi hoài"

Reply
21:09:00, 28 thg 4, 2012

Rất hay!

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