Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

03 março 2009

Mais menus horizontais

Hoje o Carlinhos me perguntou no Twitter como colocar no blog os menus que aparecem nesta página. Como é impossível explicar em 140 caracteres, vou responder aqui no blog:

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.

Artigos Relacionados

39 comentários:

Carlinhos Medeiros disse...

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!

Ariane disse...

só peço desculpas por não explicar antes; enquanto minha filhota está acordada, tudo q eu consigo fazer é escrever frases breves no Twitter :)

Anônimo disse...

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

wellington disse...

ariane tenho um template que naum tem la no fim da pagina o link para postagem antigas como faço pra colocar.

Anônimo disse...

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"

Anônimo disse...

Deixei um selo pra vc lá no Dicas Plugins e Templates. Espero que aceite.

Obrigado

PS.: Excelente dica essa!!!

Dênis Luíz Pádua disse...

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?

Brazil Download disse...

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.

Sousa Varela disse...

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

Yuri disse...

me ajude por favor naum to conseguindo
yuri_zizu_10@hotmail.com

(¯`·._.·[Satoshi_Ash]·._.·´¯) disse...

Ei podia me emsinar como pegar um templete de um blog

Byron disse...

Brigadão, ficou ótimo no meu Blog

Portal80 disse...

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

Anônimo disse...

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!

Toda a actualidade do cantor, você encontra aqui... disse...

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.

............................. disse...

Muito bom!
Não só o artigo como o site todo, encontrei informações sobre códigos interessantes.

Obrigado.

André

Edgard Assumpção disse...

Puxa, eu consegui fazer , mas as imagens não aparece, eu hospedei tudo certinho mas não entendi o q aconteceu.

Ariane disse...

Edgard, deixa eu ver o blog onde vc colocou o menu para encontrar o erro.

Ivan disse...

porque habla raro...hablan como pele!!!
jejejeje
adios

Dj My disse...

obrigado moça , muito útil , adorei seu blog

Gille Louback disse...

Não deu certo aqui.Aparece os links mais não aparece as imagens!

Victor Leão disse...

Ariane eu nao consegui fazer o processo, mas como vc tem pronto naquele blog(qualquertemplate)tem como vc me passar o codigo!?

Bia disse...

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

Luis Henrique disse...

Nossa ariane,venho aprendendo cada vez mais com esse seu blog,enquanto o tutorial,ficou demais.
funcionou perfeitamente no meu blog.

Anônimo disse...

Muito boa dica vou fazer um pro meu site.

abraços.

Alex disse...

Olá Ariane! excelente trabalho parabéns!

Anônimo disse...

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!

Renan Pinheiro disse...

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 ^^

Gisele disse...

o meu não ficou igual o seu pq?

link: http://pratestey.blogspot.com/

Niccolas Sartori disse...

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

J.Ferreira disse...

Adorei o post. Me ajudou muito, pretendo utilizar a dica muito em breve.

O que você acha dos blogs com layouts mínimos?

Adá disse...

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)

John disse...

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.

O Embuense disse...

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>>

Ariane disse...

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.

iAlef.com disse...

oi gostei do blog parabens!!!

Kety Cristina disse...

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)

Anônimo disse...

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

Alemao Silent Install disse...

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.