Menu fixo no Topo do blog com Ícones das Redes sociais

05:46


Olá meus amores, antes de tudo quero agradecer pelo imenso carinho que tenho recebido por mensagens, emails, e comentarios aqui no blog, infelizmente nao tem como eu responder a todos devido ao pouco tempo e muito trabalho, mas sempre quando posso respondo os email com pedido de tutoriais e afins. E é a pedido de uma leitora aqui do blog que trago o tutorial de hoje: MENU FIXO NO TOPO COM ÍCONES DAS REDES SOCIAIS. É bem simples e espero que ajude a todos vocês. Os creditos desse tutorial vai para Elaine Gaspareto, lembrando que fiz algumas mudanças nos codigos, por isso adcionei mais créditos, mas mantive o dela, uma vez que ela que criou os codigos permanentes.

O Menu ficará desse jeito como voçê pode conferir na Imagem > Amostra Menu <

Bom, inicialmente será necessario ir no HTML do seu Blog e procurar por /* Tabs e substituir todo o codigo abaixo dele até /* Headings  por:

/* Menu fixo no topo do blog by Elaine Gaspareto Editado por Renata Massa www.renatamassa.com
--------------------------- */
#menufixo {
width: 100%;
color: #FFF;/*--cor da fonte--*/
padding-left: 80px;
font-weight: none;
margin: 0;
height: 38px; /* altura do menu */
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #000; /* cor de fundo do menu */
font-family: 'calibri', cursive;
font-size: 17px; /* tamanho da fonte */
text-transform: none;
}
#menufixo li {
list-style-type: none;
display: inline;
float: left; /* posicionamento do menu */
padding: 0px;
}
#menufixo li a {
color: #fff;
text-decoration: none;
padding-right: 26px;
line-height: 42px;
}
#menufixo a:hover {
color: #FF69B4; /* cor do link da fonte em hover */
}
#menufixo ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
margin-left: 40px;
}
#mymenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: -40px;
}
#mymenu li ul a {
font-size: 12px;
line-height: 24px;
}
#mymenu li:hover ul ul,
#mymenu li:hover ul ul ul,
#mymenu li.sfhover ul ul,
#mymenu li.sfhover ul ul ul {
left: -999em;
}
#mymenu li:hover ul,
#mymenu li li:hover ul,
#mymenu li li li:hover ul,
#mymenu li.sfhover ul,
#mymenu li li.sfhover ul,
#mymenu li li li.sfhover ul {
left: auto;
}
#menufixoleft {
width: 100%;
float: left;
margin: 0px;
padding: 0px;
}
#menufixo {
margin: 0;
padding: 0;
}
#menufixo ul {
float: left;
list-style: none;
margin: 0; padding: 0;
}
#menufixo li {
list-style: none; margin: 0; padding: 0; }
#menufixo li { float: left; padding: 0; }
#menufixo li ul a { width: 140px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#menufixo li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #menufixo li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#menufixo li:hover, #nav li.sfhover { position: static; }
#menufixoright {
width: 200px;
font-size: 11px;
float: right;
margin-top: -35px;
text-align: right;
padding-top: 6px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}


Salve, depois vá no layout do blog e adcione uma gadget HTML/JavaScript:
Dentro dela adcione esse codigo:

<div id="menufixo">
<div id="menufixo">
<li><table border="0" cellpadding="0" cellspacing="0" style="text-align: left; width: 200px;padding-left: -55px;">
 <tbody>
<tr>
 <td style="text-align: left;" valign="undefined"><a href="ENDEREÇO DE SEU GOOGLE+/"><img alt="" src="https://1.bp.blogspot.com/-pLdkcv1Dpd0/V2_EVfqm5PI/AAAAAAAAH9A/uAYnQuzSyFsfO4TCE08Hd0P6rE0GiVOrACLcB/s1600/google-plus-logo-button.png" style="border: 0px solid; height: 32px; width: 32px;" title="Google+" /></a></td>
 
    <td style="text-align: left;" valign="undefined"><a href="ENDEREÇO DE SEU INSTAGRAM/"><img alt="" src="https://4.bp.blogspot.com/-ViS-moe5Z8I/V2_EVW3dZDI/AAAAAAAAH9E/3QWpJUGRsG8sV46C_nNaSXnFQRyMtWhcgCLcB/s1600/instagram-logo.png" style="border: 0px solid; height: 32px; width: 32px;" title="Pinterest" /></a></td>

    <td style="text-align: left;" valign="undefined"><a href="ENDEREÇO DE SEU FACEBOOK/"><img alt="" src="https://1.bp.blogspot.com/-R2JoWcyVT2o/V2_EVSel-hI/AAAAAAAAH84/81uexCmHLHQ55mz7sgGVqH-WVlfCY2uJQCLcB/s1600/facebook-logo-button.png" style="border: 0px solid; height: 32px; width: 32px;" title="Facebook" /></a></td>
<td style="text-align: left;" valign="undefined"><a href="ENDEREÇO DE SEU TWITTER/"><img alt="" src="https://2.bp.blogspot.com/-QLIx_Oqzpak/V2_EVsxEopI/AAAAAAAAH88/14g3ahCJjtMRBZEFP53D_hww06kIUKbogCLcB/s1600/twitter-logo-button.png" style="border: 0px solid; height: 32px; width: 32px;" title="Twitter" /></a></td>
    </tr>
</tbody>
    </table></li>
<li><a href="ENDEREÇO DO LINK/">NOME DA ABA</a></li>
<li><a href="ENDEREÇO DO LINK/">NOME DA ABA</a></li>
<li><a href="ENDEREÇO DO LINK/">NOME DA ABA</a></li>
<li><a href="ENDEREÇO DO LINK/">NOME DA ABA</a></li>
<li><a href="ENDEREÇO DO LINK/">NOME DA ABA</a></li>
</div>
</div>


 Salve, (caso nao funcione , prove colocar o primeiro codigo acima do ]]></b:skin>  ao invez de abaixo do /* tabs )

Bom, entao é isso ai... espero que seja útil, me conte o que voces acharam!


Você pode gostar também

25 comentários

  1. Ola no meu nao encontro o /* Tabs o meu modelo o simples do blogger o que faço?

    ResponderExcluir
    Respostas
    1. Oi amoraaa... Como escrevi beem no final do post tente colocar a cima do ]]>

      Bjus

      Excluir
    2. Vou colocar afastado pq o html nao vai nos comebtarios rsrs
      ]] > < / b : skin >

      Excluir
  2. Ameei ! já mudei muita coisa no meu layout ( comecei com o simple do blogger) graças aos seus tutoriais! Muito Obrigada Vanessa <3
    www.simplesmentecriativa.com.br

    ResponderExcluir
  3. Este comentário foi removido pelo autor.

    ResponderExcluir
  4. Como faço pra trocar a cor da letra quando coloco a seta do mouse em cima?

    ResponderExcluir
    Respostas
    1. no html procure esse trecho:
      #menufixo a:hover {
      color: #FF69B4; /* cor do link da fonte em hover */

      e mude a opcao #FF69B4 pela cor desejada.

      Excluir
  5. Olá bom, eu coloquei só que quando passa o mouse a letra fica rosa
    como eu posso mudar isso ? Obrigado gostei muito do post

    ResponderExcluir
    Respostas
    1. no html procure esse trecho:
      #menufixo a:hover {
      color: #FF69B4; /* cor do link da fonte em hover */

      e mude a opcao #FF69B4 pela cor desejada.

      Excluir
  6. Renata,consegui colocar no meu blog teste,deu certinho.
    Parabéns pelo tutorial ,sucesso para você e seu blog,beijos

    ResponderExcluir
  7. Para as meninas que estão com dificuldades de colocar nos seus blogs,fica a dica use o modelo Travel,desative a Navbar para depois seguir com o tutorial.
    Renata desculpe eu me meter mas vi nos comentários acima a dificuldade das meninas.
    Sucesso querida,beijos

    ResponderExcluir
    Respostas
    1. Obriga ,mais uma vez!! É isso ai

      Excluir
    2. Este comentário foi removido pelo autor.

      Excluir
    3. O meu ficou um em baixo do outro, como faço para colocar em horizontal?

      Excluir
  8. Este comentário foi removido pelo autor.

    ResponderExcluir
  9. otimo menu ja to colocando em pratica no meu site
    http://www.noticiazap.net/

    ResponderExcluir
  10. Oi lindona! Primeiramente, parabéns e obrigada por nos ajudar tanto! Estou começando um blog e aqui estou conseguindo varias dicas lindas!

    Então, fiz todo o procedimento, mas está aparecendo somente o botão do Instagram no menu. Há alguma maneira de corrigir isso?

    PS: já repeti o procedimento 3 vezes.

    Beijossss

    ResponderExcluir
  11. serio vc é demais parabens faz um video ensinando a editar cada um do seus tampletes sou meio lerda rs

    ResponderExcluir
  12. renata me ajuda si eu colocar o menu fixo some a personalização dos gadgets

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda