Blogger Site Haritası Oluşturma Eklentisi

Mayıs 07, 2020
Görüntüleme

( Kelime)


Bu yazımızda sizlere Blog Sayfanızda Sabit Sayfa nasıl oluşturulur, Sabit sayfaya Site Haritası nasıl eklenir biraz bundan bahsedeceğim. Öncelikle Site Haritası (Sitemap) Nedir? Ne İşe Yarar? bunu öğrenelim.

Site Haritası (Sitemap) Nedir?

Site Haritası, bir diğer deyişle arama motoru botlarına web sitenizin taranmasını ve dizine eklemesini mutlaka istediğiniz sayfaların yer aldığı yapılandırılmış bir listeden ibarettir. Site Haritaları, sitenizde başka türlü bulamayacağımız sayfaları Google'a bildirmenin bir yoludur.

Site Haritası (Sitemap) Ne İşe Yarar?

Sitemap ile içeriğinizi arama motorlarına daha hızlı tanıtabilirsiniz ve daha hızlı indexlenmesine yardımcı olabilirsiniz. Yani hem sizin hem Google’ın işini kolaylaştırmış olursunuz.

Bir diğer faydası arama motoru botlarının web sitenizin yapısını anlamasına, hangi sayfaların taranacağını, göreceli önemini ve en son ne zaman güncellendiğini bilmelerine yardımcı olmak için yararlı bir yol olmasıdır.

EKLEYECEĞİMİZ SİTE HARİTASI ÖZELLİKLERİ

Kategori Özellikleri
  • Sıra - Yayınlarınızın sırasını gösterir.
  • Başlık - Yayınlarınıza vermiş olduğunuz başlıkları gösterir.
  • Yayın Tarihi - Yayınlarınızın hangi tarihte paylaşıldığını gösterir.
  • Etiketler - Yayın içerisine eklediğiniz etiketleri gösterir.
İçerik Özellikleri
  • Site Haritasını ilk açtığınızda 10 adet yayın gözükür.
  • Listenin sol alt kısmında Daha Fazla butonu mevcuttur her tıklamada 10 adet daha yayın göstermesini sağlar.
  • Daha Fazla butonu sonsuz yükleme özelliğine sahiptir.
  • Site Haritası en son yayından başlayarak ilk yayına doğru sıralanır.
  • Etiket ve Başlıklarda bağlantı linki mevcuttur.
  • Başlıklardaki bağlantı linkine tıkladığınızda ilgili yayına götürür.
  • Herhangi bir etikete tıkladığınızda tıklamış olduğunuz etiket ile ilgili bütün yayınları sayfaya yazdırır.

Blogger Sabit Sayfa Nasıl Oluşturulur?

Bloggerda sabit sayfa oluşturmak için öncelikle Blogger'a giriş yapın. İşlem yapmak istediğiniz Blog Sayfanızı seçin ve ardından Sayfalar > Yeni Sayfa adımlarını takip edin. Açtığınız sayfaya bir sayfa başlığı adı verin.

NOT: Vermiş olduğunuz sayfa başlığı adında Türkçe karakterler kullanmamaya ve sayfa adının uzun olmamasına özen gösterin. Örneğin; "site-haritasi"gibi.

Türkçe Karakter Kullanırsam Ne Olur?

Örneğin; "Açılıp Kapanan Sosyal Paylaşım Butonları Eklentisi" adında bir sayfa oluşturduğunuzda Türkçe karakter kullanırsanız sayfa linkinizde eksik karakterler olacaktır. 

Aşağıdaki Örneği inceleyebilirsiniz.
https://bloggelistiricim.com/acilip-kapanan-sosyal-paylasim-butonlari-eklentisi.html
https://bloggelistiricim.com/aclp-kapanan-sosyal-paylasm-butonlar-eklents.html

Blogger Sabit Sayfaya Site Haritası Nasıl Eklenir?

Sayfa adını belirledikten sonra sol üst kısımda HTML butonuna tıklayın ve aşağıdaki HTML Kodunu sayfanın içerisine ekleyin. Kodu ekledikten sonra sağ üst kısımda yer alan butonuna basın.

HTML Kodu
<p>Açıklama</p>
<div class='page-sitemap'></div>

Şimdi ise Blogger yönetim panelinde Tema > HTML'yi Düzenle ye tıklayarak Kod Editörünü açın. Açılan ekranda CTRL + F tuş kombinasyonu ile </head> tagını aratın. Bulduğunuz </head> tagının bir satır üzerine aşağıda vermiş olduğum CSS Kodunu ekleyin.

CSS Kodu
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
.page-sitemap {
    text-align: left;
}

thead {
    background: #f8695f;
    color: #fff
}

table {
    width: 100%
}

thead td {
    padding: 10px;
    border: none;
    margin: 0
}
</style>
</b:if>

Css Kodunu ekledikten sonra tekrar Kod Editöründe CTRL + F tuş kombinasyonu ile </body> tagını aratın. Bulduğunuz </body> tagının bir satır üzerine aşağıdaki JavaScript Kodunu ekleyin.

JavaScript Kodu
<b: if cond = 'data:blog.pageType == &quot;static_page&quot;' >
<script type = 'text/javascript'>
//<![CDATA[
function auh(a) {
    for (var e = 0; e < a.length; e++) var t = "<span class='author-name'> " + a[e].name.$t + "</span>";
    return t
}
function ttt(a) {
    var e = new Array;
    e[1] = "Ocak", e[2] = "Şubat", e[3] = "Mart", e[4] = "Nisan", e[5] = "Mayıs", e[6] = "Haziran", e[7] = "Temmuz", e[8] = "Ağustos", e[9] = "Eylül", e[10] = "Ekim", e[11] = "Kasım", e[12] = "Aralık";
    var t = a.substring(0, 4),
        s = a.substring(5, 7),
        l = a.substring(8, 10),
        n = "<span class='recent-date'>" + l + "  " + e[parseInt(s, 10)] + "  " + t + "</span> ";
    return n
}
$(function() {
    var c = $('.page-sitemap'),
        counter = 1;
    var r = '/feeds/posts/summary?max-results=0&alt=json-in-script';

    function getLabels(e) {
        if (e.category === undefined) {
            return "<span>Etiket Yok</span>"
        } else {
            var labels = '<a href="/search/label/' + e.category[0].term + '">' + e.category[0].term + '</a>';
            return labels
        }
    }
    function getSitemap() {
        var s = '/feeds/posts/summary?max-results=10&alt=json-in-script&start-index=' + counter;
        $.ajax({
            type: "GET",
            url: s,
            async: true,
            contentType: "application/json",
            dataType: "jsonp",
            success: function(e) {
                var t = e.feed.entry,
                    more = t.length < 10 ? false : true;
                for (var s = 0; s < t.length; s++) {
                    for (var l, n = t[s], i = 0; i < n.link.length; i++)
                        if ("alternate" == n.link[i].rel) {
                            var r = n.link[i].href;
                            break
                        }
                    if (!more) {
                        c.find('tfoot').hide()
                    }
                    var title = '<a href="' + r + '">' + n.title.$t + '</a>',
                        date = ttt(n.published.$t),
                        labels = getLabels(n),
                        cc = counter + s;
                    c.find('tbody').append('<tr><td>' + cc + '</td><td>' + title + '</td><td>' + date + '</td><td>' + labels + '</td></tr>')
                }
                counter += 10
            }
        })
    }
    $.ajax({
        type: "GET",
        url: r,
        async: true,
        contentType: "application/json",
        dataType: "jsonp",
        success: function(e) {
            var content = "<h3>Toplam Yayın Sayısı: " + e.feed.openSearch$totalResults.$t + "</h3>";
            c.append(content);
            var more = parseInt(e.feed.openSearch$totalResults.$t) < 10 ? false : true;
            if (e.feed.openSearch$totalResults.$t > 0) {
                c.append("<table><thead><tr><td>Sıra</td><td>Başlık</td><td>Yayın Tarihi</td><td>Etiketler</td></tr></thead><tbody></tbody></table>");
                if (more) {
                    c.find('table').append('<tfoot><tr><td><button class="loading-more"><i class="fas fa-chevron-down"></i></button></td></tr></tfoot>')
                }
                getSitemap()
            } else {
                c.append("<h4>Başka yayın yok</h4>")
            }
            c.find('.loading-more').click(getSitemap)
        }
    })
});
//]]>
</script> 
</b:if>

NOT: Yukarıdaki JavaScript kodunda belirtilen yerdeki rakamları kendi tercihinize göre değiştirerek sayfada görünen makale sayısını azaltabilir veya artırabilirsiniz.

Yukarıdaki adımları tamamladıktan Temayı Kaydet butonuna tıklayın.

Blogger Site Haritası Oluşturma Eklentisi ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.
Bu makale faydalı mı?

KATEGORİ İÇERİKLERİ


SONRAKİ YAYIN
ÖNCEKİ YAYIN
YORUMLARDA KOD KULLANMA
  • 1- Yorumlarda kalın karakter kullanmak için <code><strong>...</strong></code> veya <code><b>...</b></code>.
  • 2- Yorumlarda italik karakter kullanmak için <code><em>...</em></code> veya <code><i>...</i></code>.
  • 3- Yorumlarda altı çizili karakter kullanmak için <code><u>...</u></code>.
  • 4- Yorumlarda üzeri çizili karakter kullanmak için <code><strike>...</strike></code>.
  • 5- Yorumlarda HTML kod kullanmak için <code><code>...</code></code> veya <code><pre>...</pre></code> veya <code><pre><code>...</code></pre></code>, yorumlarda kod kullanmak için aşağıdaki kod dönüştürücü programını kullanın.

Blogger
Disqus
Yorum Ekle

Hiç yorum yok

Blogger Site Haritası Oluşturma Eklentisi; Hakkında görüşlerinizi bizimle paylaşın. Teşekkürler.