Tạo sitemap đẹp cho Blogspot (Chọn nhãn tự động)

Với Blogspot hay bất kỳ một trang web nào khác thì sitemap là một thành phần rất quan trọng trong việc tương tác với người xem. Nếu Blog của bạn có rất nhiều bài viết với nhiều chuyên mục khác nhau như Suối nguồn cuộc sống chẳng hạn! Thì rõ ràng một "bản đồ" để người đọc dễ dàng tiếp cận với nội dung mà Blog cung cấp là điều tối quan trọng.

Hôm nay tớ sẽ giới thiệu với các bạn một cách làm Sitemap đơn giản và khá đẹp. Có thể lựa chọn nhãn hoặc tìm kiếm theo từ khóa. Thủ thuật được chia sẻ từ trang namkna.blogspot.com (Một trang rất hay đối với những ai sử dụng Blogspot, hãy qua tham khảo nhé!). Các bạn có thể xem Demo ngay tại đây:  Sitemap

Cách làm như sau: Các bạn tạo một trang trống mới: Đặt tên là Sitemap rồi chuyển qua chế độ HTML, dán code bên dưới vào. Sau đó xuất bản là xong.. Tớ cũng chỉ là tay ngang, viết Blog dựa vào những gì mình tìm hiểu được trên mạng chứ không có chút kiến thức nào về Code hay HTML gì đó đâu, những tips tớ chia sẻ đều đã tự lấy mình làm chuột bạch rồi nhé.... Cuối cùng chúc các bạn thành công!

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<style type="text/css">
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #31353e;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#D64D52;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:1px solid #3d464f;
    border-top:none;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
    content:"";
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    background-color:#3d464f;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:1px solid #3d464f;
    color:#999;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:120px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#5687B8;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:#eee;
}
#feedContainer li a.toc-title {
    font-weight:bold;
    font-size:12px;
    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px 4px;
    background-color:#222;
    border:1px solid #111;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 0 #444;
    -moz-box-shadow:0 1px 0 #444;
    box-shadow:0 1px 0 #444;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    background-color:#111;
    padding:0 0;
    color:#999;
    text-decoration:none;
    display:block;
}
#feedNav a:hover, #feedNav a:active {
    background-color:black;
    color:white;
    border:none !important;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:30px 30px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:2px 2px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#999;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
    width:180px;
    background-color:#111;
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    color:#777;
    outline:none;
    -webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#090909
}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
 url: "http://suoinguoncuocsong.blogspot.com/",
 feedNum: 30,
 labelName: false,
 numChars: 0,
 thumbWidth: 80,
 navText: "Hiển thị thêm bài viết ▼",
 frontText: "Atras ⇑",
 resetToc: "Reset",
 noImage: "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
 loading: "<span>Đang tải...</span>",
 searching: "<span>Từ khóa...</span>",
 noResult: "Không tìm thấy kết quả cho sự lựa chọn của bạn"
};
//]]>
</script>
<br />
<div id="table-outer">
<table border="0">
        <tbody>
<tr>
                <td><label for="orderFeedBy">Sắp xếp theo:</label>
                </td>
                <td><select id="orderFeedBy">
                        <option selected="" value="published">Lần nhập cuối</option>
                        <option value="updated">Xuất bản cập nhập</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="labelSorterSelect">Chọn nhãn muốn xem xem:</label>
                </td>
                <td><span id="labelSorter"><select disabled="" id="labelSorterSelect"><option selected="">Đang tải...</option></select></span>
                </td>
            </tr>
<tr>
                <td><label for="feed-q-box">Tìm theo từ khóa:</label>
                </td>
                <td><form id="postSearcher">
<input id="feed-q-box" type="text" />
                    </form>
</td>
            </tr>
</tbody>
    </table>
</div>
<br />
<br />
<br />
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script src="https://dl.dropboxusercontent.com/u/91602513/Html/TutorialesBlogger.blogspot.com/Mapa.js" type="text/javascript"></script></div>

Trong đó:
Thay Url: http://suoinguoncuocsong.blogspot.com/ thành địa chỉ Blog của bạn.

feedNum: 30, : Số ký tự tối đa tiêu đề sẽ hiển thị.

labelName: false, : Không hiển thị nhãn ( Nếu muốn hiển thị sửa 'false' thành 'true')

numChars: 0, : Số ký tự mô tả bài viết sẽ hiển thị ( 0 là không hiển thị mô tả thay vào đó sẽ là dấu '...')

thumbWidth: 80, : Độ rộng của ảnh thumbnails bài viết, hãy thay đổi cho phì hợp với Blogspot của bạn.

https://dl.dropboxusercontent.com/u/91602513/Html/TutorialesBlogger.blogspot.com/Mapa.js : Hãy lưu file js này lại và up lên host riêng của bạn đề phòng trường hợp không hay!

Nguồn: namkna.blogspot.com