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!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+' – '+(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ị.
1- Đăng nhập vào Blog2-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+=' – '+(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 tên các nhãn bạn không muốn cho nó hiển thị, nếu muốn ẩn bài viết thuộc nhãn nào bạn chỉ cần thêm tên nhãn trong dấu ngơặc đơn và cách nhau 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ị trên một trang.
Kết luận!
Thủ thuật được viết bởi Duypham với tên Sitemap for Blogger Mình mạo muội thêm chữ input vào vì thấy cách thức hoạt động của nó tương tự vậy. Những ai xuất bản lại bài viết này vui lòng ghi rõ nguồn duypham để ghi nhận công lao của tác giả nha.
Nhận xét
Namkna ơi cho mình hỏi tý , trang mình hiện tại là dynamicland.blogspot.com bạn check dùm mình trang http://www.mmokb.com/ có phải là đang lợi dụng blog mình hay không , tại vì mình thấy số người online là trang đó không thuộc trang mình nhưng vẫn hiện khi mình xai whoamongus
Trả lờiXóaMình vào trang bạn nhưng không thấy có độc giả từ trang khác. whoamongus thống kê cả lượng copy bài viết hình ảnh ừ trang bạn, lượng truy xuất,... Có thể http://www.mmokb.com/ đã copys một bài viết hình ảnh nào trong blog của bạn.
XóaMình đã check. Nguyên nhân là do bạn và trang đó dùng chung 1 đoạn code từ whoamongus. bạn hãy lấy đoạn code khác chèn vào nha,
XóaChào bạn... mình thấy những bài viết của bạn khá hay. Chắc bạn cũng vào Blogger một thời gian dài.
Trả lờiXóaMình thì biết Blogspot khá lâu từ khi nó ms thành lập nhưng chơi Blogspot thì chừng 2 tuần ... blog mình là http://docvacam.blogspot.com/ chạy css nâng cấp mới của Blog nên cũng có nhiều chổ lên google tìm k thấy.
Đặt biệt là cái này... bạn xem hình để hiểu nhé:
https://lh3.googleusercontent.com/-f5-c1bxFHqQ/UPaDYEVf-ZI/AAAAAAAAOL4/gLzIzWKkioc/s726/untitled.JPG
Lề trên bài viết thì mình có thể chỉnh thụt vào dc... nhưng tiêu đề modun phía dưới thì bó tay.... chính nó cứ trơ mãi..
Bạn dùng thẻ td để chia bảng.
XóaMình thấy trong thẻ <td style="padding:-30px 10px;width:25%;"
bạn sửa thuộc tính padding:-30px 10px thành padding:0 rất nhiều đó.
- Và chỉnh thuộc tính margin-top + margin-left trong thẻ dưới.
.tabs-inner .widget ul {
background: #f5f5f5 url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: 1px solid #eeeeee;
margin-top: 0;
margin-left: -30px;
margin-right: -30px;
}
Ak bổ xung trong mẫu của bạn có đoạn sau
.content-outer {
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 10px #333333;
box-shadow:0px 0px 20px #777777;
margin-bottom: -70px;
}
box-shadow: 0 0 40px rgba(0, 0, 0, .15);
343434
- thừa phần này box-shadow: 0 0 40px rgba(0, 0, 0, .15);
343434 sẽ làm phá vỡ CSS đó.
Àk, cảm ơn bạn ... mình chỉnnh thẻ
Xóa.footer-inner {
padding:0px;
}
nó OK rồi, lúc đầu nó
.footer-inner {
padding:30px;
}
nên nó thế.. thanks.
Àk, mà bạn nên chỉnh sữa lại cái bản mã chèn biểu tượng vui của 1 cái nào đó cho phù hợp vs css nâng cấp đi... do có mấy câu lệnh cũ tìm hoài k thấy.
Cám ơn Namkna nhiều ! sao mình áp dụng cách 2 của Namkna , mà nó hiện ra hết label vậy , mình chỉ muốn cho nó hiển thị theo cái label mình mong muốn
Trả lờiXóaHiện tiện ích đang được duypham hoàn thiện dần. bạn vui lòng chờ vài hôm để dùng style 2
XóaCó làm cái khung to za thêm được không bác Nam
Trả lờiXóaChình cái này: width:220px;height:391px
Xóako hiện
Trả lờiXóahttp://www.duongdenthanhcong.net/p/site-map.html
Trả lờiXóaKhông hiện gì
Style 2 của bài này.
Trả lờiXóabạn cũng có thể chọn tại đay: http://namkna.blogspot.com/search/label/Blogspot%20Sitemap
Nam ơi, xem lại hộ mình code của cái Ves 2. Mình dán vào trang không thấy nó hiển thị
Trả lờiXóaBạn thay các thông số như hướng ddaaanx nha. Mình test vẫn hoạt động bình thường.
XóaMình cũng thấy vậy. Nhưng khi mình thay các thông số thì nó lại không hiện gì. Bạn kiểm tra đoạn code này hộ mình xem nó có vấn đề gì không
Trả lờiXóa<style type='text/css'>
Trả lờiXóa#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'>
Nhận xét này đã bị tác giả xóa.
Trả lờiXóavar cat_home='http://thuthuatvitinhaz.blogspot.com';cat_numb=12;cat_pre='Prev';cat_nex='Next';cat_remove=['1.Thủ thuật Blogspot','2. Thủ thuật Word','3. Thủ thuật PowerPoint','4. Thủ thuật Excel','5. Máy in','6. Ghost win','7. Thủ thuật Windows','8. Thủ thuật với USB','9. Phần mềm hay',];
Trả lờiXóavar 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+=' – '+(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>
Bạn copy y nguyên code của mình và thay mỗi địa chỉ blog của mình thành của bạn thôi,.
Xóa- Lưu ý: Check vào phần HTML cuar trang sau đó pate code vào và xuất bản ngay (không bấm trở lại tab VIẾT rồi mới xuất bản như vậy sẽ lỗi code)
Bạn có thể test ngay tại đây sẽ thấy: http://namkna.blogspot.com/p/test-html-and-javascript.html
Mình coppy toàn bộ ( không chỉnh sửa gì), dán vào trang của mình thì nó vẫn hiện lên các nhãn bên trang của bạn bình thường. Nhưng khi thay địa chỉ là trang của mình thì nó không hiện gì cả ( kể cả khi mình thay tên nhãn hay không). Bạn thử thay địa chỉ của trang khác vào và test xem nó có hiện lên không...
Trả lờiXóaMình nghĩ hay còn phải sửa chỗ nào khác nữa...
( Ves 1 thì không có lỗi gì, nhưng mình không thích vì thấy các nhãn hiện lên lộn xộn )
Mình test trang của bạn đây: XEM NGAY
Xóa- Lỗi là trước khi xuất bản bạn chuyển qua các tab HTML và VIẾT nên code bị lỗi thẻ & và &
Hay lắm! Mình lãm được rồi. Chúng ĐÂY và ĐÂY Mình thích cái site map kiểu này hơn cái site map 2 cột mà mình nhờ Nam hướng dẫn bữa trước. Nhưng nó hay lỗi thật. Mình chỉ xê dịch 1 chút hoặc sửa lại là nó đã bị lỗi rồi. Có điều mình thắc mắc và muốn bạn hướng dẫn thêm là, tại sao site map trang của bạn khi bấm vào các nhãn thì các bài viết nó hiển thị ngay mé bên phải (như thế đẹp hơn) còn của mình nó lại hiện xuống dưới (nếu không để ý có khi không nhìn thấy). Bạn hướng dẫn thêm cho mình với nhé. Cảm ơn Nam nhiều lắm!...
Trả lờiXóaUk nếu chèn vào tiện ích HTML/Javarscript thì ta có thể chỉnh sửa thoải mái. Còn các script nếu chèn vô bài viết mà chuyển qua lại giữa các tab là lỗi ngay:
Xóa- Để 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}
Được rồi đó. Cảm ơn Nam nha! Cho mình hỏi thêm chút xíu: Ở tiện ích này, mình thấy các tên nhãn màu đẹp rồi nhưng tên bài viết hiện lên có màu đen, mình muốn màu của nó đẹp hơn thì cần chỉnh sửa ở đâu vậy bạn?
Trả lờiXóa...Và còn 1 điều nữa mình muốn hỏi Nam là liệu có thể chỉnh sửa để khi bấm vào các tiêu đề bài viết thì nó bật ra 1 trang mới được không ?( tiện ích hiện tại mình thấy nó xuất hiện nội dung bài viết ở ngay trang đang xem)
Trả lờiXóaNhận xét này đã bị tác giả xóa.
XóaThêm vào sau dồng:
Xóa#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
2- Mở trong tab mới sửa:
<a href="'+cat_url+'" rel="nofollow">
Thành:
<a href="'+cat_url+'" rel="nofollow" target="_blank">
Hướng dẫn 1 của bạn đã giúp mình làm được rồi. Tác phẩm của bạn đây. Nhưng hướng dẫn sau mình chưa hiểu. Cái đoạn code <a href="'+cat_url+'" rel="nofollow"> ở đâu vậy?
Trả lờiXóaChữ màu xanh đổ bóng đẹp đó.
Xóa2- Nó nằm trong đoạn script ở code trên đó bạn. Bấm Ctrl+F tìm là thấy ngay thôi.
Nam à, mình đã tìm thấy và làm được rồi. Bạn tuyệt vời lắm!... Cảm ơn nha!...
Trả lờiXóaChúc mừng bạn :)))
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaAnh xem http://vinet360.blogspot.com/p/sitemap.html
Trả lờiXóaphần hiển thị bài đăng toàn bị màu đen-
cái này rất hay tiếc là cứ bị như vậy
Em có thể sửa đoạn:
Trả lờiXóa#show-post{float:left;width:60%;background:#fff}
#show-post ul li{list-style-type:none}
thành một trong 2 đoạn bên dưới:
đoạn 1:
#show-post{float:left;width:60%}
#show-post ul li{list-style-type:none;background:#fff}
đoạn 2:
#show-post{float:left;width:60%}
#show-post ul li{list-style-type:none}
Cảm ơn anh em làm được rồi
Trả lờiXóa['Blogspot Sitemap','Blogspot-tips'] là các nhãn không muốn hiển thị chứ anh-hình như anh ghi thiếu phải không ?
ĐÚng vậy em ak.
XóaMÌNH LÀM MÃI MỚI ĐƯỢC TUY DỄ NHƯNG NẾU KHÔNG ĐỌC CÁC BÌNH LUẬN SẼ CHUYỂN TỪ VIẾT SANG HTML LUÔN, LỖI NGAY
Trả lờiXóa