30/05/2013

Tutorial: Menu para redes sociais

||

Ohayo minna-san, hoje venho trazer um tutorial para vocês e um menuzinho para rede social. Ele é perfeito para quem gosta de economizar espaço no blog, ele fica bem no topo do blog. Ele é muito bonitinho acho que vou usar no meu próximo layout. Também venho agradecer aqueles que seguiram o HOD, obrigada de verdade. O menu e do  I love Themes, mas como achei no Kawaii Things dou os créditos a ambos. Quem quiser dar uma olhadinha nele basta clicar aqui ( x ) e ver. Então vamos ao tutorial?


1. Abra a pagina de seu html, então  procure por ]]></b:skin> e acima dele adicione:

/***************** Menuzinho Simone (cerejadosundae) **/.caixasm{width:auto;top:-2px;left:5px;position:fixed;z-index: 100;}.navsm img{width:15px;}.navsm{background:rgba(255,255,255,0.4);line-height:16px;height:18px;margin: 1px; display: inline-block;width:18px;font-size:18px;color:#777;padding:4px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out;float:left; }.navsm:hover {padding-top:20px; margin-top:0px; }


2. Salve, em seguida vá o layout, e abra um novo gadget e dentro cole:
<div class="caixasm"><a href="LINKDOTWITTER" title="follow me"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/Helveticons_Social/128/twitter.png" /></div></a>
<a href="LINKDOFACEBOOK" title="Facebook"><div class="navsm"><img src="http://cdn4.iconfinder.com/data/icons/black-icon-social-media/128/099304-facebook-logo.png" />
</div></a>
<a href="LINKDOINSTAGRAM" title="Insta"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/instagram.png" />
</div></a>
<a href="LINKDOINSTAGRAM" title="Insta"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/instagram.png" />
</div></a>
<a href="LINKDOAJUDA" title="help"><div class="navsm"><img src="http://cdn4.iconfinder.com/data/icons/defaulticon/icons/png/64x64/help.png" /></div></a></div>

OBS: O código estava dando contrito então modifiquei ele um pouquinho...mas os créditos continuam para o blog/site original. Ao colocar o código cuidado para não criar div repetidos tipo: </div></div></a>, se isso ocorrer ele vai descer não ficar no topo.

Se deseja fazer modificações na imagem, você pode criar ou procurar icons pela web. Então hospede e troque o url no código, apenas isso.

28 comentários:

  1. Que lindo ♥
    novajuventudexxi.blogspot.com.br vou usar no próximo lay :3
    world--paradise.blogspot.com.br

    ResponderExcluir
  2. Fica super cute esse menuzinho *---*
    Obrigada pelo tutorial Wendy >.<

    Kissu «3 || Pankax&Pankadax

    ResponderExcluir
    Respostas
    1. Yo yo Rafa não foi nada! :3

      Excluir
  3. Olá,
    Legal o menu, pena que não tenho redes sociais para o blog e muito menos para mim, rs'
    Se algum dia precisar, eu uso!
    Desculpe a ausencia, ma estou meio ocupada com a vida e prometo aparecer mais por aqui
    Beijos~ semprefuiestranha.blogspot.com

    ResponderExcluir
    Respostas
    1. Haha somos duas, também não tenho rede sociais para o blog, tenho preguiça ate de entrar nas pessoais rs' Mas da mesma forma já fico contente em saber que gostou.

      Ahh Ammy que isso tudo bem, eu compreendo bem isso porque também estou passando por isso, então compreendo muito bem. Beijokas lindas

      Excluir
  4. Esse menu é mto fofo *--* amo ele, hehe' Ty pelos creditos Wendy..

    ResponderExcluir
    Respostas
    1. Hihi verdade é muito fofo, que isso não foi nada. Apenas fiz o meu dever ^^

      Excluir
  5. Eu já tinha visto este tutorial, mas esse menu é tão kawaii que ver de novo nao tem problema srrsrsrsrs

    Uma Borboleta Laranja

    ResponderExcluir
    Respostas
    1. Haha entendo, entendo realmente vale a pena ver de novo. Obrigada pelo recadinho Nami

      Excluir
  6. noss, eu adorei *3* confesso que gostei >//////<
    -kissus-

    ResponderExcluir
    Respostas
    1. Nyaa que bom Naka fico contente por isso.

      Excluir
  7. awn, que lindinho, adorei esse menu *-*
    xoxo :3

    ResponderExcluir
    Respostas
    1. Verdade e bem mimoso, obrigada pela visita Alisson

      Excluir
  8. Super fofinho, e o bom é que economiza bastante espaço.
    Beijoos!
    sensatasonhadora.blogspot.com

    ResponderExcluir
    Respostas
    1. Uhum isso que gosto nele, beijos Hi-chan

      Excluir
  9. Amei , vou usar para o meu blog do Luan Santana , dá uma passadinha lá o blog é novo e está em reforma . Beijos
    http://luanjo-oficial.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Yo usa sim, pode deixar faço sim uma visitinha.

      Excluir
  10. Anônimo31/10/13

    Eu segui o passo-a-passo e coloquei no meu blog, mas ficou torto ;-;
    Só o twitter ficou certinho, os outros ficaram longe pra direita e um pouco mais baixos.

    ResponderExcluir
    Respostas
    1. Isso tem acontecido bastante ultimamente, mas experimente colocar o código abaixo do .mobile e no gadget colocar ele sobre todas as outras coisas se isso não funcionar, me diga para poder avaliar melhor o que esta acontecendo ^^

      Excluir
  11. Anônimo6/11/13

    Obrigado (:
    Então, coloquei o código abaixo de .mobile e o gadget sobre todas as outras coisas. Os botões ficaram em cima do header um pouco a esquerda, mas não ficaram colados no topo super a esquerda como aqui http://static.tumblr.com/lluyi5e/BWumf1c4r/botaozinhotop.html
    ficaram flutuando

    ResponderExcluir
    Respostas
    1. Entendo, acho que ja sei como resolver, me diz é só a do tt que fica direito não é? Farei um teste aqui para ver se consigo resolver isso e deixo aqui para você. ^^

      Excluir
    2. Oiee, desculpe a demora para arrumar o código mas consegui dar um jeitinho agora. E esta funcionando direitinho, só tome cuidado para não repetir os divs não repetirem como, porque se não eles vão descer novamente (leia o OBS da post para entender melhor). Espero que possa ter ajudado :3 E obrigada por me avisar o erro no menu.

      Excluir
  12. Anônimo25/11/13

    Agora foi! Muito obrigado mesmo :)

    ResponderExcluir
    Respostas
    1. Ahh que booooom!!! Que booom!!! *----* Que isso não foi nada, eu que peço desculpas pela demora e agradeço por comentar alertar que estava dando erro. =3

      Excluir
  13. Muito lindinho ele :3 Aonde posso por esse gadget? eu coloquei ela na lateral, mas fica uma barrinha sem nada :(

    ResponderExcluir
    Respostas
    1. Ele fica automaticamente na lateral superior do blog. Leia a observação da postagem vai lhe ajudar com essa barrinha torta,caso não seja tortamaissim vazia basta remove-la. ^^

      Excluir
  14. Obrigada por gostar. Ele fica automaticamente na lateral superior do blog, mas caso esteja torto leia observação da postagem que explico melhor. Caso só esteja vazia e não sabe o que por é só remover. ^^

    ResponderExcluir