Hey pessoal! Como estão vocês? espero que estejam ótimos! peço desculpas pela demora das postagens, estava um pouco fora de órbita e foquei um pouco nos estudos também. Como o blog está bem parado resolvi fazer uma semana de tutoriais para dar uma "chacoalhada" por aqui, a maioria de vocês gosta bastante e aqui estou, sete dias de tutoriais!
Resolvi começar com os pedidos que estavam acumulados na Ask.
Cheguem mais.
É o menu atual do blog, podem vê-lo on line aqui no TF ou no blog de previews
1 - Vá no seu HTML ( Painel>>modelo) clique em alguma parte do HTM e tecle ctl + f e procure por
]]></b:skin> Acima cole o seguinte código, modificando onde for indicado.
/* Menu fixo editado por Teens Forever
----------------------- */
#navtop {
border-bottom:1px dotted #f4f2f2;
background-color: rgba(255,255,255, 10.0);
top: 0px;
width: 100%;
height: 6%;
left: 0px; padding-right: 100px;
padding:0px 3px;
position:fixed;
opacity: 0.8;
z-index:1000;
}
#navtop li {
text-align: center;
float: left;
display: block;
padding:3px;
padding-left: 10px;
padding-right: 10px;
}
#navtop li a, #navtop li a:link, #navtop li a:visited { /*--links do menu--*/
float: center;
display: block;
padding: 3px;
text-transform: uppercase;
text-decoration:none;
background: transparent; /*--Edite cor de fundo dos links--*/
color:#999; /*--Edite cor dos links--*/
font-size:24px; /*--Edite tamanho da fonte--*/
font-family: 'Didact Gothic', sans-serif; font-weight: strong; /*--Edite a fonte do menu--*/
border-bottom: 1px dotted transparent;
}
#navtop li a:hover { /*--links no estado hover--*/
background: #fff;
color:#666; /*--Edite cor dos links--*/
text-decoration:none;
border-bottom: 1px solid #666;
}
#navtop li ul {
display: none;
}
Após terminar de editar salve.
<div id='navtop'>
<li><a href='LINK' title='NOME QUANDO PASSA O MOUSE'>NOME</a></li>
<li><a href='LINK' title='NOME QUANDO PASSA O MOUSE'>NOME</a></li>
<li><a href='LINK' title='NOME QUANDO PASSA O MOUSE'>NOME</a></li>
<li><a href='LINK' title='NOME QUANDO PASSA O MOUSE'>NOME</a></li>
<li><a href='LINK' title='NOME QUANDO PASSA O MOUSE'>NOME</a></li>
</div>
Se necessário adicione ou retire linhas do código, visualize, salve e pronto!
Se tiverem pedidos peçam pelos comentários ou pela ask
Que legal o tutorial! Muito útil,
ResponderExcluirQue bom que gostou querida!
ExcluirSempre quis saber esse tutorial! Muito bom!
ResponderExcluirQue bom que gostou! ele é bastante útil!
ExcluirMuito obrigado pelo tutorial! Você saberia me dizer o que eu tenho que alterar para que as palavras do menu fiquem centralizadas? Valeu e parabéns pelo blog!
ResponderExcluirNão recomendo tentar centralizar esse menu ele fica bagunçado. É só procurar no codigo do menu por float: left; e troque left (esquerda) por center (centro) :)
Excluiroi tenho uma dúvida como muda o negocio do blog de quando passa o mouse ? tipo o seu é verde e vermelho queria saber como mudar ^^ a propósito seu blog é cute demais ^^ vou seguir bjsss
ResponderExcluirAmei o menu! Estou usando lá no meu blog.
ResponderExcluirhttps://menina-do-oculos-vermelho.blogspot.com
Beijos