Sitemap có post title, post date và labels cho blogger

By Unknown

Thứ Hai, 1 tháng 12, 2014

Sitemap cho blogger ở bài viết trước mình có giới thiệu cho các nhưng ở bài này mình cập nhật thêm tính năng ngày tháng đăng bài để tiện theo dõi bên cạnh đó với style củng khá bắt mắt.

Sitemap có post title, post date và labels cho blogger

Nếu các bạn có nhu cầu thêm trang sitemap cho blogger/blogspot để tiện theo dõi bài viết thì dùng thủ thuật sau.
Đầu tiên các bạn chèn CSS bên dưới trên thẻ ]]></skin> hoặc </style> sau đó lại lại.

/* CSS Sitemap */
#bp_toc {
    background: transparent;
    width: 100%;
    color: #999;
    margin-top: 10px;
    margin: 0 auto;
    padding: 5px;
}

.toc-header-col1 {
    padding: 15px!important;
    line-height: 15px;
    background-color: #f56954;
    width: 250px;
    transition: all 0.3s ease-in-out;
}

.toc-header-col2 {
    padding: 15px!important;
    line-height: 15px;
    background-color: #2c323c;
    width: 75px;
    transition: all 0.3s ease-in-out;
}

.toc-header-col3 {
    padding: 15px!important;
    line-height: 15px;
    background-color: #252a32;
    width: 125px;
    transition: all 0.3s ease-in-out;
}

.toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover {
    opacity: 0.9;
}

.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
    font-size: 15px;
    text-transform: lowercase;
    text-decoration: none;
    color: #fff;
    font-family: 'Viga';
    font-weight: 400;
    letter-spacing: 0.5px;
}

.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
    text-decoration: none;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
    padding: 10px;
    font-size: 92%;
    ;transition: all 0.3s ease-in-out;
}

.toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover {
    background: #fdfdfd;
}

.toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) {
    padding: 10px;
    font-size: 92%;
}

.toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) {
    padding: 10px;
    font-size: 92%;
}

.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
    text-decoration: none;
    color: #666;
    transition: all 0.3s ease-in-out;
}

.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover {
    color: #f56954;
}

span.toc-note {
    padding: 10px;
    margin: 10px 0;
    display: inline-block;
    background: #fff;
    color: #666;
}

#bp_toc table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
    border-color: transparent;
}

#bp_toc tr:nth-child(even) {
    background: #fafafa;
}

#bp_toc tr:nth-child(odd) {
    background: #f5f5f5;
}

Sau khi thêm CSS xong các bạn tạo một trang tỉnh với tiêu đề là sitemap rồi copy và paste code bên dưới nhớ chuyển sang chế độ HTML và nhấn xuất bản vậy là chúng ta đả hoàn thành cách tạo trang sitemap cho blogger/blogspot rồi nhé

<div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="https://dl.dropboxusercontent.com/u/184079020/blogtoc.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<b:if cond="data:blog.pageType == &quot;http://www.tuanphan.info/p/sitemap.html&quot;"> <style scoped="" type="text/css">
#outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
</style> </b:if>

Lưu ý: 

1. Các bạn muốn sử dụng lâu dài hãy tải file JS về máy tính rồi úp lên host của mình để sử dụng lâu dài.
2. Nhớ thay www.tuanphan.info thành tên miền của bạn
3. DEMO

Tag : CSS, HTML5