Blogger Etiketlerenizi Şekillendirin

Blogger Etiketlerenizi Otomatik Olarak Şekillendirin

Demosu  İçin

https://codepen.io/bloggeriz/pen/GavjYK

 

<style>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

#wrapper1 {
  padding:5%;
  margin:0 auto;
  max-width:600px;
}

.bsd-sitemap {
    background-color: #222;
    color: #ddd;
    font-family: Verdana,Geneva,Tahoma,Arial,Sans-serif;
    font-size: 14px;
    font-weight: 410;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 9px rgba(0,0,0,.1);
}

.bsd-sitemap .toc-header {
    color: #fff;
    font-family: inherit;
    font-weight: 410;
    font-size: 14px;
    background-color: #333;
    margin: 0;
    padding: 13px;
    overflow: hidden;
    cursor: pointer;
    border-top: 1px solid #444;
    border-bottom: 1px solid #222;
    transition: initial;
}

.bsd-sitemap .toc-header:hover {
    background-color: #3a3a3a;
}

.bsd-sitemap .toc-header:before {
    content: '';
    width: 0;
    height: 0;
    position: relative;
    float:right;
    top: 10px;
    right: 10px;
    border: 5px solid transparent;
    border-color: #aaa transparent transparent;
    transition: all .3s ease;
}

.bsd-sitemap .toc-header.active {
    background: #3a3a3a;
    color: #fff;
}

.bsd-sitemap .toc-header.active:before {
    border-color: #fff transparent transparent;
    top: 5px;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.bsd-sitemap .loading {
    display: block;
    padding: 14px;
    text-decoration: blink;
}

.bsd-sitemap ol {
    margin: 0;
    padding: 0;
    list-style: none;
    transition: initial;
}

.bsd-sitemap li {
    line-height: normal!important;
    margin: 0!important;
    padding: 7px 7px 7px 16px!important;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    background: #222!important;
    transition: initial;
}

.bsd-sitemap a {
    color: #aaa;
    text-decoration: none;
    font-size: 87%;
    transition: initial;
}

.bsd-sitemap a:visited {
    color: #666;
    transition: initial;
}

.bsd-sitemap a:hover,.bsd-sitemap a:visited:hover {
    color: #fff;
    text-decoration: none;
    transition: initial;
}

.post ol li:before {
    display: none;
}
</style>

Htlm Kodları

<div id='wrapper1'>
<div dir="ltr" style="text-align:left;" trbidi="on">
<div class="bsd-sitemap" id="bsd-sitemap">
<span class="loading">Loading Content..</span></div>
</div>
<div>

Java Kodları

<script>
//<![CDATA[
var toc_config = {
        url:'https://bloggeriz.blogspot.com',
        containerId: 'bsd-sitemap',
        showNew: 15,
        newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#FF0000;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:2px;">New!</strong>',
        sortAlphabetically: {
                thePanel: true,
                theList: true
        },
        maxResults: 9999,
        activePanel: 1,
        slideSpeed: {
                down: 400,
                up: 400
        },
        slideEasing: {
                down: null,
                up: null
        },
        slideCallback: {
                down: function() {},
                up: function() {}
        },
        clickCallback: function() {},
        jsonCallback: '_toc',
        delayLoading: 0
};
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<h3 class="toc-header">'+n[g]+"</h3>",l+='<div class="toc-content"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href="'+c+'">'+o.replace(/ \%new\%$/,"")+"</a>"+(o.match(/\%new\%/)?" "+toc_config.newText:"")+"</li>")}l+="</ol></div>"}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .toc-content").hide(),$("#"+toc_config.containerId+" .toc-header").click(function(){$(this).hasClass("active")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .toc-header").removeClass("active").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src=toc_config.url.replace(/\/$/,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+toc_config.maxResults+"&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);

//]]>
</script>

Direk Gadget Ekle Kısmındanda Yapabilirsiniz.. Yada Demosunu İnceleyin derim.