TUTORIAL: PERSONALIZAR "LER MAIS"

Oioi gente! Finalmente fim-de-semana... As aulas começaram apenas ontem mas já estava farto delas! Quer dizer, qual de nós não se farta de estar um minuto, ou melhor, um segunde na escola? TODOS, logo vi! Mas agora que estamos de fim-de-semana já tenho algum tempinho extra para criar alguns conteúdos para o blog. Sendo assim hoje venho com um novo tutorial onde vos ensino a como personalizar o link LER MAIS. Vamos lá?

É tudo extremamente simples. Dividi esta postagem em dois pontos: um em que vos ensino a como alterar o texto do link, isto é, alterar o segmento de texto que aparece; e outro em que vos ensino a personalizar esse mesmo link, nomeadamente atribuir um fundo ao mesmo.

ALTERAR O TEXTO

Caso não queiram o típico texto que aparece e que já esta configurado pela Blogger, deverão ir até ao esquema do vosso blog, e, de seguida, cliquem em editar, algo que deverá aparecer na área das postagens/mensagens. Por fim, deverão encontrar uma nova janela onde se encontram algumas "características" das vossas mensagem. Procurem pelo segmento (que deverá estar na segunda linha de todas as características) correspondente ao link que permite de certa forma dividir as mensagens e alterem-o para o texto que querem. 

PERSONALIZAR LINK

Para atribuírem algumas características especiais ao vosso link, procurem no modelo (em HTML), com a ajuda do CTRL + F, o código ]]></b:skin>. De seguida, abaixo dele, colem o seguinte código e editem-o de acordo com o que procuram.

.jump-link {

float: right; /*para alinhar o seu link aa direita (right) ou aa esquerda (left) */

line-height: 18px; /*altura da linha entre o texto */

background: url('URL DA IMAGEM PARA O FUNDO') no-repeat;

width: 100px; /*largura da imagem */

height: 50px;/*altura da imagem */

margin-right: 10px; /*distancia entre o link e a direita (valores positivos deslocam para a esquerda e negativos para a direita) */

margin-bottom: 10px; /*distancia entre o link e a parte interior inferior (valores positivos sobem e negativos descem) */

padding-left: 0px; /*ajustar o texto ao fundo relativamente aa esquerda */

padding-right: 0px; /*ajustar o texto ao fundo relativamente aa direita */

padding-top: 0px; /*ajustar o texto ao fundo relativamente aa parte superior */

padding-bottom: 0px; /*ajustar o texto ao fundo relativamente aa parte inferior */

}

.jump-link a {

font-family: Arial; /* tipo de letra /*

font-size: 14px; /* tamanho do texto /*

font-weight: normal;

color: #ffffff; /* cor do texto */

}

.jump-link a:hover {

color: #ffffff; /* cor do texto */

text-decoration: none;

}

No caso de não quererem usar uma imagem como fundo mas sim uma cor, eliminem o seguinte segmento:

background: url('URL DA IMAGEM PARA O FUNDO') no-repeat;

width: 100px; /*largura da imagem */

height: 50px;/*altura da imagem */

E substituem-o por:

background: #000000 */ cor do fundo*/ 

E pronto, chegamos ao final de mais um tutorial! Amanhã regresso com mais postagem, talvez um pouco diferente do que vocês estão habituados. Espero que estejam a gostar do meu trabalho porque eu estou mesmo a adorar escrever aqui para o blog. Até amanhã! Beijos e abraços! :D