24/11/2013

Modelos para a Elite de Afiliados

Olá povo, ultimamente fazendo o layout do MHA, CC e EAHA eu descobri vários efeitos e modelos para a Elite de Afiliados, então vamos conferir:

1° Modelo de Afiliados (Cdt: Lovelly Dream)
Não vou colocar Marca pq eu sei q é minha imagem.

1) No seu HTML aperte CTRL + F e procure por </b:skin>. Acima da tag que vc achou cole o código:

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
/** Modelo para elite de afiliados por Liah - lovelly-dream.blogspot.com.br **/
.afiliados {
text-align: center; 
font-family: silkscreen; /* Fonte */
font-size: 8px; /* Tamanho da Fonte */
color: #fff; /* Cor da Fonte */
text-shadow: #C9B1C6 0px 1px 1px; /* Sombra do Texto */
background: #DDCDDB; /* Fundo do Menu */
padding: 3px;
margin: 1px;
box-shadow: inset 0 0 9px #C9B1C6; /* Sombra da Caixa */
border-radius: 3px; /* Bordas Arredondadas (Se não quiser, Apague essa linha) */
-webkit-transition-duration: .50s;
}
.afiliados:hover {
color: #fff; /* Cor da Fonte quando passa o mouse */
text-shadow: #A89DB4 0px 1px 1px; /* Sombra do Texto quando passa o mouse */
background: #C4BDCC; /* Fundo do Menu quando passa o mouse */
box-shadow: inset 0 0 9px #A89DB4; /* Sombra da Caixa quando passa o mouse */
border-radius: 3px; /* Bordas Arredondadas (Se não quiser, Apague essa linha) */
-webkit-transition-duration: .50s;
}
/** Modelo para elite de afiliados por Liah - lovelly-dream.blogspot.com.br **/

2) Agora é só  fazer as alterações que quiser e Salvar.
3) Adicione um HTML/ JavaScript e cole o código abaixo:
<a href="Link do Blog Irmão"><div class="afiliados">Nome do Blog Irmão</div></a><div style="float: left; width: 20%"><a href="Link "><div class="afiliados">?</div></a><a href="Link"><div class="afiliados">?</div></a></div><div style="float: left; width: 20%"><a href="Link"><div class="afiliados">?</div></a><a href="Link "><div class="afiliados">?</div></a></div><div style="float: left; width: 20%"><a href="Link"><div class="afiliados">?</div></a><a href="LINK DO BLOG"><div class="afiliados">?</div></a></div><div style="float: left; width: 20%"><a href="LINK DO BLOG"><div class="afiliados">?</div></a><a href="LINK DO BLOG"><div class="afiliados">?</div></a></div><div style="float: left; width: 20%"><a href="LINK DO BLOG"><div class="afiliados">?</div></a><a href="LINK DO BLOG"><div class="afiliados">?</div></a></div><div style="float: left; width: 20%"><a href="LINK DO BLOG"><div class="afiliados">?</div></a><a href="LINK DO BLOG"><div class="afiliados">?</div></a></div><div style="float: left; width: 20%"><a href="LINK DO BLOG"><div class="afiliados">?</div></a><a href="LINK DO BLOG"><div class="afiliados">?</div></a></div><div style="float: left; width: 20%"><a href="LINK DO BLOG"><div class="afiliados">?</div></a><a href="LINK DO BLOG"><div class="afiliados">?</div></a></div><div style="float: left; width: 20%"><a href="LINK DO BLOG"><div class="afiliados">?</div></a><a href="LINK DO BLOG"><div class="afiliados">?</div></a></div><div style="float: left; width: 20%"><a href="LINK DO BLOG"><div class="afiliados">?</div></a><a href="LINK DO BLOG"><div class="afiliados">?</div></a></div>
4) Só coloque a sigla do blog para não ficar feio. Os (?) vc vai substituir pela sigla. 


2° Modelo Efeito Giratório nos Afiliados (Cdt: ChocoLovers)

1°. Vá no HTML do seu blog
2°. Dê um Ctrl + F e procure por ]]></b:skin> 
3°. Acima dessa TAG cole o código seguinte:
.elite{ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width:auto; -webkit-transition-duration: 1.20s;
box-shadow: 2px 1px 2px #909090;
}
.elite:hover{-webkit-transform: rotate(360deg);} 
4°. Vá em layout e adicione um gadget HTML/JavaScript com o seguinte código:
<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>
<a href="Link do Blog" title="Título do Blog"><im.g src="Link da Imagem" class="elite"/></a>
<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>
<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>
<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>
<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a> 

3° Modelo Efeito Opacidade (Cdt: ChocoLovers)
Vá em Design > Adicione um gadget HTML/JavaScript > Cole esse código no gadget:
<a href="LINK DO BLOG AFILIADO" none;="" target="_blank" text-decoration:="" title="NOME DO BLOG AFILIADO"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="LINK DA IMAGEM DE AFILIAÇÃO" style="opacity: 0.5;" /></a>&nbsp 
Acho que por hoje já deu quem quiser mais efeitos para afiliados ou quiser um tutorial se eu souber fazer faço um post mostrando o que tem q fazer. bjus


2 comentários:

  1. Adorei! Estou fazendo um layout para voltar com meu blog e ficou lindo! Muito obrigada. Darei os devidos créditos :)

    ResponderExcluir

♥ Não falar palavrões
♥ De sua opinião, porém seja educado
♥ Se não gostar de algo e acha que deve melhorar, fale, mas educadamente
♥ Não ofender as postadoras
♥ Troco comentários
♥ Antes de pedir algo, fale sobre o post ou seu comentário será ignorado
♥ Aceito: ¨Seguindo, segue de volta?¨
♥ Não me peça para D-I-V-U-L-G-A-R algo a qual eu não estou participando, se caso eu gostar de algo no seu blog, eu irei divulgar por vontade minha.