Personalizar o design do seu blog

Na barra lateral esquerda, clique em Design para começar a personalizar a aparência e o estilo do seu blog.

Na barra lateral esquerda, clique em Design para começar a personalizar a aparência e o estilo do seu blog.

Logotipo
- Faça o upload do seu logotipo e defina uma URL de destino para os cliques no logotipo.
- Tamanho recomendado: 250×150 ou 400×200
Botão do cabeçalho
- Escolha entre dois tipos de botão:
  - Subscribe Form
    - "Exibe um formulário de captura de leads quando o botão é clicado."
    - O conteúdo e as configurações do formulário podem ser configurados na aba Form.
  - Ir para o link informado
    - Vincule o botão a qualquer URL interna/externa.
Navigation Bar
- Primary Navigation
  - Defina uma barra de menu estática no topo do seu blog.
- Dropdown Menu
  - Configure os itens do menu suspenso que aparecem quando um item de menu é clicado.
Custom Code
- Você também pode injetar CSS ou HTML personalizado para corresponder totalmente às diretrizes de marca do seu site.

Blog Title & Description
- Personalize o texto do título e da descrição exibidos na página inicial do seu blog.
Cor do texto
- Defina a cor do texto do seu banner.
Banner Layout
- Escolha o alinhamento do texto: Left-aligned ou Center-aligned.
Background (Color or Image)
- Personalize o plano de fundo do banner:
  - Defina uma cor sólida de plano de fundo
  - Ou faça o upload de uma imagem de plano de fundo
    - Tamanhos recomendados: 1680×450 para desktop / 390×300 para mobile
Custom Code
- Você também pode injetar CSS ou HTML personalizado para corresponder totalmente às diretrizes de marca do seu site.

Layout

O inblog oferece três layouts de post padrão para você escolher.
Você também pode aplicar personalização visual adicional por meio de código personalizado.
- Custom Code: Use HTML/CSS para layouts totalmente sob medida.

Adicione as informações da sua empresa à seção do rodapé.
Como em outras áreas, o rodapé também pode ser personalizado com código.

Inserir e salvar código personalizado

Se os campos de código não estiverem visíveis ou não puderem ser editados, verifique primeiro o plano do seu blog. As configurações de código personalizado ficam bloqueadas no plano Free. Se o código personalizado estiver disponível para o seu blog, abra Design → Comum e ative o botão de alternância Cabeçalho personalizado, Código personalizado do banner ou Código personalizado do rodapé para a área que deseja alterar. Com o botão desativado, a página exibe uma mensagem Switch ON to insert custom ... code. em vez do editor. Para o layout da lista de posts, ative a respectiva configuração de código personalizado na seção Layout.

As áreas de Custom Code sob Header, Banner, Layout e Footer utilizam o mesmo editor. Ele possui uma caixa de HTML na parte superior e uma caixa de CSS de estilo abaixo. Insira regras CSS diretamente ou envolva-as em tags <style>, conforme mostrado abaixo. Regras CSS novas ou editadas são envolvidas automaticamente em tags <style> quando você aplica o código.

<style>
  h2 {
    font-size: 20px;
  }
</style>

O CSS salvo e não modificado é preservado. Editar outras configurações ou apenas o HTML não converte o CSS existente. Para ativar o CSS salvo anteriormente sem tags, revise-o e envolva-o explicitamente em tags <style>. Verifique o design na pré-visualização antes de salvar. Regras CSS ou blocos <style> incompletos, além de nomes predefinidos como cover, geram um erro em texto vermelho. Não adicione HTML ou scripts ao campo de CSS. Se um campo existente já os contiver, você poderá editar seu conteúdo CSS mantendo os outros códigos, atributos de estilo e a ordem inalterados.

Seu código é aplicado ao blog somente após ambas as etapas seguintes:

Clique em Aplicar código. O código é validado e refletido na pré-visualização dentro do editor. Ele ainda não está salvo.
Clique em Salvar, fixado no topo do painel de configurações. Somente após esta etapa a alteração entra em vigor no seu blog.

Se você clicar em Aplicar código e depois sair da tela Design sem salvar, suas alterações serão perdidas. Uma caixa de diálogo de confirmação será exibida ao tentar sair com alterações não salvas.

O código personalizado é armazenado por tela e por área. As abas Comum, Início / Categoria, Post, Autor e 404 no topo da tela Design mantêm, cada uma, seu próprio código, e dentro de Comum o Header, o Banner e o Footer também são caixas separadas. Insira seu código na aba referente à tela que você deseja alterar — por exemplo, ajuste o espaçamento do corpo de um post na aba Post.
Seletores CSS amplos, como a ou button, podem afetar todo o seu blog. O editor exibirá um aviso nesse caso — restrinja o escopo do seletor se desejar que a regra se aplique a apenas uma área.

Página de erro 404

Você pode configurar uma página de erro 404 personalizada para quando um usuário acessar uma URL inexistente.

Suporte a pré-visualização móvel

"O design do seu blog é totalmente responsivo." Pré-visualize como o seu blog aparece nas visualizações desktop e mobile diretamente no editor.

Última atualização em 2026-10-14

AnteriorVisão geral das configurações do blog PróximoGerenciando membros da equipe