Personalize o botão Leia mais no seu blog

[vrneuman]

Alterar a aparência do botão Leia mais na página de listagem do blog pode ser muito útil se quiser que esse botão se destaque. Saiba como personalizar o design  do botão ou editar o texto Leia mais .

Personalize a aparência do botão Leia mais

Para personalizar a aparência do seu botão Leia mais, crie uma classe CSS que manterá o estilo do botão. Adicione essa classe e qualquer estilo personalizado em sua folha de estilo. Veja alguns exemplos de estilos:

.read-more-btn{
background: blue;
border-radius: 10px;
color: white;
}

Para adicionar uma classe personalizada ao botão Leia mais:

• Acesse o modelo do seu blog.
• Clique no módulo de conteúdo do blog para selecioná-lo no inspetor e, na seção Modelos de post, clique em Editar modelo de listagem para acessar a página de listagem HTML.

• Localize o seguinte código no modelo de listagem HTML:

<a class="more-link" href="{{content.absolute_url}}">Leia mais</a

• Substitua a classe more-link pela sua nova classe read-more-btn. O código deve ser semelhante a este:

<a class="read-more-btn" href="{{content.absolute_url}}">Leia mais</a>

• Clique em Publicar alterações.

Edite o texto do botão Leia mais

Na página de listagem do seu blog, você verá uma visualização de cada post com um link Leia mais que abre o post completo. Para alterar o texto Leia mais para outro idioma ou frase, você precisará editar o modelo do seu blog.

• Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
• No finder, clique no nome do modelo de blog.
• No modelo, clique no módulo de conteúdo do blog . No inspetor, na guia Editar, clique em Editar modelo de listagem.

• Procure o seguinte código próximo da linha 55:
  
  

   <a class="more-link" href="{{ content.absolute_url }}">Leia mais</a>

• Edite Leia mais para personalizar esse texto em cada visualização de post na página de listagem do blog.
• Clique em Publicar alterações.

[PamCotton]

Obrigada por compartilhar @vrneuman !!