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

Konnichiwaa fadinhas e elfos! Como vocês estão? Nesse post vou estar ensinando como personalizar o leia mais 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 quiser que fique do lado esquerdo, adicione -rigth ao lado, assim: margin-rogth: auto

- 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.

- JUUUUUUUUNE, O MEU NÃO FOI! Tente colar o código dentro de <style> ou <b:template-skin> , salve e ver se foi.

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; background: #fff; }

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ê deixar 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.

Como editar o Botão leia mais do Wordpress?

Bem, notei que não tem tutorial direito sobre o Wordpress também. Só para te ajudar:
É quase a mesma coisa, só que invés de jum-link a {}, no seu é .more-link {}, só usar o mesmo tutorial, só trocar o nome e claro, adicionar no CSS adicional. Qualquer coisa faço um post mais detalhado, mas basicamente é isso! (atualização 11/2018)

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