Menu fixo no Topo do blog com Ícones das Redes sociais
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4MWAyxHZeD95La9tlFbkGvNH90uy8t4RMO8_Z0cBYkO1GaVbVWeB9PcMEBxamYjrZ_LXApiQX4gtvH9_iEfOTALCoyrBCC40pPXZyojqMz77vjM3wYOMKTpC72J3MEu8_UIunUGCVJunh/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6p8MepYTJaHh_KUiSWi7H2fOCia-3rA3hrsdTaYWW_ntOEPml_u1YWYOMh2GPgo4J5xGkopnU76o1ZV3wy9Qev9zt_wNkyGwjYZ6lYmwQVrjAplniwXAJc0U8Di1EBKV98xplGq0_tsls/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VgKTkWhlvy3BNaru4aoeH86dVPQUiqbk1Sbj6Ot5tuPf-eaf3G_WyO3P_UKZaivACJQziO2r_d0zkWf1Bko7B7966ZAdinrJjUNdzZe68LANofw4BvbaMZNOuEZ_TFVZU-gUnFk8Scx6/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6A8erKdcnnM8_BmKlxSvsKMiu4x9VLsdykHM5YXHdIk4QRu5larP7oI1Gl51OhkcDfhp2DVf0Dn0stn1otLWPXGE8Yxm0XlPOJ2Vu9338hIInX-UOneiBlnOy4gX2n8s8UlVlm9737st/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!
25 comentários
Ola no meu nao encontro o /* Tabs o meu modelo o simples do blogger o que faço?
ResponderExcluirOi amoraaa... Como escrevi beem no final do post tente colocar a cima do ]]>
ExcluirBjus
Vou colocar afastado pq o html nao vai nos comebtarios rsrs
Excluir]] > < / b : skin >
Ameei ! já mudei muita coisa no meu layout ( comecei com o simple do blogger) graças aos seus tutoriais! Muito Obrigada Vanessa <3
ResponderExcluirwww.simplesmentecriativa.com.br
Linda, obg <3
ExcluirEste comentário foi removido pelo autor.
ResponderExcluirAmei super deu certo obgda
ResponderExcluirde nada amore
ExcluirComo faço pra trocar a cor da letra quando coloco a seta do mouse em cima?
ResponderExcluirno html procure esse trecho:
Excluir#menufixo a:hover {
color: #FF69B4; /* cor do link da fonte em hover */
e mude a opcao #FF69B4 pela cor desejada.
Olá bom, eu coloquei só que quando passa o mouse a letra fica rosa
ResponderExcluircomo eu posso mudar isso ? Obrigado gostei muito do post
no html procure esse trecho:
Excluir#menufixo a:hover {
color: #FF69B4; /* cor do link da fonte em hover */
e mude a opcao #FF69B4 pela cor desejada.
Renata,consegui colocar no meu blog teste,deu certinho.
ResponderExcluirParabéns pelo tutorial ,sucesso para você e seu blog,beijos
Obrigada lindona
ExcluirPara 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.
ResponderExcluirRenata desculpe eu me meter mas vi nos comentários acima a dificuldade das meninas.
Sucesso querida,beijos
Obriga ,mais uma vez!! É isso ai
ExcluirConsegui desse jeito ai <3
ExcluirEste comentário foi removido pelo autor.
ExcluirO meu ficou um em baixo do outro, como faço para colocar em horizontal?
ExcluirDeu certo, obrigada!
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirotimo menu ja to colocando em pratica no meu site
ResponderExcluirhttp://www.noticiazap.net/
Oi lindona! Primeiramente, parabéns e obrigada por nos ajudar tanto! Estou começando um blog e aqui estou conseguindo varias dicas lindas!
ResponderExcluirEntã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
serio vc é demais parabens faz um video ensinando a editar cada um do seus tampletes sou meio lerda rs
ResponderExcluirrenata me ajuda si eu colocar o menu fixo some a personalização dos gadgets
ResponderExcluirMande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.