terça-feira, 29 de setembro de 2015

Personalize o Hack "Leia Mais" de seu blog

Nesta postagem, mostrarei como personalizar o Hack "Leia Mais" do Blogger com a cor que preferir, de forma simples e direta. O botão "Leia Mais" (ou qualquer título que desejar) é responsável pelo amplo engajamento dos leitores com as postagens de seu blog/site. No Blogger, essa opção é denominada "Expansão de Postagem", ou JumpLink (em inglês).



 1. Para ativar essa opção, basta clicar no ícone de expansão, com isso aparecerá uma linha cinza parcialmente pontilhada, ativando o recurso para que o leitor desperte curiosidade e visite a postagem completa:

Imagem exibindo a ativação do Hack "Leia Mais".

2. Vá em Blogger Modelo → Editar HTML e procure pelo código "]]></b:skin>":


Localize o trecho solicitado.
3. Logo ACIMA do código encontrado, coloque este seguinte trecho em CSS:
.jump-link
{
float:right;
}
.jump-link a { background: #133783;
color: #ffffff; 
padding: 5px;
border-radius: 5px;}

.jump-link a:hover { background: #54ABEC;
color: #ffffff;
text-decoration: none;}
}

4. Ficando assim deste jeito:

Colocando o trecho CSS logo acima do trecho solicitado.
5. No CSS, a parte destacada em vermelho se refere à cor do Hack antes de passar o mouse, já a parte destacada em roxo é o efeito do Hack ao passar o mouse. Altere com as cores que desejar. Clique em "Salvar modelo".

6. Seu Hack está personalizado. Lembre-se de que você poderá alterar as cores do efeito. conferindo o passo 5:

Resultado do Hack "Leia Mais" personalizado.
 Nesta postagem, ficamos por dentro das funcionalidades do incrível Hack "Leia Mais". Siga os passos corretamente e personalize o botão ao seu gosto!

Bruno Bezerra

Bruno Bezerra é blogueiro e estudante. Mantém como foco principal a plataforma Blogger, no qual começou a realizar seus projetos. Gosta de mexer com HTML e CSS.
comments powered by Disqus

 

Copyright @ 2011-2015 Fique Sabendo!.