20 março 2019

MENU FIXO COM REDES SOCIAIS

| |
Olá meus amores como sabem está rolando #EspecialAniversário do canal InterCachos e resolvi fazer #VideosQuaseTodoDia, Segunda a Sábado 12hs vídeos no canal.
E no vídeo de hoje eu ensinei como colocar Menu fixo com Redes Socias no Blog, confira o vídeo completo com tutorial.

Aqui você vai copiar os códigos.

Passo 1

Procure a tag ]]></b:skin> , achando cola o primeiro código acima dessa tag.

Código 1
/* 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;
}

Passo 2
Vá em layout do blog e adicione uma gadget HTML/JavaScript: dentro dela adicione esse código.

Código 2
<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 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>

Fim do Tutorial
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

Assista vídeo com tutorial
Este foi o post de hoje espero que tenham gostado deixe quaisquer dúvidas nos comentários, para saber mais veja o vídeo, beijos e até a próxima.

8 comentários:

  1. ah adorei! esse post é praticamente de utilidade publica pra quem bloga

    www.tofucolorido.com.br
    www.facebook.com/blogtofucolorido

    ResponderExcluir
  2. Eu amo posts de ajuda e dicas para deixarmos nossos blogs incríveis!

    ResponderExcluir
  3. Perfeito! Esses códigos deixam a gente doidinha!
    Já usei tanto, hoje meu marido que faz isso pra mim :)
    Mas pode ter certeza que você vai ajudar muita gente com esse post.

    Beijinhos,
    Aline Magalhães
    Alineland

    ResponderExcluir
  4. oi!
    Que maravilha :D eu adorei essa dica é otima

    ResponderExcluir
  5. Ahhh Eu amei! Amo esse tipo de dica é sempre muito útil né? Arrasou na dica!

    ResponderExcluir
  6. Suas dicas são ótimas e bem explicadas, esses posts de ajuda para blogs são maravilhosos.
    Bjinhos,
    www.prosaamiga.com.br

    ResponderExcluir
  7. Uau, que máximo Muito obrigado pela partilha. Eu não sabia como se fazia. Vou já testar.
    Um beijinho

    ResponderExcluir
  8. Amo posts com dicas de html e como mexer no layout! Obrigada por compartilhar esta com a gente!

    ResponderExcluir