Sitemap chọn nhãn tự động cho blogger

Site map là tiện ích được rất nhiều blogger sử dụng, Bởi nó có rất nhiều chức năng như điều hướng người đọc đến các bài viết mà họ quan tâm. Giúp họ có thể tìm được những bài đọc theo nhãn khác nhau. Hiện nay có rất nhiều loại site map khác nhau. Tuy nhiên sitemap hôm nay mình giới thiệu hoàn toàn mới. Với tiện ích này bạn có thể sắp xếp bài viết theo ý muốn và theo nhãn bạn muốn xem. Ngoài ra còn tích hợp sắp sếp bài viết theo từ khóa mà bạn quan tâm. Các bài viết hiển thị theo định trước và sẽ được tải thêm khi người dùng bấm vào các liên kết cuối tiện ích.

Ảnh minh họa

Demo post

☼ Một số đặc điểm nổi bật của tiện ích Sitemap này:

» Bạn có thể chọn Nhãn để xem theo ý muốn của bạn hoặc xem cả blog.

» Bài viết hiển thị với số lượng định trước và có thể tải thêm bằng cách bấm vào liên kết tải thêm cuối tiện ích (Hiệu ứng tải thêm giống trang facebook hay google +). Với cách tải này thì tiện ích sẽ load nhanh hơn rất nhiều so với các tiện ích Sitemap trước đây.

» Bạn có thể hiển thị bài viết theo từ khóa, hay nói cách khác là bạn có thể tìm kiếm trực tiếp trên sitemap.

» Tính tùy biến cao, bạn có thể thoải mái tùy biến màu chữ, phần mô tả bài viết, số lượng bài hiển thị, kích thước ảnh thu nhỏ.

» Hiển thị ảnh thumbnail thu nhỏ đại diện cho những bài viết không có hình ảnh.

☼ Cách thêm Sitemap 2 cột tự động chọn nhãn theo ý độc giả cho blogger:

1. Đăng nhập vào tài khoản Blogger

2. Vào Trang (Trang)

3. Chọn Trang mới (New page)=> Trang trống (Blank Page) (Bạn có thể xem hướng dẫn bằng hình ảnh tại đây).

- Tạo một trang mới để tạo một bài viết có tiêu đề là Sitemap (Tất nhiên bạn có thể đặt tiêu đề khác nếu bạn muốn) => Tại phần nội dung bạn bấm vào tab HTML, Sau đó dán đoạn code bên dưới vào:

<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://namkna.blogspot.com/",
 feedNum: 30,
 labelName: false,
 numChars: 0,
 thumbWidth: 80,
 navText: "Hiển thị thêm bài viết ▼",
 frontText: "Chọn nhãn ⇑",
 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ật</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="labelSorterSelect">Chọn nhãn muốn 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>

» Tùy chỉnh code:

•  url: "http://namkna.blogspot.com/", thay thành URL trang blog của bạn hoặc trang blog bạn muốn hiển thị sitemap này.
•  feedNum: 30, Bài viết tối đa hiển thị khi load lần một, đồng thời cũng là số bài viết hiển thị thêm khi bạn tải thêm bài viết mới thuộc nhãn đó.
•  labelName: false, Tắt lệnh chọn nhãn khi truy cập lần đầu. Tức là khi độc giả truy cập lần đầu vào trang sitemap của bạn chưa chọn nhãn nào thì nó sẽ hiển thị các bài viết mới nhất của blog. Nếu muốn tắt chức năng đó bạn hãy sử false thành true. Lúc này sẽ có một thông báo Chọn nhãn ⇑ yêu cầu độc giả chọn nhãn họ muốn xem.
•  numChars: 0,  số ký tự mô tả của bài viết sẽ hiển thị. Trường hợp để 0 là không cho hiển thị mô tả bài viết chỉ có dấu 3 chấm (...)
• thumbWidth: 80,Là chiều cao và chiều rộng của ảnh thu nhỏ, Với đoạn code này thì ảnh của tiện ích là tương xứng với nhau về chiều rộng và chiều cao tức là ảnh có độ rộng và độ cao cùng bằng 80 px. Tất nhiên bạn có thể thay đổi phần này.
• navText: "Hiển thị thêm bài viết ▼", Đây là ký tự nằm trong Button ở cuối bài viết, Phần mà bạn bấm vào để tải thêm bài viết.
• Cuối cùng hãy tải file Js cuối bài viết về tại đây (Nếu chưa biết các tải các file Js thì bạn xem Bài viết này nha) và upload lên host riêng để sử dụng lâu dài nha (Nếu chưa có host bạn có thể tham khảo bài viết tạo host miễn phí với dung lượng miễn phí nhiều Tại đây).
• background-color:#111; Là màu nền của khung tìm kiếm và chọn nhãn
• color:#777; Là màu chữ của khung tìm kiếm và chọn nhãn
•  color:#999; Là màu nền của chữ nằm trước các ô tùy chọn

3- Giờ lưu mẫu của bạn lại và quay trở lại trang bạn vừa tạo để kiểm tra thành quả bạn đã làm được nha.

tutorialesblogger