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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH9Z8UybacnRtfklNCU27Y3EM9e4N1QSdIZt0taJTA-POhxji6C2gB0FCxys_5Y3sc8pDObEtydiVv5N53QYZQ1FoWeDaVc1kRp2WZYgZcx_ZlTGtkCiCOLXL37XNpY5mRPOkAHAE4_3V-/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/AVvXsEhAtk8k9PpLcsOiQDKt1WJfW9Lu8gNKN9474oxUu8gQ-05p8xyx5aA_0-l4tQ6Y38DjO9vdOzPPc7KxagHw8UBZMZFdZemGzCOGaFR89kZGuhyphenhyphenuVA8dGbS9_W4jcXM8NbsZ9h88VFyTlx7W/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/AVvXsEhMuBt5vyaLeQUfsqRsB46XMR-8XjM_1EK1RWZiFOdPgkWtdAlTkfq_1ZEKcPQL_r0nCctt8I0meS9kchQTsZll7iCy6y-7j7ogKkzdHjis1_jx5tO8nfCtjt2TQn303_svNZ-dBEQEofUb/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/AVvXsEjxOuobIk4vhLywLB7ojbWuwTAdEGvwhcfrJIiJUiSxHmfbe77nJCFuGXc0bs1SYhyphenhyphenr-9Trez-3jIL48clXBABXQdvqikryAZMsm4qpXCqyp6C11N2eyex4r7KaZqn13btl1VWnQ2itOtV-/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!
23 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 >
Este 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?
ExcluirLinda, obg <3
ResponderExcluirDeu certo, obrigada!
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirOi 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
ResponderExcluir