Blogger Etiket Bazlı Site Haritası Arşiv Sayfası

Blogunuzda veya sitenizde etiketlere göre kategorilenmiş ve alfabetik dizilmiş , duyarlı yapıda çok işlevsel bir arşiv eklentisidir.



<style scoped="" type="text/css">
#head-tab{background:#51a8e9;padding:15px 20px;margin:0;color:#fff;font-size:16px;text-align:center;font-weight:700;letter-spacing:.5px;}
#tabbed-toc{margin:0 auto;background-color:#222;overflow:hidden;position:relative;color:#fff;border-left:5px solid #51a8e9}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0;padding:0;list-style:none}
#tabbed-toc .toc-tabs{width:30%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;color:#fafafa;text-decoration:none;padding:8px 12px;cursor:pointer}
#tabbed-toc .toc-tabs li a:hover{background-color:#333;color:#fff}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#333;color:#fff;position:relative;z-index:5;}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:70%;float:right;background-color:#fafafa;border:1px solid #fafafa}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:14px;color:#7f8c8d;line-height:20px;height:30px;padding:6px 12px;text-decoration:none;outline:0;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:1px solid #2c3e50;overflow:hidden}
#tabbed-toc .panel li:nth-child(even){background-color:#fafafa}
#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:#fafafa;color:#e06666;outline:0}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#36424a}
.post ol li:before{display:none}
@media(max-width:700px){
#tabbed-toc{border:1px solid #ccc}
#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:#777}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#51a8e9;color:#fafafa}
#tabbed-toc .toc-content{border:0}#tabbed-toc .panel li a{font-size:12px;line-height:20px;height:20px;padding:0 12px}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
</style>
<div id="head-tab">
Site Haritası</div>
<div id="tabbed-toc">
</div>
<script>
var tabbedTOC = {
    blogUrl: "http://www.webkenti.net/", // 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
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "Yeni!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " <em style='color:#F2784B;'>Yeni</em>" // HTML for the "Yeni!" text
};
</script>
<script async="async" >
  var tabbedTOC_defaults = {
 blogUrl: "http://www.webkenti.net/", // 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: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // 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(/<br ?\/?>/g," ").replace(/<.*?>/g,"").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);
  };
 }
})();</script>


blogUrl: "http://webkenti.net", : Kendi blog adresinizi yazınız.

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

0 yorum: