Tạo Sitemap đẹp cho blogspot |Blog Trần Phúc Minh

Trang chủ » Thủ thuật Blogger » Bạn đang xem:

Tạo Sitemap đẹp cho blogspot

Sơ đồ site (sitemap) rất quan trọng cho một website cũng như cho webblog. Nó giúp người lướt web dễ dàng tìm đến những chuyên mục trong toàn site để tìm một bài viết nào đó, ngoài ra còn giúp cho webmaster quản lý chặt chẽ nội dung site. Đối với cộng đồng Blogger, lâu nay các blogspotter vẫn hay dùng Table of Contents bằng script của Abu Farhan. Kiểu sitemap này 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, như sitemap của Minh vậy.

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

Bước 1. Đăng nhập Blogger, vào Posting (Đăng bài viết) để 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 cho trang Sitemap.

Bước 2. Vào Design >> Edit HTML. Đặ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 li {list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAWIcvhJYciz4_0M07e7DVa9hIISd1yuybcghoygBlyWQHmEaE8id_O3q6Clry-3LTsvLl1pSYHIHWLRBXGp6qMVuk1Ks-RZgs4B8cWXSS-AGG2otf0nIwguaAkbX6vUZWcENQZIyCg3k-/s1600/iconslist.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/AVvXsEj3ng77QZzoSj0FfnHLYejVHZi2AhgxKFMsH9c6oVSVobXWoS0AudZmd8O47mQcq2y80SFDSIlJdV-WP__p-a7k6S3PI6PegsuI3LRRVLUl3VfyW570dLpF-cMod_CCkLo_Wn3XS4UyPaNN/s1600/iconslisthover.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.

Lưu Template.

Bước 3. 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 == "URL_trang_Sitemap"'>
<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&alt=json-in-script&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&alt=json-in-script&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&alt=json-in-script&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&alt=json-in-script&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&alt=json-in-script&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&alt=json-in-script&callback=allpostslist'/>

<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://tranphucminh.blogspot.com/2011/10/sitemap.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.

Lưu Template là OK.
Nguồn: thuthuatblogger.info

Bài gốc:
http://tpm1512.blogspot.com/2011/10/tao-sitemap-ep-cho-blogspot.html

Từ khóa
Thủ thuật Blogger

Minh cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.

All comments [ 5 ]

Quốc Khánh lúc 12:48 28 tháng 11, 2011

:D em thấy site map hiện tại của anh minh..hơi..rối ạ :F)
có thời gian anh edit lại font chữ nhỏ hơn em nghĩ là đẹp hơn đó a :D

Trần Phúc Minh lúc 13:31 28 tháng 11, 2011

:3) Cám ơn bạn góp ý! Minh sẽ sửa lại xem sao!

24HQUANCAOSANPHAM lúc 12:29 30 tháng 11, 2011

mình muốn đưa 1 tấm ảnh động vào phần thêm tiện ích ở trình thiết kế,chọn thêm tiện ích ảnh,rồi đưa ảnh dang gif lên mà sao nó không động gì hết sao kì vậy ta?bạn biết các dưa lên blog chỉ mình với!

Trương Nhật Huy lúc 16:19 1 tháng 3, 2012

tìm dược cái khúc nào để nhét vào là cả một vấn đề, ai có tìm nhanh hơn không nhỉ

Tanchau123 lúc 18:34 1 tháng 3, 2012

Blog cuả bạn load hơi chậm!

Blog Trần Phúc Minh