Eu já estava a vários dias querendo fazer esse post, estava tentando eu mesmo fazer um manualmente, usando os mesmos princípios de aumentar imagem com css, mas acabei descobrindo esse site pra fazer menus online, "guardei", e hoje eu vi uma busca aqui no blog "crie um menu online quando passa o mouse muda a cor ", e decidi que já estava passando da hora de postar sobre um menu css com efeito Drop-Down e outros.
cssmenumaker.com
A implementação do código
Ou no blogspot Painel; clique em
<HEAD>
<STYLE type=text/css>
Css aqui
</STYLE>
ou endereço do arquivo css aqui:
<link href='http://SuaPagina.com/stilo.css' rel='stylesheet' type='text/css'/>
</HEAD>
<BODY>
A outra parte do código do Menu aqui, ou, no blogspot em Design , Elementos da página
</BODY>
É necessário saber um pouco sobre css e como usar as imagens que "estão incluídas no css", ou seja, no css vai ter um código que diz algo como: background: URL(images/nav_right.png) Essa imagem deve estar hospedada em um local na web, e, dentro do css, é melhor que, no local onde tem images/nav_right.png tenha o endereço completo da imagem.
Atualização:
São menus muito bonitos, e, tudo que é excelente exige muito esforço, não poderia ser diferente com a implementação do menu.
Percebi que alguns estão tendo problemas, eu vou tentar mostrar uma forma de usar o css em arquivo externo, usando o pages.google.com porém vocês devem, além de fazer o menu, fazer o download da pasta com o arquivo, e as imagens e hospedar ambos na web, e todos no mesmo local, eu escolhi o pages.google por ser fácil, rápido, seguro e grátis para todos.
Terão também que mexer no arquivo style.css que será baixado no site que faz o menu.
Implementar o menu com uso de arquivo externo
A primeira coisa após baixar a pasta.zip com o menu é fazer uma cópia da pasta que está dentro dela para seu computador, e, manter a pasta que você baixou intacta, caso de algo errado, vamos trabalhar com a cópia.- Com um editor de texto, o mais simples possível(bloco de notas, se possível) Abra o arquivo style.css e procure pelos nomes images/ e retire todas as palavras images/ Depois de retirar Salve o arquivo, veja apenas um dos Exp:
Antes, background: url(images/item-primary-bg.gif)
Depois, background: url(item-primary-bg.gif)Isso porque quando você transferir o arquivo style.css e as imagens para a pagina do google, ambos irão ficar lado a lado(na mesma pasta ou diretório) e a pasta images não vai, só podemos mandar arquivos, então tudo que se refere a ela dentro do arquivo deve ser retirado.
Atualização: O serviço pages.google Será desativado, não usem para isso.
Não será possível usar esse serviço, então esse procedimento abaixo fica inviável, a menos que você encontre um similar.
- Clique em Uploaded Stuff para expandir o menu, fica no canto direito superior.
O link Uploaded Stuff expandi ou esconde esse menu, ele precisa estar expandido.
- Clique no botão Arquivo,
Se não estiver visível clique no link [Upload] para ver
aí é só encontrar o arquivo de seu computador, clicar em Abrir, Ok ou Concluir. - Para ver seu arquivo e o endereço dele na web, é só clicar sobre o nome do arquivo, na página Pages.Google. Clique para aumentar
- Com um editor de texto, Abrir o arquivo index.html e identificar o código do menu que dele começar com uma <div e terminar com </div> , esse é o código html do menu que você deverá copiar, depois de trabalhar ele um pouco.
- Se você perceber esta tudo bonitinho cada item numa linha, isso é pra facilitar o entendimento, porém é usado espaços para isso, e cada espaço é bits, se você tirar esses espaços(com cuidado) reduz o peso de suas páginas um pouco, e isso é muito bom.
Você não deve tirar espaços entre letras ou palavras, <li>imagine que essas palavras não estivessem aqui, esse espaço poderia ser retirado</li>
- Exp: Retirei os espaços, desse trecho, e reduzi 5 kb, fica um pouco confuso para entender, mas é o peso de uma imagem pequena, que eu poderia usar no meu blog.
Isso não interfere na apresentação do menu, porque as tags Html tem suas funções e, algumas delas tem a função de quebrar a linha.
- Se caso no html do menu tiver imagens, por Exp:
<img src ="images/nome-da-imagem.jpg" isso indica uma imagem e o endereço dela no seu blog, no caso se você pudesse criar uma pasta com o nome images, e colocar na raiz do blog ou site, como não pode, a opção é substituir pelo endereço completo da imagem.O que tem entre as aspas deve ser o endereço da imagem, mas como você vai usar o pages.google para hospedar a imagem, esse endereço deve ser substituído pelo endereço completo da imagem, você deve descobrir pelo nome da imagem, o endereço dela, onde você hospedou, no caso fez o Upload
Clique para aumentar
- Próximo passo é colocar o link para o arquivo style.css no html do blog, logo acima da tag </HEAD> que ja existe e não deve ser adicionada outra, deve colocar o endereço completo do arquivo style.css(onde você o hospedou ou fez Upload) ficaria parecido com isso:
<link href='http://SuaPagina-Substitua.com/stilo.css' rel='stylesheet' type='text/css'/>
</HEAD> - O código Html você pode, para quem usa o blogger, colocar em => Design, => Elementos da página => Adicionar Elemento => Html/Javascript => e Salvar.
Quem faz páginas Html no braço e não usa sistemas de blogagem pode tentar entre as BODY.
Quem usa o BlogSpot e fez um Menu horizontal, e não tiver a opção de Adicionar elementos acima do post, pode aprender a criar essa opção Adicionar elementos acima do post, aqui. Quem fez o Menu horizontal e acha ele largo demais, pode diminuir o espaçamento entre um item e outro, na largura, basta procurar o trecho abaixo e reduzir os números que deixei em vermelho:
Transferir(upload) todas as imagens e o arquivo style.css para pages.google, caso nunca tenha feito observe:
/*^'^ Primary Items ^'^*/
#nav-container a{
padding:7px 17px 7px 18px;
Eu fiz o menu, mas não sei enviar a pasta para o diretório do Blogspot. Vc sabe com fazer?
ResponderExcluirInfelizmente ainda não tem essa opção no blogger. Vamos ver se der tempo eu vejo uma forma alternativa, menos árdua que hospedar as imagens e mudar o endereço delas.
ResponderExcluirah meu Deus eu sou novo nisso & preciso de ajuda NÃO SEI ONDE COLOCA O CSS & O HTML serio msm eu não seei mi ajuda ??
ResponderExcluircara, naum sei se vc percebeu, mais até agora não vi nenhum blog com menus em css que tem sub menu.
ResponderExcluireu coloquei um menu no meu blog, mais os submenus naum ficaram pegando.
vc tem alguma solução para isto?
Este comentário foi removido por um administrador do blog.
ResponderExcluirDANIEL E CARLINHOS, vou remover seu comentário pelo fato de conter endereço de email.
ResponderExcluirDe qualquer forma esse serviço que você tenta usar não funciona porque ele hospeda o arquivo como .txt e precisa ser um arquivo publico e .CSS
Quem quiser tentar esse endereço abaixo é um bom local para host desses arquivos,
xpg.com.br
Mas é bom fazer uma página com alguma coisa escrita nele, geralmente essas empresas cedem esse tipo de serviço mas esperam algo em troca, algo que favoreça o site delas.
OI, VALEU PELAS DICAS, ENTREI NESSE SITE, FIZ PÁGINA, MAS NÃO SEI AONDE POSSO HOSPEDAR MEUS ARQUIVOS NESSA PÁGINA PRA DEPOIS COLAR O URL DELES NO AQUIVO CSS, NA VERDADE EU CRIEI UM ALBÚM DE FOTOS NO PÁGINA E MANDEI AS IMAGENS DO MENU PRA LÁ, MAS QUANDO ABRO O ALBUM NÃO CONSIGO CLICAR NAS IMAGENS PRA PEGAR OS URLS E COLAR NO ARQUIVO CSS. COMO FAÇO ISSO?
ResponderExcluirTO PERDIDO CARA, BEM DIFICIL INSTALAR ESSE MENU, FAZEM TRES DIAS QUE TO TRABALHANDO S[O NESSE MENU, RSS
SE VC PUDEU ME DAR MAIS ALGUMAS DICAS VALEU, ABRAÇÃO CARA
CARA, PENEI AQUI, FORAM MAIS DE 3 DIAS CONFIGURANDO AQUI, MAS CONSEGUI, SÓ FALTA DAR UMA ARRUMADA BÁSICA NA CONFIGURAÇÃO, MAS TA TUDO FUNCIONANDO BONITINHO, RSS
ResponderExcluirVALEU PELA AJUDA, SE PINTAR QUALQUER COISA TE PERGUNTO, OU SE VC OU A GALERA QUISEREM AGORA SABER ALGUMA COISA SOBRE A INSTALAÇÃO PODE PERGUNTAR PRA MIM QUE AGORA EU APRENDI UM POUQUINHO, RSS
ABRAÇÃO
É, não é fácil, mas é possível.
ResponderExcluirQue bom que você conseguiu DANIEL ou CARLINHOS.
Eu queria era mandar arquivos do meu computador para o blog...eu mandava barra menus CSS pra la
ResponderExcluirtenho varios menus prontos
|Surf>Pro|- [E]lieze[R]
ResponderExcluirNo blogger não é possivel, hoje, enviar arquivos.
Se você fez um menu, terá o código Css que você poderá adicionar no html do blogger veja como, e, tem o código Html, como mostrei na imagem acima, a parte html você pode adicionar como gadget do blogger.