2 de mai de 2008

Menu com botões costumizáveis

Fiz alguns botões em cores diferentes para que você tenha seu menu horizontal combinando com as cores de seu blog. Veja o exemplo.




Bem simples basta que você salve a imagem escolhida em seu pc e depois a hospede( se não sabe hospedar aprenda AQUI ). Para instalar o menu em seu blog, coloque os códgos nos locais indicados e depois cole o endereço dos botões no local indicado no menu.































Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.







Vá até o HTML do seu Blogger e procure pelo código:
]]></b:skin>















  • Azul--endereço da imagem
  • Verde--cor das letras
  • Vermelho--cor do fundo ao passar o mouse

Agora acima do código, ]]></b:skin> cole o código abaixo







ul#menu
{
width: 100%;
height: 60px;
background: url("AQUI O ENDEREÇO DE SUA IMAGEM") top left repeat-x;
font-size: 0.8em;
font-family: "Lucida Grande", Verdana, sans-serif;
font-weight: bold;
list-style-type: none;
margin: 0; padding: 0;
}
ul#menu li
{
display: block;
float: left;
margin: 0 0 0 5px;
}
ul#menu li a
{
height: 40px;
color: #000000;
text-decoration: none;
display: block;
float: left;
line-height: 200%;
padding: 8px 15px 0;
}
ul#menu li a:hover
{
color: #FFFFFF;
background: #000000;
}
ul#menu li a.current
{
color: #FFF;
padding: 5px 15px 0;
}






Agora se quer que o seu menu fique acima da imagem principal do blog procure pelo código:



<div id='navcontainer'>





se quer que o seu menu fique abaixo da imagem principal do blog procure pelo código:





<div id='content-wrapper'>



E cole o código abaixo.
Faça as alterações colocando os links desejados e salve.





<!-- TROQUE ABAIXO O ENDEREÇO PARA O SEUS LINKS DO MENU HORIZONTAL -->
<ul id='menu'>
<li><a class='current' href='http://AQUI O ENDEREÇO DO SEU LINK 1'>LINK 1</a></li>
<li><a href='http://AQUI O ENDEREÇO DO SEU LINK 2'>LINK 2</a></li>
<li><a href='http://AQUI O ENDEREÇO DO SEU LINK 3'>LINK 3</a></li>
<li><a href='http://AQUI O ENDEREÇO DO SEU LINK 4'>LINK 4</a></li>
<li><a href='http://AQUI O ENDEREÇO DO SEU LINK 5'>LINK 5</a></li>
<li><a href='http://AQUI O ENDEREÇO DO SEU LINK 6'>LINK 6</a></li>
</ul>


10 comentários:

  1. nossa eu adoro esse blog geniallllllllll dd++++
    quero um dia chagar a ser assim com voce!!!
    queria saber etender de blog, esses codigos...
    adoro esse mundo !!!
    tchauu fica com Deuss

    ResponderExcluir
  2. Oi Anonimo, é só ter paciência e perseverança que vc consegue. Eu não sabia nem ligar um pc a 5 anos atrás. Beijos

    ResponderExcluir
  3. oi seu blog é o maximo

    ResponderExcluir
  4. SEU BLOG ME AJADA TANTO .. NUSS

    CONTINUE ASSIM!!!

    ResponderExcluir
  5. menina!! ha tempos venho tentando colocar isso em meu site! Graças a vc e sua maneira super facil e descoomplicada, eu consegui! Milhões de beijos e continue dando dicas! Denise

    ResponderExcluir
  6. Olá!!
    Boa tarde!!
    Meu nome é sayonara e amo o seu blog. Pois tem sido útil e bem amplo. Baixei um template Blogger Template Style
    Template Costumizavel Boleado
    Desenho: Elke di Barros
    URL: http://templateseacessorios.blogspot.com/
    criado em 11 de setembro 2009
    Mas gostaria de saber se é possivel tirar o menu seperior do cabeçalho. já tentei e nao achei ninguém que sabe como fazer. Conto com sua ajuda. Desde já fico agradecida coma sua consideração para com minha pessoa. Mais uma vez. Parabéns pelo seu trabalho. Aguardo seu retorno.
    Um forte abraço!

    ResponderExcluir
  7. cara tu ta de parabéns teu blog e demais

    ResponderExcluir
  8. caraaa, há muito tempo mesmo eu procurava um tutorial que me ensinasse a fazer isso, e você nos mostrou aqui uma forma super simples e facil !
    gostei dmais, valeuuuu

    ResponderExcluir
  9. parabens perfeito consegui certinho^^

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube