Yoo~
Pessoal, quero agradecer a mais 2 pessoas que estão seguindo meu blog! Obrigada, mesmo! Vejo que ele está evoluindo bastante e aos poucos!!! hahahaha '
Bom, vamos ao que interessa! Trago a vocês sobre como personalizar o link leia mais com efeito hover! Mas antes, creditarei o tutorial que vem do blog Place Style, mas os códigos são desses dois blogs: Go Imagine e Sweet Cherry.
Ficará assim:
Entre em modelo HTML do seu blog, e procure pelo seguinte código: ]]></b:skin>
Cole logo acima, o seguinte código:
.jump-link{
float: right; /* no lado direito ou esquerdo, pode mudar para left */
background-color: #FF80FF; /* cor do fundo */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento emcima */
font-size: 10pt; /* tamanho da fonte */
color: #000000; /* cor da fonte */
text-align: center; /* alinhamento do texto */
width: 100px; /* largura do fundo */
opacity: 0.7; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração da volta do hover */
border-radius: 20px;
}
.jump-link:hover{
background-color: #CFD9F6; /* cor do fundo com o mouse em cima */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento em cima */
color: #000000; /* cor da fonte */
width: 100px; /*largura do fundo com o mouse em cima */
opacity: 1.0; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração do hover */
text-decoration: none; /* sem sublinhado, negrito, itálico ou tachado */
}
-----------------------------------------------------------------------------------------------------------------------
Depois, faça as alterações necessárias, se quiser, e salve!
Bem prático não é? Fica bem bonitinho!!! hihihih =)
Ficará assim:
Imagem do blog: Go Imagine
Vamos lá?!
Entre em modelo HTML do seu blog, e procure pelo seguinte código: ]]></b:skin>
Cole logo acima, o seguinte código:
.jump-link{
float: right; /* no lado direito ou esquerdo, pode mudar para left */
background-color: #FF80FF; /* cor do fundo */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento emcima */
font-size: 10pt; /* tamanho da fonte */
color: #000000; /* cor da fonte */
text-align: center; /* alinhamento do texto */
width: 100px; /* largura do fundo */
opacity: 0.7; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração da volta do hover */
border-radius: 20px;
}
.jump-link:hover{
background-color: #CFD9F6; /* cor do fundo com o mouse em cima */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento em cima */
color: #000000; /* cor da fonte */
width: 100px; /*largura do fundo com o mouse em cima */
opacity: 1.0; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração do hover */
text-decoration: none; /* sem sublinhado, negrito, itálico ou tachado */
}
-----------------------------------------------------------------------------------------------------------------------
Depois, faça as alterações necessárias, se quiser, e salve!
Bem prático não é? Fica bem bonitinho!!! hihihih =)
Bye bye
Nenhum comentário:
Postar um comentário
Heey!! Se quiserem deixar o seu comentário, leia PLEASE aqui embaixo:
*Não xingue ninguém aqui! Seja educada(o)!
* Dúvidas, elogios e críticas são sempre bem-vindas!
* Leia toda a postagem, pois sempre faço com muito esforço e carinho pra vocês!
*Vou até o perfil de vocês para visitar e talvez até seguir o seu blog!
Obrigada por comentar!
Volte Sempre!