Tất cả liên kết có dạng /p/.....html đều là page và đều đứng đầu cho mỗi Blogger.
Các bước tạo một sitemap đẹp 2 cột tích hợp phân trang cho blogspot Recent Posts có phân trang cho Blogger, Các bạn có thể đặt vào các page. Và mình đảm bảo từ khóa của các bạn xẽ được đánh giá rất cao. nếu bạn không thích cũng có thể đặt nó vào Các tiện ích HTMl mà bạn muốn hiển thị, Để thêm Recent Posts , Sitemap Cho Blogger có phân trang các bạn làm theo các bước sau.
Bước 1: Đối với các bạn muốn Thêm vào page Thì các bạn tạo Page mới rồi dán code bên dưới vào sửa cho phù hợp với website của mình là được.
Với các bạn muốn thêm vào các tiện ích HTML thì làm theo bước sau:
Tại trang quản trị, các bạn vào tab Trang, => Bấm chọn Tạo trang mới (nếu muốn bạn cũng có thể chèn vào trong bài viết hoặc tiện ích HTML/javascripts.
Bước 2: Chuyển sang chế độ soạn HTML và dán đoạn code bên dưới vào phần nội dung:
<!--2 Column Sitemap by iChiaSe.Biz-->
<style type="text/css">
.post{
width:600px;
margin:50px auto 50px;
}
#toc-outer {
font:normal 11px/14px Arial,Sans-Serif;
color:black;
text-align:left;
margin:0px auto;
}
#loadingscript {
font-weight:bold;
font-size:20px;
text-align:center;
}
#loadingscript, .itemposts {
margin:0px 0px 2px;
height:auto;
overflow:hidden;
display:block;
background-color:#FDC20E;
border:1px solid #FC9B05;
padding:10px;
}
.itemposts h6 {
margin:0px 0px 10px;
font:normal 14px/16px Impact,Arial,Sans-Serif;
text-transform:uppercase;
color:black;
padding:0px 10px;
height:24px;
line-height:24px;
background-color:#FC9B05;
position:relative;
overflow:hidden;
}
.itemposts h6 a {
color:black;
text-decoration:none;
}
.itemposts h6:after {
content:"";
width:0px;
height:0px;
border:12px solid transparent;
border-top-color:black;
border-right-color:black;
position:absolute;
top:0px;
right:0px;
}
.itemposts img {
float:left;
height:72px;
width:72px;
margin:0px 10px 5px 0px;
padding:0px;
background-color:white;
border:none;
-webkit-border-radius:44px;
-moz-border-radius:44px;
border-radius:0px;
-webkit-box-shadow:0px 0px 0px 4px #E52117;
-moz-box-shadow:0px 0px 0px 4px #E52117;
box-shadow:0px 0px 0px 4px #E52117;
}
.itemposts .iteminside {}
.itemposts .itemfoot {
clear:both;
padding:5px 10px 5px 20px;
margin:10px 0px 0px;
background-color:#222;
color:white;
font-style:italic;
position:relative;
overflow:hidden;
}
.itemposts .itemfoot:after {
content:"";
width:0px;
height:0px;
border:10px solid transparent;
border-left-color:#E52117;
border-top-color:#E52117;
position:absolute;
top:0px;
left:0px;
}
.itemposts .itemfoot a.itemrmore {
font-weight:bold;
color:#4B9540;
float:right;
text-decoration:none;
}
.itemposts .itemfoot a.itemrmore:hover {
text-decoration:underline;
}
#itempager {
padding:30px 0px;
background-color:black;
background-image:-webkit-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-moz-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-ms-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-o-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
border:4px solid #ccc;
}
#pagination, #totalposts {
display:block;
color:white;
text-shadow:0px 1px 0px black;
font:bold 10px Verdana,Arial,Sans-Serif;
padding:0px;
text-align:center;
background-color:#FDC20E;
padding:10px 15px;
}
#pagination {border-top:4px solid black;}
#totalposts {border-bottom:4px solid black;border-top:1px solid #FC9B05;}
#pagination span, #pagination a {
color:white;
display:inline;
margin:0 1px;
padding:3px 5px;
text-indent:0px;
background-color:#316F27;
text-decoration:none;
text-shadow:none;
}
#pagination a:hover {background-color:#666;}
#pagination span.actual {background-color:black;}
#pagination span.hidden {display:none;}
</style>
<script type="text/javascript">
showPostDate = true;
showComments = true;
idMode = true;
sortByLabel = false;
var labelSorter = "JQuery",
loadingText = "Loading...",
totalPostLabel = "Total Posts:",
jumpPageLabel = "Page",
commentsLabel = "Comments",
rmoreText = "Read more ►",
prevText = "Preview",
nextText = "Next",
siteUrl = "http://www.ichiase.biz",
postsperpage = 10,
numchars = 370,
imgBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
</script>
<script type='text/javascript'>
//<![CDATA[
var minpage=6;var maxpage=10;var firstpage=0;var pagernum=0;var postsnum=0;var actualpage=1;document.write('<div id="toc-outer"><div id="results"></div><div id="itempager" style="position:relative;"><div id="pagination"></div><div id="totalposts"></div><a title="Blogger Tips and Tricks" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:14px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://www.bloggertipsandtricks.net/2013/05/blogger-archive-with-pagination.html" target="_blank">►BTT</a></div></div>');var _results=document.getElementById('results');var _pagination=document.getElementById('pagination');var _totalposts=document.getElementById('totalposts');function showPagePosts(json){var entry,posttitle,posturl,postimg,postsumm,replies,monthnames,timepub,output="";if(pagernum===0){postsnum=parseInt(json.feed.openSearch$totalResults.$t);pagernum=parseInt(postsnum/postsperpage)+ 1;}
for(var i=0;i<postsperpage;i++){if("entry"in json.feed){if(i==json.feed.entry.length)break;entry=json.feed.entry[i];posttitle=entry.title.$t;for(var k=0,elen=entry.link.length;k<elen;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
for(var l=0,clen=entry.link.length;l<clen;l++){if(entry.link[l].rel=="replies"&&entry.link[l].type=="text/html"){var commentsnum=entry.link[l].title.split(" ")[0];break;}}
postsumm=("summary"in entry)?entry.summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,""):"";if(postsumm.length>numchars){postsumm=(numchars>0&&numchars!==false)?postsumm.substring(0,numchars)+'...':"";}
var _postdate=entry.published.$t,_cdyear=_postdate.substring(0,4),_cdmonth=_postdate.substring(5,7),_cdday=_postdate.substring(8,10);monthnames=(idMode)?["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];timepub=(showPostDate)?_cdday+' '+ monthnames[parseInt(_cdmonth,10)- 1]+' '+ _cdyear+' - ':'';replies=(showComments)?commentsnum+' '+ commentsLabel:'';postimg=("media$thumbnail"in entry)?entry.media$thumbnail.url:imgBlank;output+='<div class="itemposts">';output+='<h6><a href="'+ posturl+'" target="_blank">'+ posttitle+'</a></h6>';output+='<div class="iteminside"><a href="'+ posturl+'" target="_blank"><img src="'+ postimg+'" /></a>';output+='<span class="summary">'+ postsumm+'</span></div>';output+='<div style="clear:both;"></div><div class="itemfoot">'+ timepub+ replies+'<a class="itemrmore" href="'+ posturl+'" target="_blank">'+ rmoreText+'</a></div>';output+='</div>';}}
_results.innerHTML=output;_create_pagination();}
function _create_pagination(){output="";var starter=0;output+=((actualpage>1)?'<a title="'+ prevText+'" class="prevjson" href="javascript:_init_script('+ parseInt(actualpage- 1)+')">'+ prevText+'</a>':'<span class="prevjson hidden">'+ prevText+'</span>')+'<em style="font:inherit;color:inherit;" class="pagernumber">';if(pagernum<(maxpage+ 1)){for(starter=1;starter<=pagernum;starter++){output+=(starter==actualpage)?'<span class="actual">'+ starter+'</span>':'<a href="javascript:_init_script('+ starter+')">'+ starter+'</a>';}}else if(pagernum>(maxpage- 1)){if(actualpage<minpage){for(starter=1;starter<(maxpage- 2);starter++){output+=(starter==actualpage)?'<span class="actual">'+ starter+'</span>':'<a href="javascript:_init_script('+ starter+')">'+ starter+'</a>';}
output+=' ... ';output+='<a href="javascript:_init_script('+ parseInt(pagernum- 1)+')">'+ parseInt(pagernum- 1)+'</a>';output+='<a href="javascript:_init_script('+ pagernum+')">'+ pagernum+'</a>';}else if(pagernum-(minpage- 1)>actualpage&&actualpage>(minpage- 1)){output+='<a href="javascript:_init_script(1)">1</a>';output+='<a href="javascript:_init_script(2)">2</a>';output+=' ... ';for(starter=actualpage- 2;starter<=actualpage+ 2;starter++){output+=(starter==actualpage)?'<span class="actual">'+ starter+'</span>':'<a href="javascript:_init_script('+ starter+')">'+ starter+'</a>';}
output+=' ... ';output+='<a href="javascript:_init_script('+ parseInt(pagernum- 1)+')">'+ parseInt(pagernum- 1)+'</a>';output+='<a href="javascript:_init_script('+ pagernum+')">'+ pagernum+'</a>';}else{output+='<a href="javascript:_init_script(1)">1</a>';output+='<a href="javascript:_init_script(2)">2</a>';output+=' ... ';for(starter=pagernum-(minpage+ 1);starter<=pagernum;starter++){output+=(starter==actualpage)?'<span class="actual">'+ starter+'</span>':'<a href="javascript:_init_script('+ starter+')">'+ starter+'</a>';}}}
output+='</em>'+((actualpage<starter- 1)?'<a title="'+ nextText+'" class="nextjson" href="javascript:_init_script('+ parseInt(actualpage+ 1)+')">'+ nextText+'</a>':'<span class="nextjson hidden">'+ nextText+'</span>');_pagination.innerHTML=output;var parameter=(actualpage*postsperpage)-(postsperpage- 1),_final=actualpage*postsperpage;_totalposts.innerHTML=totalPostLabel+' '+ postsnum+' - '+ jumpPageLabel+' '+ parameter+((actualpage<starter- 1)?' - '+ _final:"");}
function _init_script(n){var parameter=(n*postsperpage)-(postsperpage- 1);var url=(sortByLabel)?siteUrl+'/feeds/posts/summary/-/'+ labelSorter+'?start-index='+ parameter:siteUrl+'/feeds/posts/summary/?start-index='+ parameter;if(firstpage==1){var old=document.getElementById("TEMPORAL");old.parentNode.removeChild(old);}
_results.innerHTML='<div id="loadingscript">'+ loadingText+'</div>';_pagination.innerHTML='';_totalposts.innerHTML='';var script=document.createElement('script');script.type='text/javascript';script.src=url+'&max-results='+ postsperpage+'&orderby=published&alt=json-in-script&callback=showPagePosts';script.id='TEMPORAL';document.getElementsByTagName('head')[0].appendChild(script);firstpage=1;actualpage=n;}
window.onload=function(){_init_script(1);};
</script>
<!--/2 Column Sitemap by iChiaSe.Biz-->
Đầu tiên lưu ý với các bạn do code chèn thẳng vào HTML của trang do vậy sau khi thêm code bạn không được chuyển đổi qua lại giữa 2 tab Viết và HTML nếu không code bị thay đổi sẽ dẫn tới lỗi không thể gọi bài viết.
Thay chỗ mình đánh dấu thành URL blog của bạn.
postPerPage = 10, là số bài viết tối đa hiển thị trên một trang. Vì site map dạng 2 cột do vậy để trông đẹp mắt bạn nên đặt nó là một số chẵn (chia hết cho 2) nha nếu không thì số lượng bài viết ở 2 cột sẽ không bằng nhau đâu.
numChars = 150, số ký tự mô tả sẽ hiển thị.
Thay link ảnh màu xanh thành link ảnh đại diện cho những bài viết không có hình ảnh.
Thay link ảnh màu tím thành hình ảnh loadding khi tải bài viết cho tiện ích này. bạn có thể tham khảo bài viết này để tìm cho mình hình ảnh loadding thích hợp nha.
color:black; màu chữ phần mô tả, phần ngày đăng và số nhận xét .
color:#38f; màu tiêu đề bài viết khi đê chuột vào tên tiêu đề.
color: red là màu tiêu đề bài viết khi chưa dê chuột vào tên tiêu đề
Để hiển thị bài viết theo nhãn bạn chỉnh sửa sortByLabel = false thành sortByLabel = true . Sau đó chỉnh sửa JQuery thành tên nhãn bạn muốn hiển thị nha.
Bước 3: Xuất bản trang của bạn và truy cập vào blog để xem thành quả bạn đã đạt được nha.
Nếu có bất cứ khó khăn, vướng mắc gì khi áp dụng cho blog của bạn, vui lòng comment ở bên dưới để mình giải đáp và hướng dẫn chi tiết.
Demo Nguồn : iChiaSe.Biz
Đăng nhận xét