Documentação Accodion Blogger

|  

1. Onde você pode usar o accordion no Blogger

Em Blogger, você tem três cenários principais:

  1. Em qualquer página do layout (lateral, topo, rodapé)
    → Usa o gadget HTML/JavaScript.

  2. Em uma página ou post específico
    → Usa o modo HTML do editor.

  3. Em todo o blog (global)
    → Insere o CSS/JS no template (HTML do tema).

A estrutura do accordion (HTML/CSS/JS) é sempre a mesma; só muda onde você cola o código.

2. Método 1: Gadget HTML/JavaScript (recomendado)

Use esse método sempre que quiser que o accordion apareça em vários lugares (sidebar, rodapé, topo, etc.), sem precisar editar o tema.

Passos

  1. Entre no painel do Blogger.

  2. Vá em Layout (ou Tema > Layout).

  3. Clique em “Adicionar um gadget” na área onde quer o accordion.

  4. Escolha o gadget “HTML/JavaScript”.

  5. Na caixa de conteúdo, cole:

    • o HTML do accordion,

    • o CSS entre <style>...</style>,

    • o JS entre <script>...</script>.

  6. Clique em “Salvar”.

  7. Volte em Layout e clique em “Salvar layout”.

Observações importantes

  • Pode usar vários gadgets se quiser accordions diferentes em locais distintos.

  • Se copiar o mesmo JS/CSS em mais de um gadget, o accordion pode quebrar; nesse caso, cole o CSS/JS apenas uma vez e o HTML em cada gadget.

3. Método 2: Página ou post (modo HTML)

Use quando o accordion for específico dessa página/post (ex.: FAQ de um produto, módulo de curso de uma postagem).

Passos

  1. Abra a página ou post no painel do Blogger.

  2. Mude para o modo HTML (ícone <> ou “HTML” no editor).

  3. Role até o local onde quer o accordion.

  4. Cole:

    • o HTML do accordion,

    • o CSS dentro de <style>...</style>,

    • o JS dentro de <script>...</script>.

  5. Volte ao modo visual (se quiser) e clique em “Publicar” / “Atualizar”.

Observações

  • É o método mais simples para testar um accordion novo.

  • Se o template já tiver o CSS/JS geral, você pode pular a parte de estilo/script e só inserir o HTML.

4. Método 3: Codificar direto no template (tema)

Use quando quiser que o accordion fique disponível globalmente (sem repetir CSS/JS em vários gadgets).

Passos

  1. Vá em Layout / Tema > Editar HTML.

  2. Localize um bloco onde faça sentido:

    • perto de <div id='main'> (para conteúdo central),

    • perto de <div id='sidebar-wrapper'> (para sidebar),

    • perto de <div id='footer'> (para rodapé).

  3. Cole o HTML do accordion dentro desse bloco.

  4. Adicione o CSS dentro de <b:skin><![CDATA[/* ... */]]></b:skin> ou logo após o <head>, em um <style>.

  5. Adicione o JS antes de </body>, em um <script>.

  6. Clique em “Salvar tema”.

Observações

  • Não cole o mesmo CSS/JS em vários lugares; isso prejudica desempenho e pode quebrar o accordion.

  • Salve sempre uma cópia do tema antes de editar.
Essa informação te ajudou?