Como adicionar um Sitemap HTML no Blogger (4 novos estilos)

Publicados: 2024-10-21

Você deseja adicionar uma página de mapa do site HTML ao seu site do Blogger. Bem, você pode fazer isso seguindo este artigo. Aqui, estarei compartilhando 4 novos estilos de mapa do site HTML para o Blogger.

Mas antes vamos entender o que é um sitemap HTML?

Um sitemap HTML é uma página da web que fornece uma lista de links para as páginas ou seções mais importantes de um site, organizada de forma estruturada. Ajuda os visitantes e os mecanismos de pesquisa a encontrar e navegar facilmente pelo conteúdo do site.

Quando usar um Sitemap HTML:

Para sites com estruturas complexas ou muitas páginas.
Se você deseja melhorar a experiência do usuário , fornecendo uma maneira fácil de encontrar conteúdo.
Para fins de SEO , como uma ajuda adicional para ajudar os motores de busca a navegar no seu site.

Ao usar mapas de sites HTML e XML, você aprimora a usabilidade do seu site para os usuários e garante a indexação adequada pelos mecanismos de pesquisa.

Como adicionar o mapa do site HTML no Blogger?

Para adicionar o mapa do site HTML ao site do Blogger, você precisa fazer login no painel do Blogger e ir para a seção Páginas.

Agora crie uma nova página e defina o título do sitemap HTML ou você pode mantê-lo como sitemap.

Agora você precisa copiar qualquer estilo de mapa do site HTML e colá-lo na seção HTML da página.

Agora você precisa substituir o URL de demonstração pelo URL do seu site e publicar a página. Agora você adicionou com sucesso o mapa do site HTML ao seu site do Blogger.

Estilo -01 (SItemap HTML simples)

 <ul></ul>

    <script type="texto/javascript">
        var numposts = 100; // Altere este valor se você tiver mais de 100 posts
        função mostrar postagens recentes (json) {
            var sitemap = document.getElementById("sitemap");
            for (var i = 0; i < json.feed.entry.length; i++) {
                var entrada = json.feed.entry[i];
                var posttitle = entrada.título.$t;
                var posturl;
                for (var k = 0; k <entrada.link.comprimento; k++) {
                    if (entry.link[k].rel == 'alternativo') {
                        posturl = entrada.link[k].href;
                        quebrar;
                    }
                }
                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>
<estilo>
 #sitemap {
            tipo de estilo de lista: nenhum;
            preenchimento: 0;
            margem: 0;
            margem: automático;
            cor de fundo: #f8f9fa;
            raio da borda: 5px;
            sombra da caixa: 0 2px 5px rgba(0, 0, 0, 0,1);
            altura mínima: 800px; 
            transição: todos os 0,3s facilitam; 
        }

        #sitemap li {
            preenchimento: 8px 15px;
            borda inferior: 1px sólido #e0e0e0;
            transição: fundo 0,2s, transformação 0,2s;
            transição: fundo 0,2s;
            borda esquerda: 4px preto sólido;
          margem inferior: 4px;
        }
   #sitemap li:hover{
     borda esquerda: 4px azul sólido; transformar: traduzirY(-2px);}

        #sitemap li:last-child {
            borda inferior: nenhum;
        }

        #sitemap a {
            decoração de texto: nenhuma;
            cor: Preto;
            tamanho da fonte: 19px;
            exibição: bloco;
          transição: cor 0,2s;
        }

        #sitemap a:hover {
            cor: azul;
        }
    </estilo>

Estilo -02 (HTML SItemap com rótulos)

 <ul></ul>

<script type="texto/javascript">
    var numposts = 100; // Altere este valor se você tiver mais de 100 posts
    função mostrar postagens recentes (json) {
        var sitemap = document.getElementById("sitemap");
        for (var i = 0; i < json.feed.entry.length; i++) {
            var entrada = json.feed.entry[i];
            var posttitle = entrada.título.$t;
            var posturl;
            
            // Extrai rótulos (se disponíveis) e cria links
            var postlabels = '';
            if (entrada.categoria) {
                postlabels = entrada.categoria.map(cat => {
                    var rótulo = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).juntar(' ');
            } outro {
                postlabels = '<span class="no-label">Sem rótulo</span>';
            }

            for (var k = 0; k <entrada.link.comprimento; k++) {
                if (entry.link[k].rel == 'alternativo') {
                    posturl = entrada.link[k].href;
                    quebrar;
                }
            }

            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>

<estilo>
    #sitemap {
        tipo de estilo de lista: nenhum;
        preenchimento: 0;
        margem: 0;
        margem: automático;
        cor de fundo: #f8f9fa;
        raio da borda: 5px;
        sombra da caixa: 0 2px 5px rgba(0, 0, 0, 0,1);
        altura mínima: 800px;
        transição: todos os 0,3s facilitam;
    }

    #sitemap li {
        preenchimento: 8px 15px;
        borda inferior: 1px sólido #e0e0e0;
        transição: fundo 0,2s, transformação 0,2s;
        borda esquerda: 4px preto sólido;
        margem inferior: 4px;
    }

    #sitemap li:hover {
        borda esquerda: 4px azul sólido;
        transformar: traduzirY(-2px);
    }

    #sitemap li:last-child {
        borda inferior: nenhum;
    }

    .post-item {
        exibição: flexível;
        justificar-conteúdo: espaço entre;
        alinhar itens: centro;
    }

    .post-título {
        decoração de texto: nenhuma;
        cor: Preto;
        tamanho da fonte: 19px;
        exibição: bloco;
        transição: cor 0,2s;
    }

    .post-title:hover {
        cor: azul;
    }

    .post-rótulos {
        exibição: flexível;
        lacuna: 5px;
    }

    .label-botão {
    cor de fundo: #48525c;
    cor: #ffffff;
    preenchimento: 0px 20px;
    raio da borda: 5px;
    decoração de texto: nenhuma;
    tamanho da fonte: 14px;
    altura da linha: 25px;
    transição: facilidade de 0,2s da cor de fundo;
}

    .label-button: passar o mouse {
        cor de fundo: #0056b3;
    }

    .sem rótulo {
        cor: #555;
        tamanho da fonte: 14px;
    }

    /* Responsivo */
    @media (largura máxima: 768px) {
        .post-item {
            direção flexível: coluna;
            alinhar itens: flex-start;
        }

        .post-rótulos {
            margem superior: 5px;
        }
    }
</estilo>

Estilo -03 (HTML SItemap com filtros suspensos)

 <div class="filtro-container">
    <label for="labelFilter">Filtrar por rótulo: </label>
    <select onchange="filterByLabel()">
        <option value="all">Todos</option>
    </selecionar>
</div>

<ul></ul>

<script type="texto/javascript">
    var todas as postagens = []; // Armazene todas as postagens aqui
    var rótulos exclusivos = new Set(); // Para armazenar rótulos exclusivos

    //Busca e exibe postagens recentes
    função mostrar postagens recentes (json) {
        var sitemap = document.getElementById("sitemap");
        todas as postagens = json.feed.entry; // Armazena todas as postagens para filtragem

        //Gera rótulos exclusivos para filtro
        allPosts.forEach(função(entrada) {
            if (entrada.categoria) {
                entrada.categoria.forEach(função(gato) {
                    UniqueLabels.add(cat.term);
                });
            }
        });

        // Preencher o menu suspenso do filtro com rótulos
        var labelFilter = document.getElementById("labelFilter");
        uniqueLabels.forEach(função(rótulo) {
            var opção = document.createElement("opção");
            opção.valor = rótulo;
            opção.textContent = rótulo;
            labelFilter.appendChild (opção);
        });

        displayPosts(todosPosts); //Exibir inicialmente todos os posts
    }

    //Função para exibir posts filtrados
    function displayPosts(postagens) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; //Limpa as postagens atuais

        posts.forEach(função(entrada) {
            var posttitle = entrada.título.$t;
            var posturl;
            var postlabels = '';

            if (entrada.categoria) {
                postlabels = entrada.categoria.map(cat => {
                    var rótulo = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).juntar(' ');
            } outro {
                postlabels = '<span class="no-label">Sem rótulo</span>';
            }

            for (var k = 0; k <entrada.link.comprimento; k++) {
                if (entry.link[k].rel == 'alternativo') {
                    posturl = entrada.link[k].href;
                    quebrar;
                }
            }

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

    //Função para filtrar postagens por rótulo selecionado
    função filterByLabel() {
        var selecionouLabel = document.getElementById("labelFilter").value;

        if (selectedLabel === "todos") {
            displayPosts(todosPosts); //Mostra todos os posts se "Todos" estiver selecionado
        } outro {
            var filteredPosts = allPosts.filter(function(entry) {
                retornar entrada.categoria && entrada.categoria.some(cat => cat.term === selecionouLabel);
            });
            displayPosts(filteredPosts); //Mostra apenas posts filtrados
        }
    }

    // Carrega postagens recentes com 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>

<estilo>
    /* Estilo do menu suspenso do filtro */
    .filtro-contêiner {
        margem: 20px 0;
        alinhamento de texto: centro;
    }

    #labelFilter {
        preenchimento: 5px 10px;
        tamanho da fonte: 16px;
    }

    /* Mapa do site e estilos de item de postagem */
    #sitemap {
        tipo de estilo de lista: nenhum;
        preenchimento: 0;
        margem: 0;
        margem: automático;
        cor de fundo: #f8f9fa;
        raio da borda: 5px;
        sombra da caixa: 0 2px 5px rgba(0, 0, 0, 0,1);
        altura mínima: 800px;
        transição: todos os 0,3s facilitam;
    }

    #sitemap li {
        preenchimento: 8px 15px;
        borda inferior: 1px sólido #e0e0e0;
        transição: fundo 0,2s, transformação 0,2s;
        borda esquerda: 4px preto sólido;
        margem inferior: 4px;
    }

    #sitemap li:hover {
        borda esquerda: 4px azul sólido;
        transformar: traduzirY(-2px);
    }

    #sitemap li:last-child {
        borda inferior: nenhum;
    }

    .post-item {
        exibição: flexível;
        justificar-conteúdo: espaço entre;
        alinhar itens: centro;
    }

    .post-título {
        decoração de texto: nenhuma;
        cor: Preto;
        tamanho da fonte: 19px;
        exibição: bloco;
        transição: cor 0,2s;
    }

    .post-title:hover {
        cor: azul;
    }

    .post-rótulos {
        exibição: flexível;
        lacuna: 5px;
    }

    .label-botão {
        cor de fundo: #48525c;
        cor: #ffffff;
        preenchimento: 0px 20px;
        raio da borda: 5px;
        decoração de texto: nenhuma;
        tamanho da fonte: 14px;
        altura da linha: 25px;
        transição: facilidade de 0,2s da cor de fundo;
    }

    .label-button: passar o mouse {
        cor de fundo: #0056b3;
    }

    .sem rótulo {
        cor: #555;
        tamanho da fonte: 14px;
    }

    /* Responsivo */
    @media (largura máxima: 768px) {
        .post-item {
            direção flexível: coluna;
            alinhar itens: flex-start;
        }

        .post-rótulos {
            margem superior: 5px;
        }
    }
</estilo>

Estilo -04 (HTML SItemap com filtros em formato de pílula)

 <div class="filtro-container">
    <button class="filter-button">Todos</button>
    <!--Os botões de rótulo serão inseridos dinamicamente aqui-->
</div>

<ul></ul>

<script type="texto/javascript">
    var todas as postagens = []; // Armazene todas as postagens aqui
    var rótulos exclusivos = new Set(); // Para armazenar rótulos exclusivos

    função mostrar postagens recentes (json) {
        var sitemap = document.getElementById("sitemap");
        todas as postagens = json.feed.entry; // Armazena todas as postagens para filtragem

        allPosts.forEach(função(entrada) {
            if (entrada.categoria) {
                entrada.categoria.forEach(função(gato) {
                    rótulos únicos.add(cat.term);
                });
            }
        });

        var filterContainer = document.querySelector('.filter-container');
        uniqueLabels.forEach(função(rótulo) {
            var botão = document.createElement("botão");
            button.className = "botão filtro";
            botão.textContent = rótulo;
            button.onclick = function() { filterByLabel(label); };
            filterContainer.appendChild(botão);
        });

        displayPosts(todosPosts); //Exibe todas as postagens inicialmente
    }

    function displayPosts(postagens) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; //Limpa a lista do mapa do site

        posts.forEach(função(entrada) {
            var posttitle = entrada.título.$t;
            var posturl;
            var postlabels = '';

            if (entrada.categoria) {
                postlabels = entrada.categoria.map(cat => {
                    var rótulo = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).juntar(' ');
            } outro {
                postlabels = '<span class="no-label">Sem rótulo</span>';
            }

            for (var k = 0; k <entrada.link.comprimento; k++) {
                if (entry.link[k].rel == 'alternativo') {
                    posturl = entrada.link[k].href;
                    quebrar;
                }
            }

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

    função filterByLabel(rótulo) {
        if (rótulo === 'todos') {
            displayPosts(todosPosts);
        } outro {
            var filteredPosts = allPosts.filter(function(entry) {
                retornar entrada.categoria && entrada.categoria.some(cat => cat.term === rótulo);
            });
            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>

<estilo>
    /* Estilo para o contêiner de filtro */
    .filtro-contêiner {
        alinhamento de texto: centro;
        margem: 20px 0;
    }

    /* Botões de filtro em formato de pílula */
    .botão filtro {
        cor de fundo: #007bff;
        fronteira: nenhuma;
        cor: branco;
        preenchimento: 10px 20px;
        margem: 5px;
        raio da borda: 5px;
        tamanho da fonte: 16px;
        cursor: ponteiro;
        transição: facilidade de 0,3s da cor de fundo;
    }

    .botão filtro: passar o mouse {
        cor de fundo: #0056b3;
    }

    /* Estilo para o mapa do site e itens de postagem */
    #sitemap {
        tipo de estilo de lista: nenhum;
        preenchimento: 0;
        margem: 0;
        margem: automático;
        cor de fundo: #f8f9fa;
        raio da borda: 5px;
        sombra da caixa: 0 2px 5px rgba(0, 0, 0, 0,1);
        altura mínima: 800px;
        transição: todos os 0,3s facilitam;
    }

    #sitemap li {
        preenchimento: 8px 15px;
        borda inferior: 1px sólido #e0e0e0;
        transição: fundo 0,2s, transformação 0,2s;
        borda esquerda: 4px preto sólido;
        margem inferior: 4px;
    }

    #sitemap li:hover {
        borda esquerda: 4px azul sólido;
        transformar: traduzirY(-2px);
    }

    #sitemap li:last-child {
        borda inferior: nenhum;
    }

    .post-item {
        exibição: flexível;
        justificar-conteúdo: espaço entre;
        alinhar itens: centro;
    }

    .post-título {
        decoração de texto: nenhuma;
        cor: Preto;
        tamanho da fonte: 19px;
        exibição: bloco;
        transição: cor 0,2s;
    }

    .post-title:hover {
        cor: azul;
    }

    .post-rótulos {
        exibição: flexível;
        lacuna: 5px;
    }

    .label-botão {
        cor de fundo: #48525c;
        cor: #ffffff;
        preenchimento: 0px 20px;
        raio da borda: 5px;
        decoração de texto: nenhuma;
        tamanho da fonte: 14px;
        altura da linha: 25px;
        transição: facilidade de 0,2s da cor de fundo;
    }

    .label-button: passar o mouse {
        cor de fundo: #0056b3;
    }

    .sem rótulo {
        cor: #555;
        tamanho da fonte: 14px;
    }

    /* Responsivo */
    @media (largura máxima: 768px) {
        .post-item {
            direção flexível: coluna;
            alinhar itens: flex-start;
        }

        .post-rótulos {
            margem superior: 5px;
        }
    }
</estilo>

Você pode usar qualquer código fornecido acima e certifique-se de alterar o URL do site no código. Para que funcione no seu site do Blogger.

Se você quiser mais código de mapa do site HTML para o Blogger, verifique nossa antiga postagem do blog no Techyleaf .

Se você ainda tiver alguma dúvida, fique à vontade para perguntar na seção de comentários. Ficarei feliz em ajudá-lo nisso.