30.8.13

Menu - Redes Sociais com Css


Heey!

Fiquei quase 3 dias sem internet e isso pra mim é um saco, eu fico entediada sem fazer nada, aff. Enfim, hoje não quero enrolar, como já me expliquei usahashu' vamos lá ~~

Gente, acho que agora criar ou usar botões das redes sociais virou moda na blogofera. Mas cansa muito fazer 8 botões(ou mais) só pra enfeitar o blog. Por isso depois de um pouco pensar fiz um menu(5 menu's {amanhã posto o resto}) que é exatamente a mesma coisa e até dá pra usar com hover, ele é muito massa! Vale a pena ver a preview e acompanhar  >3< para ver como aplicar no blog, é só ler mais!

..........................................................................................................................................................................................................................................

1. Vá no Modelo > Editar HTML > Tecle F3 e procure por ]]></b:skin>  e acima disso cole:

/*--MENU SOCIAL EXCLUSIVO DO SWEET FLOWER - WWW.SWEEET-FLOWER.BLOGSPOT.COM---*/@font-face {font-family: "social font face"; src: url('http://static.tumblr.com/lq2ha19/0EUmscsjp/social_font.ttf');}#menusocial { font-family: social font face; /* fonte não mexa*/font-size: 32px; /* tamanho da fonte, mude se quiser/precisar */text-align: center; /* centralização do texto */background: #ac98bd; /* fundo, mude se quiser */border-radius: 5px; -moz-border-radius:5px; -ms-border-radius:5px; /* bordas arredondadas, mude o valor de todos se quiser */padding:3px; margin:1px; display: inline-block;  /*Não mexa*/border:2px dotted #ccc; /*bordinha pontilhada*/text-shadow: 1px 1px 01px #555; /*sombra no textp, mude a cor se quiser*/-webkit-transition-duration: .9s; -moz-transition-duration: .9s; -ms-transition-duration: .9s; /*tempo de transição, só mexa se você souber*/}#menusocial:hover { /*---Menu Hover---*/cursor:pointer; /*cursor*/background: #928780; /* fundo ao passar o mouse, mude se quiser */-webkit-transition-duration: .9s; -moz-transition-duration: .9s; -ms-transition-duration: .9s; /*tempo de transição, só mexa se você souber*/}#menusocial a{ /*---Cor dos Links// Letra---*/color: #fff; /*Cor da fonte normal*/padding: 3px; /*Não mexa, se não o efeito parece um retangulo ;3*/text-decoration: none; /*Não mexa*/-webkit-transition-duration: .40s;}#menusocial  a:hover{/*---Cor dos Links Hover// Letra---*/color: #d5d4d4; /*Cor dos links ao passar o mouse por cima*/ -webkit-transition-duration: .40s;-moz-transition-duration: .40s; -ms-transition-duration: .40s; /*tempo de transição, só mexa se você souber*/text-decoration: none; /*Não mexa*/}/*---Fim----*/

E salve. Depois vá em Layout > Adicionar gadget > HTML/JavaScript > E cole o seguinte:

 <center>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>F</a></div>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>T</a></div>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>t</a></div>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>b</a></div>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>g</a></div>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>h</a></div>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>Y</a></div>

Explicações:

Bem, vocês estão vendo as letras em itálico no código acima? Pois bem, cada uma representa um simbolo das redes sociais; Lembre-se: Existem diferenças entre letra minusculas e maiúsculas, tome cuidado!

Por exemplo: b(minusculo) representa o simbolo do Rss/Feed do blog já o B(maiúsculo) representa o simbolo do blogger. Viram? Super simples, agora é só personalizar do jeito que você quiser!
Não reblogue sem créditos ><

10 comentários:

  1. Como seu blog está lindo!
    Amei bem melhor.

    perfectnaiveforever.blogspot.com

    ResponderExcluir
  2. Seu blog está simplesmente muito perfeito, e adorei o menu :3
    Beijocas, Eloísa do Having Cherry

    ResponderExcluir
    Respostas
    1. \0/ que bom que gostou do blog, volte sempre.Obrigada!

      Excluir
  3. Esse menu é super fofinho, parabéns pela criação, Rafa :33 Usarei no próximo lay >3<
    Mil Beijos ❥
    Garotas Atrevidas ❤ ~estou aguardando sua visita!

    ResponderExcluir
  4. >3< obrigada Mille!
    Que legal, tenho certeza de que vai ficar lindo :33

    ResponderExcluir
  5. Ficou muito top *^* Faz um tutorial de como fazer esses previews ><

    ResponderExcluir
    Respostas
    1. Obrigada :33 Claro, acho que quarta ou quinta já teremos o tutorial >33<

      Excluir

Hey, que bom que irá comentar! Mas, leia as regras;

- Comente sobre o post >3<
- Deixe o link do seu blog no final, retribuirei
- Respondo todos os comentários
- Retribuo todos os comentários
- Não comente besteira, nem seja racista :3
- Criticas construtivas são bem vindas :D
- Sigo de Volta todos que me seguirem primeiro.