Botão 1 - IGNIPLEX

Neste post, iremos explorar passo a passo como incluir um botão personalizado em suas postagens, permitindo que você aumente a interatividade e atraia ainda mais a atenção dos seus leitores. 

+ Adicionar

Para adicionar botão ao nas suas postagens, siga estas etapas:

1. Acesse o painel de controle do Blogger e faça login na sua conta.


2. Selecione o blog que você deseja editar, caso possua mais de um.


3. No painel lateral esquerdo, clique em "Tema".


4. Na guia "Modelo ou Tema", terá um botão e ao lado um cetinha, clique na seta e esolha "Editar HTML".


5. Antes de fazer qualquer alteração, é altamente recomendável fazer backup do seu modelo atual. Para fazer isso, clique na seta e escolhe "Fazer backup/Restaurar".


6. No código HTML do seu modelo, role até encontrar a tag </head>.


7. Logo acima da tag </head>, adicione o seguinte código css:

  
	<style> 
        .botao1 {
                display: flex !important;
                padding: 0.7em;
                margin: 0 auto;
                width: 150px;
                border: 2px solid #24b4fb;
                background-color: #24b4fb;
                border-radius: 0.9em;
                color: #fff;
                font-weight: 600;
                transition: all ease-in-out 0.2s;
                justify-content: center;
                align-items: center;
         }

        .botao1:hover {
            background-color: #0071e2;
        }
	</style>
 

Depois de colar o código, salve.

Agora vamos adicionar o botão na sua postagem:

1. No painel lateral esquerdo, clique em "Postagens" e escolha a postagem em que você deseja adicionar o botão.


2. Muda a vista da sua postagem para HTML, clicando no lápis no canto superior esquerdo da postagem e esolha "Visualização em HTM"


3. No editor de postagem, localize o link ao qual você deseja transformar em botão.Se tiver dificuldades para localizar o link, preciona as teclas "CTRL + f" e escxreva o a palavra que esta no seu link, como "Download" se for o seu caso.


4. Localize o código HTML do link e adicione o atributo class a ele antes da letra "a", o HTML do link estaá mais ou menos assim: <a href='seulink.com'>Download</a>. E deves adicionar a class (class='btn1') como no exemplo abaixo exemplo:

  	
  	<a class='botao1'><span>+</span> Adicionar</a>
 

Para adicionar isso em uma outra postagem ou link, é só adicionar a class (class='botao1'>) no link que deseja transformar em botão, nao precisará repor novamento o css por cima da sua </head>.

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.

Related Posts