Menu para redes sociais [002]

Hey!Hey! Hey! Hoje venho trazer um menuzinho flutuante para redes sociais, o encontrei no blog Doces Beijos Hate, que reblogou do tumblr Anyhs Themes. Como achei muito fofo não resisti não postar aqui, então se utilizarem crédite ambos os sites sitados acima. Então é isso vamos ao tutorial? Caso queira ver como é o menu online, basta clicar no link mais abaixo.

Brevia do efeito

1.Escolha o blog qual deseja aplicar, e vá ate seu HTML. Chegando lá ative a pesquisa com o atalho Ctrl+U e pesquise por ]]></b:skin>, acima dele cole:

Códigos

/********** MENU REDES SOCIAIS #01 (por: anyhs-themes.tumblr.com) **********/
#lalalamedia {position: fixed; top: 100px; right: 10px; z-index: 999; width: 20px;}
#lalalamedia img {transition: .5s; border-radius: 5px; width: 20px; margin: 3px 0px; transform: scale(1.0);}
#lalalamedia img:hover {transform: scale(1.5); -webkit-filter: grayscale(0%)}
#lalalamedia a {position: relative; width: 20px; height: 20px;}
.lalalatitle {transition: .5s; font-family: 'exo 2', arial, sans-serif; font-size: 8px; text-transform: uppercase; position: absolute; right: -100%; margin-right: 10px; margin-top: 3px; background: #111; padding: 5px; transform: scaleX(0.5); opacity: 0;}
.lalalatitle:after {content: ""; border: 1px solid transparent; border-width: 5px; border-left-color: #111; position: absolute; left: 100%; top: 4px;}
#lalalamedia a:hover .lalalatitle {opacity: 1; right: 100%; transform: scaleX(1.0);}

Salve!

2.Agora vá ate Layout e abra um novo gadget/javascrit, dentro dele cole:

Códigos

<!---------- MENU REDES SOCIAIS #01 (por: anyhs-themes.tumblr.com) ---------->
<div id="lalalamedia">
<a href="LINK" target="_blank"> <div class="lalalatitle"> LINK&nbsp;TITULO </div> <img src="LINK_DA_IMAGEM"/>
<a href="LINK" target="_blank"> <div class="lalalatitle"> LINK&nbsp;TITULO </div> <img src="LINK_DA_IMAGEM"/>
<a href="LINK" target="_blank"> <div class="lalalatitle"> LINK&nbsp;TITULO </div> <img src="LINK_DA_IMAGEM"/>
<a href="LINK" target="_blank"> <div class="lalalatitle"> LINK&nbsp;TITULO </div> <img src="LINK_DA_IMAGEM"/>
</div>

◤Entendendo o código◥

• Sempre que for colocar mais de uma palavra no título, quando precisar usar espaço para separar as palavras, ao invés de dar espaço use este código: &nbsp;. Isto é o código do espaço. Se você der espaço apertando a tecla de espaço vai acontecer isto aqui, se você usar o código do espaço ao invés da tecla vai ficar assim.

• Se não sabe a onde encontrar ícones com qualidade e variações, minha indicção o site Flaticon. Lá você encontrara somente ícones de variadas categorias assuntos e estilos.