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

Leia também:

3 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
  2. Olá, no meu não aparece essa linha. Já tentei traduzir ou alterar e até colocar imagem por cima, mas não consigo. Parece que o "leia mais" está no script externo, algo assim. Queria somente traduzir, mas se eu pudesse por uma imagem de leia mais por cima também serve. Tem alguma postagem assim? Eu procurei, mas não achei. Posso ter procurado errado. Por favor e obrigada desde já! (Não é meu tema atual, ainda estou editando em um blog teste).

    ResponderExcluir