Novo Layout!!! + Menu de redes sociais escondido.

   Oi amorecos tudo bom? (eu na verdade não sei porque eu pergunto isso se vocês nunca respondem, mas..) Então Pessoas perceberam???? Estamos de layout novo!!!!!!!! Uhhhuuuuuu!!!!!!!!!!!!!  Eu simplesmente achei ele uma perfeição ne? Ele foi feito por Roh  a. Ramos lá do blog Garotas no mundo HTML, Gente sempre fui muito fã dela e do blog também! Tudo o que ela faz é lindo! Ela tem um talento que admiro muito! sempre quis usar um dos layouts dela, (que ela faz) mas nunca tive coragem de trocar o antigo! Infelizmente meu computador teve que ser formatado e pedi um montão de urls de blogs que adoro e são muito divos, agora eu estou morrendo tentando achar um monte e adivinha só conseguir achar 3, deixem ai em baixo os links do blogs que vocês gostam pra que eu possa ver por favor, por que não existe coisa pior do que ver seu computador sendo formatado, acredite, falo isso por experiência própria, isso já aconteceu comigo 5 vezes 5 vezes (Windows 8.1 é o cão)

 Bom vamos ao tuto o menu é esse aqui não achou? Coloque o mouse em cima do nome more está verde e você vai ver!

Primeiro vá me MODELO editar HTML de ctrl + f e procure por ]>< e acima disso cole isso:::

#social {position:absolute;}
.social {width:170px;position:fixed;background:#fff;-webkit-transition-duration: .99s;}
.social img {margin-left:8px;-webkit-transition-duration: .99s;}
.social img:hover {-webkit-transform: rotate(360deg);-webkit-transition-duration: .99s;}
.awn a {background:#dae5e1;border:solid 1px #c5e0d6;color:#fff;text-shadow: 1px 1px 1px #9ac3b3; font-family:'pf arma five';font-size:8px;width:170px;position:fixed;margin-top:3px;padding:4px;border-radius:1px;text-indent:3px;}
.awn2 {background:#dae5e1;border-top:solid 1px #c5e0d6;border-right:solid 1px #c5e0d6;border-left:solid 1px #c5e0d6;color:#fff;text-shadow: 1px 1px 1px #9ac3b3;font-family:'georgia'; text-transform:lowercase;font-size:15px;width:40px;position:fixed;margin-top:8px;padding:4px;border-radius:1px;text-indent:3px;-webkit-transform: rotate(90deg);margin-left:157px;-webkit-transition-duration: .99s;text-align: center; }
#social:hover .awn2 {margin-left:315px;-webkit-transition-duration: .99s;}
#social:hover .social {margin-left:165px;-webkit-transition-duration: .99s;}

Depois em um HTML J/S cole..... Mude apenas o valor das margens!

<div style="position: absolute; margin-top: 25px; left:-310px;">
<div id="social">
<div class="social">
<!---facebook--->
<a href="/" title="facebook"><img src="http://static.tumblr.com/koam7dd/7ernmkkpf/so3.png" /></a>
<!---instagram--->
<a href="/" title="instagram"><img src="http://static.tumblr.com/koam7dd/j3hnmkkr9/so4.png" /></a>
<!---blogger--->
<a href="/" title="blogger"><img src="http://static.tumblr.com/koam7dd/ie0nmkks1/rede4.png" /></a>
<!---tumblr--->
<a href="/" title="tumblr"><img src="http://static.tumblr.com/koam7dd/55ynmkksx/so5.png" /></a>
<!---ask fm--->
<a href="/" title="ask/fm"><img src="http://static.tumblr.com/koam7dd/ugknmkkvz/so1.png" /></a>
<div class="awn"><a href="http://bk-designs.tumblr.com/tagged/social" title="rede opcional">coloque outra rede opcional aqui</a></div>
</div>
<div class="awn2">more</div>
</div></div>

Pronto!! é fácil e o menu é lindoooo!!
CRED: GNMH