Breaking

Wednesday, April 24, 2013

Home / Bendoi / Sitemap / Blogger maps dạng bảng nội dung

Blogger maps dạng bảng nội dung

by on in ,
Một sitemaps được chia làm 2 cột, cột trái là danh sách các label, bên phải là phần nội dung.

Hoặc xem trích dẫn các bài:

Demo 
Code viết gọn nhúng trong trang mới như sau:
<link rel="stylesheet" href="http://reader-download.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Đang tải về, bạn chờ tí!</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://bendoivn-demo-news-001.blogspot.com", // Blog URL
    containerId: "tabbed-toc", // Định danh kiểu lấy bài map
    activeTab: 1, // Thứ tự label được load
    showDates: true, // Hiển thị ngày đăng bài true|false
    showSummaries: true, // Hiển thị nội dung true|false
    numChars: 200, // Số ký tự được hiển thị trong phần nội dung tóm tắt
    showThumbnails: false, // Hiển thị ảnh thumbnai, nếu ảnh trong bài viết lưu từ host google thì mới hiển thị
    thumbSize: 40, // Kích thước ảnh thu nhỏ đại diện
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // ảnh thumbnai mặc định
    monthNames: [ // Kiểu tháng, bạn có thể thay bằng số 1,2,...
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // xem bài viết ở cửa sổ mới, tức là chế độ target = _blank
    maxResults: 99999, // Số bài tối đã sẽ hiển thị trên site map
    preload: 0, // Thời gian tải trang sẽ hiển thị (đơn vị là mls, 1s=1000mls), Hoặc trang chỉ hiển thị sau khi Load hết thì chọn "onload"
    sortAlphabetically: true, // Sắp xếp theo bảng chữ cái chọn "true", theo ngày chọn "false"
    showNew: 7, // Số bài viết gần đây nhất sẽ được dán nhãn new.
    newText: " - <em style='color:red;'>New!</em>" // Code HTML trang trí cho chữ "New!", bạn có thể thay "New" bằng các từ như "mới", "mới có nè"
};
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Nếu không tìm thấy file *.css và *.js thì bạn tham khảo nội dung của chúng như sau:


tabbed-toc-skin.css
/* Skin for Blogger Tabbed Layout TOC */

#tabbed-toc {
  margin:0 auto;
  background-color:#224C19;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#333;
}

#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 10px Arial,Sans-Serif;
  color:white;
}

#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}

#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Arial,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#ccc;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}

#tabbed-toc .toc-tabs li a:hover {
  background-color:#153615;
  color:white;
}

#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#275827;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}

#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #275827;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}

#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Arial,Sans-Serif;
}

#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#892412;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}

#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}

#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}

#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}

#tabbed-toc .panel li:nth-child(even) {
  background-color:#FFE8E3;
}

#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#333;
  color:white;
  outline:none;
}

#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}

@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}



tabbed-toc.js
/**
 * Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
 * Free for change but keep the original attribution.
 * URL: https://plus.google.com/108949996304093815163/about
 * TEMPLATES: &lt;div id="tabbed-toc"&gt;&lt;span class="loading"&gt;Loading...&lt;/span&gt;&lt;/div&gt;&lt;script type="text/javascript"&gt;var tabbedTOC = {blogUrl:"http://latitudu.blogspot.com", containerId: "tabbed-toc", activeTab: 1};&lt;/script&gt;&lt;script type="text/javascript" src="js/tabbed-toc.js"&gt;&lt;/script&gt;
 */
var tabbedTOC_defaults = {
blogUrl: "http://www.dte.web.id", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // true to show the post date
showSummaries: false, // true to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // true to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // No thumbnail URL
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum posts result
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by date
showNew: false, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: " - <em style='color:red;'>Baru!</em>" // HTML for the "New!" text
};
for (var i in tabbedTOC_defaults) {
tabbedTOC_defaults[i] = (typeof(tabbedTOC[i]) !== undefined && typeof(tabbedTOC[i]) !== 'undefined') ? tabbedTOC[i] : tabbedTOC_defaults[i];
}
function clickTab(pos) {
var a = document.getElementById(tabbedTOC_defaults.containerId),
b = a.getElementsByTagName('ol'),
c = a.getElementsByTagName('ul')[0],
d = c.getElementsByTagName('a');
for (var t = 0; t < b.length; t++) {
b[t].style.display = "none";
b[parseInt(pos, 10)].style.display = "block";
}
for (var u = 0; u < d.length; u++) {
d[u].className = "";
d[parseInt(pos, 10)].className = "active-tab";
}
}
function showTabs(json) {
var total = parseInt(json.feed.openSearch$totalResults.$t,10),
c = tabbedTOC_defaults,
entry = json.feed.entry,
category = json.feed.category,
skeleton = "",
newPosts = [];
for (var g = 0; g < (c.showNew === true ? 5 : c.showNew); g++) {
if (g == entry.length) break;
entry[g].title.$t = entry[g].title.$t + (c.showNew !== false ? c.newText : '');
}
entry = c.sortAlphabetically ? entry.sort(function(a,b) {
return (a.title.$t.localeCompare(b.title.$t));
}) : entry;
category = c.sortAlphabetically ? category.sort(function(a,b) {
return (a.term.localeCompare(b.term));
}) : category;
// Build the tabs skeleton
skeleton = '<span class="divider-layer"></span><ul class="toc-tabs">';
for (var h = 0, cen = category.length; h < cen; h++) {
skeleton += '<li class="toc-tab-item-' + h + '"><a href="javascript:clickTab(' + h + ');">' + category[h].term + '</a></li>';
}
skeleton += '</ul>';
// Bulid the tabs contents skeleton
skeleton += '<div class="toc-content">';
for (var i = 0, cnt = category.length; i < cnt; i++) {
skeleton += '<ol class="panel" data-category="' + category[i].term + '"';
skeleton += (i != (c.activeTab-1)) ? ' style="display:none;"' : '';
skeleton += '>';
for (var j = 0; j < total; j++) {
if (j == entry.length) break;
var link, entries = entry[j],
pub = entries.published.$t, // Get the post date
month = c.monthNames, // Month array from the configuration
title = entries.title.$t, // Get the post title
summary = ("summary" in entries && c.showSummaries === true) ? entries.summary.$t.replace(/<(.*?)>/g,"").substring(0,c.numChars) + '&hellip;' : '', // Get the post summary
img = ("media$thumbnail" in entries && c.showThumbnails === true) ? '<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="" src="' + entries.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/") + '"/>' : '<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="" src="' + c.noThumb.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/") + '"/>', // Get the post thumbnail
cat = (entries.category) ? entries.category : [], // Post categories
date = (c.showDates) ? '<time datetime="' + pub + '" title="' + pub + '">' + pub.substring(8,10) + ' ' + month[parseInt(pub.substring(5,7),10)-1] + ' ' + pub.substring(0,4) + '</time>' : ''; // Formated published date
for (var k = 0; k < entries.link.length; k++) {
if (entries.link[k].rel == 'alternate') {
link = entries.link[k].href; // Get the post URL
break;
}
}
for (var l = 0, check = cat.length; l < check; l++) {
var target = (c.newTabLink) ? ' target="_blank"' : ''; // Open link in new window?
// Write the list skeleton only if at least one of the post...
// ... has the same category term with one of the current categories term list
if (cat[l].term == category[i].term) {
skeleton += '<li title="' + cat[l].term + '"';
skeleton += (c.showSummaries) ? ' class="bold"' : '';
skeleton += '><a href="' + link + '"' + target + '>' + title + date + '</a>';
skeleton += (c.showSummaries) ? '<span class="summary">' + img + summary + '<span style="display:block;clear:both;"></span></span>' : '';
skeleton += '</li>';
}
}
}
skeleton += '</ol>';
}
skeleton += '</div>';
skeleton += '<div style="clear:both;"></div>';
document.getElementById(c.containerId).innerHTML = skeleton;
clickTab(c.activeTab-1);
}
(function() {
var h = document.getElementsByTagName('head')[0],
s = document.createElement('script');
s.type = 'text/javascript';
s.src = tabbedTOC_defaults.blogUrl + '/feeds/posts/summary?alt=json-in-script&max-results=' + tabbedTOC_defaults.maxResults + '&orderby=published&callback=showTabs';
if (tabbedTOC_defaults.preload !== "onload") {
setTimeout(function() {
h.appendChild(s);
}, tabbedTOC_defaults.preload);
} else {
window.onload = function() {
h.appendChild(s);
};
}
})();

Nhận xét:
Nếu không thích gán link *.js, *.css gián tiếp thì bạn nhúng trực tiếp vào trang, có thể trông dài dòng nhưng lại nhanh hơn.
Copy nội dung *.css bỏ vào trong đoạn <style type="css"> ...</style>
Copy nội dung *.js bỏ vào trong đoạn <script type="javascript"> ...</script>
Nhược điểm của bài này là không thấy có sự phân trang, nếu label quá nhiều bài.

Thanks: dte.web.id!
Author Image

About Nguyen Khoa
Soratemplates is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of templatesyard is to provide the best quality blogger templates.

Related Posts:
By at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)