Mais menus horizontais
Primeiro faça o download do pacote que contém as imagens e códigos para os 4 menus: download.
Copie o código CSS (ver abaixo) para o menu escolhido: Blue, Green, Red ou Purple e cole em qualquer lugar antes de ]]></b:skin>
Hospede as duas imagens que são pedidas para cada menu. Por exemplo, se você escolheu o Red, hospede redslate_background e redslate_backgroundOVER e coloque assim no código:
.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(aqui o link da primeira imagem/code/slate/images/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(aqui o link da segunda imagem/code/slate/images/redslate_backgroundOVER.gif) no-repeat top center;}
Não mude nada entre os parenteses, apenas acrescente o link das imagens, como indicado.
Agora copie o trecho do HTML do código do menu :
<div class='red'>
<div id='slatenav'>
<ul>
<li><a class='current' href='http://seu link aqui' title=''>Home</a></li>
<li><a href='http://seu link aqui' title=''>About Us</a></li>
<li><a href='http://seu link aqui' title=''>Services</a></li>
<li><a href='http://seu link aqui' title=''>Our Work</a></li>
<li><a href='http://seu link aqui' title=''>Contact Us</a></li>
</ul>
</div>
</div>
e cole abaixo ou acima de:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Cabeçalho)' type='Header'/>
</b:section>
</div>
O meu ficou assim.
Espero ter ajudado.
39 comentários:
Puxa, quanta honra! Um Tuto dedicado a mim?! Como eu disse no Twitter, estava com dificuldades de colocar as imagens sem saber se era dentro ou fora dos parênteses, mas olhando umas imagens estáticas no blogue deu pra matar.
De qualquer forma, da maneira que está explicado (como sempre), outras pessoas que se interessarem não vão ter o mínimo trabalho. Confesso-lhe que devo ter tentado umas cinco horas, sem intervalos... :)) Abs!
só peço desculpas por não explicar antes; enquanto minha filhota está acordada, tudo q eu consigo fazer é escrever frases breves no Twitter :)
ariane belo post. o menu do meu blog por ex. eu peguei o cod. neste link.
http://www.cssmenumaker.com/index.php
tem varios e bonitos tb. e por coincidencidencia é os msmos eu acho.
mais da uma conferida. obrigado
ariane tenho um template que naum tem la no fim da pagina o link para postagem antigas como faço pra colocar.
obrigado pelo poste ficou muito fácil, ja fiz o meu menu.
tem um pequeno detalhe:
a parte do código onde tem:
[(aqui o link da primeira imagem/code/slate/images/redslate_background. gif)]
o final dessa parte está com o "gif" sepado do background; tem que ficar "background.gif"
Deixei um selo pra vc lá no Dicas Plugins e Templates. Espero que aceite.
Obrigado
PS.: Excelente dica essa!!!
oi, desculpe, sou meio leigo, coloquei um link a mais, e caiu oo menu pra baixxo, da para mudar o tamanho do menu, para dar certinho na pagina?
Olá ariane.... O seu post me ajudou muito. Muito obrigado...
Se você pudesse também mostrar como colocar algum menu desse site: http://cssmenumaker.com/index.php
Eu ficaria muito grato.
Ola! adorei a tua explicação, mas gostaria de saber como faço aqueles item do menu horizontal do teu blog achei o máximo... se possível manda-me : sousaferrari@hotmail.com bjs
me ajude por favor naum to conseguindo
yuri_zizu_10@hotmail.com
Ei podia me emsinar como pegar um templete de um blog
Brigadão, ficou ótimo no meu Blog
Eu, como novata não sei mesmo como colocar este menu em portugues, normal e com algumas opçoes como home, principalmente.
Ja vi até mesmo abaixo dos post (sozinho na pag.) como página anterior, próxima página e home.
Grata e parabéns pelo blog-ajuda! .o
Boa noite Ariane,é a segunda vez que venho aqui no seu blog e da primeira não conssegui exito com o codigo que me interesssava na época,mais esse aqui,tenho que lhe dar os parabens.
Ocodigo funciona perfeitamente,obrigado!
Amigo sua explicação foi otima, obrigado pela inestimavel ajuda.
Com as suas indicações instalar um lindo menu foi cosa de minutos.
Eu gostaria que ele ficara por debaixo do cabeçalho.
Você me explicaria como fazer? em linguagem bem lego.
Agora ele se visualiza assim http://alezamoraperfil.blogspot.com/
Obrigado.
Muito bom!
Não só o artigo como o site todo, encontrei informações sobre códigos interessantes.
Obrigado.
André
Puxa, eu consegui fazer , mas as imagens não aparece, eu hospedei tudo certinho mas não entendi o q aconteceu.
Edgard, deixa eu ver o blog onde vc colocou o menu para encontrar o erro.
porque habla raro...hablan como pele!!!
jejejeje
adios
obrigado moça , muito útil , adorei seu blog
Não deu certo aqui.Aparece os links mais não aparece as imagens!
Ariane eu nao consegui fazer o processo, mas como vc tem pronto naquele blog(qualquertemplate)tem como vc me passar o codigo!?
Ariane, vc é minha ídola!
Ficou lindão! Agora vou fazer mais alterações antes de implantar a template nova que to alterando tudo! kk
Mas vc, como sempre salva minha vida!
beijocas
Nossa ariane,venho aprendendo cada vez mais com esse seu blog,enquanto o tutorial,ficou demais.
funcionou perfeitamente no meu blog.
Muito boa dica vou fazer um pro meu site.
abraços.
Olá Ariane! excelente trabalho parabéns!
Ariane, meu blog ficou estranho, eu fiz certinho só que o menu não fica centralizado, não fica "certinho" com o template... =/
Olha aqui: http://skytzblog.blogspot.com/
Eu gostaria de saber se você pode me ajudar a fazer que nem ficou o seu? Eu tentei mudar a parte "width:auto;}" para "width:760px;}" mas não mudou nada. Eu ficaria muito grato se você me ajudasse nisso!
Finalmente consegui colcoar isso =D
Só tem um pequeno problema, como posso centralizar? No meu ficou a esquerda
http://nipponimes.blogspot.com/
Agradeço a ajuda ^^
o meu não ficou igual o seu pq?
link: http://pratestey.blogspot.com/
Adriane...
eu sou muito iniciante nisso, está dando erro nisso, meu blog é
http://galeradopaint.blogspot.com
não sei se vai ajudar passar o link mas vê se vc consegue me ajudar por favor!
Obrigado e ta de parabéns no seu blog
Adorei o post. Me ajudou muito, pretendo utilizar a dica muito em breve.
O que você acha dos blogs com layouts mínimos?
oi ariane, consegui colocar o menu horizontal (pegay a dica em outra postagem sua - que não dá mais para comentar) só que do lado direito da barra de menus sobra espaço. tentei editar o margin mas não deu, o meu width está em 762 - de modo que no lado esquerdo fica certo, se eu aumentar ou diminuir vaza, entende?
gostaria de preencher o lado direito. outra coisa, tem como eu deixar a fonte em minuscula? combinaria mais com a estética do blog.
se puder ir lá ver e inclusive e comentar sobre essas mudanças pra mim eu lhe fico muito grato, abraço.
http://euvoucomerocudofreud.blogspot.com (não tenha medo, é sobre homocultura apenas)
Olá Ariane, no meu blog ficou perfeito no Internet EXPLORER, mas, no Firefox a imagem do menu nao aparece... Será que fiz algo mal??? Obrigado, John.
cara.. tentei mas acho que vc não explicou direito. Sua explicação apenas dá conta se utilizar o que vc indicou. No caso gosatria de utilizar outro modelo. Como Faço? Quando executo esse passos que vc indicou o menu fica na vertical.. e não na Horizontal..
O que eu quero colocar noi blogger é esse: http://13styles.com/css-menus/style1/
Desculpa pela indiscrição.
Se puder me ajudar. Agradeço>>
O Embuense eu precisaria ver como vc está colocando os códigos do menu para encontrar o erro. coloca em um blog de testes e deixa o link.
oi gostei do blog parabens!!!
Olá Ariane, tudo bem
Bom acho seu site nota 1000, fico babando com as novidades, sou da area da Saúde mas adoro este universo ( estou tentando fazer o meu blog com a sua ajuda)
Parabéns,
grande abraço. (ah este site que uso para teste)
Oi Ariane,tudo bem?
Estou tentando personalizar meu blog com os ensinamentos adquiridos aqui,por isso pergunto como posso colocar menus clicáveis abaixo do cabeçalho do blog. Exemplo hipotético abaixo:
BLOG DO PELUDO
inicio índice anuncie links úteis perceiros contato sugira
Desde já agradeço pela ajuda. Parabéns por seu blog, é excelente. W|ilson
Olá Ariane,parabéns pelo seu trabalho,gostaria de fazer um menu igual esse do seu blog,mas o link para download do pacote que contém as imagens e códigos para os 4 menus está off,se puder ver isso agradeço.
Postar um comentário
Os comentários são moderados.