Tạo Sitemap dạng input cho Blogspot

Đăng bởi Admin | 11/4/13 | 2 nhận xét

Sitemap được sử dụng cho blogger có khối lượng bài viết nhiều để giúp độc giả dễ tìm kiếm cũng như quan sát tổng thể các bài viết trên blog của bạn. Những sitemap hiện nay đều có nhược điểm là tải toàn bộ dữ liệu từ feed dẫn đến tốc độ chậm, ngoài ra với blog có trên 500 bài viết thì những bài viết cũ sẽ không được hiển thị. Sitemap mình viết dưới đây sẽ khắc phục những nhược điểm đó.

Sitemap được phân loại theo nhãn, hiển thị bài viết gọn gàng và có phân trang. Hoạt động ổn định dù blog bạn có trên 500 bài viết, và đặc biệt dữ liệu được tải về theo truy vấn của độc giả chứ không tải toàn bộ sẽ giúp không làm chậm tốc độ blog của bạn.

Ves 1: Sitemap Hiển thị tất cả các nhãn! Không sắp xép label theo chữ cái A,B,C

Dạng này sẽ hiển thị tất cả các nhãn và không tuân theo quy luật bảng chữ cái!

View Demo

1- Đăng nhập vào Blog
2-Tạo một Trang mới hoặc bài đăng mới và dán code sau vào:

<style type='text/css'>
#show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px}
#show-cat ul{margin:0;border-top:1px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px}
#show-cat ul li a,#navi-cat a{background:#fff;color:#d80556;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:12px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:60%}
#show-post ul li{list-style-type:none}
#navi-cat{padding:20px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:right}
</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='';cat_numb=10;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false">'+cat_nex+'</a>'}dw+='<span>'+cat_start+' &ndash; '+(cat_start+i-1)+' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>

Trong đó: cat_numb=10 là số lượng bài viết hiển thị trên 1 trang.

Ves 2: Thêm chức năng sắp xếp tên nhãn theo thứ tự bảng chữ cái và loại bỏ những nhãn không muốn hiển thị.

View Demo

1- Đăng nhập vào Blog
2-Tạo một Trang mới hoặc bài đăng mới và dán code sau vào: 

<style type='text/css'>
#show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px}
#show-cat ul{margin:0;border-top:1px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px}
#show-cat ul li a,#navi-cat a{background:#fff;color:#d80556;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:12px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:60%}
#show-post ul li{list-style-type:none}
#navi-cat{padding:20px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:right}
</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://namkna.blogspot.com';cat_numb=10;cat_pre='Prev';cat_nex='Next';cat_remove=['Blogspot Sitemap','Blogspot-tips'];
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){for(var j=0;j<cat_remove.length;j++){if(cat[i].term==cat_remove[j]){cat.splice(i,1)}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>

Trong đó:

• Thay http://namkna.blogspot.com/ thành URL blog của bạn.
• ['Blogspot Sitemap','Blogspot-tips'] là các nhãn muốn hiển thị, nếu muốn thêm nhãn nào bạn chỉ cần thêm tên nhãn trong dâu ngơặc đơn và cách nhay bởi đấu phẩy ví dụ:['Blogspot Sitemap','Blogspot-tips','Blogspot comment','Blogspot post']
• cat_numb=10; là số bài muốn hiển thị.

3- Xuất bản trang và bài viết và xem thành quả nha! 

* Sửa cho đẹp hơn:

1- Để hiên trên một dòng bạn phải chỉnh lại độ rộng trong đoạn mã sau:

#show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px}

2- Chỉnh sửa màu ở tiêu đề:

Thêm vào sau dòng:

#show-post ul li{list-style-type:none}

đoạn code sau:

#show-post ul li a {background:#fff;color:#333;text-decoration:none}
#show-post ul li a:hover{background:#fff;color:#fff;text-decoration:none}

color:#333 là mã màu tiêu đề
color:#fff là mã màu tiêu đề khi di chuột lên

3- Mở trong tab mới sửa:

<a href="'+cat_url+'" rel="nofollow">

Thành:

<a href="'+cat_url+'" rel="nofollow" target="_blank">
                                                                                                              ( Theo Namkna)
                                                                                                                Thu thuat vi tinh