Botão 1
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:
- Acesse o painel de controle do Blogger e faça login na sua conta.
- Selecione o blog que você deseja editar, caso possua mais de um.
- No painel lateral esquerdo, clique em "Tema".
- Na guia "Modelo ou Tema", terá um botão e ao lado um cetinha, clique na seta e esolha "Editar HTML".
- 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".
- No código HTML do seu modelo, role até encontrar a tag </head>.
- 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:
- No painel lateral esquerdo, clique em "Postagens" e escolha a postagem em que você deseja adicionar o botão.
- Muda a vista da sua postagem para HTML, clicando no lápis no canto superior esquerdo da postagem e esolha "Visualização em HTM"
- 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.
- 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.
post section Don't remove this section, otherwise theme will crash.
Rate this article
Getting Info...
Postar um comentário