Pode parecer um trabalho complicado criar um menu com bons estilos visuais, mas neste tutorial vamos usar apenas algumas idéias e códigos simples que já publicamos anteriormente em tutoriais como:
Formatação Especial nos Textos das Postagens
Fazer Menu com Imagens ao lado dos Links
O que vamos fazer é reunir algumas dessas técnicas para criar um menu mais bonito e com aparência sofisticada, mas vamos aos códigos do menu horizontal, entre na pagina layout do seu blog, clique em adicionar gadget, escolha a opção HTML/javascript e cole o código abaixo:
<style type="text/css">Editar e colocar os links no menu horizontal
.menu a{font-size:12pt;padding-top:5px; padding-bottom:4px;display: inline-block;width:198px;text-align:center;color: #000;background-image: url(endereço da imagem);}.menu a:hover {background-image: url(endereço da imagem)}</style><div class="menu">
<a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a><a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a><a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a><a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a><a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a></div>
Para inserir os links do seu blog no menu apenas observe o modelo abaixo e troque conforme desejar:
<a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a>
http://www.dicasparablogs.com.br - endereço da pagina
Ajuda para Blogueiros - Texto que aparece ao passar o mouse sobre o link
Dicas para Blogs - Texto que aparece no menu
Não pule linhas entre os links, pois alguns navegadores podem dar erro no alinhamento por causa disso, ou seja, escreva o código inteiro como se fosse apenas uma linha.
Personalizar o layout e aparência do menu (editar os Estilos CSS)
A imagem arredondada do menu e o fundo degrade na verdade são imagens de fundo e também o efeito ao passar o mouse sobre os links do menu é uma imagem de fundo. O estilo ".menu a" é a aparencia do menu e ".menu a:hover" é quando passa o mouse sobre o link. Veja o código das imagem dos botões:
background-image: url(endereço da imagem);
Essas são as imagens que usamos:
Em qualquer uma das duas poderíamos usar um gif animado para fazer qualquer feito com imagens você só precisa achar ou fazer uma imagem para usar no menu, veja alguns links para ajuda a criar ou editar imagens:
Programa para editar imagem ou fotos grátis - Editores de Imagens
Site para Fazer Imagens Online e Criar Banners com Efeitos
Depois que fizer as imagens você só precisa ajustar as larguras do botão e margens, veja abaixo:
font-size:12pt; - Tamanho da fonte dos links do menu
padding-top:5px; padding-bottom:4px; - espaço acima e abaixo do link dentro do botão
width:198px; - largura do botão
text-align:center; - alinhamento do texto
color: #000; - cor do link
Veja aqui mais informações sobre: Alterar cores dos links - CSS Lembramos que essas configurações vale para as duas partes do CSS ou seja para o laytou do menu e o efeito de quando o mouse passa sobre ele.
Um problema comum neste tipo de menu é um item ficar embaixo em vez de todos ficarem lado a lado normalmente esse problema é porque não há espaço suficiente onde colocou o gadget, ou seja, o menu tem 900px de largura e seu blog tem 850px então um item vai para a linha de baixo. Mas por outro lado isso pode ser útil caso queria fazer um menu com duas linhas de itens. Leia também sobre: Diferença entre Margin e Padding
Apesar de ser um pouco complicado montar esse código, fazer as imagens e acertar toda a aparência dele depois disso na hora de trocar os links não precisará mais mexer nos códigos CSS e só trocará o link na primeira parte do código (editar os links do menu horizontal). Justamente por isso esse tipo de menu é melhor do que alguns feitos com imagens para cada item. Esperamos que gostem e aproveitem essa dica sobre menu horizontal.
Boa noite Fabiano.
ResponderExcluirMais uma vez precisando de você.
Minha duvida é sobre imagens. O que você recomenda? Colocar a imagem na postagem direto do computador ou criar um código com um link da imagem?
Coloquei uma imagem usando o link, a miniatura não apareceu no titulo da postagem.
Pode dar uma olhada.
www.arcecidadania.org
Oi Fabiano, queria criar uma pa´gina no blog, que os gadgets sumissem, ficasse essa página(post) em toda a tela, só aparecesse o título, o menu e esse post(página). Tem como?
ResponderExcluirOba Fabiano! Queria saber como fazer certo link de uma postagem abrir em pop up. Não quero todos os links do blog, quero o código para apenas aquele link daquela postagem abrir em pop up. Valeu!
ResponderExcluirArce Cidadania precisa hospedar a imagem no blogger ou algum outro site.
ResponderExcluirnão dá para usar direito do computador
Anônimo fazer isso somente com uma pagina até é possivel mas tem muitas chances de erros
!!!!robert!!!! alguns códigos de pop up que testei deram erro dependendo do template.
ResponderExcluirmas veja aqui: http://www.codigofonte.net/?secao=dicas&Gid=159
Quando vamos publicar a postagem, na barra superior tem a opção para adicionarmos a imagem. Uplaod - Escolher arquivo. Nesse caminho podemos pegar uma imagem do computador, já que iremos postar no blog. (Armazenando no Picasa).
ResponderExcluirOu pegamos uma imagem do Imageshack e colocamos no código a href="http: ...
Qual a forma que você recomenda para essa imagem aparecer melhor na busca do google?
Obrigado pela paciência.
Arce Cidadania o melhor é você fazer o upload.
ResponderExcluirmesmo que ache uma imagem pronto recomendo que salve a imagem no seu computador e depois faça upload para o blogger ou qualquer outro tipo de hospedagem que use. Isso porque se usar a url da imagem hospedada por outra pessoa ela pode desaparecer.
por exemplo as imagens que publiquei como demonstração se você copiar o endereço delas hoje pode funcionar, mas se eu apagar essas imagens você perde o menu que fez. por isso é melhor salvar e hospedar você mesmo.
Fabiano, minha pergunta não tem nada a ver com esse tutorial.
ResponderExcluirÉ o seguinte, gostaria de saber se tem como mudar a imagem de quem deixou comentário.
Por exemplo, quando uma pessoa anônima (como eu) deixa comentário, aparece um rosto sem foto (ou o B de blogger, caso a pessoa tenha conta no google), tem como mudar essas imagens por uma outra?
Desde já agradeço!
Fabiano,
ResponderExcluirConfigurei meu blog para Mostrar imagens com a Lightbox, mesmo assim continua mostrando pelo link da imagem. O que pode ter acontecido?
Arce Cidadania veja aqui: Como Desativar o Efeito Lightbox Padrão do Blogger
ResponderExcluiresse tutorial mostra os códigos do efeitos lightbox, então tente comparar com os do seu blog.
Anônimo acho que não tem como mudar isso
ResponderExcluirpergunta sobre adsense sabe no logotipo do seu blog http://4.bp.blogspot.com/-PBBJ4_fbUfY/T1LoM__kNCI/AAAAAAAADeY/t_pWIU-hfpw/s1600/dicas-blogspot.jpg
ResponderExcluirabaixo tem anuncio do adsense em forma de palavras, gostaria de saber como funciona qnd pessoa clica palavras ja ganha que nem nos banner 300x250??
Rez o valor varia conforme o anuncio que aparece.
ResponderExcluirmas de forma geral o anuncio em forma de texto paga menos
Sempre uso esse espaço de comentários do Dicas Para Blogs para tirar minhas dúvidas. Hoje quero fazer diferente. Quero dedicar esse comentário ao administrador do blog, Fabiano Roberto,pois acredito que muitos pensam como eu e sabem a importância que esse blog tem para todos os blogueiros. Quero parabenizar nosso amigo Fabiano, por responder sempre pacientemente todos os comentários deixados. Parabéns e muito obrigado. Graças a você estou deixando meu blog do jeito que sempre desejei.
ResponderExcluirputz paga menos =[ entendo, mais vlw por tirar a minha duvida vlw
ResponderExcluirArce Cidadania obrigado pelos elogios
ResponderExcluirola td bem eu coloquei esses botoes no meu blog fico perfeito mas qndo eu coloco uma postagem ele entra na parte te categoria e pelos botoes eu nao consigo acessar as minhas postagens como faço para ligar as postagens com os botoes sem usar o gadgets de categoria pode me ajudar?
ResponderExcluirMarilia Campos esses botões são para pagina estaticas por exemplo uma pagina falando sobre o autor do blog, forma de contato e outros assuntos
ResponderExcluiras postagens do seu blog estão na pagina inicial, nos arquivos e nos marcadores do blog
Fabiano eu queria colocar em um blog meu o menu das páginas igual seu outro blog Frases Curtas, é esse mesmo o código?
ResponderExcluirRosiel o menu do frases curtas é esse código que publicamos aqui só que não usa imagem apenas cor de fundo.
ResponderExcluirFabiano, Tipo, tenho o menu e talz, na Home eu faço as postagens, só que eu queria postar nas outras abas também, tipo: Downloads, só que só pode postar uma vez... Queria saber como mudar isso, pra poder fazer mais de um post.
ResponderExcluirAjuda aê se poder.. Vlw!
esse código colocar uma imagem de fundo nos botões ou seja todos são iguais
ResponderExcluirOlá Fabiano. Eu queria pedir a sua ajuda. Eu não consegui colocar o menu lateral em meu blog. Não sei se é pedir muito... Mais você poderia fazer um para mim? Ou se estiver ocupado de mais, ou querendo que eu pague, deixa pra lá então.. Eu me viro..
ResponderExcluirWorcker não editamos blogs de outras pessoas porque muita gente fala sobre isso e seria impossível atender a todos.
ResponderExcluirOlá Fabiano,
ResponderExcluirGostaria de saber como faço colocar mais de uma postagem nas páginas que não seja a página principal.
Roniglei Lima para fazer varias postagens sobre o mesmo tema use os marcadores
ResponderExcluirqual código posso adicionar para dar um maior espaçamento entre um botão e outro? obrigada!
ResponderExcluirTeria a possibilidade de eu usar uma imagem diferente em cada botão? ^^
ResponderExcluirAline você poderia usar o código
ResponderExcluirmargin-left:2px;margin-right:2px
para criar um espaço vazio entre os botões, ficaria assim:
.menu a{margin-left:2px;margin-right:2px;font-size:12pt;padding-top:5px; padding-bottom:4px;display: inline-block;width:198px;text-align:center;color: #000;background-image: url(endereço da imagem);}
se for usar uma imagem para cada botão então seria melhor colocar o link diretamente na imagem como mostramos aqui:
ResponderExcluirOrganizar Banners ou Pagina de Parcerias entre Blogs
lá fala em banners mas o funcionamento para um menu seria o mesmo apenas com links do seu próprio blog e retirar o espaço entre os banners
Obrigada Fabiani, vamos ver se consigo chegar aonde quero. Bjs
ResponderExcluirquando eu clico nos botoes, eles vão pra mesma pagina... o que eu faço??????
ResponderExcluirQual código usar para dar estilos à fonte? Queria mudar essa fonte tá muito choca rsrsrs
ResponderExcluirprecisa alterar os links no código
ResponderExcluirAline você pode trocar o tipo de fonte, veja aqui
ResponderExcluirComo Formatar o Texto do Blog
Como Colocar SubMenu ?
ResponderExcluirjá fizemos outros códigos com submenu, mas com o código deste tutorial não dá para colocar submenu
ResponderExcluirOi Fabiano. Como passou a noite de festa? Deve ter sido ótima, eu fui dormir, tenho câncer sabe. E reações à quimio e aos medicamentos para efeitos colaterais são fortes. Mas bola pra frente. Veja este blog: espacokuanyin.blogspot.com , veja na parte superior não é um menu, mas se clicar em florais por ex é direcionado a outra pag que pode assinar atom feed florais e assim por diante. Como fazer isso. Pois o menu sanfona já coloquei mas só vou fazer postagens qdo estiver tudo como quero. Como se faz o que a dona fez? Posso fazer isso no meu blog? Ou o blog dela está dentro de um site onde foram feitos vários blogs? www.terapiasecursos. com é dela. Abraços. César. Tentei achar algo assim aqui mas acho que não soube nem o que procurar. César
ResponderExcluirCesar passei bem as festas....
ResponderExcluirno site que você falou é isso mesmo são varios blogs que usam o mesmo template por isso cada um tem seu feed separadamente.
mas eu acho mais vantagem fazer tudo no mesmo blog usando os marcadores do blog para separar por assuntos
E como fazer igual? Tenho que criar um site para inserir os blogs ou no meu dá para fazer assim. Veja bem, tem o básico da DQ, os florais. a prevenção à Recaídas e empresas. Todos são assuntos mto longos e gostaria de uma pag como no que você viu para cada um. Tem um caminho? E você não respondeu Fabiano, coloco a linha do sub menu antes ou depois de postar. outra coisa, se eu fizer postagem programada, dá para colocar o código depois? Por ex Modelo de Recuperação Evolucionário tem sete tópicos, o primeiro é o menu principal, os outros a sequência, automaticamente todos vão para o menu principal, dá para clicar na postagem dos outros depois e inserir o código do sub menu? Ou este tipo de postagem tenho que fazer uma por uma? Desculpe, é que ainda não está como eu quero e a Federação Nacional das Comunidades Terapêutica acompanha meus posts no facebook e me convidou para ser consultor da diretoria e está envolvida. Depois vou querer saber sobre afiliados e parceiros como funciona. Mas depois que tiver conteúdo. Como contactar Senad, Uniad, e outros do gênero. É mta informação não é? Mas você tem me ajudado tanto que virou meu consultor. Obrigado por tudo Fabiano. Abraços fortes de luz e paz. César Augusto
ResponderExcluirbasicamente o que o site que falou fez foi criar varios blogs e usar o mesmo template e você poderia fazer o mesmo.
ResponderExcluirnão entendi sua pergunta: coloco a linha do sub menu antes ou depois de postar
onde quer usar esse submenu?
vamos tentar resolver um assunto por vez senão fica tudo muito confuso.
gostei. tenho um blog de mmn
ResponderExcluirComo fazer para que o comentário saia abaixo da postagem.Obrigada
ResponderExcluirSerá que com este menu horizontal é possível ter um link com o título PUBLICIDADE, por exemplo, que leve o visitante para uma página que só tenha anúncios publicitários?
ResponderExcluirClaudio até é possivel mas acho que não dá resultados, além disso se criar uma pagina só com anuncios poderá violar as regras do adsense e outros programas de afiliados
ResponderExcluirEu gostaria de saber se quando eu quiser postar algo daquela categoria, eu tenho que usar o mesmo post e colocar um quebra pagina, pra separar? Obrigado!
ResponderExcluirHeloisa o post é o mesmo ... ou seja a quebra de pagina vai aparecer na pagina inicial do seu blog, pagina dos marcadores e pagina de arquivos (mês e ano)
ResponderExcluirObrigado Querido!!! Como faço para as pessoas me seguirem no Facebook, através do clique no blog, eu ja fiz uma pagina no face para o Blog.
ResponderExcluirHeloisa não é seguir diretamente ... o que você pode fazer é colocar um link do seu Facebook no blog
ResponderExcluirMe ajudou bastante. Tinha dias que procurava uma forma fácil de fazer menu no meu blog e agora aprendi.
ResponderExcluirObrigado
Bom dia!! Deu certo ;D
ResponderExcluirManns nesta aba gostaria de colocar um formulário para contato. E este formulário que fiz pelo JotForm tbm me pede para colocar em gadget, escolher a opção HTML/javascript e colar o código. Tem como colocar este formulário na aba?? Não entendo nada disso
unhasdatabata.blogspot.com.br
tabatadorno@gmail.com
Blog da Tabata você poderia colocar o código do jotform em uma pagina extra do blog em vez de um gadget.
ResponderExcluirse for usar uma pagina extra (estática) veja nas opções se está marcado para executar o html
depois é só colocar o link desta pagina em um menu do seu blog
Eu não conseguir. eu colei o HTML e quando visualizei meu blog l,a não tinha nada, o que eu faço?
ResponderExcluirvisitem meu blog:
http://blogsobrenobarbosa.blogspot.com
Cara, Obrigado eu consegui fazer, bem simples, mas consegui; só que eu queria saber o seguinte: como faço pra colocar o conteúdo nessas outras páginas? Pois eu coloquei no meu Menu algumas opções à serem visualizadas dentro do meu blog, e não sei como colocar o conteúdo nessas outras páginas.
ResponderExcluiras paginas que você fala são os links do menu? elas podem ser postagens ou paginas extras do seu blog
ResponderExcluirIsso mesmo os (links) que são os tópicos que ficam no Menu, eu não consegui colocá-los. Eu tentei colocar como postagens, mas o link do endereço principal fica muito grande e repetitivo.
ResponderExcluirolhei seu site ....
ResponderExcluiro problema é que você colocou o http:// duas vezes e seu codigo ficou assim:
href="http:http://aljavatur.blogspot.com.br/2013/06/citytuors.html/"
o correto é
href="http://aljavatur.blogspot.com.br/2013/06/citytuors.html"
e sem aquela barra no final do link
Meu irmão, você é um gênio.
ResponderExcluirMuito obrigado mesmo...
Eu corrigi e ficou massa. Valeu, brother. Abraço!
Ola sou leitor do seu blog a tenpos.eja ate coloquei codigos do seu blog no meu .só presiso que tu me esplique como eu coloco palavras chave no blog eu falo lá sobre contabilidade"..
ResponderExcluirLouzada
ResponderExcluirveja aqui:Descrição e Palavras Chave - Meta Tags
Fabiano,eu tenho uma duvida. no meu site n apareceu a imagen de fundo fikou só os links brancos(mudei a cor) e quando passa o mouse ta tude certo mas a cor de fundo do menu e a mesma cor do blog sem nenhuma imagem.ja tentei colocar imagen na parte:background-image: url mas n deu cert me ajuda ae pf
ResponderExcluirveja o meu site como que ta :http://sk8apampa.blogspot.com.br/
tente criar o estilo
ResponderExcluir.tabs-inner a{....}
.tabs-inner a:hover {.....}
para criar os efeitos nos botões
Olá Fabiano, executei o procedimento e fiz algumas modificações ao meu gosto, mas gostaria que você me ajudasse. Preciso saber como direcionar cada tópico do menu a um assunto especifico, desculpa minha burrice momentânea já fiz procedimentos no meu blog de teste mais difíceis que este mas e que de tanto fuçar agente perde informações básicas. E também gostaria de saber onde e qual código preciso para inserir sub-menu no próprio menu horizontal. Desde já agradeço, meu e-mail para resposta se você quiser me dar uma dica pessoal sobre este assunto é lkteatre@hotmail.com.
ResponderExcluirMuito Obrigado
para direcionar o menu para as paginas do blog tem que trocar esse código:
ResponderExcluir<a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a>
colocando o texto que desejar e o endereço de uma pagina ou postagem do seu blog
oi ^^
ResponderExcluirbom achei o tutorial mt bom,
eu fiz um menu no meu blog, mas acontece que nao consigo colocar minhas postagens para serem mostradas dentro deles!
ex: tem lá no menu a opção MODA ai vc clica em cima e só aparece A PAGINA QUE VOCÊ ESTÁ PROCURANDO NÃO EXISTE
queria saber como adicionar artigos dentro das opções do menu!
tem algum tutorial no site, se tiver nao achei! se nao tiver pode me ajudar??
obg pela atenção ^^
http://molekaautentica.blogspot.com/
tem que editar o menu e colocar endereço de postagens ou paginas do seu blog.
ResponderExcluirveja o exemplo que mostrei no comentário anterior
olá fabiano eu to tentando colocar uma gadget em meu blog e não consigo, queria colocar um mural, um bate-papo e menu, ou seja.
ResponderExcluireu sempre que vou colocar um em minha página sempre da erro, será que vc poderia me ajudar nesse pequeno detalhe vei?
vlw
Fernando Acho que deve tentar fazer uma coisa por vez se misturar muitos assuntos fica difícil achar e corrigir os erros que aparecem
ResponderExcluiresses código tem muitos detalhes se você apagar por engano qualquer sinal como ' / = > dá erro e o código não funciona.
qual o seu problema com o menu? colocar os links? fazer a formatação?
Estou com o mesmo problema que a Moleka Atitude, e só pela tua resposta não consegui inserir texto ao menu. Se possível pode explicar mais detalhadamente. Quero inserir tipo início e escrever coisas mas não consigo. Pode me ajudar?
ResponderExcluirFabiano parabens,pelas dicas de grande importancia para nós todos...
ResponderExcluirEu estou com o mesmo problema do pessoal ai...Configurei tudo e parece que corretamente...Mas ´só consigo publicar na pagina INICIO do blog.Não consigo publicar nem atraves das pags nem atraves De Nova postagens
ResponderExcluiro problema está no código do link neste trecho:
ResponderExcluira href="http://www.dicasparablogs.com.br/"...
aqui é para trocar o endereço pelo um endereço de pagina que exista no seu blog, por exemplo se fosse um link para a pagina deste tutorial ficaria assim:
a href="http://www.dicasparablogs.com.br/2012/06/menu-horizontal-blog-css.html"....
Desconsidere o último comentário, ele foi publicado na página errada... Mas tem como fazer dessse mesmo modelo na vertical ?
ResponderExcluirMarcos
ResponderExcluirno começo do código tem: display: inline-block; apague e coloque display: block;
neste trecho:
.menu a{font-size:12pt;padding-top:5px; padding-bottom:4px;display: inline-block;width:198px;text-align:center;.....
então o código fica assim:
.menu a{font-size:12pt;padding-top:5px; padding-bottom:4px;display: block;width:198px;text-align:center;.....
essa alteração faz os botões ficarem um embaixo do outro. Depois é só editar os links que desejar
Obrigado! Mas não consigo postar o link do meu blog INICIO antes dos meus marcadores. O Gadget só é possivel do lado eu queria colocar no marcador. Vou desistir não consigo. Obrigado.Adília
ResponderExcluirse criar o menu poderá colocar os links que quiser nele apenas copie o endereço das paginas, por exemplo:
ResponderExcluir<div class="menu">
<a href="http://www.dicasparablogs.com.br/" title="Dicas para Blogs">Inicio</a>
<a href="http://www.dicasparablogs.com.br/search/label/Ganhar%20Dinheiro" title="Ganhar Dinheiro na Internet">Dinheiro</a>
<a href="http://www.dicasparablogs.com.br/search/label/Imagens/" title="Ajuda para Criar e Editar Imagens">Edição de Fotos</a>
</div>
veja que colocamos o link de nossa pagina inicial e alguns marcadores, mas tudo isso é copiado manualmente, ou seja, para colocar um marcador copie o link da pagina daquele marcador
Funciona no blogger modelo de visualização dinâmica?
ResponderExcluira visualização dinâmica não aceita gadget de html, por isso não tem como colocar esse menu
ResponderExcluirOlá Fabiano! Sempre acompanho seu blog e daqui estou montando o meu, pois as dicas são maravilhosas! Preciso de ajuda! Eu coloquei o meu Menu personalizado com imagens e mapei pelo Image Map e copiei o código, deu tudo certo, menos o principal, quando vou no Menu e clico para ver as postagens ( de "artesanato" por exemplo)não consigo, só aparece o título "artesanato" não as postagens. Já coloquei as categorias na hora de escrever os post, mais nada, não aparece nenhuma postagem só no "Home".Vc poderia me ajudar? O design ficou bem legal, mais não funciona, estou frustrada! Obrigado!
ResponderExcluireste menu é para um link para cada item do menu, ou seja, se quiser pode linkar a categoria artesanato ou uma das postagens, mas tem que fazer manualmente.
Excluirtalvez deu problema no link do marcador porque alguns caracteres são codificados.
Excluirclique com o botão direito do mouse sobre o link do marcador e escolha a opção copiar link. Assim você copia o link codificado.
Obriago amigo por transmitir seu conhecimento ajudou me muito!
Excluirfico feliz em poder ajudar
Excluir