MDT #1: Menu para Redes Sociais + Resultado da Enquete

"Se tivéssemos como voltar atrás, nunca iríamos seguir em frente." - Demi Lovato.

Hey pessoal, como passam o FDS? Espero que bem! Ontem eu não pude postar porque viajei pra uma cidade aqui do interior da Paraíba e passei o dia por lá. Mas hoje estou aqui para trazer o Resultado da Enquete feita na postagem anterior.

Bom, acho que quem viu a postagem temporária de ontem e visitou o blog hoje mais cedo, percebeu que a opção vencedora foi a do Layout Free (o qual eu já comecei a trabalhar e adianto, está ficando DIGNO), porém, como eu sou um Blogueiro mal, resolvi trazer também a Maratona de Tutoriais Exclusivos, já que essa foi a segunda opção mais votada, a começar hoje por um Menu para Redes Sociais. Antes de aprendê-lo, vejam a Previa do menu abaixo:

LIVE PREVIEW

Gostou? É o mesmo que eu uso atualmente aqui no Blog. Vamos aprender?

Não tem nada de difícil, certo? Vamos começar com o código que vai dá o efeito no menu, não precisa mudar quase nada, apenas a margem que eu indiquei no código porque isso varia dependendo do tamanho da sua sidebar. No Painel do Blog, clique no nome do seu Blog - Modelo - Editar HTML e pesquise por ]]></b:skin> 

Agora cole o código abaixo, antes do que você acabou de encontrar: (modificando o que deixei em itálico)

.redesocial {
width:250px;
top:-2px;
left:5px;
position:center;
z-index: 100;
}
.menusocial img {
width:18px;
}
.menusocial {
background:rgba(255,255,255,0.4);
line-height:16px;
height:18px;
margin: 3px 5px 3px 11px;
display: inline-block;
width:18px;
padding:4px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
float:center;
position: relative;
}
.menusocial:hover {
border-radius: 20px;
transform: rotate(720deg) scale(1) skew(0deg);
-moz-transform: rotate(720deg) scale(1) skew(0deg);
-webkit-transform: rotate(720deg) scale(1) skew(0deg);
-o-transform: rotate(720deg) scale(1) skew(0deg);
background:rgba(40,40,40,0.4);
}

Bom, agora vamos aplicar o código do menu, com os ícones sabe? Mude para a Ala Layout - Adicionar um Gadget - HTML/JavaScript e cole o código abaixo dentro da caixinha do Gadget:

<center><div class="redesocial"><a href="LINKDAREDESOCIAL" title="NOMEDAREDESOCIAL"><div class="menusocial"><img src="URLDOICONE" /></div></a></div>

Para acrescentar mais redes sociais, você só precisa repetir o código colocando o </div> apenas depois do último, entendeu? Bom, os ícones que eu uso são todos deste site AQUI. Basta pesquisar pelo nome do ícone e vão aparecer várias imagens, você só precisa copiar um URL do que escolheu e substituir no código.

Bom, espero que tenham entendido e gostado do Menu. Qualquer dúvida é só perguntar na Ask, ok?  Se quiserem algum tutorial específico peçam pela Ask também AQUI. Beijos :*