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 {
Efeito Afastado
Códigos
/**==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**
}
.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
Códigos
/**==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;
}
.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
Códigos
/**==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;
}
.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
Códigos
/**==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;
}
.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~
Adorei!Super criativo e original!
ResponderExcluirwww.strawber-ryland.blogspot.com.br
Obrigada *---*
Excluiramei
ResponderExcluirhttp://fernandaxdea.blogspot.com.br/
Obrigada Feh *-*
ResponderExcluirNão sabia dessa! Amei!
ResponderExcluirCreative Things
Hihi que bom *3*
Excluir