Em um dos meus blogs de teste eu instalei este menu criado por Soh do site SohTanaka e que tem um efeito bastante interessante. Você pode conferir o demo aqui.
Me pediram para explicar como colocar este menu no Blogger, então lá vai:
Primeiro você deve criar uma imagem com 80px de altura onde metade de cima dela (40px) aparecerá quando o menu estiver em estado normal e a metade de baixo no estado hover (quando passa o mouse por cima), como neste exemplo:
Hospede a imagem (pode ser no próprio Blogger) e guarde o link. Agora vá em Editar HTML e cole no código do seu template, abaixo de ]]></b:skin>
<style type='text/css'>
.container {
width: 520px;
height: 100px;
position: absolute;
top: 10%; left: 60%;
margin: 0px 0 0 -80px;
overflow: hidden;
}
img {border: none;}
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 520px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 10px;
float: left;
text-decoration: none;
color: #fff;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(coloque aqui a url da imagem) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(coloque aqui a url da imagem) repeat-x left bottom;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("#topnav li").prepend("<span/>"); //Throws an empty span tag right before the a tag
$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});
$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});
});
</script>
depois, no HTML ( após a tag <body> ) coloque o seguinte trecho, antes ou depois de <div id='header-wrapper'>....</div> :
<div class='container'>
<ul class='v2' id='topnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
No meu exemplo, os códigos foram colocados abaixo de header, assim:
.container {
width: 520px;
height: 100px;
position: absolute;
top: 10%; left: 60%;
margin: 0px 0 0 -80px;
overflow: hidden;
}
width: largura total ocupada pela div que contém o menu.
note que em ul#topnav o valor se repete (width: 520px)
top: 10% - distância do menu para o topo da página
left: 60% - distância do menu para o lado esquerdo da página
com margin você também controla a posição do menu. Veja que o menu está a 60% da esquerda da página menos 80px. Vá alterando os valores para que melhor se encaixe no seu layout.
Coloque a url da sua imagem hospedada (no Blogger ou em outro site) onde está indicado no código CSS em negrito. Substitua os # no HTML do menu pelos links que desejar.
 |
| resultado |
Eu agradeço por sua vontade e ação de ensinar. Caso não fosse desnecessário, eu comentaria isto em cada um de seus posts. Seu blog se destaca facilmente no nincho "aprender códigos html e css para blogger". Obrigado e parabéns.
ResponderExcluirPois é desde que iniciei no mundo blogger ,pela primeira vez achei essa escola.
ResponderExcluirHoje virou meu vicio!
Obrigada rainha por tudo enclusive seus templates doados gratuitamente ou mesmo os pagos.
Gratidao profunda!
Taillard
Deu tudo certo, só existe um problema: toda vez que eu coloco alguma postagem nova desregula a posição do menu. Como Resolver?!
ResponderExcluirLeonardo não vi o menu no seu blog por isso não tenho como ver onde está o erro
ResponderExcluirAriane, é porque eu estou fazendo o teste em um blog teste primeiro. Esse é o link: http://obaobalegriadeviver.blogspot.com/
ResponderExcluiro problema é quando eu coloco uma nova postagem a menu muda de lugar. Ou sobe ou desce, não fica fixo em baixo do cabeçalho.
Ariane, é porque eu estou fazendo o teste em um blog teste primeiro. Esse é o link: http://obaobalegriadeviver.blogspot.com/
ResponderExcluiro problema é quando eu coloco uma nova postagem a menu muda de lugar. Ou sobe ou desce, não fica fixo em baixo do cabeçalho.
Leonardo as medidas de .container estão erradas, o height deve ser apenas de 100px (está 1024px) e os valores para alinhar na página também devem ser modificados.
ResponderExcluirperfects!
ResponderExcluirMuito obrigado!
No meu blog não tem o trecho "<'div id='header-wrapper'>.... "
ResponderExcluire também diz que não aceita o tipo "style" como resolver?
Muito legal esse blog valeu pela ajuda
ResponderExcluirAriane, você é a salvação da minha lavoura :).
ResponderExcluirObrigado pelo poster...
ResponderExcluirSó tenho uma pergunta a respeito.
como faço pra duplicar ou usar imagens de fundo diferentes nos botoes ?
Obrigado.
Aguardo resposta.
cara ficou massa os botões em meu blog usando o CRHOME, mas quando vai abrir pelo IE ou FIREFOX, os botões ficam fora.
ResponderExcluirwww.climatizo.com.br
VEJA SE PODE ME AJUDAR
Caso tenha recebido minha pergunta por favor descarte esta.
ResponderExcluirMeu blog ficou muito massa com os botões, porem funciona bem no GOOGLE CRHOME, quando vou abrir no IE ou FIREFOX, os botões mudam de lugar para cima. Se puder ajudar agradeço.
www.climatizo.com.br
como mudo a cor do texto ?
ResponderExcluirPorque esta dando este erro:
ResponderExcluirNão foi possível salvar o modelo
Corrija o erro abaixo e envie o seu modelo novamente.
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The element type "a" must be terminated by the matching end-tag "".
Este comentário foi removido pelo autor.
ResponderExcluirOlá Ariane, gostaria de saber como eu faço para colocar os artigos relacionados no templastes mundo verde, tentei usar o tutorial que vc postou sobre postagensd populares na horizontal mais não não consegui aplicar ao templaste e na demostração dele apareçe. Gostaria que vc me ajudasse. www.mikaeluke.tk.
ResponderExcluirAguardo respostas.