Personalize the "Read More" button

Hello Darlings!

Today I'm going to show you how to personalize the "Read More" button!


The basics you already know, you're a nivel 2 student now.

Learn how to do a fixed navigation bar, how to use your favorite font on your blog, and how to modify your sidebar's title by clicking on the links.

Let's get started!
Hello Darlings!

Hoje vou-vos mostrar como personalizar o vosso botão "Ler mais".

Eu já vos dei bases de html e css, já vos posso dizer que estão neste momento no nível 2 de aprendizagem.
Aprende a colocar uma barra de navegação fixa, a usar o teu tipo de letra preferido no teu blog e a modificar o título da tua sidebar, só precisas de clicar nos links.

Let's get started!
First things first. You need to learn how to put the read more button, if you don't know it already.

When you wish to divide your blog just click on that button and keep writing, extremely easy, right?

You can also change the words, instead of "Read More" you can change it to "See More" or anything you wish.

Just go to the "Layout" page, on the little box called "Blog Posts" click on edit. And when it says "Post page link text:" write whatever you want!
Primeiramente, o que tens de aprender é a colocar o botão "ler mais", se é que já não sabes.

Quando quiseres dividir o teu blog clica naquele botão e continua a escrever, super fácil, certo?

Também podes mudar as palavras, em vez de "Ler mais" podes colocar "Read more" ou qualquer coisa que prefiras.
Só precisas de ir à página "Esquema". Na caixinha que diz "Blog Posts" clica no botão "Editar" e onde diz "Texto do link da Página de mensagens:" escreve o que desejares!

How to add the "Read More" button

How to change the words

To add CSS go to TEMPLATE page, click on EDIT HTML.
Search for and click on the triangle next to it, and put this css code before

If you want to change it to you favorite font see how in the previous online class.
Para adicionar o CSS vai à página MODELO, clica em Editar HTML.
Procura por e clica no triângulo que se encontra ao lado, e coloca o código css antes de .
Se quiseres mudar para o teu tipo de letra favorito vê como na aula anterior.

Using color
Using a background
Using an image
Search for:
Where it says:
Replace it for:
Just replace the link of the image for your own.
And here you go. If you want rounded corners you can use the code we've used last online class.

Leave more online classes ideas in the comments, I would love to help.
E aqui está. Se quiseres usar também cantos arredondados podes usar o código que utilizamos na aula anterior.

Deixem as vossas ideias para novas aulas nos comentários, eu adoraria ajudar-vos.
More Examples

7 Comments

  1. Outro tutorial fantástico :)
    Beijinhos
    www.walldrawingss.blogspot.pt

    ResponderEliminar
  2. És uma querida Maria! <3 Andava à imenso tempo à procura dum tutorial acerca deste assunto e os teus são definitivamente os melhores tutorias! Muito obrigada :D
    beijinhos
    thefancycats.blogspot.com | GIVEAWAY

    ResponderEliminar
  3. Obrigada pelo tutorial!
    Tenho um problema, é que não estou a encontrar o , ja tentei com F3 e procurar já andei lá de olho bem aberto, mas não há sinais dele.. Podes ajudar-me?
    Beijinhos, Sara ♥

    ResponderEliminar
  4. tou a tomar notas pra quando tratar do meu ^^

    ResponderEliminar
  5. Podias ensinar como arredondar as fotografias das pessoas que comentam o teu poste como tens no teu blog, ou a personalizar o número de comentários nesse coração ou outra forma qualquer por exemplo! Seria óptimo de se aprender!
    Beijinhos
    www.walldrawingss.blogspot.pt

    ResponderEliminar
  6. Olá Maria!
    Sabes-me dizer como mudar a fonte do Read More? Obrigada! Excelente tutorial, as always :)

    http://chairleader.blogspot.pt/

    ResponderEliminar

Follow Me On Instagram