Como personalizar botão ''Leia mais'' do Blogger: Versão CSS

maio 31, 2018


Konnichiwaa fadinhas e elfos! Como vocês estão? Nesse post vou estar ensinando como personalizar o jump-link do blogger! Ou seja, direto com css, um botão profissional e não esses com imagens que vemos por aí! Tá faltando tutorial desses na internet hein! Mas enfim,vou mostrar passo a passo, e variações de personalizações que vocês podem estar colocando, e então? Let's go?




Para adicionar um ''Leia mais'' basta utilizar a quebra de linha do blogger, mostrado na imagem acima. O atual link do blogger vem com o texto ''Continue Lendo'', mas em Layout você pode alterar para o que preferir também. Agora que já viu o básico e já adicionou, bora personalizar para deixa-lo profissional?


Antes é algo super simples e pouco visível, depois da personalização de css ficou como um botão mesmo, parecido com o que uso no Sweet Magic!

HTML do nosso link


Para o personalização em css ser aplicada é necessário que tenha o html dele! Veja qual é o seu, o original do blogger é <data:post.jumpText/> , sei que muitas pessoas substituíram por imagens, caso queira reverter isso é só achar o link da imagem no seu html e substituir novamente para <data:post.jumpText/>

Agora se seu template não é um do blogger, veja nos incorporados qual é o css do seu more-link, pesquise por ele no Editar Html, e faça alterações a partir do que já tem, veja com mais detalhes nesse (post aqui).

Personalizando o link

Bem, agora vamos começar a personalizar! Vá em Tema, Editar HTML, e cole ACIMA de /b:skin cole o seguinte css:

.jump-link a {
color: white;
background: #d9d2e9;
width: 100px;
padding: 10px 20px;
display: block;
margin: auto; }

O resultado será esse aqui:


Explicando: - Você pode alterar da maneira que preferir, se tirar o margin: auto, você vai tirar a centralização e o botão vai ir para o lado direito ficando no canto.

- Se aumentar o tamanho em width, o tamanho do botão vai ficar maior, mas tem a possibilidade do texto não ficar centralizado, mas aí é só adicionar text-aline: center; dentro das chaves.

- Color, é a cor do texto, caso queira mudar coloque o nome da cor em inglês, ou adicione a # da cor que quiser, caso queira, faça o mesmo no background adicionando a cor de fundo que preferir.

Colocando Hover no botão

Bem, agora se quer um botão com hover no link, ou seja, com o mouse acima ele mudar de cor é necessário colar esse código TAMBÉM:

.jump-link a:hover {
color: #998fb1;
}

Mas June? Coloco esse aonde? Então queridos, também tinha colocado acima de /b:skin maas infelizmente não foi, observando isso recomendo adicionar como um estilo, ou seja, ABAIXO de /b:skin, podendo ser dentro de  <b:template-skin> ou <style> em alguns templates. É colar e testar onde funciona no seu!

Observações: - Da mesma maneira, modifique pela cor que preferir. Recomendo esse site para consultar: HTML Info

- Você pode adicionar também background: #cor;  e assim alterando o fundo no modo hover também, recomendo que use uma cor mais escura para dar o efeito de pressionado.

Por hoje é só! Qualquer dúvida é só perguntas nos comentários okay? O que acharam do tutorial Estamos tendo postagens de segunda à sexta então siga o bloguinho para não perder nada. Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest *  Conheça meu trabalho: JD Design e Web! Até mais, Kissus

Leia também:

2 comentários

  1. Achei bem fofo, usaria com certeza, mas acho que não combina muito com a vibe do meu layout agora. A aplicação é bem simples, então imagino que não dê problema. Parabéns pelo trabalho!

    ResponderExcluir
    Respostas
    1. Que bom que achou fofo! <3 Poxa, mesmo mudando de cor? Deixe seu blog depois aqui, adoraria visitar! É sim, obrigadaa! Kissus

      Excluir

© 2017 Sweet Magic. Re-Design: JD Design. Tecnologia do Blogger.