Blogger'da HTML Site Haritası Nasıl Eklenir (4 Yeni Stil)

Yayınlanan: 2024-10-21

Blogger web sitenize bir HTML site haritası sayfası eklemek ister misiniz? Bunu bu makaleyi takip ederek yapabilirsiniz. Burada Blogger için 4 yeni HTML site haritası stilini paylaşacağım.

Ancak bundan önce HTML site haritasının ne olduğunu anlayalım.

HTML site haritası, bir web sitesindeki en önemli sayfalara veya bölümlere, yapılandırılmış bir şekilde düzenlenmiş bağlantıların listesini sağlayan bir web sayfasıdır. Hem ziyaretçilerin hem de arama motorlarının sitedeki içeriği kolayca bulmasına ve gezinmesine yardımcı olur.

HTML Site Haritası Ne Zaman Kullanılmalıdır:

Karmaşık yapıya sahip veya çok sayfalı web siteleri için.
İçerik bulmanın kolay bir yolunu sağlayarak kullanıcı deneyimini geliştirmek istiyorsanız.
SEO amaçları doğrultusunda, arama motorlarının web sitenizde gezinmesine yardımcı olacak ek bir yardım olarak.

Hem HTML hem de XML site haritalarını kullanarak sitenizin kullanıcılar için kullanılabilirliğini artırır ve arama motorları tarafından uygun şekilde dizine eklenmesini sağlarsınız.

Blogger'a HTML site haritası nasıl eklenir?

HTML site haritasını Blogger web sitesine eklemek için Blogger kontrol panelinize giriş yapmanız ve Sayfalar bölümüne gitmeniz gerekir.

Şimdi Yeni bir sayfa oluşturun ve başlık HTML site haritasını ayarlayın veya bunu site haritası olarak tutabilirsiniz.

Artık herhangi bir HTML site haritası stilini kopyalayıp sayfanın HTML bölümüne yapıştırmanız gerekiyor.

Artık Demo URL'sini Web Sitesi URL'nizle değiştirmeniz ve sayfayı yayınlamanız gerekiyor. Artık HTML site haritasını Blogger web sitenize başarıyla eklediniz.

Stil -01 (Düz HTML Site Haritası)

 <ul></ul>

    <script type = "metin/javascript">
        var numposts = 100; // 100'den fazla mesajınız varsa bu değeri değiştirin
        function showrecentposts(json) {
            var site haritası = document.getElementById("site haritası");
            for (var i = 0; i < json.feed.entry.length; i++) {
                var giriş = json.feed.entry[i];
                var posttitle = giriş.başlık.$t;
                var duruş;
                for (var k = 0; k < giriş.bağlantı.uzunluğu; k++) {
                    if (giriş.link[k].rel == 'alternatif') {
                        posturl = giriş.bağlantı[k].href;
                        kırmak;
                    }
                }
                var listItem = document.createElement("li");
                listItem.innerHTML = `<a href="${posturl}">${posttitle</a>`;
                sitemap.appendChild(listItem);
            }
        }

        var script = document.createElement("script");
        script.src = " https://örnek.com /feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
        document.body.appendChild(script);
    </script>
<stil>
 #site haritası {
            liste stili türü: yok;
            dolgu: 0;
            kenar boşluğu: 0;
            kenar boşluğu: otomatik;
            arka plan rengi: #f8f9fa;
            kenarlık yarıçapı: 5px;
            kutu gölgesi: 0 2px 5px rgba(0, 0, 0, 0.1);
            minimum yükseklik: 800 piksel; 
            geçiş: tümü 0,3 saniyelik kolaylık; 
        }

        #site haritası li {
            dolgu: 8 piksel 15 piksel;
            kenarlık alt: 1 piksel katı #e0e0e0;
            geçiş: arka plan 0,2 saniye, dönüşüm 0,2 saniye;
            geçiş: arka plan 0,2 sn;
            kenarlık-sol: 4 piksel düz siyah;
          kenar boşluğu alt: 4 piksel;
        }
   #site haritası: üzerine gelin{
     sol kenarlık: 4 piksel kesintisiz Mavi; dönüşüm: TranslateY(-2px);}

        #site haritası li:son-çocuk {
            kenarlık alt: yok;
        }

        #site haritası a {
            metin dekorasyonu: yok;
            renk: Siyah;
            yazı tipi boyutu: 19 piksel;
            ekran: blok;
          geçiş: renkli 0,2s;
        }

        #site haritası a: üzerine gelin {
            renk: mavi;
        }
    </style>

Stil -02 (Etiketli HTML Site Haritası)

 <ul></ul>

<script type = "metin/javascript">
    var numposts = 100; // 100'den fazla mesajınız varsa bu değeri değiştirin
    function showrecentposts(json) {
        var site haritası = document.getElementById("site haritası");
        for (var i = 0; i < json.feed.entry.length; i++) {
            var giriş = json.feed.entry[i];
            var posttitle = giriş.başlık.$t;
            var duruş;
            
            // Etiketleri çıkarın (varsa) ve bağlantılar oluşturun
            var postlabels = '';
            if (giriş.kategori) {
                postlabels = entry.category.map(cat => {
                    var etiketi = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label</a>`;
                }).katılmak(' ');
            } başka {
                postlabels = '<span class="no-label">Etiket Yok</span>';
            }

            for (var k = 0; k < giriş.bağlantı.uzunluğu; k++) {
                if (giriş.link[k].rel == 'alternatif') {
                    posturl = giriş.bağlantı[k].href;
                    kırmak;
                }
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class = "post-item">
                    <a href="${posturl}" class="post-title">${posttitle</a>
                    <div class="post-labels">${postlabels</div>
                </div>`;
            sitemap.appendChild(listItem);
        }
    }

    var script = document.createElement("script");
    script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
    document.body.appendChild(script);
</script>

<stil>
    #site haritası {
        liste stili türü: yok;
        dolgu: 0;
        kenar boşluğu: 0;
        kenar boşluğu: otomatik;
        arka plan rengi: #f8f9fa;
        kenarlık yarıçapı: 5px;
        kutu gölgesi: 0 2px 5px rgba(0, 0, 0, 0.1);
        minimum yükseklik: 800 piksel;
        geçiş: tümü 0,3 saniyelik kolaylık;
    }

    #site haritası li {
        dolgu: 8 piksel 15 piksel;
        kenarlık alt: 1 piksel katı #e0e0e0;
        geçiş: arka plan 0,2 saniye, dönüşüm 0,2 saniye;
        sol kenarlık: 4 piksel düz siyah;
        kenar boşluğu alt: 4 piksel;
    }

    #site haritası li:hover {
        kenarlık-sol: 4 piksel kesintisiz Mavi;
        dönüşüm: TranslateY(-2px);
    }

    #site haritası li:son-çocuk {
        kenarlık alt: yok;
    }

    .post-item {
        ekran: esnek;
        içeriği haklı göster: aradaki boşluk;
        hizalama öğeleri: merkez;
    }

    .post-title {
        metin dekorasyonu: yok;
        renk: Siyah;
        yazı tipi boyutu: 19 piksel;
        ekran: blok;
        geçiş: renkli 0,2s;
    }

    .post-title:hover {
        renk: mavi;
    }

    .post-etiketler {
        ekran: esnek;
        boşluk: 5 piksel;
    }

    .label-button {
    arka plan rengi: #48525c;
    renk: #ffffff;
    dolgu: 0 piksel 20 piksel;
    kenarlık yarıçapı: 5 piksel;
    metin dekorasyonu: yok;
    yazı tipi boyutu: 14 piksel;
    satır yüksekliği: 25 piksel;
    geçiş: arka plan rengi 0,2 sn kolaylık;
}

    .label-button:hover {
        arka plan rengi: #0056b3;
    }

    .no-etiket {
        renk: #555;
        yazı tipi boyutu: 14 piksel;
    }

    /* Duyarlı */
    @media (maks. genişlik: 768 piksel) {
        .post-item {
            esnek yön: sütun;
            hizalama öğeleri: esnek başlangıç;
        }

        .post-etiketler {
            üst kenar boşluğu: 5 piksel;
        }
    }
</style>

Stil -03 (HTML Site Haritası ile Açılır filtrelerle)

HTML Site Haritası With With Açılır filtreler

 <div class="filtre-konteyner">
    <label for="labelFilter">Etikete Göre Filtrele: </label>
    <select onchange='filterByLabel()'>
        <option value="all">Tümü</option>
    </select>
</div>

<ul></ul>

<script type = "metin/javascript">
    var allPosts = []; // Tüm gönderileri burada sakla
    var benzersiz Etiketler = new Set(); // Benzersiz etiketleri saklamak için

    // Son gönderileri getir ve göster
    function showrecentposts(json) {
        var site haritası = document.getElementById("site haritası");
        allPosts = json.feed.entry; // Filtreleme için tüm gönderileri sakla

        // Filtre için benzersiz etiketler oluştur
        allPosts.forEach(function(giriş) {
            if (giriş.kategori) {
                entry.category.forEach(function(cat) {
                    benzersizLabels.add(cat.term);
                });
            }
        });

        // Filtre açılır menüsünü etiketlerle doldurun
        var labelFilter = document.getElementById("labelFilter");
        benzersizLabels.forEach(işlev(etiket) {
            var seçenek = document.createElement("seçenek");
            seçenek.değer = etiket;
            seçenek.textContent = etiket;
            labelFilter.appendChild(seçenek);
        });

        displayPosts(allPosts); // Başlangıçta tüm gönderileri göster
    }

    // Filtrelenmiş gönderileri görüntüleme fonksiyonu
    function displayPosts(posts) {
        var site haritası = document.getElementById("site haritası");
        sitemap.innerHTML = ''; // Mevcut gönderileri temizle

        posts.forEach(function(giriş) {
            var posttitle = giriş.başlık.$t;
            var duruş;
            var postlabels = '';

            if (giriş.kategori) {
                postlabels = entry.category.map(cat => {
                    var etiketi = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label</a>`;
                }).katılmak(' ');
            } başka {
                postlabels = '<span class="no-label">Etiket Yok</span>';
            }

            for (var k = 0; k < giriş.bağlantı.uzunluğu; k++) {
                if (giriş.link[k].rel == 'alternatif') {
                    posturl = giriş.bağlantı[k].href;
                    kırmak;
                }
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class = "post-item">
                    <a href="${posturl}" class="post-title">${posttitle</a>
                    <div class="post-labels">${postlabels</div>
                </div>`;
            sitemap.appendChild(listItem);
        });
    }

    // Gönderileri seçilen etikete göre filtreleme işlevi
    function filterByLabel() {
        var seçiliLabel = document.getElementById("labelFilter").value;

        if (selectedLabel === "tümü") {
            displayPosts(allPosts); // "Tümü" seçilirse tüm gönderileri göster
        } başka {
            var filteredPosts = allPosts.filter(function(giriş) {
                return entry.category && entry.category.some(cat => cat.term === seçilmişLabel);
            });
            displayPosts(filteredPosts); // Yalnızca filtrelenen gönderileri göster
        }
    }

    // Son gönderileri komut dosyasıyla yükle
    var script = document.createElement("script");
    script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
    document.body.appendChild(script);
</script>

<stil>
    /* Filtre açılır menüsü için stil oluşturma */
    .filter-konteyner {
        kenar boşluğu: 20 piksel 0;
        metin hizalama: ortala;
    }

    #etiketFiltre {
        dolgu: 5 piksel 10 piksel;
        yazı tipi boyutu: 16 piksel;
    }

    /* Site haritası ve gönderi öğesi stilleri */
    #site haritası {
        liste stili türü: yok;
        dolgu: 0;
        kenar boşluğu: 0;
        kenar boşluğu: otomatik;
        arka plan rengi: #f8f9fa;
        kenarlık yarıçapı: 5px;
        kutu gölgesi: 0 2px 5px rgba(0, 0, 0, 0.1);
        minimum yükseklik: 800 piksel;
        geçiş: tümü 0,3 saniyelik kolaylık;
    }

    #site haritası li {
        dolgu: 8 piksel 15 piksel;
        kenarlık alt: 1 piksel katı #e0e0e0;
        geçiş: arka plan 0,2 saniye, dönüşüm 0,2 saniye;
        kenarlık-sol: 4 piksel düz siyah;
        kenar boşluğu alt: 4 piksel;
    }

    #site haritası li:hover {
        kenarlık-sol: 4 piksel kesintisiz Mavi;
        dönüşüm: TranslateY(-2px);
    }

    #site haritası li:son-çocuk {
        kenarlık alt: yok;
    }

    .post-item {
        ekran: esnek;
        yasla-içerik: boşluk-arada;
        hizalama öğeleri: merkez;
    }

    .post-title {
        metin dekorasyonu: yok;
        renk: Siyah;
        yazı tipi boyutu: 19 piksel;
        ekran: blok;
        geçiş: renkli 0,2s;
    }

    .post-title:hover {
        renk: mavi;
    }

    .post-etiketler {
        ekran: esnek;
        boşluk: 5 piksel;
    }

    .label-düğmesi {
        arka plan rengi: #48525c;
        renk: #ffffff;
        dolgu: 0 piksel 20 piksel;
        kenarlık yarıçapı: 5 piksel;
        metin dekorasyonu: yok;
        yazı tipi boyutu: 14 piksel;
        satır yüksekliği: 25 piksel;
        geçiş: arka plan rengi 0,2 sn kolaylık;
    }

    .label-button:hover {
        arka plan rengi: #0056b3;
    }

    .no-etiket {
        renk: #555;
        yazı tipi boyutu: 14 piksel;
    }

    /* Duyarlı */
    @media (maks. genişlik: 768 piksel) {
        .post-item {
            esnek yön: sütun;
            hizalama öğeleri: esnek başlangıç;
        }

        .post-etiketler {
            üst kenar boşluğu: 5 piksel;
        }
    }
</style>

Stil -04 (Hap Şekli Filtreli HTML Site Haritası)

 <div class="filtre-konteyner">
    <button class="filter-button">Tümü</button>
    <!--Etiket düğmeleri buraya dinamik olarak eklenecektir-->
</div>

<ul></ul>

<script type = "metin/javascript">
    var allPosts = []; // Tüm gönderileri burada sakla
    var benzersiz Etiketler = new Set(); // Benzersiz etiketleri saklamak için

    function showrecentposts(json) {
        var site haritası = document.getElementById("site haritası");
        allPosts = json.feed.entry; // Filtreleme için tüm gönderileri sakla

        allPosts.forEach(function(giriş) {
            if (giriş.kategori) {
                entry.category.forEach(function(cat) {
                    benzersizLabels.add(cat.term);
                });
            }
        });

        var filterContainer = document.querySelector('.filter-container');
        benzersizLabels.forEach(işlev(etiket) {
            var düğme = document.createElement("düğme");
            Button.className = "filtre düğmesi";
            buton.textContent = etiket;
            butonu.onclick = function() { filterByLabel(label); };
            filterContainer.appendChild(düğme);
        });

        displayPosts(allPosts); // Başlangıçta tüm gönderileri görüntüle
    }

    function displayPosts(posts) {
        var site haritası = document.getElementById("site haritası");
        sitemap.innerHTML = ''; // Site haritası listesini temizle

        posts.forEach(function(giriş) {
            var posttitle = giriş.başlık.$t;
            var duruş;
            var postlabels = '';

            if (giriş.kategori) {
                postlabels = entry.category.map(cat => {
                    var etiketi = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label</a>`;
                }).katılmak(' ');
            } başka {
                postlabels = '<span class="no-label">Etiket Yok</span>';
            }

            for (var k = 0; k < giriş.bağlantı.uzunluğu; k++) {
                if (giriş.link[k].rel == 'alternatif') {
                    posturl = giriş.bağlantı[k].href;
                    kırmak;
                }
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class = "post-item">
                    <a href="${posturl}" class="post-title">${posttitle</a>
                    <div class="post-labels">${postlabels</div>
                </div>`;
            sitemap.appendChild(listItem);
        });
    }

    function filterByLabel(etiket) {
        if (etiket === 'hepsi') {
            displayPosts(allPosts);
        } başka {
            var filteredPosts = allPosts.filter(function(entry) {
                return entry.category && entry.category.some(cat => cat.term === label);
            });
            displayPosts(filteredPosts);
        }
    }

    var script = document.createElement("script");
    script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
    document.body.appendChild(script);
</script>

<stil>
    /* Filtre kabının stili */
    .filter-konteyner {
        metin hizalama: ortala;
        kenar boşluğu: 20 piksel 0;
    }

    /* Hap şeklindeki filtre düğmeleri */
    .filtre düğmesi {
        arka plan rengi: #007bff;
        sınır: yok;
        renk: beyaz;
        dolgu: 10 piksel 20 piksel;
        kenar boşluğu: 5 piksel;
        kenarlık yarıçapı: 5px;
        yazı tipi boyutu: 16 piksel;
        imleç: işaretçi;
        geçiş: arka plan rengi 0,3 saniyelik kolaylık;
    }

    .filter-button:hover {
        arka plan rengi: #0056b3;
    }

    /* Site haritası ve gönderi öğelerinin stili */
    #site haritası {
        liste stili türü: yok;
        dolgu: 0;
        kenar boşluğu: 0;
        kenar boşluğu: otomatik;
        arka plan rengi: #f8f9fa;
        kenarlık yarıçapı: 5px;
        kutu gölgesi: 0 2px 5px rgba(0, 0, 0, 0.1);
        minimum yükseklik: 800 piksel;
        geçiş: tümü 0,3 saniyelik kolaylık;
    }

    #site haritası li {
        dolgu: 8 piksel 15 piksel;
        kenarlık alt: 1 piksel katı #e0e0e0;
        geçiş: arka plan 0,2 saniye, dönüşüm 0,2 saniye;
        kenarlık-sol: 4 piksel düz siyah;
        kenar boşluğu alt: 4 piksel;
    }

    #site haritası li:hover {
        kenarlık-sol: 4px düz Mavi;
        dönüşüm: TranslateY(-2px);
    }

    #site haritası li:son-çocuk {
        kenarlık alt: yok;
    }

    .post-item {
        ekran: esnek;
        içeriği haklı göster: aradaki boşluk;
        hizalama öğeleri: merkez;
    }

    .post-title {
        metin dekorasyonu: yok;
        renk: Siyah;
        yazı tipi boyutu: 19 piksel;
        ekran: blok;
        geçiş: renkli 0,2s;
    }

    .post-title:hover {
        renk: mavi;
    }

    .post-etiketler {
        ekran: esnek;
        boşluk: 5 piksel;
    }

    .label-button {
        arka plan rengi: #48525c;
        renk: #ffffff;
        dolgu: 0 piksel 20 piksel;
        kenarlık yarıçapı: 5px;
        metin dekorasyonu: yok;
        yazı tipi boyutu: 14 piksel;
        satır yüksekliği: 25 piksel;
        geçiş: arka plan rengi 0,2 saniyelik kolaylık;
    }

    .label-button:hover {
        arka plan rengi: #0056b3;
    }

    .no-etiket {
        renk: #555;
        yazı tipi boyutu: 14 piksel;
    }

    /* Duyarlı */
    @media (maks. genişlik: 768 piksel) {
        .post-item {
            esnek yön: sütun;
            hizalama öğeleri: esnek başlangıç;
        }

        .post-etiketler {
            üst kenar boşluğu: 5 piksel;
        }
    }
</style>

Yukarıda verilen kodlardan herhangi birini kullanabilir ve koddaki Web Sitesi URL'sini değiştirdiğinizden emin olun. Böylece Blogger web sitenizde çalışacaktır.

Blogger için daha fazla HTML site haritası kodu istiyorsanız Techyleaf'teki eski Blog yayınımıza göz atın.

Hala herhangi bir şüpheniz varsa, yorum bölümünde sormaya çekinmeyin. Bu konuda size yardımcı olmaktan memnuniyet duyarım.