Personalizando Hack "Leia Mais"

Via::::Google Imagens

Trouxe um tutorial bem básico e dois jeito diferente de realiza-lo. Ele faz parte da maratona de tutoriais diarios que vou fazer. Além disso, também trago um bônus que você podem ver no final do post. Vamos?

Resultado 1&2 [+]

O primeiro modo muda só a cor de fundo e fica em hover ao passar o mouse. Aprenda a faze-lo:

1- Modelo > Editar HTML > Ctrl + F > Pesquise por ]]</b:skin> 

2- Abaixo de ]]</b:skin> cole o seguinte código:

.jump-link {
text-align:right; 
font-family:Georgia;
} 
.jump-link a{ 
color: #fff; 
padding-left:7px; 
padding-right:7px; 
background: #4488DD; 
border: 5px solid #4488DD; 
} 
.jump-link a:hover{ 
text-decoration:none; 
color: #fff; 
padding-left:7px; 
padding-right:7px; 
background: #94D341; 
border: 5px solid #94D341; 
}

Parte marcada em rosa representa o posicionamento do hack no layout (Right - direita / center -meio / left - esquerda).  
Parte mercada de vermelho é a fonte do hack ( mude  fonte a seu gosto ).
O texto marcado em azul representa a cor da fonte em estado normal. 

O texto marcado em preto representa  a cor do fundo do botão e estado normal. 

Texto marcado em Roxo representa a cor da fonte com o botão com o mouse em hover. 

A parte marcada em laranja representa o botão em estado hover.

Use nossa tabela de cores [aqui] para escolher a cor que mais lhe agrada. Copie o código html, aquele que tem esse símbolo # antes seguido por numero e/ou letras. Exemplo: #4488DD

Salve e Visualize! 

Agora vamos ao segundo modo, onde substituímos o leia mais por uma imagem. Aprenda a faze-lo: 

1- Após dar o Ctrl + F pesquise por <data:post.jumpText/>
2- Substitua esse trecho por <img src='URL DA SUA IMAGEM'/>
3- Substitua o nome URL DA SUA IMAGEM pelo link da imagem que deseja colocar

Presentes? Sim, criei algumas imagens no Photoshop de leia mais e você pode estar usando as minhas ou criando as sua próprias, fica a seu critério.

Usou? Reblogou? Se Inspirou? Credite!