So fügen Sie eine HTML-Sitemap in Blogger hinzu (4 neue Stile)

Veröffentlicht: 2024-10-21

Möchten Sie Ihrer Blogger-Website eine HTML-Sitemap-Seite hinzufügen? Nun, Sie können das tun, indem Sie diesem Artikel folgen. Hier werde ich 4 neue Stile von HTML-Sitemaps für Blogger vorstellen.

Aber vorher wollen wir verstehen , was eine HTML-Sitemap ist.

Eine HTML-Sitemap ist eine Webseite, die eine strukturiert organisierte Liste von Links zu den wichtigsten Seiten oder Abschnitten einer Website bereitstellt. Es hilft sowohl Besuchern als auch Suchmaschinen, Inhalte auf der Website leicht zu finden und darin zu navigieren.

Wann man eine HTML-Sitemap verwendet:

Für Websites mit komplexen Strukturen oder vielen Seiten.
Wenn Sie die Benutzererfahrung verbessern möchten, indem Sie eine einfache Möglichkeit zum Auffinden von Inhalten bereitstellen.
Für SEO-Zwecke , als zusätzliche Hilfe für Suchmaschinen bei der Navigation auf Ihrer Website.

Durch die Verwendung von HTML- und XML-Sitemaps verbessern Sie die Benutzerfreundlichkeit Ihrer Website für Benutzer und stellen eine ordnungsgemäße Indexierung durch Suchmaschinen sicher.

Wie füge ich die HTML-Sitemap in Blogger hinzu?

Um die HTML-Sitemap zur Blogger-Website hinzuzufügen, müssen Sie sich bei Ihrem Blogger-Dashboard anmelden und zum Abschnitt „Seiten“ gehen.

Erstellen Sie nun eine neue Seite und legen Sie den Titel HTML-Sitemap fest, oder Sie können sie als Sitemap behalten.

Jetzt müssen Sie einen beliebigen Stil der HTML-Sitemap kopieren und in den HTML-Bereich der Seite einfügen.

Jetzt müssen Sie die Demo-URL durch die URL Ihrer Website ersetzen und die Seite veröffentlichen. Jetzt haben Sie die HTML-Sitemap erfolgreich zu Ihrer Blogger-Website hinzugefügt.

Stil -01 (einfache HTML-SItemap)

 <ul></ul>

    <script type="text/javascript">
        var numposts = 100; // Ändern Sie diesen Wert, wenn Sie mehr als 100 Beiträge haben
        Funktion showrecentposts(json) {
            var sitemap = document.getElementById("sitemap");
            for (var i = 0; i < json.feed.entry.length; i++) {
                var-Eintrag = json.feed.entry[i];
                var posttitle = Eintrag.title.$t;
                var posturl;
                for (var k = 0; k < Eintrag.Linklänge; k++) {
                    if (entry.link[k].rel == 'alternate') {
                        posturl = Eintrag.link[k].href;
                        brechen;
                    }
                }
                var listItem = document.createElement("li");
                listItem.innerHTML = `<a href="${posturl}">${posttitle}</a>`;
                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>
 #sitemap {
            Listenstiltyp: keiner;
            Polsterung: 0;
            Rand: 0;
            Rand: automatisch;
            Hintergrundfarbe: #f8f9fa;
            Randradius: 5px;
            Box-Shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            Mindesthöhe: 800 Pixel; 
            Übergang: alle 0,3 Sekunden nachlassen; 
        }

        #sitemap li {
            Polsterung: 8px 15px;
            border-bottom: 1px solid #e0e0e0;
            Übergang: Hintergrund 0,2 s, Transformation 0,2 s;
            Übergang: Hintergrund 0,2 s;
            Rand links: 4 Pixel durchgehend schwarz;
          Rand unten: 4px;
        }
   #sitemap li:hover{
     Rand links: 4 Pixel durchgehend blau; transform: TranslateY(-2px);}

        #sitemap li:last-child {
            border-bottom: keine;
        }

        #sitemap a {
            Textdekoration: keine;
            Farbe: Schwarz;
            Schriftgröße: 19px;
            Anzeige: Block;
          Übergang: Farbe 0,2s;
        }

        #sitemap a:hover {
            Farbe: blau;
        }
    </style>

Stil -02 (HTML-SItemap mit Beschriftungen)

 <ul></ul>

<script type="text/javascript">
    var numposts = 100; // Ändern Sie diesen Wert, wenn Sie mehr als 100 Beiträge haben
    Funktion showrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        for (var i = 0; i < json.feed.entry.length; i++) {
            var-Eintrag = json.feed.entry[i];
            var posttitle = Eintrag.title.$t;
            var posturl;
            
            // Labels extrahieren (falls verfügbar) und Links erstellen
            var postlabels = '';
            if (entry.category) {
                postlabels = enter.category.map(cat => {
                    var label = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).verbinden(' ');
            } anders {
                postlabels = '<span class="no-label">Kein Etikett</span>';
            }

            for (var k = 0; k < Eintrag.Linklänge; k++) {
                if (entry.link[k].rel == 'alternate') {
                    posturl = Eintrag.link[k].href;
                    brechen;
                }
            }

            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>
    #sitemap {
        Listenstiltyp: keiner;
        Polsterung: 0;
        Rand: 0;
        Rand: automatisch;
        Hintergrundfarbe: #f8f9fa;
        Randradius: 5px;
        Box-Shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        Mindesthöhe: 800 Pixel;
        Übergang: alle 0,3 Sekunden nachlassen;
    }

    #sitemap li {
        Polsterung: 8px 15px;
        border-bottom: 1px solid #e0e0e0;
        Übergang: Hintergrund 0,2 s, Transformation 0,2 s;
        Rand links: 4 Pixel durchgehend schwarz;
        Rand unten: 4px;
    }

    #sitemap li:hover {
        Rand links: 4 Pixel durchgehend blau;
        transform: TranslateY(-2px);
    }

    #sitemap li:last-child {
        border-bottom: keine;
    }

    .post-item {
        Anzeige: Flex;
        justify-content: Leerzeichen dazwischen;
        align-items: center;
    }

    .post-title {
        Textdekoration: keine;
        Farbe: Schwarz;
        Schriftgröße: 19px;
        Anzeige: Block;
        Übergang: Farbe 0,2s;
    }

    .post-title:hover {
        Farbe: blau;
    }

    .post-labels {
        Anzeige: Flex;
        Lücke: 5px;
    }

    .label-button {
    Hintergrundfarbe: #48525c;
    Farbe: #ffffff;
    Polsterung: 0px 20px;
    Randradius: 5px;
    Textdekoration: keine;
    Schriftgröße: 14px;
    Zeilenhöhe: 25px;
    Übergang: Hintergrundfarbe 0,2 s Leichtigkeit;
}

    .label-button:hover {
        Hintergrundfarbe: #0056b3;
    }

    .no-label {
        Farbe: #555;
        Schriftgröße: 14px;
    }

    /* Responsiv */
    @media (maximale Breite: 768 Pixel) {
        .post-item {
            Flexrichtung: Spalte;
            align-items: Flex-Start;
        }

        .post-labels {
            Rand oben: 5px;
        }
    }
</style>

Stil -03 (HTML-SItemap mit Dropdown-Filtern)

 <div class="filter-container">
    <label for="labelFilter">Nach Label filtern: </label>
    <select onchange="filterByLabel()">
        <option value="all">Alle</option>
    </select>
</div>

<ul></ul>

<script type="text/javascript">
    var allPosts = []; // Alle Beiträge hier speichern
    var uniqueLabels = new Set(); // Um eindeutige Labels zu speichern

    // Aktuelle Beiträge abrufen und anzeigen
    Funktion showrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        allPosts = json.feed.entry; // Alle Beiträge zum Filtern speichern

        // Eindeutige Labels für Filter generieren
        allPosts.forEach(function(entry) {
            if (entry.category) {
                Eintrag.category.forEach(function(cat) {
                    uniqueLabels.add(cat.term);
                });
            }
        });

        // Füllen Sie das Filter-Dropdown-Menü mit Beschriftungen
        var labelFilter = document.getElementById("labelFilter");
        uniqueLabels.forEach(function(label) {
            var option = document.createElement("option");
            option.value = label;
            option.textContent = label;
            labelFilter.appendChild(option);
        });

        displayPosts(allPosts); // Zunächst alle Beiträge anzeigen
    }

    // Funktion zum Anzeigen gefilterter Beiträge
    Funktion displayPosts(posts) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; // Aktuelle Beiträge löschen

        posts.forEach(function(entry) {
            var posttitle = Eintrag.title.$t;
            var posturl;
            var postlabels = '';

            if (entry.category) {
                postlabels = enter.category.map(cat => {
                    var label = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).verbinden(' ');
            } anders {
                postlabels = '<span class="no-label">Kein Label</span>';
            }

            for (var k = 0; k < Eintrag.Linklänge; k++) {
                if (entry.link[k].rel == 'alternate') {
                    posturl = Eintrag.link[k].href;
                    brechen;
                }
            }

            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);
        });
    }

    // Funktion zum Filtern von Beiträgen nach ausgewähltem Label
    Funktion filterByLabel() {
        var selectedLabel = document.getElementById("labelFilter").value;

        if (selectedLabel === "all") {
            displayPosts(allPosts); // Alle Beiträge anzeigen, wenn „Alle“ ausgewählt ist
        } anders {
            var filteredPosts = allPosts.filter(function(entry) {
                return Entry.category && Entry.category.some(cat => cat.term === selectedLabel);
            });
            displayPosts(filteredPosts); // Nur gefilterte Beiträge anzeigen
        }
    }

    // Aktuelle Beiträge mit Skript laden
    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>
    /* Styling für Filter-Dropdown */
    .filter-container {
        Rand: 20px 0;
        Textausrichtung: Mitte;
    }

    #labelFilter {
        Polsterung: 5px 10px;
        Schriftgröße: 16px;
    }

    /* Sitemap- und Beitragsstile */
    #sitemap {
        Listenstiltyp: keiner;
        Polsterung: 0;
        Rand: 0;
        Rand: automatisch;
        Hintergrundfarbe: #f8f9fa;
        Randradius: 5px;
        Box-Shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        Mindesthöhe: 800 Pixel;
        Übergang: alle 0,3 Sekunden nachlassen;
    }

    #sitemap li {
        Polsterung: 8px 15px;
        border-bottom: 1px solid #e0e0e0;
        Übergang: Hintergrund 0,2 s, Transformation 0,2 s;
        Rand links: 4 Pixel durchgehend schwarz;
        Rand unten: 4px;
    }

    #sitemap li:hover {
        Rand links: 4 Pixel durchgehend blau;
        transform: TranslateY(-2px);
    }

    #sitemap li:last-child {
        border-bottom: keine;
    }

    .post-item {
        Anzeige: Flex;
        justify-content: Leerzeichen dazwischen;
        align-items: center;
    }

    .post-title {
        Textdekoration: keine;
        Farbe: Schwarz;
        Schriftgröße: 19px;
        Anzeige: Block;
        Übergang: Farbe 0,2s;
    }

    .post-title:hover {
        Farbe: blau;
    }

    .post-labels {
        Anzeige: Flex;
        Lücke: 5px;
    }

    .label-button {
        Hintergrundfarbe: #48525c;
        Farbe: #ffffff;
        Polsterung: 0px 20px;
        Randradius: 5px;
        Textdekoration: keine;
        Schriftgröße: 14px;
        Zeilenhöhe: 25px;
        Übergang: Hintergrundfarbe 0,2 s Leichtigkeit;
    }

    .label-button:hover {
        Hintergrundfarbe: #0056b3;
    }

    .no-label {
        Farbe: #555;
        Schriftgröße: 14px;
    }

    /* Responsiv */
    @media (maximale Breite: 768 Pixel) {
        .post-item {
            Flexrichtung: Spalte;
            align-items: Flex-Start;
        }

        .post-labels {
            Rand oben: 5px;
        }
    }
</style>

Stil -04 (HTML-SItemap mit Pillenformfiltern)

 <div class="filter-container">
    <button class="filter-button">Alle</button>
    <!--Label-Buttons werden hier dynamisch eingefügt-->
</div>

<ul></ul>

<script type="text/javascript">
    var allPosts = []; // Alle Beiträge hier speichern
    var uniqueLabels = new Set(); // Um eindeutige Labels zu speichern

    Funktion showrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        allPosts = json.feed.entry; // Alle Beiträge zum Filtern speichern

        allPosts.forEach(function(entry) {
            if (entry.category) {
                Eintrag.category.forEach(function(cat) {
                    uniqueLabels.add(cat.term);
                });
            }
        });

        var filterContainer = document.querySelector('.filter-container');
        uniqueLabels.forEach(function(label) {
            var button = document.createElement("button");
            button.className = "filter-button";
            button.textContent = label;
            button.onclick = function() { filterByLabel(label); };
            filterContainer.appendChild(button);
        });

        displayPosts(allPosts); // Zunächst alle Beiträge anzeigen
    }

    Funktion displayPosts(posts) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; // Die Sitemap-Liste löschen

        posts.forEach(function(entry) {
            var posttitle = Eintrag.title.$t;
            var posturl;
            var postlabels = '';

            if (entry.category) {
                postlabels = enter.category.map(cat => {
                    var label = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).verbinden(' ');
            } anders {
                postlabels = '<span class="no-label">Kein Label</span>';
            }

            for (var k = 0; k < Eintrag.Linklänge; k++) {
                if (entry.link[k].rel == 'alternate') {
                    posturl = Eintrag.link[k].href;
                    brechen;
                }
            }

            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);
        });
    }

    Funktion filterByLabel(label) {
        if (label === 'all') {
            displayPosts(allPosts);
        } anders {
            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>
    /* Stil für den Filtercontainer */
    .filter-container {
        Textausrichtung: Mitte;
        Rand: 20px 0;
    }

    /* Pillenförmige Filtertasten */
    .filter-button {
        Hintergrundfarbe: #007bff;
        Grenze: keine;
        Farbe: weiß;
        Polsterung: 10px 20px;
        Rand: 5px;
        Randradius: 5px;
        Schriftgröße: 16px;
        Cursor: Zeiger;
        Übergang: Hintergrundfarbe 0,3 s Leichtigkeit;
    }

    .filter-button:hover {
        Hintergrundfarbe: #0056b3;
    }

    /* Stil für die Sitemap und Beitragselemente */
    #sitemap {
        Listenstiltyp: keiner;
        Polsterung: 0;
        Rand: 0;
        Rand: automatisch;
        Hintergrundfarbe: #f8f9fa;
        Randradius: 5px;
        Box-Shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        Mindesthöhe: 800 Pixel;
        Übergang: alle 0,3 Sekunden nachlassen;
    }

    #sitemap li {
        Polsterung: 8px 15px;
        border-bottom: 1px solid #e0e0e0;
        Übergang: Hintergrund 0,2 s, Transformation 0,2 s;
        Rand links: 4 Pixel durchgehend schwarz;
        Rand unten: 4px;
    }

    #sitemap li:hover {
        Rand links: 4 Pixel durchgehend blau;
        transform: TranslateY(-2px);
    }

    #sitemap li:last-child {
        border-bottom: keine;
    }

    .post-item {
        Anzeige: Flex;
        justify-content: Leerzeichen dazwischen;
        align-items: center;
    }

    .post-title {
        Textdekoration: keine;
        Farbe: Schwarz;
        Schriftgröße: 19px;
        Anzeige: Block;
        Übergang: Farbe 0,2s;
    }

    .post-title:hover {
        Farbe: blau;
    }

    .post-labels {
        Anzeige: Flex;
        Lücke: 5px;
    }

    .label-button {
        Hintergrundfarbe: #48525c;
        Farbe: #ffffff;
        Polsterung: 0px 20px;
        Randradius: 5px;
        Textdekoration: keine;
        Schriftgröße: 14px;
        Zeilenhöhe: 25px;
        Übergang: Hintergrundfarbe 0,2 s Leichtigkeit;
    }

    .label-button:hover {
        Hintergrundfarbe: #0056b3;
    }

    .no-label {
        Farbe: #555;
        Schriftgröße: 14px;
    }

    /* Responsiv */
    @media (maximale Breite: 768 Pixel) {
        .post-item {
            Flexrichtung: Spalte;
            align-items: Flex-Start;
        }

        .post-labels {
            Rand oben: 5px;
        }
    }
</style>

Sie können einen der oben angegebenen Codes verwenden und unbedingt die Website-URL im Code ändern. Damit es auf Ihrer Blogger-Website funktioniert.

Wenn Sie mehr HTML-Sitemap-Code für Blogger benötigen, lesen Sie unseren alten Blog-Beitrag auf Techyleaf .

Wenn Sie immer noch Zweifel haben, können Sie diese gerne im Kommentarbereich stellen. Gerne helfe ich Ihnen dabei.