Hướng dẫn tạo SiteMap cho blogspot

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 các blogspotter 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 blogspotter.Sau khi nghiên cứu vấn đề này, mình đã nghĩ ra ý 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.

Để tạo Sitemap như vậy, bạn hãy thực hiện như sau.

☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Đăng bài mới (Posting) để tạo một bài viết có tiêu đề là Sitemap (để trống phần nội dung), xuất bản bài viết để lấy URL.
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 == &quot;URL_trang_Sitemap&quot;'>

<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/AVvXsEgqEOxMX1Oka5l2eIRyOOxNy5CX9U5armJgjSC0jnRXZsrboEn5zfgDwNzLoZ4XgxTeycsZ29Yvmhyphenhyphenda5S4TVxxZmYUk-iuehwTUMH2s87wTeo73Hjh0peNRQ6VSsD0fAxs99Dhcv_EdFCD/s10/iconslist-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/AVvXsEjH2HqT3jVuI5S33vlbrMVdh6KaTWRdVng9ShnZHAmLwjWxp_p3SBo748z1KZVfIdXA4XocLETwu0IZtTlpsmhoEabm7gfuXLrSpYGMmb6TSvPNcq08ruNO0X2FqPlUYtjA1bIYZiG8FVPi/s10/iconslisthover-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>

- Trong đoạn CSS ở trên, chú ý thuộc tính display:none để ẩn đi một số ID và CLASS cần thiết.
6- Sau đó bấm Lưu Mẫu lại
7- Tìm dòng <div id='content-wrapper'> và đặt trước nó bằng đoạn code bên dưới.

<b:if cond='data:blog.url == &quot;URL_trang_Sitemap&quot;'>

<div id='sitemap'>

<div class='sm-left'>

<p class='smtitle'><a href='/search/label/Nhãn 1?max-results=10'>Nhãn 1</a></p>

<script src='/feeds/posts/summary/-/Nhãn 1?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/> 

<p class='smtitle'><a href='/search/label/Nhãn 2?max-results=10'>Nhãn 2</a></p>

<script src='/feeds/posts/summary/-/Nhãn 2?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/> 

<p class='smtitle'><a href='/search/label/Nhãn 3?max-results=10'>Nhãn 3</a></p>

<script src='/feeds/posts/summary/-/Nhãn 3?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/> 

</div>

<div class='sm-right'>

<p class='smtitle'><a href='/search/label/Nhãn A?max-results=10'>Nhãn A</a></p>

<script src='/feeds/posts/summary/-/Nhãn A?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/> 

<p class='smtitle'><a href='/search/label/Nhãn B?max-results=10'>Nhãn B</a></p>

<script src='/feeds/posts/summary/-/Nhãn B?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/> 

<p class='smtitle'><a href='/search/label/Nhãn C?max-results=10'>Nhãn C</a></p>

<script src='/feeds/posts/summary/-/Nhãn C?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/> 

<p 

style="font-family:verdana,arial,sans-serif;font-size:10px;"><a 

href="http://kartriderdautocrazy01.blogspot.com/2012/12/tao-sitemap-ep-cho-blogspot.html"

target="_blank">Add to your blogspot ?</a></p>

</div>

</div>

<div style='clear: both;'/>

</b:if>

Chú ý:
Ở đây phần nằm sau thẻ <div class='sm-left'> là cột bên trái,
Phần nằm sau thẻ <div class='sm-right'> là cột 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.
Blog của bạn phải đăng ký nguồn cấp dữ liệu của feedbune để lấy dữ liệu nhá.
Trường hợp không thấy thẻ <div id='content-wrapper'> trong mẫu(với mẫu bog mặc định do blogger cung cấp)
Bạn tìm thẻ:<div class='content-outer'>
Và sửa lại đoạn #content-wrapper{display:none} ở bước 5
Thành:
.content-outer{display:none}

Nhớ ghi chính xác tên nhãn.
Sau đó bấm Lưu Mẫu lại
Giờ bạn trở lại blog và vào bài viết bạn tạo ở bước 2 để xem thành quả nhá.
Nguồn:
Thuthuatblogger.info