[Tuto]: Menu para redes sociais

           
Hello pequenos e pequenas! Como estão? Bom, estou tão feliz do SM (Sweet Magic - Blog meu) estar completando 10 meses *U* E com isso, vou reativar ele. Passei um tempinho sem atualizo, sem dar atenção á ele -tadinho! ;/- Peço que visitem ele, agora vou fazer algumas mudancinhas lá ;)

Bem, o post de hoje será de como colocar o menu para redes sociais em seu blog. Um tutorial bem fácil e rápido. Sigam-me!



Todos os créditos são para o blog Part Of Me <33, então todos os créditos á ele.

Vamos começar com o código do menu, onde nele não é preciso mudar quase nada. Apenas a margem indicada no código que varia dependendo do tamanho da sua sidebar. No painel do blog, clique no nome do seu blog e logo após em Modelo - Editar HTML e clicando dentro de onde há o código do layout do seu blog, clique em Ctrl + F ou F3 e pesquise por ]]></b:skin>
Agora cole o código abaixo, antes do que você acabou de encontrar (modificando o que está 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);
}

 Bem, agora vamos aplicar o código do menu, com os ícones. Mude para a Ala - Layout, Adicionar um gadget - HTML JavaScript e cole o código abaixo dentro da caixinha Conteúdo:

<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 ultimo, entenderam? Bem, os ícones vocês podem usar os desse site aqui -> # Basta pesquisar pelo nome da rede social, que aparecerão vários ícones, você só precisa copiar o URL do que você escolheu e substituir o código.

Bem fácil, não? Espero que tenham entendido e gostado. Mais uma vez, repito, todos os créditos são para o Part Of Me, qualquer dúvida, comente!