Como adicionar Botão personalizado nas suas Postagens - IGNIPLEX

Neste post, vou te mostrar como adicionar um botão personalizado ao seu blog no Blogger sem a necessidade de entender HTML e CSS. Tudo já está pronto para você, tornando o processo simples e sem complicações. Com apenas alguns passos, você poderá adicionar um botão personalizado às suas postagens e direcionar seus leitores para ações específicas de forma rápida e fácil. Vamos começar!

1. Acesse a página inicial do Blogger e faça login na sua conta, selecione o blog no qual deseja adicionar o botão personalizado, no painel de controle do seu blog, clique em "Tema" ou "Layout", dependendo da versão do Blogger que você está usando, e clica na setinha.

2. Na próxima página, você verá uma prévia do seu tema atual. Procure a opção "Editar HTML" ou "Editar código" e clique nela.

3. Agora você estará na página de edição de código do seu tema, pressione as teclas "Ctrl + F" e escreva na barra de busca a tag: </head>

 e cole antes desta tag </head> este código:

	.btn {
      height: 2.8em;
      width: 9em;
      background: transparent;
      -webkit-animation: jello-horizontal 0.9s both;
      animation: jello-horizontal 0.9s both;
      border: 2px solid #016DD9;
      outline: none;
      color: #016DD9;
      font-size: 17px;
      text-decoration: none; /* Remova a decoração padrão dos links */
    }
    .btn a{
	text-decoration: none; /* Remova a decoração padrão dos links */
	}
    .btn:hover a{
		color: #fff;
	}
    .btn:hover {
      background: #016DD9;
      
      animation: squeeze3124 0.9s both;
    }
    @keyframes squeeze3124 {
      0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
      30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
      }
      40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
      }
      50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
      }
      65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
      }
      75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
      }
      100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
  

4. Salve as alterações, e vá até a postagem que deseja adicionar o botão e muda a vista para "Visualização em HTML"

5. Pressione as teclas "Ctrl + F" e escreva na barra de busca o texto do link que quer transformar em botão, isso vai lhe ajudar a localizar mais rápido o seu link.

6. Por ultimo é só adicionar a classe (class='btn') dentro do link, mas deve ser depois da letra 'a' e antes do 'href', e salve as alterações.

Se não funcionar, substitua (<a href='seulink.com'></a>) pelo seguinte código: 

  	<button class="btn"><a href="#">BOTAO</a></button>
 

PS: Onde tem o # você teve remover e adicionar o seu link, mas mantendo as aspas.

Se houver alguma dificuldade, por favor, deixe aqui nos comentários, eu vou responder o mais rápido que poder. Muito obrigado e boa sorte.

Por que é importante ter um botão personalizado no site?

Ter um botão personalizado no site é importante porque permite aos proprietários de sites direcionar a atenção dos usuários para ações específicas que desejam que sejam tomadas. Esses botões personalizados podem ser projetados para se destacar visualmente e atrair a atenção do usuário, aumentando as chances de conversão, seja ela uma venda, um cadastro ou qualquer outra ação desejada.

Como um botão personalizado pode melhorar a experiência do usuário em um site?

Um botão personalizado pode melhorar a experiência do usuário em um site de várias maneiras. Ele pode ser projetado de forma a proporcionar uma aparência atraente e profissional, o que cria uma sensação de confiança e profissionalismo. Além disso, um botão personalizado pode ser posicionado estrategicamente para facilitar a interação do usuário com o site, tornando mais fácil para eles encontrar e executar as ações desejadas. Isso melhora a usabilidade e a navegabilidade geral do site.

Como um botão personalizado pode ajudar a aumentar as taxas de conversão?

Um botão personalizado pode aumentar as taxas de conversão ao direcionar a atenção do usuário para a ação desejada. Ao destacar visualmente o botão, tornando-o atraente e facilmente identificável, as chances de um usuário clicar e prosseguir com a ação desejada aumentam. Além disso, um botão personalizado pode transmitir uma sensação de urgência ou oferecer um incentivo adicional, como um desconto exclusivo, o que pode motivar ainda mais os usuários a agir.

Qual é o impacto de um botão personalizado no branding de um site?

Um botão personalizado pode ter um impacto significativo no branding de um site. Ao projetar um botão que esteja alinhado com a identidade visual da marca, como a escolha de cores, tipografia e elementos gráficos consistentes, o botão se torna um elemento reconhecível e associado à marca. Isso reforça a coesão visual do site e contribui para uma experiência de marca consistente. Além disso, um botão personalizado bem projetado pode transmitir uma imagem profissional e de qualidade, melhorando a percepção geral da marca pelos usuários.

Related Posts