Thứ Ba, ngày 29 tháng 11 năm 2016

Share CODE SITEMAP Chọn Nhãn Tự Động Đẹp Đỉnh cho Blogspot

SITEMAP Chọn Nhãn Tự Động cho Blogger hội tụ đầy đủ các CODE Chất LượngBố Trí Đẹp Mắt Nhất cho Blogspot. Không những thế SITEMAP này còn tích hợp chế độ xem thêm không cần load lại trang và chế độ tìm kiếm theo từ khóa theo từng nhãn (Label) cực Đỉnh
Trong bài viết này mình sẽ hướng dẫn các bạn "Tạo Sitemap Chọn Nhãn Tự Động Cho Blogger". Hy vọng nó bổ ích với các bạn.


VIEW DEMO



Sau đây là cách thực hiện:


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)


- 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">

</div>
<style type="text/css">

#resultDesc {
    margin:0;
    padding:0;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#D64D52;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 20px 0;
    padding:0 0;
    overflow:hidden;
    position:relative;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}

#feedContainer li {
    list-style:none;
    margin:0;
    padding:20px 0;
    color:#999;
    width:100%;
    float:left;
    display:inline;
    border-top:dashed 1px #ccc
}
#feedContainer li .inner {
    margin:0;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#444;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:#007F74;
}
#feedContainer li a.toc-title {
    font-weight:600;
    font-size:16px;
    margin:0 0;
}
#feedContainer li .news-text {
    color:#333;
    font-size:13px;
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px;
    border:solid 1px #ccc;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal 700 13px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    width:250px;
    padding:10px 15px;
    color:#007F74;
    text-decoration:none;
    display:block;
    border: solid 1px #007F74;
    font-size:18px;
    margin-left:200px;
}

#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:0 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:700;
    color:#444;
    font-size:16px;
    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:#fff;
    border:none;
    display:block;
    margin:0 0;
    padding:10px;
    font:600 12px Arial, Sans-Serif;
    color:#777;
    outline:none;
    border:solid 1px #ccc;
 
}
#postSearcher input {
    width:170px;
    padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
    background:#fff
}

</style>
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
 url: "http://codeseo.net/",
 feedNum: 6,
 labelName: false,
 numChars: 180,
 thumbWidth: 110,
 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>


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

<header id="resultDesc"></header>

<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:

Thay url: "http://codeseo.net/" thành URL trang blog của bạn hoặc trang blog bạn muốn hiển thị sitemap này.

feedNum: 6, 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: 180, 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: 110, 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.

- Khi tạo trang mới, bạn không được chuyển đổi qua lại giữa tab HTML và Bài Viết, vì chuyển qua tab bài viết code sẽ hiển thị sai

Vậy là xong. Chúc các bạn thành công!