Thứ Hai, 19 tháng 11, 2012

Cách tạo sitemap 2 cột liệt kê các bài viết theo nhãn



Bước 1. Đăng nhập Blogger, vào Page (Trang) để 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 == &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 li {list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV8Sl6eJ3ipw0-c0oTKcuQ0VPSgvyCIf-FBbyXJtgdgdX2z_DD6E9bECg9zUOGV0P89RqwEzOpUlETegN6YPDE4Gj3UQdY0nv8V8AoIiQJeVxssjNneQ0Rq2lxWzh4bvlH0q1WNYqYDtj-/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/AVvXsEgGj-R-kUP92OxcWsatkJoiskKpRBNsIiN7-cWT435KmlQghIeVFkF-xp3WSOQ_J-pilxiRauLg_kQrgNDOSFiOktIyyeg9bOzgD7I3cqzPuK6-DSb5GYB6ITYRSRUAQsnGVUkxwdog3ePp/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 == &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'/>

</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'/>

</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.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 nhận xét

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 MuaReDucKien.info
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top