Đâ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 += ' <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".
Chúc các bạn thành công.
0 nhận xét:
Đăng nhận xét