Hướng Dẫn Tạo Sitemap Dạng Input Đẹp Cho Blogger

Là một wapmaster chắc hẳn ai cũng hiểu được tầm quan trọng của Sitemap, dù bạn làm trên mã nguồn nào thì Sitemap vẫn là một yếu tố không thể thiếu. Trong Blogger cũng vậy, Sitemap trong blog là một phần rất quan trọng, ngoài chức năng sắp xếp bài viết một cách khoa học 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.
Bài viết này Taigame24h.vn sẽ chia sẻ tới các bạn một sitemap dạng input. Sitemap này có gì đặc biệt ?
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. Và đặc biệt, Sitemap sẽ tải theo truy vấn của độc giả chứ không tải toàn bộ bài viết sẽ giúp tốc độ load của blog bạn nhanh hơn.
Demo hình ảnh:

Hướng Dẫn Chi Tiết Tạo Sitemap Dạng Input Cho Blogger:
1. Tại trang quản trị, các bạn vào tab Trang => Bấm chọn Trang Mới

2. Chuyển sang chế độ HTML là dán đoạn code bên dưới 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ố bài viết hiển thị trên 1 trang

3. Xuất Bản và xem thành quả nha. Chúc các bạn thành công !

Kết luận: Thủ thuật được chia sẻ bởi Taigame24h.vn với tên Hướng Dẫn Tạo Sitemap Dạng Input Đẹp Cho Blogger. Những ai xuất bản lại bài viết này xin ghi lại nguồn Taigame24h.vn.