16 de abr de 2013

Tutoriais Para Gadget de Afiliados


Hoje trouxe dois tutoriais variados para o gadget de afiliados/elite.
Os efeitos são: Queen e Round. Quer ver as prévias? Clique aqui.
Antes de tudo, os créditos são do Kawaii World!
Para  conferir os tutoriais clique em READ MORE.
Efeito Round:

1º: Clique em Design Editar HTML >> depois aperte F3 >> digite: ]]></b:skin>

2º: Acima da tag encontrada, cole o código abaixo e salve (altere o que está em negrito):
.efeitoround  {

background: #CORDOFUNDO;
border: 5px solid #CORDABORDA;
display: inline-block;
font: 20px '', cursive;
width: 50px;
height: 30px;
color: #CORDAFONTE;
padding-top: 10px;
margin: 5px;
-webkit-border-radius: 50px;
-webkit-transition: 1s linear;
}
.efeitoround:hover {
background: #e7a6c0;
-webkit-box-shadow: inset 0px 60px 10px #CORDOFUNDOHOVER;
border-radius: 0px;
color: #ffffff;
text-decoration: none;
-webkit-border-radius: 50px;
-webkit-transition: 1s linear;
}
3º: Vá em Layout >>  Adicionar um gadget >> HTML/JavaScript >> Cole o código:

<div class="efeitoround">


<a href="LINK"><img src="URL DA IMAGEM" />

<span>NOME DO BLOG</span></a>

<a href="LINK"><img src="URL DA IMAGEM" />

<span>NOME DO BLOG</span></a>


</div>

Quanto mais vezes você colar, mais imagens de afiliados terá, obviamente.


Efeito Queen:

1°: Editar HTML >> Procure por: ]]></b:skin>. Acima da tag, cole. Depois modifique o que está em negrito e salve:

.queen a, .queen a img {display: inline-block;}
.queen a {width: LARGURADAIMAGEMpx; height: ALTURADAIMAGEMpx; position: relative; padding: 3px; background: #CORDABORDA; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px 3px 3px 3px;}
.queen a span {position: absolute; width: 110px; height: 110px; top: 3px; left: 3px; text-align: center; font: 8px handy; text-transform: uppercase; line-height: 110px; text-color:#CORDOTEXTO; text-shadow: 0px 1px 1px rgba(255,255,255,0.6); font-size: 8px; opacity: 0; filter: alpha(opacity=0); background: rgba(255,255,255,0.8); transition-duration: 2s; -webkit-transition-duration: 1s; -moz-transition-duration: 2s;}
.queen a:hover span{opacity: 1; filter: alpha(opacity=99);}
O que estiver em negrito, você modifica do jeito que quiser.

2°: Layout >> Adicionar um gadget >> HTML/JavaScript >> Cole o seguinte código e substitua as partes de letra maiúsculas:

<div class="queen">
<a href="LINK"><img src="URL DA IMAGEM" />
<span>NOME DO BLOG</span></a>
<a href="LINK"><img src="URL DA IMAGEM" />
<span>NOME DO BLOG</span></a>
</div>

Espero que tenham gostado! Dúvidas? Comente!
Beijos!
Anna

2 comentários:

  1. Fica muito maneiro o.o Deixa uma marca chique **

    Crazycherry-sa.blogspot.com

    ResponderExcluir