Cum să adăugați un Sitemap HTML în Blogger (4 stiluri noi)

Publicat: 2024-10-21

Doriți să adăugați o pagină HTML de hartă a site-ului pe site-ul dvs. Blogger. Ei bine, puteți face asta urmând acest articol. Aici, voi împărtăși 4 noi stiluri de sitemap HTML pentru Blogger.

Dar înainte de asta, să înțelegem ce este un sitemap HTML?

Un sitemap HTML este o pagină web care oferă o listă de link-uri către cele mai importante pagini sau secțiuni de pe un site web, organizate într-o manieră structurată. Ajută atât vizitatorii, cât și motoarele de căutare să găsească și să navigheze cu ușurință conținutul de pe site.

Când să utilizați un Sitemap HTML:

Pentru site-uri web cu structuri complexe sau multe pagini.
Dacă doriți să îmbunătățiți experiența utilizatorului , oferind o modalitate ușoară de a găsi conținut.
În scopuri SEO , ca ajutor suplimentar pentru a ajuta motoarele de căutare să navigheze pe site-ul dvs.

Folosind atât hărțile de site HTML, cât și XML, îmbunătățiți capacitatea de utilizare a site-ului dvs. pentru utilizatori și asigurați o indexare adecvată de către motoarele de căutare.

Cum să adăugați sitemap-ul HTML în Blogger?

Pentru a adăuga harta site-ului HTML pe site-ul Blogger, trebuie să vă conectați la tabloul de bord Blogger și să accesați secțiunea Pagini.

Acum creați o pagină nouă și setați titlul sitemap HTML sau îl puteți păstra ca sitemap.

Acum trebuie să copiați oricare dintre stilurile de hartă site HTML și să-l lipiți în secțiunea HTML a paginii.

Acum trebuie să înlocuiți URL-ul Demo cu adresa URL a site-ului dvs. și să publicați pagina. Acum ați adăugat cu succes harta site-ului HTML pe site-ul dvs. Blogger.

Stil -01 (Hapta site-ului HTML simplu)

 <ul></ul>

    <script type="text/javascript">
        var numposts = 100; // Schimbați această valoare dacă aveți mai mult de 100 de postări
        funcția showrecentposts(json) {
            var sitemap = document.getElementById("sitemap");
            pentru (var i = 0; i < json.feed.entry.length; i++) {
                var entry = json.feed.entry[i];
                var posttitle = entry.title.$t;
                var posturl;
                pentru (var k = 0; k < entry.link.length; k++) {
                    if (entry.link[k].rel == 'alternativ') {
                        posturl = entry.link[k].href;
                        pauză;
                    }
                }
                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 {
            list-style-type: niciunul;
            umplutură: 0;
            marja: 0;
            margine: auto;
            culoare de fundal: #f8f9fa;
            chenar-rază: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            înălțime minimă: 800px; 
            tranziție: toate 0.3s ușurință; 
        }

        #sitemap li {
            umplutură: 8px 15px;
            chenar-jos: 1px solid #e0e0e0;
            tranziție: fundal 0,2s, transformare 0,2s;
            tranziție: fundal 0,2s;
            chenar-stânga: 4px negru solid;
          margine-jos: 4px;
        }
   #sitemap li:hover{
     chenar-stânga: 4px albastru solid; transforma: translateY(-2px);}

        #sitemap li:last-child {
            chenar-jos: niciunul;
        }

        #sitemap a {
            text-decor: niciuna;
            culoare: negru;
            dimensiunea fontului: 19px;
            afisare: bloc;
          tranziție: culoare 0,2s;
        }

        #sitemap a:hover {
            culoare: albastru;
        }
    </stil>

Stil -02 (HTML Sitemap cu etichete)

 <ul></ul>

<script type="text/javascript">
    var numposts = 100; // Schimbați această valoare dacă aveți mai mult de 100 de postări
    funcția showrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        pentru (var i = 0; i < json.feed.entry.length; i++) {
            var entry = json.feed.entry[i];
            var posttitle = entry.title.$t;
            var posturl;
            
            // Extrageți etichete (dacă sunt disponibile) și creați linkuri
            var postlabels = '';
            if (entry.category) {
                postlabels = entry.category.map(cat => {
                    var label = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    returnează `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).join(' ');
            } altfel {
                postlabels = '<span class="no-label">Fără etichetă</span>';
            }

            pentru (var k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'alternativ') {
                    posturl = entry.link[k].href;
                    pauză;
                }
            }

            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 {
        list-style-type: niciunul;
        umplutură: 0;
        marja: 0;
        margine: auto;
        culoare de fundal: #f8f9fa;
        chenar-rază: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        înălțime minimă: 800px;
        tranziție: toate 0.3s ușurință;
    }

    #sitemap li {
        umplutură: 8px 15px;
        chenar-jos: 1px solid #e0e0e0;
        tranziție: fundal 0,2s, transformare 0,2s;
        chenar-stânga: 4px negru solid;
        margine-jos: 4px;
    }

    #sitemap li:hover {
        chenar-stânga: 4px albastru solid;
        transforma: translateY(-2px);
    }

    #sitemap li:last-child {
        chenar-jos: niciunul;
    }

    .post-element {
        display: flex;
        justificare-conținut: spațiu-între;
        alinierea elementelor: centru;
    }

    .post-title {
        text-decor: niciuna;
        culoare: negru;
        dimensiunea fontului: 19px;
        afisare: bloc;
        tranziție: culoare 0,2s;
    }

    .post-title:hover {
        culoare: albastru;
    }

    .post-labels {
        display: flex;
        decalaj: 5px;
    }

    .label-button {
    culoare de fundal: #48525c;
    culoare: #ffffff;
    umplutură: 0px 20px;
    chenar-rază: 5px;
    text-decor: niciuna;
    dimensiunea fontului: 14px;
    înălțimea liniei: 25px;
    tranziție: culoare de fundal 0.2s ușurință;
}

    .label-button:hover {
        culoare de fundal: #0056b3;
    }

    .no-label {
        culoare: #555;
        dimensiunea fontului: 14px;
    }

    /* Reactiv */
    @media (lățime maximă: 768 px) {
        .post-element {
            flex-direcție: coloană;
            align-items: flex-start;
        }

        .post-labels {
            margine-sus: 5px;
        }
    }
</stil>

Stil -03 (Hapta site HTML cu filtre drop-down)

 <div class="filter-container">
    <label for="labelFilter">Filtrați după etichetă: </label>
    <select onchange="filterByLabel()">
        <option value="all">Toate</option>
    </select>
</div>

<ul></ul>

<script type="text/javascript">
    var allPosts = []; // Stocați toate postările aici
    var uniqueLabels = set nou(); // Pentru a stoca etichete unice

    // Preluați și afișați postările recente
    funcția showrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        allPosts = json.feed.entry; // Stochează toate postările pentru filtrare

        // Generați etichete unice pentru filtru
        allPosts.forEach(funcție(întrare) {
            if (entry.category) {
                entry.category.forEach(function(cat) {
                    uniqueLabels.add(cat.term);
                });
            }
        });

        // Populați meniul derulant al filtrului cu etichete
        var labelFilter = document.getElementById("labelFilter");
        uniqueLabels.forEach(funcție(etichetă) {
            var option = document.createElement("option");
            option.value = eticheta;
            option.textContent = etichetă;
            labelFilter.appendChild(opțiune);
        });

        displayPosts(toate Postările); // Afișează inițial toate postările
    }

    // Funcție de afișare a postărilor filtrate
    function displayPosts(posts) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; // Ștergeți postările curente

        posts.forEach(funcție(întrare) {
            var posttitle = entry.title.$t;
            var posturl;
            var postlabels = '';

            if (entry.category) {
                postlabels = entry.category.map(cat => {
                    var label = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    returnează `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).join(' ');
            } altfel {
                postlabels = '<span class="no-label">Fără etichetă</span>';
            }

            pentru (var k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'alternativ') {
                    posturl = entry.link[k].href;
                    pauză;
                }
            }

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

    // Funcție de filtrare a postărilor după eticheta selectată
    funcția filterByLabel() {
        var selectedLabel = document.getElementById("labelFilter").value;

        if (selectedLabel === „toate”) {
            displayPosts(toate Postările); // Afișează toate postările dacă este selectat „Toate”.
        } altfel {
            var filteredPosts = allPosts.filter(funcție(întrare) {
                return entry.category && entry.category.some(cat => cat.term === selectedLabel);
            });
            displayPosts(filteredPosts); // Afișează numai postările filtrate
        }
    }

    // Încarcă postările recente cu script
    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 pentru meniul drop-down filtru */
    .filtru-container {
        marjă: 20px 0;
        text-align: centru;
    }

    #labelFilter {
        umplutură: 5px 10px;
        dimensiunea fontului: 16px;
    }

    /* Harta site-ului și stiluri de articole de postare */
    #sitemap {
        list-style-type: niciunul;
        umplutură: 0;
        marja: 0;
        margine: auto;
        culoare de fundal: #f8f9fa;
        chenar-rază: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        înălțime minimă: 800px;
        tranziție: toate 0.3s ușurință;
    }

    #sitemap li {
        umplutură: 8px 15px;
        chenar-jos: 1px solid #e0e0e0;
        tranziție: fundal 0,2s, transformare 0,2s;
        chenar-stânga: 4px negru solid;
        margine-jos: 4px;
    }

    #sitemap li:hover {
        chenar-stânga: 4px albastru solid;
        transforma: translateY(-2px);
    }

    #sitemap li:last-child {
        chenar-jos: niciunul;
    }

    .post-element {
        display: flex;
        justificare-conținut: spațiu-între;
        alinierea elementelor: centru;
    }

    .post-title {
        text-decor: niciuna;
        culoare: negru;
        dimensiunea fontului: 19px;
        afisare: bloc;
        tranziție: culoare 0,2s;
    }

    .post-title:hover {
        culoare: albastru;
    }

    .post-labels {
        display: flex;
        decalaj: 5px;
    }

    .label-button {
        culoare de fundal: #48525c;
        culoare: #ffffff;
        umplutură: 0px 20px;
        chenar-rază: 5px;
        text-decor: niciuna;
        dimensiunea fontului: 14px;
        înălțimea liniei: 25px;
        tranziție: culoare de fundal 0.2s ușurință;
    }

    .label-button:hover {
        culoare de fundal: #0056b3;
    }

    .no-label {
        culoare: #555;
        dimensiunea fontului: 14px;
    }

    /* Reactiv */
    @media (lățime maximă: 768 px) {
        .post-element {
            flex-direcție: coloană;
            align-items: flex-start;
        }

        .post-labels {
            margine-sus: 5px;
        }
    }
</stil>

Stil -04 (Hapta site HTML cu filtre cu formă de pilule)

Sitemap HTML cu filtre cu formă de pilule

 <div class="filter-container">
    <button class="filter-button">Toate</button>
    <!--Butoanele de etichetă vor fi inserate dinamic aici-->
</div>

<ul></ul>

<script type="text/javascript">
    var allPosts = []; // Stocați toate postările aici
    var uniqueLabels = set nou(); // Pentru a stoca etichete unice

    funcția showrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        allPosts = json.feed.entry; // Stochează toate postările pentru filtrare

        allPosts.forEach(funcție(întrare) {
            if (entry.category) {
                entry.category.forEach(function(cat) {
                    uniqueLabels.add(cat.term);
                });
            }
        });

        var filterContainer = document.querySelector('.filter-container');
        uniqueLabels.forEach(funcție(etichetă) {
            var button = document.createElement("button");
            button.className = "buton-filtru";
            button.textContent = etichetă;
            button.onclick = function() { filterByLabel(label); };
            filterContainer.appendChild(button);
        });

        displayPosts(toate Postările); // Afișează inițial toate postările
    }

    function displayPosts(posts) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; // Șterge lista sitemap-ului

        posts.forEach(funcție(întrare) {
            var posttitle = entry.title.$t;
            var posturl;
            var postlabels = '';

            if (entry.category) {
                postlabels = entry.category.map(cat => {
                    var label = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    returnează `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).join(' ');
            } altfel {
                postlabels = '<span class="no-label">Fără etichetă</span>';
            }

            pentru (var k = 0; k < entry.link.length; k++) {
                if (entry.link[k].rel == 'alternativ') {
                    posturl = entry.link[k].href;
                    pauză;
                }
            }

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

    funcția filterByLabel(etichetă) {
        if (etichetă === „toate”) {
            displayPosts(toate Postările);
        } altfel {
            var filteredPosts = allPosts.filter(funcție(întrare) {
                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 pentru containerul de filtrare */
    .filtru-container {
        text-align: centru;
        marjă: 20px 0;
    }

    /* Butoane de filtru în formă de pastilă */
    .button-filtru {
        culoare de fundal: #007bff;
        chenar: niciunul;
        culoare: alb;
        umplutură: 10px 20px;
        marja: 5px;
        chenar-rază: 5px;
        dimensiunea fontului: 16px;
        cursor: pointer;
        tranziție: culoare de fundal 0.3s ușurință;
    }

    .filter-button:hover {
        culoare de fundal: #0056b3;
    }

    /* Stil pentru harta site-ului și articole postate */
    #sitemap {
        list-style-type: niciunul;
        umplutură: 0;
        marja: 0;
        margine: auto;
        culoare de fundal: #f8f9fa;
        chenar-rază: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        înălțime minimă: 800px;
        tranziție: toate 0.3s ușurință;
    }

    #sitemap li {
        umplutură: 8px 15px;
        chenar-jos: 1px solid #e0e0e0;
        tranziție: fundal 0,2s, transformare 0,2s;
        chenar-stânga: 4px negru solid;
        margine-jos: 4px;
    }

    #sitemap li:hover {
        chenar-stânga: 4px albastru solid;
        transforma: translateY(-2px);
    }

    #sitemap li:last-child {
        chenar-jos: niciunul;
    }

    .post-element {
        display: flex;
        justificare-conținut: spațiu-între;
        alinierea elementelor: centru;
    }

    .post-title {
        text-decor: niciuna;
        culoare: negru;
        dimensiunea fontului: 19px;
        afisare: bloc;
        tranziție: culoare 0,2s;
    }

    .post-title:hover {
        culoare: albastru;
    }

    .post-labels {
        display: flex;
        decalaj: 5px;
    }

    .label-button {
        culoare de fundal: #48525c;
        culoare: #ffffff;
        umplutură: 0px 20px;
        chenar-rază: 5px;
        text-decor: niciuna;
        dimensiunea fontului: 14px;
        înălțimea liniei: 25px;
        tranziție: culoare de fundal 0.2s ușurință;
    }

    .label-button:hover {
        culoare de fundal: #0056b3;
    }

    .no-label {
        culoare: #555;
        dimensiunea fontului: 14px;
    }

    /* receptiv */
    @media (lățime maximă: 768 px) {
        .post-element {
            flex-direcție: coloană;
            align-items: flex-start;
        }

        .post-labels {
            margine-sus: 5px;
        }
    }
</stil>

Puteți utiliza oricare dintre codurile prezentate mai sus și asigurați-vă că modificați adresa URL a site-ului de pe cod. Astfel încât să funcționeze pe site-ul dvs. Blogger.

Dacă doriți mai mult cod HTML de hartă a site-ului pentru Blogger, verificați vechea noastră postare de blog pe Techyleaf .

Dacă mai aveți îndoieli, nu ezitați să întrebați în secțiunea de comentarii. Voi fi bucuros să vă ajut în asta.