17/10/2014

Tutorial: Aplicando efeito em link dos comentários

||


Boa noite bunnies, como vão nessa bela noite? A minha vai meio embaralhada como novelo de gators, desde ontem estou preparando alguns layouts free's atrasados e os pedidos de postagens desses longos 5 meses.  Vou tentar postar tudo ate o inicio do próximo mês, será que dou conta? Tomara que sim, né? Também comecei a preparar o novo layout do BC, será bem simples pois não quero nada muito chamativo, a pois aquele layout vermelho que utilizei por longoooo tempo que na verdade ficaria ate a minha volta, mas minha amiga Roh me ajudou dando uma nova cara para o blog esse tempo que estive fora. Então não reparem se o próximo layout for biscoito de maisena, fiquei um pouco enjoada de coisas muito chamativas... 

Amanha é aniversario do blog e não tenho a minima ideia do que fazer de legal para vocês. Queria fazer um sorteio, então estou pensando em adiar um pouco comemorações ate o próximo mês, para pensar em que sortear....um livro, CD, domínio...não sei, por isso pensarei mais um pouco. Bom hoje trago uma postagem bem curta e rápida, um pedido da Ask. Irei mostrar como fazer efeitos nos links dos comentários, assim como está no layout free TMT. O código para efeito nos comentários é feito por mim, mas alguns efeitos de link encontrei lá no bibokices.

Esse código só vai funcionar se tiver uma área propicia para o código, resumindo parte dos links. Geralmente os layouts padrão do Blogger vem com essa parte no automático, sem código para modificações. Mas vamos colocar tudo junto tanto a área quando o efeito, vamos lá? Primeiro procure pela área desejada: #comments {

Agora vá ate o dos comentários e quando fechar o código com } cole esse código (também pode colocar acima de (b:skin):


Efeito Afastado

/**==Cor dos links ==**/
.comments .comments-content .comment-content a:link {
color: #96c8c0; /* Cor do link*/
text-decoration: none;
letter-spacing:2px;  **espaço entre as letras**
-webkit-transition-duration: .50s;  **tempo que demora a desaparecer o efeito**
}
.comments .comments-content .comment-content a:visited {
color: #5a5a5a; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
-webkit-transition-duration: .50s;  **tempo que demora a desaparecer o efeito**
}
.comments .comments-content .comment-content a:hover {
color:#ffffff; **cor hover**
text-decoration: none;
letter-spacing:4px;  **espaço entre as letras**
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
-webkit-transition-duration: .50s;  **tempo que demora a desaparecer o efeito**
}


Efeito 3D

/**==Cor dos links ==**/
.comments .comments-content .comment-content a:link {
 text-shadow: 1px 1px #D0A9F5, 2px 2px #D0A9F5, 3px 3px #D0A9F5;
-webkit-transition: all 0.12s ease-out;
-moz-transition:    all 0.12s ease-out;
-ms-transition:     all 0.12s ease-out;
-o-transition:      all 0.12s ease-out;
}
.comments .comments-content .comment-content a:visited {
text-shadow: 1px 1px #D0A9F5, 2px 2px #D0A9F5, 3px 3px #D0A9F5;
-webkit-transition: all 0.12s ease-out;
-moz-transition:    all 0.12s ease-out;
-ms-transition:     all 0.12s ease-out;
-o-transition:      all 0.12s ease-out;
}
.comments .comments-content .comment-content a:hover {
position: relative;
top: -3px;
left: -3px;
text-shadow: 1px 1px #F781F3, 2px 2px #F781F3, 3px 3px #F781F3, 4px 4px #F781F3, 5px 5px #F781F3, 6px 6px #F781F3;
}


Efeito Glow

/**==Cor dos links ==**/
.comments .comments-content .comment-content a:link {
color: #66c678;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.comments .comments-content .comment-content a:visited {
color: #66c678;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.comments .comments-content .comment-content a:hover {
color: #66c678;
text-shadow: 0px 0px 12px #66c678; 5px 5px #31793e, 6px 6px #31793e;
}


Efeito Bottom

/**==Cor dos links ==**/
.comments .comments-content .comment-content a:link {
color: #5a5a5a; /* Cor do link*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
.comments .comments-content .comment-content a:visited {
color: #5a5a5a; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
.comments .comments-content .comment-content a:hover {
color: #fff; /*Cor do link quando passa o mouse*/
text-decoration:none;
position: relative;
top: -3px;
left: 3px;
text-shadow: 1px 1px #a7a7a7,2px 2px #a7a7a7,3px 3px #a7a7a7,4px 4px #a7a7a7,5px 5px #a7a7a7,6px 6px #a7a7a7;
}


Bom é isso espero que tenham gostado fofuchos! Até aproxima meus lindos. XoXo~

6 comentários:

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram