Hiện nay các kiểu sitemap có một điểm yếu là liệt kê tất cả các nhãn trên blogspot. Tuy nhiên một số bạn thì lại thích liệt kê bài viết của một số nhãn nào đó (tức là nếu không thích liệt nhãn nào thì nhãn đó sẽ không nằm trong Sitemap, điểm này rất cần thiết). Giải pháp tối ưu là phải làm sao có một sitemap đáp ứng được nhu cầu tùy biến của các bạn.
>>Sitemap - Thủ thuật tạo sơ đồ trang cho BLogger Version 2
>>Widget - Thủ thuật chia Widget thành nhiều cột bằng thẻ Table trong Blogger
>>Related Posts - Thủ thuật bài viết liên quan có hình ảnh và bài viết cho Blogger
>>Related Posts - Thủ thuật bài viết liên quan có hình ảnh cho Blogger
>>Navbar - Thủ thuật làm trong suốt thanh Navbar trong Blogger
>>Label / Archive - Thủ thuật hiện tiêu đề trong Label / Archive của BLogger
>>Chữ nhấp nháy - Thủ thuật tạo chữ nhấp nháy trong Blogger
>>Slide JQuery - Thủ thuật tạo Slide JQuery cho Blogger
>>Widget - Thủ thuật chia Widget thành nhiều cột bằng thẻ Table trong Blogger
>>Related Posts - Thủ thuật bài viết liên quan có hình ảnh và bài viết cho Blogger
>>Related Posts - Thủ thuật bài viết liên quan có hình ảnh cho Blogger
>>Navbar - Thủ thuật làm trong suốt thanh Navbar trong Blogger
>>Label / Archive - Thủ thuật hiện tiêu đề trong Label / Archive của BLogger
>>Chữ nhấp nháy - Thủ thuật tạo chữ nhấp nháy trong Blogger
>>Slide JQuery - Thủ thuật tạo Slide JQuery cho Blogger
Sau khi nghiên cứu vấn đề này, mình đã nghĩ ra một thủ thuật blogger với ý tưởng vận dụng cách liệt kê các bài viết của một nhãn, một script rất phổ biến trên cộng đồng Blogger, để tạo ra Sitemap, kết hợp CSS tạo hai cột, vừa tiết kiệm không gian web, vừa giúp người dùng dễ dàng tùy biến theo ý thích, chúc các bạn thiết kế web và SEO thật là tốt của mình thật đẹp.
3- Vào Thiết Kế (Design)
4- Vào chỉnh sửa HTML (Edit HTML).
5- Đặt đoạn code sau đây vào trước thẻ </head>.
<b:if cond='data:blog.url == "URL_trang_Sitemap"'>
<script type='text/javascript'>
//<![CDATA[
function allpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
//]]>
</script>
<style type='text/css'>
#sitemap{width:900px;margin:0;padding-bottom:15px;background:#ffffff;float:left;}
#sitemap ul {background:#FFFAF0;max-height: 250px !important; overflow:auto; padding:5px 10px;margin:0;list-style-type:none}
#sitemap ul:hover {background:#FDF5E6}
#sitemap ul li {list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixn9pKMsi5tl_RM-kR4p_15SG6iQUDGMHRrXaKS7IMmGAEBMPXMoqN30nhKn69nDsog9pTtiBty91CpVbnor5HmKTnAomuFo6rbOSzbbgfZ051PAjOKeSVrWSuzRFj-L6GVvnx1dPJHXj-/s1600/iconslist-namkna-blogspot-com.gif) inside; vertical-align: top; padding-left:10px;margin: 0;}
#sitemap ul li:hover {list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis96-i4LffZ4WFNILf7XIGgFc4tvxy2r8k8QyuACHWvU8mu8GCv5ZhyphenhyphenzveYQknrIUuvd22NMuY4tIn5_Z9f6dtekdT5JDic20GPPosNIGQB6bjecfx5Ea-rn82dH-JGudkZWQOb6uXdpLQ/h120/iconslisthover-namkna-blogspot-com.png) inside; vertical-align: top;padding-left:10px;margin: 0;}
.sm-left{float:left;width:45%;margin:0 20px 0px 20px;font-size:14px;tex-align:justify}
.sm-right{float:right;width:45%;;margin:0 20px 0px 20px;font-size:14px;tex-align:justify}
p.smtitle {border-bottom:1px dotted #789;clear:both;color:
#2554C7;font-family:Century Gothic;font-size:25px;padding:10px 50px 5px
0;text-align:right;text-shadow:2px 2px 1px #789;text-transform:lowercase;}
#content-wrapper{display:none}
</style>
</b:if>
- Bạn chú ý phần màu xanh mình đã thêm vào để làm cho site map đẹp hơn với các nhãn có nhiều bài đăng sẽ xuất hiện thanh cuộn.
- màu đỏ là hiệu ứng nền khi chưa dê chuột.
- màu cam là hiệu ứng khi dê chuột vào.
- Các bạn có thể thay chúng thành mã màu của bạn.
- Chú ý thuộc tính display:none để ẩn đi một số ID và CLASS cần thiết. Tải 2 file icon về áp dụng cho blogspot của bạn, tránh dùng chung file: iconslist.gif (file ảnh khi chưa dê chuột vào tiêu đề bài viết) và iconslisthover.png (file ảnh khi dê chuột vào tiêu đề bài viết) .
7- Tìm dòng:
Và đặt trước nó bằng đoạn code bên dưới.<div id='content-wrapper'>
<b:if cond='data:blog.url == "URL_trang_Sitemap"'>
<div id='sitemap'>
<div class='sm-left'>
<p class='smtitle'><a href='/search/label/Nhãn 1?max-results=10'>Tiêu đề Nhãn 1</a></p>
<script src='/feeds/posts/summary/-/Nhãn 1?max-results=500&alt=json-in-script&callback=allpostslist'/>
<p class='smtitle'><a href='/search/label/Nhãn 2?max-results=10'>Tiêu đề Nhãn 2</a></p>
<script src='/feeds/posts/summary/-/Nhãn 2?max-results=500&alt=json-in-script&callback=allpostslist'/>
<p class='smtitle'><a href='/search/label/Nhãn 3?max-results=10'>Tiêu đề Nhãn 3</a></p>
<script src='/feeds/posts/summary/-/Nhãn 3?max-results=500&alt=json-in-script&callback=allpostslist'/>
</div>
<div class='sm-right'>
<p class='smtitle'><a href='/search/label/Nhãn A?max-results=10'>Tiêu đề Nhãn A</a></p>
<script src='/feeds/posts/summary/-/Nhãn A?max-results=500&alt=json-in-script&callback=allpostslist'/>
<p class='smtitle'><a href='/search/label/Nhãn B?max-results=10'>Tiêu đề Nhãn B</a></p>
<script src='/feeds/posts/summary/-/Nhãn B?max-results=500&alt=json-in-script&callback=allpostslist'/>
<p class='smtitle'><a href='/search/label/Nhãn C?max-results=10'>Tiêu đề Nhãn C</a></p>
<script src='/feeds/posts/summary/-/Nhãn C?max-results=500&alt=json-in-script&callback=allpostslist'/>
<p
style="font-family:verdana,arial,sans-serif;font-size:10px;"><a
href="http://namkna.blogspot.com/2011/08/tao-sitemap-ep-cho-blogspot.html"
target="_blank">Add to your blogspot ?</a></p>
</div>
</div>
<div style='clear: both;'/>
</b:if>
- Phần nằm sau thẻ <div class='sm-left'> là cột chứa các nhãn bên trái,
- Phần nằm sau thẻ <div class='sm-right'> là cột chứa các nhãn bên phải.
- Tùy theo số lượng nhãn và số lượng bài viết trên blogspot mà bạn phân phối và bố trí thêm bớt các nhãn sao cho cân đối, theo định dạng như trên.
- Thay các phần Nhãn 1,2,3 và Nhãn A,B,C thành tên các nhãn.
- Thay Tiêu đề Nhãn 1,2,3 và Tiêu đề Nhãn A,B,C thành phần mô tả của các nhãn tương tứng.
Lưu ý: Blog của bạn phải đăng ký nguồn cấp dữ liệu của feedbune để lấy dữ liệu nha. Nếu chưa đăng ký thì xem bài này: Cách đăng ký và sử dụng FeedBurner cho Blogspot8- Bấm Lưu Mẫu lại.
Đăng nhận xét