Mostrando postagens com marcador Documentação. Mostrar todas as postagens

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.


Documentação Formulário com Captura no Google Sheets

Estrutura do Projeto

O sistema funciona assim:

Formulário HTML

↓

JavaScript envia os dados

↓

Google Apps Script recebe

↓

Google Sheets armazena

1. Criar a Planilha

No Google Sheets crie uma nova planilha.

Exemplo de colunas:

Nome

Email

WhatsApp

Data

Você pode criar qualquer coluna futuramente:

Empresa

Cidade

Plano

Observação

2. Criar o Google Apps Script

Na planilha:

Extensões → Apps Script

Apague tudo e cole:

function doPost(e){


 var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Página1");


 sheet.appendRow([

   e.parameter.nome,

   e.parameter.email,

   e.parameter.whatsapp,

   new Date()

 ]);


 return ContentService

   .createTextOutput("Success")

   .setMimeType(ContentService.MimeType.TEXT);

}

3. Publicar o Script

Clique:

Implantar → Nova implantação

Escolha:

Opção

Valor

Tipo

Aplicativo da Web

Executar como

Você

Acesso

Qualquer pessoa

Depois clique em:

Implantar

Copie a URL gerada.

Exemplo:

https://script.google.com/macros/s/AKfycbXXXX/exec

4. Estrutura Universal do Formulário

HTML

<form id="formulario">


 <input type="text" name="nome" placeholder="Nome" required>


 <input type="email" name="email" placeholder="E-mail" required>


 <input type="tel" name="whatsapp" placeholder="WhatsApp" required>


 <button type="submit">

   Enviar

 </button>


</form>


<p id="status"></p>

5. JavaScript Universal

Substitua:

SUA_URL_AQUI

pela URL do Apps Script.

<script>

const scriptURL = "SUA_URL_AQUI";


const form = document.getElementById("formulario");

const status = document.getElementById("status");


form.addEventListener("submit", e => {


 e.preventDefault();


 status.innerHTML = "Enviando...";


 fetch(scriptURL, {

   method: "POST",

   body: new FormData(form)

 })


 .then(response => {


   status.innerHTML = "Enviado com sucesso!";

   form.reset();


 })


 .catch(error => {


   status.innerHTML = "Erro ao enviar.";


 });


});

</script>

6. Sistema Dinâmico Universal

Como adicionar novos campos

Basta criar novos inputs:

<input type="text" name="empresa">

<input type="text" name="cidade">

<input type="text" name="instagram">

E adicionar no Apps Script:

sheet.appendRow([

 e.parameter.nome,

 e.parameter.email,

 e.parameter.whatsapp,

 e.parameter.empresa,

 e.parameter.cidade,

 e.parameter.instagram,

 new Date()

]);

7. Modelo Universal Automático (RECOMENDADO)

Este modelo salva QUALQUER campo automaticamente sem precisar editar o Apps Script.

Apps Script Inteligente

function doPost(e){


 var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();


 var data = [];


 for(var key in e.parameter){

   data.push(e.parameter[key]);

 }


 data.push(new Date());


 sheet.appendRow(data);


 return ContentService

   .createTextOutput("Success")

   .setMimeType(ContentService.MimeType.TEXT);


}

8. Vantagens do Modelo Inteligente

✅ Funciona com qualquer formulário
 ✅ Não precisa editar o script toda hora
 ✅ Reutilizável
 ✅ Ideal para landing pages
 ✅ Ideal para Blogger
 ✅ Ideal para Kordoba
 ✅ Escalável
 ✅ Fácil manutenção

9. Exemplo de Formulário Avançado

<form id="formulario">


 <input type="text" name="nome" placeholder="Nome">


 <input type="email" name="email" placeholder="E-mail">


 <input type="tel" name="whatsapp" placeholder="WhatsApp">


 <input type="text" name="empresa" placeholder="Empresa">


 <select name="plano">

   <option>Plano Básico</option>

   <option>Plano Premium</option>

 </select>


 <textarea name="mensagem"></textarea>


 <button type="submit">

   Enviar

 </button>


</form>

10. Estrutura Recomendada para Todos os Projetos

/landing-page

/formulario

/google-sheet

/apps-script

11. Ideias de Uso

Você pode usar esse sistema para:

  • Captura de Leads

  • Área de Contato

  • Cadastro de Clientes

  • Solicitação de Orçamento

  • Pré-matrícula

  • Newsletter

  • Suporte

  • Briefing de Design

  • Pedido de Serviço

  • Cadastro para Cursos

  • CRM Simples

  • Banco de Leads

12. Melhorias Futuras

Você poderá adicionar:

  • Upload de arquivos

  • Login Google

  • Painel administrativo

  • Automação com Gmail

  • Envio automático para WhatsApp

  • Integração com Notion

  • Integração com Airtable

  • Banco de dados Firebase

  • Sistema de autenticação

  • Dashboard Analytics

13. Estrutura Final Recomendada

Frontend:

HTML + CSS + JS


Backend:

Google Apps Script


Banco de Dados:

Google Sheets


Documentação Edição Artes Gráficas no Aplicativo Web Canva

1. Acessando o Modelo no Canva

  1. Receba o link do modelo
    O link será enviado por e-mail, mensagem ou estará disponível em uma pasta compartilhada. Ele se parece com:

  2. text

  3. https://www.canva.com/design/ABC123XYZ/edit?utm_content=template

  4. Clique no link
    Ao clicar, você será redirecionado para o Canva. Se não tiver uma conta, será solicitado a criar uma conta gratuita ou fazer login.

  5. Verifique as permissões

    • Se o modelo for compartilhado como "Pode editar", você poderá modificar todos os elementos.

    • Se for "Pode visualizar", você só poderá ver o design, não editar.

2. Criando uma Cópia do Modelo (Recomendado)

Para não alterar o modelo original:

  1. No canto superior direito, clique em ✂️ Semenar uma cópia (ou Make a copy).

  2. Uma nova versão será criada com o nome:
    Cópia de [Nome do Design]

  3. Trabalhe nesta cópia para preservar o original.

3. Editando a Arte Gráfica

3.1 Alterando Textos

  1. Clique no texto que deseja editar.

  2. Digite o novo conteúdo na caixa de texto.

  3. Para mudar fonte, tamanho, cor ou alinhamento, use a barra de ferramentas superior:

    • Fonte: Menu suspenso de fontes

    • Tamanho: Campo numérico ou A+/A-

    • Cor: Ícone de "A" com cor

    • Negrito/Itálico/Sublinhado: Botões B, I, <u>U</u>

3.2 Substituindo Imagens

  1. Clique na imagem a ser substituída.

  2. No painel lateral esquerdo, vá em Uploads (para suas imagens) ou Elementos (para banco de imagens do Canva).

  3. Arraste a nova imagem sobre a antiga — ela substituirá automaticamente mantendo o tamanho e posição.

  4. Para ajustar: use as alças de redimensionamento nos cantos.

3.3 Mudando Cores de Fundos e Elementos

  1. Clique no elemento ou fundo que deseja alterar.

  2. Na barra superior, clique no quadrado de cor.

  3. Escolha uma cor da paleta ou insira um código HEX (ex: #FF5733).

3.4 Adicionando Novos Elementos

  1. No painel esquerdo, clique em:

    • Elementos: formas, ícones, ilustrações

    • Textos: adicionar caixas de texto

    • Uploads: suas próprias imagens/arquivos

  2. Arraste o elemento para o canvas.

  3. Ajuste tamanho, posição e cor conforme necessário.

3.5 Removendo Elementos

  1. Clique no elemento que deseja remover.

  2. Pressione a tecla Delete (Windows/Linux) ou Backspace (Mac).

  3. Ou clique com o botão direito → Excluir.

4. Salvando e EXPORTANDO a Arte

4.1 Salvamento Automático

  • O Canva salva automaticamente suas alterações em tempo real.

  • Não é necessário clicar em "Salvar".

4.2 Exportando odesign

  1. No canto superior direito, clique em Compartilhar → Baixar.

  2. Escolha o formato:

    • PNG: ideal para redes sociais, alta qualidade

    • JPG: menor tamanho, boa para web

    • PDF: para impressão ou documentos

    • MP4: se for um vídeo/animação

  3. Selecione as páginas (se houver múltiplas).

  4. Clique em Baixar.

5. Dicas Importantes

Situação

Recomendação

Preservar o original

Sempre crie uma cópia antes de editar

Identidade visual

Mantenha as cores e fontes da marca

Imagens de alta qualidade

Use imagens com mínimo 1500px no maior lado

Texto legível

Evite fontes menores que 12pt para conteúdo principal

Revisão

Sempre visualize antes de baixar (botão 👁️)

Colaboração

Use Compartilhar → copie o link com permissão "Pode editar" para colegas

6. Solução de Problemas Comuns

Problema

Solução


Problema

Solução

Link não abre

Verifique se está logado no Canva; peça um novo link se expirou

Não consigo editar

O compartilhamento é "Pode visualizar"; peça permissão de edição

Imagem fica pixelada

Use imagens de maior resolução (mínimo 1500px)

Texto não cabe

Reduza o tamanho da fonte ou encurte o texto

Cor não corresponde

Use o seletor de cor e insira o código HEX exato da marca

7. Contato para Suporte

Se enfrentar dificuldades:

  • Chat no Canva: Clique em ? Ajuda no canto inferior direito do Canva

  • Guia oficial: 

  • Ajuda do Canva