Thứ Tư, 22 tháng 4, 2009

Cách tạo phân trang cho Blogspot P1 Thêm Javascript

vntim.tk Cách tạo phân trang cho Blogspot
Bạn muốn trang web của mình có nhiều trang 1,2,3...giống của Google (ảnh tạo phân trang)

Với thủ thuật này bạn không cần phải can thiệp vào Template của blog cũng như không sợ bị hư template , và đã được Việt hoá rồi.

Điều bạn cần phải làm là thêm vào >Bố Cục > Thêm Tiện ích > HTML/JavaScript , sau đó dán đoạn code phía dưới vào là xong .

Lưu ý : phải để cái HTML/Javascript vào ngay phía dưới Bài đăng trên blog ( hình dưới )

vntim.tk Cách tạo phân trang cho Blogspot


<style>
.showpageArea {font-size: 11px; width:500px;background: url(http://i442.photobucket.com/albums/qq150/nhatlinh2605/thantocPagenavbar.jpg) no-repeat left top; padding: 10px; color:#003366;text-align:center;
}
.showpageArea a {
color:#0F0;
text-decoration:underline;
}
.showpageNum a {

text-decoration:none;
color:#0F0; border:1px solid #FFF;
margin:0 10px;
padding:0 5px 0 8px;
}
.showpageNum a:hover {
color:#FE8314; border:1px solid #0071A5;
background-color:#FFF;
}
.showpagePoint {
color:#FE8314;
margin:0 8px 0 4px;
}
.showpage a {
text-decoration:none;
color:#FFF;
padding:0 2px 0 4px;
}
.showpage a:hover {
color:#FE8314;
text-decoration:underline;
} .showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#cc0000;
}
</style>

<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=7;
var displayPageNum=2;
var firstPageWord = 'Đầu tiên';
var endPageWord = 'Cuối cùng';
var upPageWord ='Trở lại';
var downPageWord ='Tiếp theo';
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 += '&nbsp;<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"></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span class="showpage"> Tổng Cộng : '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}

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>


trong đó : var pageCount=7; : là số bài hiện trong một trang , bạn có thể thay đổi tùy thích
Bạn cũng có thể thay đổi màu chữ cho phù hợp với Blog của bạn bằng cách thay đổi đoạn code sau color: bằng đoạn mã màu của bạn

Nếu không muốn thấy hình nền màu đen
vntim.tk Cách tạo phân trang cho Blogspot
bạn hãy thay thế bằng hình nền khác bằng cách thay http://i442.photobucket.com/albums/qq150/nhatlinh2605/thantocPagenavbar.jpg , bằng địa chỉ hình của bạn .

Muốn gỡ bỏ bạn chỉ việc xóa HTML/Javascript

bạn có thể tham khảo thêm bài viết sau

Cách tạo phân trang cho Blogspot P2 thêm code cho temperature

Theo thantoc.blogspot.com

2 Comments:

Đăng Khoa said...

Hay quá ta

CXD - XÂY DỰNG DD CLUB said...

có phân trang được cho mục khác ngoài trang chủ không? sao mình dùng cách tạo phân trang phần 2 của bạn thì nó chỉ phân trang cho trang chủ thôi! còn với thẻ mục khác thì hiện hết số bài trong thẻ đó mà chẳng tạo phân trang gì cả?

Đăng nhận xét

» VnTim™ cảm ơn bạn đã đọc bài viết.
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người quanh bạn.
» Bạn có thể sử dụng một số thẻ HTML như <b>, <i>,<a>.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu nếu có thể.
» Rất cảm ơn những comment thiện ý.

 

VnTim™ Trái Tim Việt Nam Copyright © 2010 VnTim™ Trái Tim Việt Nam