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

18 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

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