24/11/2016

Tutorial: Links transparente (endereço)

||

Ohayooo bunnie's! Como estão vocês hoje? Venho trazer um tutorial para personalizar links em geral do blog, mas para a explicação vou usar na sidebar. O efeito deixa os links ou um link semi-transparente. Fica muito bonito dependendo de onde for colocar,  espero que gostem do tutorial! Os créditos vão para o blog Chá com Anjos, enfim é isso. 

Aplicando transparência em links na sidebar: 

1) Vá no HTML do seu blog, aperte CTRL+F e procure por ]]></b:skin>, acima dele cole:
.transparente a {
font-size: Xpx; /*Coloque tamanho da fonte se quiser*/
color:XXX;  /*Coloque cor da fonte se quiser*/
text-decoration: none;
filter: alpha(opacity:0.4);
KHTMLOpacity: 0.4;
MozOpacity: 0.4;
-khtml-opacity:.40;
-ms-filter:"alpha(opacity=40)";
-moz-opacity:.40;
filter:alpha(opacity=40);
opacity:.40;
}
.transparente a:hover {
font-size: px; /*Coloque tamanho da fonte se quiser*/
color:XXX;  /*Coloque cor da fonte se quiser*/
text-decoration: none;
filter: alpha(opacity:1);
KHTMLOpacity: 1;
MozOpacity: 1;
-khtml-opacity:.1;
-ms-filter:"alpha(opacity=100)";
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}

 2) Quando quiser usar os links transparentes, cole em um Gadget de HTML/Javascript:
<div class="transparente"><a href="SEU-LINK-AQUI">LINK</a></div>


Aplicando transparência em textos na sidebar: 


Cole o código a seguir abaixo do código anterior que você colocou no HTML:
.transparente-text {
font-size: px; /*Coloque tamanho da fonte se quiser*/
color:XXX;  /*Coloque cor da fonte se quiser*/
text-decoration: none;
filter: alpha(opacity:0.4);
KHTMLOpacity: 0.4;
MozOpacity: 0.4;
-khtml-opacity:.40;
-ms-filter:"alpha(opacity=40)";
-moz-opacity:.40;
filter:alpha(opacity=40);
opacity:.40;
}
Quando dor usar textos com opacidade use o seguinte código:
 <p class="transparente-text">ESCREVA SEU TEXTO AQUI.</p>
Para usar link e texto ao mesmo tempo:
 <div class="transparente">
<a href="SEU-LINK-AQUI">Nome do Link</a>
<p class="transparente-text">
ESCREVA SEU TEXTO AQUI.</p>
</div></div>

Nenhum comentário:

Postar um comentário

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