Blogger açılıp kapanan sitemap

Blogger açılıp kapanan hover efektli sitemap elentisi.

• Site tasarımına uyarlanabilir.
• Açılır listeli böylece karışıklık ortadan kalkar.
• Hover efekti ile estetik ve şık görünüm.
• Yeni yazıları belirtmek için (Yeni) etiketi özelliği.

Html kodları içindeki mandoradio yazan yeri kendi blog adınız ile değiştirin.

Daha sonra blog sayfalar kısmına gidip yeni sayfa oluşturup tüm kodları içine yapıştırın ve kayıt edin. Renkleri css kodları ile oynayarak kendi blogunuza göre uyarlayabilirsiniz

Kodlar: Developer Aman Bhattarai Ön izleme

CSS + HTML + JavaScript Kodları

<div dir="ltr" style="text-align: left;" trbidi="on">
    <style type="text/css"> 
    .tb-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); } 
    .tb-sitemap .toc-header { color: #fff; font-family: inherit; font-weight: 410; font-size: 14px; background-color: #00b994; margin: 0; padding: 13px; overflow: hidden; cursor: pointer; border-top: 1px solid #5c5c5c; border-bottom: 1px solid #5c5c5c; transition: initial; } 
    .tb-sitemap .toc-header:hover { background: rgb(0,52,52); background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(3,106,30,1) 38%, rgba(0,182,182,1) 100%); } 
    .tb-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; } .tb-sitemap .toc-header.active { background: #029174; color: #fff; } 
    .tb-sitemap .toc-header.active:before { border-color: #fff transparent transparent; top: 5px; -webkit-transform: rotateundefined-180deg); -moz-transform: rotateundefined-180deg); -ms-transform: rotateundefined-180deg); -o-transform: rotateundefined-180deg); transform: rotateundefined-180deg); } 
    .tb-sitemap .loading { display: block; padding: 14px; text-decoration: blink; } 
    .tb-sitemap ol { margin: 0; padding: 0; list-style: none; transition: initial; } 
    .tb-sitemap li { counter-increment: step-counter; line-height: normal!important; margin: 0!important; padding: 7px 7px 7px 16px!important; white-space: nowrap; text-align: left; overflow: hidden; transition: initial; } 
    .tb-sitemap li:first-child { background: rgb(0,52,52); background: linear-gradient(90deg, rgb(0 185 148) 19%, rgb(2 145 116) 38%, rgb(14 189 153) 100%);} 
    .tb-sitemap li:nth-child(2n) { background: rgb(71,62,62); background: linear-gradient(90deg, rgb(2 145 116) 19%, rgb(0 185 148) 38%, rgb(12 84 84) 100%);} 
    .tb-sitemap li:nth-child(2n+3) { background: rgb(0,52,52); background: linear-gradient(90deg, rgb(0 185 148) 19%, rgb(2 145 116) 38%, rgb(14 188 152) 100%);} 
    .tb-sitemap li::before { content: counter(step-counter)'.'; margin-right: 5px; } 
    .tb-sitemap a { color: #fff!important; text-decoration: none; font-size: 90%; transition: initial; font-weight:normal!important; } 
    .tb-sitemap a:visited { color: #fff!important; transition: initial; } 
    .tb-sitemap a:hover,.tb-sitemap a:visited:hover { color: #fff!important; text-decoration: underline!important; transition: initial; } 
    </style>
    <div class="tb-sitemap" id="tb-sitemap">
        <span class="loading">Sitemap Loading..</span>
        <script type="text/javascript"> var toc_config = { url: 'https://mandoradio.blogspot.com', containerId: 'tb-sitemap', showNew: 12, newText: ' <strong style="font-weight:normal;font-style:normal;color:#000;font-size:11px;background:#fff000;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">New!</strong>', sortAlphabetically: { thePanel: true, theList: true }, maxResults: 9999, slideSpeed: { down: 400, up: 400 }, slideEasing: { down: null, up: null }, slideCallback: { down: function() {}, up: function() {} }, clickCallback: function() {}, jsonCallback: '_toc', delayLoading: 0 }; </script>
        <script src="https://amanbhattarai4400.github.io/twistblogg/sitemap.js" type="text/javascript">
         </script>
    </div>
</div>

Daha basit sitemap