HTML Código HTML e CSS não é aceito no Blogger, onde foi o erro?

L. Russo · 18 de dezembro de 2024

Olá pessoal, pedi a I.a o seguinte (Crie um código html e um css para blogspot onde o layout dele deve conter o nome no topo, botões de menus de páginas e logo abaixo um slide automático com os últimos posts, e abaixo do slide o blog deve ser dividido em 3 colunas onde a do centro é maior e deve conter os últimos posts com rolamento infinito. A barra de pesquisa do blog deverá ser só um ícone e quando clicar nele ele abre uma barra de pesquisa pop-up que salta a tela e deixa o fundo esmaecido) para meu blogger porém quando o adiciono lá ele não consegue salvar para ser visualizado, onde está o erro no código?

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Blog</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background: #333;
            color: white;
            padding: 10px 20px;
            text-align: center;
        }

        nav ul {
            list-style: none;
            padding: 0;
        }

        nav ul li {
            display: inline;
            margin-right: 20px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
        }

        .slider {
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .slides {
            display: flex;
            animation: slide 10s infinite;
        }

        .slide {
            min-width: 100%;
            text-align: center;
            background: #f2f2f2;
            padding: 60px 0;
        }

        .content {
            display: flex;
            margin: 20px;
        }

        .column {
            padding: 10px;
        }

        .side {
            flex: 1;
        }

        .main {
            flex: 2;
            overflow-y: auto;
            max-height: 500px; /* Altura máxima para rolagem */
        }

        .post {
            background: #eaeaea;
            margin: 10px 0;
            padding: 15px;
        }

        .search-popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
        }

        .search-popup input {
            padding: 10px;
            width: 300px;
        }

        .search-popup button {
            padding: 10px;
        }

        @keyframes slide {
            0% { transform: translateX(0); }
            20% { transform: translateX(0); }
            25% { transform: translateX(-100%); }
            45% { transform: translateX(-100%); }
            50% { transform: translateX(-200%); }
            70% { transform: translateX(-200%); }
            75% { transform: translateX(0); }
            100% { transform: translateX(0); }
    </style>
</head>
<body>
    <header>
        <h1>Meu Blog</h1>
        <nav>
            <ul>
                <li><a href="#">Página 1</a></li>
                <li><a href="#">Página 2</a></li>
                <li><a href="#">Página 3</a></li>
                <li><a href="#" id="search-icon"></a></li>
            </ul>
        </nav>
    </header>

    <div class="slider">
        <div class="slides">
            <div class="slide">Último Post 1</div>
            <div class="slide">Último Post 2</div>
            <div class="slide">Último Post 3</div>
        </div>
    </div>

    <div class="content">
        <div class="column side">Lateral Esquerda</div>
        <div class="column main">
            <div class="post">Post 1</div>
            <div class="post">Post 2</div>
            <div class="post">Post 3</div>
            <div class="post">Post 4</div>
            <div class="post">Post 5</div>
            <div class="post">Post 6</div>
        </div>
        <div class="column side">Lateral Direita</div>
    </div>

    <div id="search-popup" class="search-popup">
        <input type="text" placeholder="Pesquisar...">
        <button id="close-popup">Fechar</button>
    </div>

    <script>
        document.getElementById('search-icon').addEventListener('click', function() {
            document.getElementById('search-popup').style.display = 'flex';
        });

        document.getElementById('close-popup').addEventListener('click', function() {
            document.getElementById('search-popup').style.display = 'none';
        });
    </script>
</body>
</html>

DiF · 18 de dezembro de 2024

@L. Russo Bom dia,

Pode ser que seja alguma configuração no seu blogger. Ele apresentou alguma mensagem de erro?

Aparentemente está tudo certo com o código. Testei online aqui e funcionou no exemplo. Não testei na plataforma do blogger, mas na JSFiddle, onde costumo testar online os códigos funcionou.

Teste Online do exemplo do layout

https://jsfiddle.net/dife/fk1hpaxr/1/

TI Consil · 18 de dezembro de 2024

Falta um } do keyframe.

Você abriu o keyframe, adicionou as %, mas esqueceu de fechar. Alterando para:

@keyframes slide {

            0% { transform: translateX(0); }

            20% { transform: translateX(0); }

            25% { transform: translateX(-100%); }

            45% { transform: translateX(-100%); }

            50% { transform: translateX(-200%); }

            70% { transform: translateX(-200%); }

            75% { transform: translateX(0); }

            100% { transform: translateX(0); }

        }

Já será corrigido e rodará sem problemas.

L. Russo · 19 de dezembro de 2024

Olá novamente pessoal, obrigado pela ajuda, então TI Consil fiz o que disse mais ainda assim ele não deixa salvar. Dif olhei ai no link que você postou e é exatamente assim que eu queria que ficasse, mas alguma coisa eu não estou sabendo fazer na plataforma do blogger que ele não me libera salvar pra testar o código, e não sei o que é, ele mostra esse erro agora:

org.xml.sax.SAXParseException; lineNumber: 111; columnNumber: 3; The element type "meta" must be terminated by the matching end-tag "</meta>".

E ele mostra em vermelho eu acredito, o que possivelmente esta errado no código, e lá as linhas 111 ( </head> ), 149 ( </div> ) acho que essa fica abaixo ao botão de pesquisar, 160 ( </body> ), e 161 (</html>), estão vermelhas como se algo estivesse errado.

TI Consil · 19 de dezembro de 2024

Bom dia, acho que entendi o problema.., toda tag precisa de aberta e fechada, o HTML5 consegue aceitar uma tag que não é fechada porém o blog que você está utilizando talvez não aceite isso (como mostrado nos erros), tente alterar as 2 tag's <meta> por este código:

 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Se você não tiver uma base boa de html, recomendo estudar um pouco ou ir para soluções low code, que vai reduzir e muito a quantidade de erros

DiF · 19 de dezembro de 2024

@L. Russo É como o colega acima mencionou. Recomendo que poste o código completo do Blogger com as meta-tags. Se possível, até podes anexar um print mostrando o problema. Apenas o código que você postou, de fato funciona. O blogger é uma plataforma muito antiga e provavelmente eles não devem ter atualizado os recursos dele. Existem outros métodos de criar um blog/site que são melhores, como por exemplo usar o wordpress.

L. Russo · 20 de dezembro de 2024

Bom dia pessoal, mais uma vez obrigado pelas dicas, consegui utilizando este código aqui em baixo, agora é aprender malinado e ver até onde consigo ir. Obrigado!

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meu Blog</title>
    <b:skin><![CDATA[
        /* Todo seu CSS deve ir aqui */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background: #333;
            color: white;
            padding: 10px 20px;
            text-align: center;
        }

        nav ul {
            list-style: none;
            padding: 0;
        }

        nav ul li {
            display: inline;
            margin-right: 20px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
        }

        .slider {
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .slides {
            display: flex;
            animation: slide 10s infinite;
        }

        .slide {
            min-width: 100%;
            text-align: center;
            background: #f2f2f2;
            padding: 60px 0;
        }

        .content {
            display: flex;
            margin: 20px;
        }

        .column {
            padding: 10px;
        }

        .side {
            flex: 1;
        }

        .main {
            flex: 2;
            overflow-y: auto;
            max-height: 500px; /* Altura máxima para rolagem */
        }

        .post {
            background: #eaeaea;
            margin: 10px 0;
            padding: 15px;
        }

        .search-popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
        }

        .search-popup input {
            padding: 10px;
            width: 300px;
        }

        .search-popup button {
            padding: 10px;
        }

        @keyframes slide {
            0% { transform: translateX(0); }
            20% { transform: translateX(0); }
            25% { transform: translateX(-100%); }
            45% { transform: translateX(-100%); }
            50% { transform: translateX(-200%); }
            70% { transform: translateX(-200%); }
            75% { transform: translateX(0); }
            100% { transform: translateX(0); }
        }
    ]]></b:skin>
</head>
<body>
    <header>
        <h1>Meu Blog</h1>
        <nav>
            <ul>
                <li><a href="#">Página 1</a></li>
                <li><a href="#">Página 2</a></li>
                <li><a href="#">Página 3</a></li>
                <li><a href="#" id="search-icon"></a></li>
            </ul>
        </nav>
    </header>

    <div class="slider">
        <div class="slides">
            <div class="slide">Último Post 1</div>
            <div class="slide">Último Post 2</div>
            <div class="slide">Último Post 3</div>
        </div>
    </div>

    <div class="content">
        <div class="column side">Lateral Esquerda</div>
        <div class="column main">
            <div class="post">Post 1</div>
            <div class="post">Post 2</div>
            <div class="post">Post 3</div>
            <div class="post">Post 4</div>
            <div class="post">Post 5</div>
            <div class="post">Post 6</div>
        </div>
        <div class="column side">Lateral Direita</div>
    </div>

    <div id="search-popup" class="search-popup">
        <input type="text" placeholder="Pesquisar..."/>
        <button id="close-popup">Fechar</button>
    </div>

    <b:section id="main">
        <b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">
            <b:includable id="main">
                <!-- O conteúdo do seu blog será renderizado aqui -->
            </b:includable>
        </b:widget>
    </b:section>

    <script>
        document.getElementById('search-icon').addEventListener('click', function() {
            document.getElementById('search-popup').style.display = 'flex';
        });

        document.getElementById('close-popup').addEventListener('click', function() {
            document.getElementById('search-popup').style.display = 'none';
        });
    </script>
</body>
</html>