Uma calculadora no meio de um post faz duas coisas que texto sozinho não faz: responde a dúvida com o número da pessoa e dá um motivo para ela voltar. O problema é que a maioria dos blogs coloca a calculadora no lugar errado, no fim, onde quase ninguém chega. Esta guia trata da escolha e do posicionamento, que é onde está a diferença.
Resposta rápida
- Escolha a calculadora pela pauta do post, não pelo tema do blog.
- Coloque logo depois do parágrafo que cria a dúvida, nunca no fim.
- Uma por post. Duas dividem a atenção e nenhuma é usada.
- O iframe é lazy: quem não rola até ele não paga nada em velocidade.
A regra do parágrafo anterior
Todo post útil tem um momento em que o leitor para e pensa quanto seria no caso dele. Esse momento é sempre logo depois de uma explicação concreta, e é ali que a calculadora entra. Um texto sobre férias cria essa dúvida no parágrafo que explica o terço constitucional; um texto sobre financiamento cria no parágrafo que compara SAC e Price.
Colocar a calculadora antes desse momento não funciona, porque o leitor ainda não sabe o que preencher. Colocar depois do fim é pior: as métricas de leitura de blog mostram que a maior parte do público abandona antes da metade, então uma ferramenta no rodapé é vista por poucos. O lugar certo é o parágrafo seguinte à dúvida.
Escolher pela pauta, não pelo nicho
Blogueiro tende a procurar a calculadora do nicho dele e colar a mesma em todo post. Isso derruba o uso, porque a calculadora fica descolada do assunto do texto. A escolha certa é por post. Alguns pares que costumam funcionar:
| Assunto do post | Calculadora que encaixa |
|---|---|
| Como funciona a rescisão sem justa causa | Rescisão CLT |
| Vale a pena começar a investir com pouco | Juros compostos |
| Álcool ou gasolina no seu carro | Consumo de combustível |
| O que é IMC e o que ele não diz | IMC |
| Quanto custa uma viagem de carro | Custo de viagem |
Escolha o tema que combina com o seu blog
Claro ou escuro, cor de destaque e largura. O código já sai com a sua escolha embutida.
Calculadora de IMC
Pré-visualização
Código para incorporar
Blog em WordPress, Blogger, Ghost e Medium
O código é o mesmo; muda o nome do campo. No WordPress é o bloco de HTML personalizado. No Blogger, troque de Modo de exibição para Visualização de HTML e cole por último, porque voltar ao modo visual reformata a marcação. No Ghost, digite barra e escolha o cartão de HTML. No Medium não funciona: a plataforma não aceita HTML de terceiro, e o caminho ali é linkar a calculadora.
Se o seu blog usa Elementor por cima do WordPress, use o widget chamado HTML, não o de Texto: o de Texto limpa parte das tags e o iframe some ao salvar. O passo a passo com as onze plataformas está em como colocar calculadora no site.
O efeito no desempenho, em números
O que você cola são duas tags e um script curto. O iframe não é buscado até chegar perto da tela, então ele não entra no carregamento inicial nem no LCP do post. A única precaução real é manter a altura declarada no código: iframe sem altura definida faz o texto abaixo dele pular quando o conteúdo carrega, e esse pulo é exatamente o que a métrica de CLS mede.
Onde continuar
Esta guia faz parte da família de calculadoras para site. A página principal reúne o catálogo inteiro, o passo a passo de instalação em onze plataformas e a comparação com construtor pago e plugin.
- Calculadora para WordPress: Bloco de HTML, plugin oficial ou plugin de terceiro: qual escolher.
- Calculadora para landing page: A calculadora como argumento de venda, sem quebrar a conversão.
- Como colocar calculadora no site: O passo a passo em onze plataformas, com o que fazer quando não aparece.
Se o que você quer é dado que se atualiza sozinho (cotação, índice, resultado de loteria, tabela do Brasileirão) e não uma calculadora, o lugar é o catálogo de widgets gratuitos, e a lista comentada está em widgets grátis para site. Para WordPress, o plugin oficial fica em /embed/wordpress.
Fontes e referências
- web.dev: Cumulative Layout Shift: por que o iframe precisa de altura declarada.
- MDN Web Docs: elemento iframe: isolamento de contexto e atributo de carregamento adiado.
- Google Search Central: experiência na página: o que o buscador considera ao avaliar conteúdo com recurso incorporado.