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;
}
/* 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 ='« Prev';
var downPageWord ='Next »';
var widget_pag='Set up on your blogspot';
//]]>
</script>
<script src='http://goo.gl/rgegj' type='text/javascript'/>
//<![CDATA[
var postperpage=10;
var numshowpage=4;
var total_pag='Page:';
var upPageWord ='« Prev';
var downPageWord ='Next »';
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 + "?&max-results=10"'
Lưu Template là OK.
Many thanks to Abu Farhan for his Script. :46)
{ 0 comments... read them below or add one }
Post a Comment