THIẾT KẾ ĐẸP MẮT CHO TRANG LƯU TRỮ CỦA BLOGSPOT
Có thể nói sitemap là một trang web để anh em có thể gây điểm seo với Google nhà ta và có thể gây sự ấn tượng với các bạn đọc của blog bạn dễ tìm kiếm bài viết hơn, và theo mình thì với kiểu thiết kế "Độc nhất vô nhị" này sẽ thật sự là một điểm nhấn mới cho hệ thống sitemap của Blogspot.
1. TẠO TRANG:
Các bạn truy cập: Đăng bài / Chỉnh sửa Trang / TRANG MỚI
2. THÊM CODE:
Tiêu đề trang bạn đặt theo ý của mình. Còn phần nội dung thì bạn chuyển sang chế độ Edit HTML, rồi copy và dán đoạn code sau vào:
<style type="text/css">body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis_QTAlufr8AA0Ne1nC310Vb8fm3t3rj-DxfAiCNUOIpizqgJb258Ao53Gi0-3siWT55qmXr6b4cNO2-PYByu0dDZ6ndcJY3CnJtKzU9BcMy6clD5mzS4lgmqALgyVVmsBqX94cXSESwQ/s1600/bg.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-LzMPhVeY-YOZ9bQlnlWsPYwkq5KOyl3mpMazwUZ2qckHYbDiqvthQAlwyiZ2ySqFglhgP-zpkCUUHg5FLaYPD-2dv_y0PSSLCmCfliFR4XIlzcbw5io1gt_y8lj7ea0lKybIS15JbC0/s1600/bg-home.jpg)#171717;color:#666;font-size:12px;}#toggle-container h2{border:none;background-color:transparent;margin:0;padding:0;}#navmenu,.footer{display:none;}html,#bawahbana,.footerwrap,.footergrd p{color:#555;}.footerwrap{background:rgba(0,0,0,0.4) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt4Tv0jvj_U6bsOUu_-2ks2YYtBgqfnosxqLuO-OS6kMWsi8tGJ2HLAKIW42M07FSgXWTmcc57wXSkB4DIDurDjzV-j2PMoFVY3VE7GJFaOeFoewVzLEhHwlPdijFcdsRocc2odez1p5U/s1600/bg-footer.png)repeat-x top center;border:none;-webkit-box-shadow:none;-moz-box-shadoa:none;box-shadow:none;}.row{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXj4IKjZvYLIz_MY5kbsRayACQPV00RBV-a5aPJeDJOYGUvfHp_NAKxkLWDM0N7SNs2N7WcFGXldlHwzMSjO5lEqhMugmceYbFbTBdCsBrmrR0QpbB-8FNlwSb8w9s31eCUSvhpB9KshQ/s1600/border.png)no-repeat bottom center;height:20px;margin:0 0 20px;}.grid{width:1000px;margin:0 auto;}#bp_toc{width:960px!important;font:14px arial,sans serif;text-transform:uppercase;background-color:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,0.03);border-top-color:rgba(255,255,255,0.04);border-bottom-color:rgba(255,255,255,0.01);box-shadow:0 5px 12px rgba(0,0,0,.7);-moz-box-shadow:0 5px 12px rgba(0,0,0,.7);-webkit-box-shadow:0 5px 12px rgba(0,0,0,.7);-webkit-transition:all .15s ease-in-out;-webkit-transform-origin:50% 1px;padding:20px;}#bp_toc table{width:98%;margin:0 auto;}#bp_toc table tr{border:1px solid rgba(255,255,255,0.03);position:relative;color:#777;line-height:28px;font-size:18px;}#bp_toc table .judul-posting a,#bp_toc table .label a,#bp_toc table .judul-tanggal a{color:#777;}#bp_toc table .judul-posting a:visited{color:#222;}#bp_toc table .judul-posting,#bp_toc table .label,#bp_toc table .tanggal{background-color:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,0.03);border-top-color:rgba(255,255,255,0.04);border-bottom-color:rgba(255,255,255,0.06);border-left:2px solid #222;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;box-shadow:inset 0 2px 6px #000000;webkit-shadow:inset 0 2px 6px #000000;-moz-shadow:inset 0 2px 6px #000000;height:40px;padding:6px 10px;}td.toc-header-col1,td.toc-header-col2,td.toc-header-col3{background-color:rgba(0,0,0,.2);border:2px solid #222;border-top-color:rgba(255,255,255,0.04);box-shadow:0 5px 12px rgba(0,0,0,.7);-moz-box-shadow:0 5px 12px rgba(0,0,0,.7);-webkit-box-shadow:0 5px 12px rgba(0,0,0,.7);}td.toc-header-col1 a,td.toc-header-col2 a,td.toc-header-col3 a{color:#C6EB04;text-shadow:0 0 10px #C6EB04;font:30px Raleway,arial,sans serif;}.footergrd li{border-bottom:1px solid #222;padding:4px;}.footergrd h1{font-size:200%;font-family:Verdana, Geneva, sans-serif;color:#555;text-shadow:0 -1px 1px hsla(0,0%,0%,.8);border-bottom:1px solid #222;}.header,#bawahbana,#bawahbana p{display:block;}#slideout-holder(display:none;} </style><div class="grid"><div class="row"></div><div id="bp_toc" style="width:1000px;">Loading....</div><script type="text/javascript">// ---------------------------------------------------
// BLOGTOC SITEMAP
// Original by:http://www.bloggerzbible.com/2010/03/table-of-contents.html
// Modified by:Andre pandet rank khoerai http://urangkurai.blogspot.com/
// Dịch thuật tiếng việt bởi : Cenz.ChoiChoi
// ---------------------------------------------------
var postTitle = new Array(); // array of posttitles
var postUrl = new Array(); // array of posturls
var postDate = new Array(); // array of post publish dates
var postSum = new Array(); // array of post summaries
var postLabels = new Array(); // array of post labels
// global variables
var sortBy = "datenewest"; // default value for sorting ToC
var tocLoaded = false; // true if feed is read and ToC can be displayed
var numChars = 250; // number of characters in post summary
var postFilter = ''; // default filter value
var tocdiv = document.getElementById("bp_toc"); //the toc container
var totalEntires =0; //Entries grabbed till now
var totalPosts =0; //Total number of posts in the blog.
// main callback function
function loadtoc(json) {
function getPostData() {
// this functions reads all postdata from the json-feed and stores it in arrays
if ("entry" in json.feed) {
var numEntries = json.feed.entry.length;
totalEntires = totalEntires + numEntries;
totalPosts=json.feed.openSearch$totalResults.$t
if(totalPosts>totalEntires)
{
var nextjsoncall = document.createElement('script');
nextjsoncall.type = 'text/javascript';
startindex=totalEntires+1;
nextjsoncall.setAttribute("src", "/feeds/posts/summary?start-index=" + startindex + "&max-results=500&alt=json-in-script&callback=loadtoc");
tocdiv.appendChild(nextjsoncall);
}
// main loop gets all the entries from the feed
for (var i = 0; i < numEntries; i++) {
// get the entry from the feed
var entry = json.feed.entry[i];
// get the posttitle from the entry
var posttitle = entry.title.$t;
// get the post date from the entry
var postdate = entry.published.$t.substring(0,10);
// get the post url from the entry
var posturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
// get the post contents from the entry
// strip all html-characters, and reduce it to a summary
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
// strip off all html-tags
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
// reduce postcontent to numchar characters, and then cut it off at the last whole word
if (postcontent.length > numChars) {
postcontent = postcontent.substring(0,numChars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd) + '...';
}
// get the post labels from the entry
var pll = '';
if ("category" in entry) {
for (var k = 0; k < entry.category.length; k++) {
pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\');" title="Click here to select all posts with label \'' + entry.category[k].term + '\'">' + entry.category[k].term + '</a>, ';
}
var l = pll.lastIndexOf(',');
if (l != -1) { pll = pll.substring(0,l); }
}
// add the post data to the arrays
postTitle.push(posttitle);
postDate.push(postdate);
postUrl.push(posturl);
postSum.push(postcontent);
postLabels.push(pll);
}
}
if(totalEntires==totalPosts) {tocLoaded=true;showToc();}
} // end of getPostData
// start of showtoc function body
// get the number of entries that are in the feed
// numEntries = json.feed.entry.length;
// get the postdata from the feed
getPostData();
// sort the arrays
sortPosts(sortBy);
tocLoaded = true;
}
// filter and sort functions
function filterPosts(filter) {
// This function changes the filter
// and displays the filtered list of posts
// document.getElementById("bp_toc").scrollTop = document.getElementById("bp_toc").offsetTop;;
postFilter = filter;
displayToc(postFilter);
} // end filterPosts
function allPosts() {
// This function resets the filter
// and displays all posts
postFilter = '';
displayToc(postFilter);
} // end allPosts
function sortPosts(sortBy) {
// This function is a simple bubble-sort routine
// that sorts the posts
function swapPosts(x,y) {
// Swaps 2 ToC-entries by swapping all array-elements
var temp = postTitle[x];
postTitle[x] = postTitle[y];
postTitle[y] = temp;
var temp = postDate[x];
postDate[x] = postDate[y];
postDate[y] = temp;
var temp = postUrl[x];
postUrl[x] = postUrl[y];
postUrl[y] = temp;
var temp = postSum[x];
postSum[x] = postSum[y];
postSum[y] = temp;
var temp = postLabels[x];
postLabels[x] = postLabels[y];
postLabels[y] = temp;
} // end swapPosts
for (var i=0; i < postTitle.length-1; i++) {
for (var j=i+1; j<postTitle.length; j++) {
if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
}
}
} // end sortPosts
// displaying the toc
function displayToc(filter) {
// this function creates a three-column table and adds it to the screen
var numDisplayed = 0;
var tocTable = '';
var tocHead1 = 'Bài viết';
var tocTool1 = 'Nhấn vào đây xem theo thứ tự A --> Z';
var tocHead2 = 'Thời gian';
var tocTool2 = 'Nhấn vào đây để xem thời gian đăng bài';
var tocHead3 = 'LABEL';
var tocTool3 = '';
if (sortBy == "titleasc") {
tocTool1 += ' (Giảm dần)';
tocTool2 += ' (Mới nhất)';
}
if (sortBy == "titledesc") {
tocTool1 += ' (Tăng dần)';
tocTool2 += ' (Mới nhất)';
}
if (sortBy == "dateoldest") {
tocTool1 += ' (Tăng dần)';
tocTool2 += ' (Mới nhất)';
}
if (sortBy == "datenewest") {
tocTool1 += ' (Tăng dần)';
tocTool2 += ' (Cũ nhất)';
}
if (postFilter != '') {
tocTool3 = 'Bấm vào đây để trở về tất cả label';
}
tocTable += '<table>';
tocTable += '<tr>';
tocTable += '<td class="toc-header-col1">';
tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col2">';
tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col3">';
tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
tocTable += '</td>';
tocTable += '</tr>';
for (var i = 0; i < postTitle.length; i++) {
if (filter == '') {
tocTable += '<tr><td class="judul-posting"><a href="' + postUrl[i] + '" title="' + postUrl[i] + '">' + postTitle[i] + '</a></td><td class="label">' + postLabels[i] + '</td><td class="tanggal">' + postDate[i] + '</td></tr>';
numDisplayed++;
} else {
z = postLabels[i].lastIndexOf(filter);
if ( z!= -1) {
tocTable += '<tr><td class="judul-posting"><a href="' + postUrl[i] + '" title="' + postUrl[i] + '">' + postTitle[i] + '</a></td><td class="label">' + postLabels[i] + '</td><td class="tanggal">' + postDate[i] + '</td></tr>';
numDisplayed++;
}
}
}
tocTable += '</table>';
if (numDisplayed == postTitle.length) {
var tocNote = '<span class="toc-note"></span>'; }
else {
var tocNote = '<span class="toc-note"></span>';
}
tocdiv.innerHTML = tocNote + tocTable;
} // end of displayToc
function toggleTitleSort() {
if (sortBy == "titleasc") { sortBy = "titledesc"; }
else { sortBy = "titleasc"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function toggleDateSort() {
if (sortBy == "datenewest") { sortBy = "dateoldest"; }
else { sortBy = "datenewest"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function showToc() {
if (tocLoaded) {
displayToc(postFilter);
var toclink = document.getElementById("toclink");
}
else { alert("Just wait... TOC is loading"); }
}
function hideToc() {
var tocdiv = document.getElementById("toc");
tocdiv.innerHTML = '';
var toclink = document.getElementById("toclink");
toclink.innerHTML = '<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle('+"'toc-result','blind');"+'">? Show Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5o9OIju82qrpo5cVKbHDKFUXYOijDO-F3pi_kGv1KjYnN_d8dvpnfI93flCkXXwNJtiuwXIuwq4krm9wD2u2H2-MjveNOzwZd9zRn5elU_1695xZBrTRb6vwllC__ruDzVTmyARprM2l4/s1600/new_1.gif.png"/>';
}
</script> <script src="../../feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script> </div>
Hãy tìm đoạn code #bp_toc{width:960px!important và thay số 960px thành độ rộng phù hợp với thành phần main của blog bạn (nếu thấy cần thiết).
XEM DEMO
Lưu ý: khi dùng thủ thuật này nên tạo 1 trang riêng biệt sẽ không có sidebar thì sẽ đẹp hơn và thích hợp với các blog có nền tối.
Thiết kế này được mình tìm hiểu tại Urangkurai và Việt hóa dành tặng các bạn. Các bạn cảm thấy thế nào? Hãy comment để chia sẽ cảm nhận của bạn, khen, chê chúng tôi đều hoan nghênh các bạn. Và hãy giúp chúng tôi hoàn thiện nó bằng cách comment phản hồi. Chân thành cảm ơn!
Có thể nói sitemap là một trang web để anh em có thể gây điểm seo với Google nhà ta và có thể gây sự ấn tượng với các bạn đọc của blog bạn dễ tìm kiếm bài viết hơn, và theo mình thì với kiểu thiết kế "Độc nhất vô nhị" này sẽ thật sự là một điểm nhấn mới cho hệ thống sitemap của Blogspot.
1. TẠO TRANG:
Các bạn truy cập: Đăng bài / Chỉnh sửa Trang / TRANG MỚI
2. THÊM CODE:
Tiêu đề trang bạn đặt theo ý của mình. Còn phần nội dung thì bạn chuyển sang chế độ Edit HTML, rồi copy và dán đoạn code sau vào:
<style type="text/css">body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis_QTAlufr8AA0Ne1nC310Vb8fm3t3rj-DxfAiCNUOIpizqgJb258Ao53Gi0-3siWT55qmXr6b4cNO2-PYByu0dDZ6ndcJY3CnJtKzU9BcMy6clD5mzS4lgmqALgyVVmsBqX94cXSESwQ/s1600/bg.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-LzMPhVeY-YOZ9bQlnlWsPYwkq5KOyl3mpMazwUZ2qckHYbDiqvthQAlwyiZ2ySqFglhgP-zpkCUUHg5FLaYPD-2dv_y0PSSLCmCfliFR4XIlzcbw5io1gt_y8lj7ea0lKybIS15JbC0/s1600/bg-home.jpg)#171717;color:#666;font-size:12px;}#toggle-container h2{border:none;background-color:transparent;margin:0;padding:0;}#navmenu,.footer{display:none;}html,#bawahbana,.footerwrap,.footergrd p{color:#555;}.footerwrap{background:rgba(0,0,0,0.4) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt4Tv0jvj_U6bsOUu_-2ks2YYtBgqfnosxqLuO-OS6kMWsi8tGJ2HLAKIW42M07FSgXWTmcc57wXSkB4DIDurDjzV-j2PMoFVY3VE7GJFaOeFoewVzLEhHwlPdijFcdsRocc2odez1p5U/s1600/bg-footer.png)repeat-x top center;border:none;-webkit-box-shadow:none;-moz-box-shadoa:none;box-shadow:none;}.row{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXj4IKjZvYLIz_MY5kbsRayACQPV00RBV-a5aPJeDJOYGUvfHp_NAKxkLWDM0N7SNs2N7WcFGXldlHwzMSjO5lEqhMugmceYbFbTBdCsBrmrR0QpbB-8FNlwSb8w9s31eCUSvhpB9KshQ/s1600/border.png)no-repeat bottom center;height:20px;margin:0 0 20px;}.grid{width:1000px;margin:0 auto;}#bp_toc{width:960px!important;font:14px arial,sans serif;text-transform:uppercase;background-color:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,0.03);border-top-color:rgba(255,255,255,0.04);border-bottom-color:rgba(255,255,255,0.01);box-shadow:0 5px 12px rgba(0,0,0,.7);-moz-box-shadow:0 5px 12px rgba(0,0,0,.7);-webkit-box-shadow:0 5px 12px rgba(0,0,0,.7);-webkit-transition:all .15s ease-in-out;-webkit-transform-origin:50% 1px;padding:20px;}#bp_toc table{width:98%;margin:0 auto;}#bp_toc table tr{border:1px solid rgba(255,255,255,0.03);position:relative;color:#777;line-height:28px;font-size:18px;}#bp_toc table .judul-posting a,#bp_toc table .label a,#bp_toc table .judul-tanggal a{color:#777;}#bp_toc table .judul-posting a:visited{color:#222;}#bp_toc table .judul-posting,#bp_toc table .label,#bp_toc table .tanggal{background-color:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,0.03);border-top-color:rgba(255,255,255,0.04);border-bottom-color:rgba(255,255,255,0.06);border-left:2px solid #222;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;box-shadow:inset 0 2px 6px #000000;webkit-shadow:inset 0 2px 6px #000000;-moz-shadow:inset 0 2px 6px #000000;height:40px;padding:6px 10px;}td.toc-header-col1,td.toc-header-col2,td.toc-header-col3{background-color:rgba(0,0,0,.2);border:2px solid #222;border-top-color:rgba(255,255,255,0.04);box-shadow:0 5px 12px rgba(0,0,0,.7);-moz-box-shadow:0 5px 12px rgba(0,0,0,.7);-webkit-box-shadow:0 5px 12px rgba(0,0,0,.7);}td.toc-header-col1 a,td.toc-header-col2 a,td.toc-header-col3 a{color:#C6EB04;text-shadow:0 0 10px #C6EB04;font:30px Raleway,arial,sans serif;}.footergrd li{border-bottom:1px solid #222;padding:4px;}.footergrd h1{font-size:200%;font-family:Verdana, Geneva, sans-serif;color:#555;text-shadow:0 -1px 1px hsla(0,0%,0%,.8);border-bottom:1px solid #222;}.header,#bawahbana,#bawahbana p{display:block;}#slideout-holder(display:none;} </style><div class="grid"><div class="row"></div><div id="bp_toc" style="width:1000px;">Loading....</div><script type="text/javascript">// ---------------------------------------------------
// BLOGTOC SITEMAP
// Original by:http://www.bloggerzbible.com/2010/03/table-of-contents.html
// Modified by:Andre pandet rank khoerai http://urangkurai.blogspot.com/
// Dịch thuật tiếng việt bởi : Cenz.ChoiChoi
// ---------------------------------------------------
var postTitle = new Array(); // array of posttitles
var postUrl = new Array(); // array of posturls
var postDate = new Array(); // array of post publish dates
var postSum = new Array(); // array of post summaries
var postLabels = new Array(); // array of post labels
// global variables
var sortBy = "datenewest"; // default value for sorting ToC
var tocLoaded = false; // true if feed is read and ToC can be displayed
var numChars = 250; // number of characters in post summary
var postFilter = ''; // default filter value
var tocdiv = document.getElementById("bp_toc"); //the toc container
var totalEntires =0; //Entries grabbed till now
var totalPosts =0; //Total number of posts in the blog.
// main callback function
function loadtoc(json) {
function getPostData() {
// this functions reads all postdata from the json-feed and stores it in arrays
if ("entry" in json.feed) {
var numEntries = json.feed.entry.length;
totalEntires = totalEntires + numEntries;
totalPosts=json.feed.openSearch$totalResults.$t
if(totalPosts>totalEntires)
{
var nextjsoncall = document.createElement('script');
nextjsoncall.type = 'text/javascript';
startindex=totalEntires+1;
nextjsoncall.setAttribute("src", "/feeds/posts/summary?start-index=" + startindex + "&max-results=500&alt=json-in-script&callback=loadtoc");
tocdiv.appendChild(nextjsoncall);
}
// main loop gets all the entries from the feed
for (var i = 0; i < numEntries; i++) {
// get the entry from the feed
var entry = json.feed.entry[i];
// get the posttitle from the entry
var posttitle = entry.title.$t;
// get the post date from the entry
var postdate = entry.published.$t.substring(0,10);
// get the post url from the entry
var posturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
// get the post contents from the entry
// strip all html-characters, and reduce it to a summary
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
// strip off all html-tags
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
// reduce postcontent to numchar characters, and then cut it off at the last whole word
if (postcontent.length > numChars) {
postcontent = postcontent.substring(0,numChars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd) + '...';
}
// get the post labels from the entry
var pll = '';
if ("category" in entry) {
for (var k = 0; k < entry.category.length; k++) {
pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\');" title="Click here to select all posts with label \'' + entry.category[k].term + '\'">' + entry.category[k].term + '</a>, ';
}
var l = pll.lastIndexOf(',');
if (l != -1) { pll = pll.substring(0,l); }
}
// add the post data to the arrays
postTitle.push(posttitle);
postDate.push(postdate);
postUrl.push(posturl);
postSum.push(postcontent);
postLabels.push(pll);
}
}
if(totalEntires==totalPosts) {tocLoaded=true;showToc();}
} // end of getPostData
// start of showtoc function body
// get the number of entries that are in the feed
// numEntries = json.feed.entry.length;
// get the postdata from the feed
getPostData();
// sort the arrays
sortPosts(sortBy);
tocLoaded = true;
}
// filter and sort functions
function filterPosts(filter) {
// This function changes the filter
// and displays the filtered list of posts
// document.getElementById("bp_toc").scrollTop = document.getElementById("bp_toc").offsetTop;;
postFilter = filter;
displayToc(postFilter);
} // end filterPosts
function allPosts() {
// This function resets the filter
// and displays all posts
postFilter = '';
displayToc(postFilter);
} // end allPosts
function sortPosts(sortBy) {
// This function is a simple bubble-sort routine
// that sorts the posts
function swapPosts(x,y) {
// Swaps 2 ToC-entries by swapping all array-elements
var temp = postTitle[x];
postTitle[x] = postTitle[y];
postTitle[y] = temp;
var temp = postDate[x];
postDate[x] = postDate[y];
postDate[y] = temp;
var temp = postUrl[x];
postUrl[x] = postUrl[y];
postUrl[y] = temp;
var temp = postSum[x];
postSum[x] = postSum[y];
postSum[y] = temp;
var temp = postLabels[x];
postLabels[x] = postLabels[y];
postLabels[y] = temp;
} // end swapPosts
for (var i=0; i < postTitle.length-1; i++) {
for (var j=i+1; j<postTitle.length; j++) {
if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
}
}
} // end sortPosts
// displaying the toc
function displayToc(filter) {
// this function creates a three-column table and adds it to the screen
var numDisplayed = 0;
var tocTable = '';
var tocHead1 = 'Bài viết';
var tocTool1 = 'Nhấn vào đây xem theo thứ tự A --> Z';
var tocHead2 = 'Thời gian';
var tocTool2 = 'Nhấn vào đây để xem thời gian đăng bài';
var tocHead3 = 'LABEL';
var tocTool3 = '';
if (sortBy == "titleasc") {
tocTool1 += ' (Giảm dần)';
tocTool2 += ' (Mới nhất)';
}
if (sortBy == "titledesc") {
tocTool1 += ' (Tăng dần)';
tocTool2 += ' (Mới nhất)';
}
if (sortBy == "dateoldest") {
tocTool1 += ' (Tăng dần)';
tocTool2 += ' (Mới nhất)';
}
if (sortBy == "datenewest") {
tocTool1 += ' (Tăng dần)';
tocTool2 += ' (Cũ nhất)';
}
if (postFilter != '') {
tocTool3 = 'Bấm vào đây để trở về tất cả label';
}
tocTable += '<table>';
tocTable += '<tr>';
tocTable += '<td class="toc-header-col1">';
tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col2">';
tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col3">';
tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
tocTable += '</td>';
tocTable += '</tr>';
for (var i = 0; i < postTitle.length; i++) {
if (filter == '') {
tocTable += '<tr><td class="judul-posting"><a href="' + postUrl[i] + '" title="' + postUrl[i] + '">' + postTitle[i] + '</a></td><td class="label">' + postLabels[i] + '</td><td class="tanggal">' + postDate[i] + '</td></tr>';
numDisplayed++;
} else {
z = postLabels[i].lastIndexOf(filter);
if ( z!= -1) {
tocTable += '<tr><td class="judul-posting"><a href="' + postUrl[i] + '" title="' + postUrl[i] + '">' + postTitle[i] + '</a></td><td class="label">' + postLabels[i] + '</td><td class="tanggal">' + postDate[i] + '</td></tr>';
numDisplayed++;
}
}
}
tocTable += '</table>';
if (numDisplayed == postTitle.length) {
var tocNote = '<span class="toc-note"></span>'; }
else {
var tocNote = '<span class="toc-note"></span>';
}
tocdiv.innerHTML = tocNote + tocTable;
} // end of displayToc
function toggleTitleSort() {
if (sortBy == "titleasc") { sortBy = "titledesc"; }
else { sortBy = "titleasc"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function toggleDateSort() {
if (sortBy == "datenewest") { sortBy = "dateoldest"; }
else { sortBy = "datenewest"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function showToc() {
if (tocLoaded) {
displayToc(postFilter);
var toclink = document.getElementById("toclink");
}
else { alert("Just wait... TOC is loading"); }
}
function hideToc() {
var tocdiv = document.getElementById("toc");
tocdiv.innerHTML = '';
var toclink = document.getElementById("toclink");
toclink.innerHTML = '<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle('+"'toc-result','blind');"+'">? Show Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5o9OIju82qrpo5cVKbHDKFUXYOijDO-F3pi_kGv1KjYnN_d8dvpnfI93flCkXXwNJtiuwXIuwq4krm9wD2u2H2-MjveNOzwZd9zRn5elU_1695xZBrTRb6vwllC__ruDzVTmyARprM2l4/s1600/new_1.gif.png"/>';
}
</script> <script src="../../feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script> </div> Hãy tìm đoạn code #bp_toc{width:960px!important và thay số 960px thành độ rộng phù hợp với thành phần main của blog bạn (nếu thấy cần thiết).
Lưu ý: khi dùng thủ thuật này nên tạo 1 trang riêng biệt sẽ không có sidebar thì sẽ đẹp hơn và thích hợp với các blog có nền tối.
Thiết kế này được mình tìm hiểu tại Urangkurai và Việt hóa dành tặng các bạn. Các bạn cảm thấy thế nào? Hãy comment để chia sẽ cảm nhận của bạn, khen, chê chúng tôi đều hoan nghênh các bạn. Và hãy giúp chúng tôi hoàn thiện nó bằng cách comment phản hồi. Chân thành cảm ơn!
0 nhận xét: