21/12/2014

Tutorial • Menu para Afiliados


Olá meus bebês :3 Como você estão??
Eu estou á beira da loucura o.o! Estou quase ficando louca quando começo a pensar em que carreira vou seguir. Passei pro 3° ano e tenho que começar logo a pensar no meu futuro, mas está tão difícil escolher minha carreira. Eu não gosto de nada, isso acaba dificultando as coisas :@ Já fiz teste vocacional, já conversei com um bando de gente, mas eu não consigo me achar...Ah, eu estou perdida! 

Mas deixando meus problemas de lado, hoje trago um tutorialzinho bem fácil. Ele é um menu para afiliados bem simples mas é bonitinho. Eu até ia colocar aqui no SH mas acho que não ficaria legal. O modelo do menu é desse blog, mas eu fiz algumas modificações para o menu ficar diferente.Para conferir click aqui e dirija-se ao primeiro gadget. Continue lendo para aplicar o menu ao seu blog.


Vá em Layout  Adicionar um Gadget  HTML/Java Script e cole:


<style>

@font-face { font-family: "wish"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }

#afiliados1{
background-color: #F6F2F6;
width: 33px;
height: 8px;
font-family: wish;
font-size: 8px;
Inset: #000;
float: left;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 5px;
margin-bottom: 4px;
color: #C4ACC4;
line-height: 13px;
border: 1px solid #CDB5CD;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
return: false;
}
#afiliados1:hover {
color: #fff;
border: 1px solid #8B7B8B;
-moz-box-shadow:inset 0px 15px 0px #CDB5CD; /** cor de quando desce**/
-webkit-box-shadow:inset 0px 15px 0px #CDB5CD; /** cor de quando desce**/
-o-box-shadow:inset 0px 15px 0px #CDB5CD; /** cor de quando desce**/
-ie-box-shadow:inset 0px 15px 0px #CDB5CD; /** cor de quando desce**/
-webkit-transition-duration: 0.40s;
-moz-transition-duration: 0.40s;
transition-duration: 0.40s;}}
</style>
<a href="LINK"  title="NOME" id="afiliados1">VG</a>
<a href="LINK"  title="NOME" id="afiliados1">VG</a>
<a href="LINK"  title="NOME" id="afiliados1">VG</a>
<a href="LINK"  title="NOME" id="afiliados1">VG</a>
<a href="LINK"  title="NOME" id="afiliados1">VG</a>
<a href="LINK"  title="NOME" id="afiliados1">VG</a>
<a href="LINK"  title="NOME" id="afiliados1">VG</a>
<a href="LINK"  title="NOME" id="afiliados1">VG</a>
<a href="LINK"  title="NOME" id="afiliados1">VG</a>
<a href="LINK"  title="NOME" id="afiliados1">VG</a>
<a href="LINK"  title="NOME" id="afiliados1">VG</a>
<a href="LINK"  title="NOME" id="afiliados1">VG</a>

Pronto! Agora é só salvar! 

Tutorial bem fácil, não? Espero muito que tenham gostado, não se esqueça de comentar se gostou :) Bjooos ♥ 

6 comentários:

♥ Comente algo relacionado ao post !
♥ Proibido xingar, ofender e ser agressivo !
♥ Seja educado (a) !