Blogger Etiket Duyarlı Akordeon Site Haritası Oluşturma

Bu kez tüm blogculara heyecan verici bir blogger widget'i olan etiket duyarlı akordeon site haritasını / sitemap ile blog içerik etiketlerini sıralayarak liste tarzında oluşturulmasını paylaşıyoruz.

Widget içerik site haritası, blogunuzda paylaşmış olduğunuz içeriklerin etiketlerine göre kategoriye ayrılmış şekilde ve alfabetik sıralamaya göre yukardan aşağıya sıralanmaktadır. Bu sıralama liste görünümünde olup her etiket grubu içerisinde blog yayınlarının başlıkları görünmektedir. Yine etiket grupları içerisinde de alfabetik sıralamaya uygun olarak sıralanmaktadır. Her etiket grubunun üzerine imleç ile tıklandığında etiket grubu açılmakta ve blog yayın başlıkları görünmektedir.

Kusursuz bir tasarıma sahip olan blogger akordeon site haritası tüm etiketleri otomatik olarak sıralayan işlevsel bir blogger widget'idir.

Blog Akordeon Site Haritasını Bloga Uygulama

1. Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Sayfalar sekmesine tıklayın. Açılan sayfanın HTML kısmına aşağıdaki CSS, HTML ve javaScript kodlarını kopyalayın ve sayfaya ekleyin.

Sitemap 1

<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-ve-arsiv{background-color:#fff;color:#333;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:3px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-ve-arsiv .toc-header{color:#333;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ddd;transition:initial}
.table-ve-arsiv .toc-header:hover{background-color:#fdfdfd}
.table-ve-arsiv .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;}
.table-ve-arsiv .toc-header.active{color:#fc4f3f}
.table-ve-arsiv .toc-header.active:before{border-color:#555 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-ve-arsiv .loading{display:block;padding:15px;text-decoration:blink}
.table-ve-arsiv ol{margin:0;padding:0;list-style:none;transition:initial}
.table-ve-arsiv li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#424159!important;transition:initial}
.table-ve-arsiv a{color:#d9d9d9;text-decoration:none;font-size:85%;transition:initial}
.table-ve-arsiv a:visited{color:#a2a2a9;transition:initial}
.table-ve-arsiv a:hover,.table-ve-arsiv a:visited:hover{color:#fec62d;text-decoration:none;transition:initial}
.post ol li:before{display:none}
.table-of-content .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;}
</style>
<div class="table-ve-arsiv" id="table-ve-arsiv">
<span class="loading">Yükleniyor...</span></div>
<script>
var toc_config = {
    url: 'https://teknoowin.blogspot.com.tr/',
    containerId: 'table-ve-arsiv',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#565474;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">Yeni</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
};
</script>
<script src="https://cdn.rawgit.com/jquerycods/007/master/php.js"></script>
</div>

Demo/ÖnİZLEME

Sitemap 2

<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-ve-arsiv{background-color:#333;color:#ddd;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1)}
.table-ve-arsiv .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#444;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #555;border-bottom:1px solid #222;transition:initial}
.table-ve-arsiv .toc-header:hover{background-color:#333}
.table-ve-arsiv .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;}
.table-ve-arsiv .toc-header.active{background:#333;color:#fff}
.table-ve-arsiv .toc-header.active:before{border-color:#fff transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-ve-arsiv .loading{display:block;padding:15px;text-decoration:blink}
.table-ve-arsiv ol{margin:0;padding:0;list-style:none;transition:initial}
.table-ve-arsiv li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#333!important;transition:initial}
.table-ve-arsiv a{color:#aaa;text-decoration:none;font-size:85%;transition:initial}
.table-ve-arsiv a:visited{color:#555;transition:initial}
.table-ve-arsiv a:hover,.table-ve-arsiv a:visited:hover{color:#fff;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-ve-arsiv" id="table-ve-arsiv">
<span class="loading">Yükleniyor...</span></div>
<script>
var toc_config = {
    url: 'https://teknoowin.blogspot.com.tr/',
    containerId: 'table-ve-arsiv',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#04a0ef;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">Yeni</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
};
</script>
<script src="https://cdn.rawgit.com/jquerycods/007/master/php.js"></script>
</div>

Demo/ÖnİZLEME

2. Sadece kodları eklemeyle işlem tamamlanmış olmuyor. Eğer blogunuzun gerçekten etkit bir şekilde çalışmasını istiyorsanız ve arama motorları tarafından sayfalarınızın ön sıralara çıkmasını istiyorsanız sayfanız ile ilgili en az 500 karekter olacak şekil uzun bir sayfa açıklama yazısı oluşturun.

3. Sayfanızın adını gelişi güzel Arşiv, Blog Arşivi gibi kısa isimlerden oluşmasına izin vermeyin. Mesela Blogger Eklentileri Site Arşivi yada Haritası şeklinde oluşturmanız, sayfanızın blogunuzun adıyla bir bütün oluşturacak şekilde anlaşılmasını sağlayın.

4. Arama açıklaması da aynı şekilde 160 karekteri geçmemek kaydıyla sayfanızı tam olarak tanımlayabilecek özgün bir açıklama yazmanız arama motorlarınca 100% SEO etkisi görmektedir.
5. Yukarıdaki adımları uyguladıktan sonra sayfanızı yayınlayın.

Blog Akordeon Site Haritası Açıklamaları

Blogger site haritaları arasında en kullanışlı ve en iyi tasarıma sahip akordeon özellikli olması da blogcuların heyecanlanmasına yetiyor.

• Yukarıdaki kodlar içerisinde renkli olarak belirtilen https://teknoowin.blogspot.com.tr/ yere kendi blogunuzun adresini yazın.
• Akordeon blog site haritası blogunuzun daha düzenli görünmesi ve çok fazla yer işgal etmeyen kullanışlı bir blog site haritasıdır.
• Arama motorlarının site veya blogunuzun düzenli olması ve anlaşılır olmasından dolayı daha da önem veremeye başlayacaktır.
• Tüm bu söylediklerimize önemli bir husus daha ekleyelim, akordeon blog site haritası mobil uyumlu olması ziyaretçilerinizin mobil cihazlar üzerinden de rahatça kullanabileceği bir blogger widget site haritasıdır.

TeknoWin olarak ziyaretçilerimize en iyi hizmeti vermek adına, lütfen yorum sistemimizi kullanarak görüşlerinizi belirtiniz. Görüşmek dileğiyle hoşça kalın.