Blogger için Şık Site Haritası Eklentisi

Site haritası , web sitelerinin hem arama motorlarına hem de kullanıcıların sitede kolayca gezinmesine yardımcı olmak için konulara, yayımlanma tarihine veya etiketlere göre düzenlenmiş içeriğini içeren bir dizindir. İçeriğinizin hızlı bir şekilde endekslenmesine yardımcı olur ve tarama hızını arttırır . İki tür site haritası vardır: XML Site Haritası ve HTML Site Haritası. Bu yazımda öncelikle bu site haritalarını açıklayacağım ve ikincisi blogcuya güzel HTML Site Haritası sayfası eklemek için kodu paylaşacağım.

HTML Site Haritası Sayfası Blogcuya Nasıl Eklenir?

Öncelikle, blogcu panosundan bir site haritası sayfası oluşturacağız ve sonra kodları ekleyeceğiz.

Site sayfası oluşturmak için editör sayfamızda Sol tarafta bulunan "Sayfalar" sekmesine tıklayalım ve Yeni Sayfa'ya tıklayalım Yeni Sayfanın da HTML bölümüne geçelim.

HTML bölümüne aşağıda vermiş olduğum tüm koldarı koplayarak yapıştırın ve kodların içerisinde bulunan URL kısmına kendi blog adresinizi yazın.

<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: #1A1B1E;
    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: #1a1b1e;
    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, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 100%);}
.tb-sitemap li:nth-child(2n) {
    background: rgb(71,62,62);
    background: linear-gradient(90deg, rgba(71,62,62,1) 19%, rgba(0,0,0,1) 38%, rgba(0,52,52,1) 100%);}
.tb-sitemap li:nth-child(2n+3) {
    background: rgb(0,52,52);
    background: linear-gradient(90deg, rgba(0,52,52,1) 19%, rgba(0,0,0,1) 38%, rgba(71,62,62,1) 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: 'Kendi Blog Adresinizi Yazın',
 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>

Bütün işlemler bu kadar herkese kolay gelsin.

Demo Buraya Tıkla