Colocar um menu horizontal, aquele que os links ficam um do lado do outro, é mais simples do que parece, nós apenas precisamos de algumas linhas de CSS, se quiser fazer o mesmo com imagens veja aqui:Imagens Lado a Lado, Fazer Colunas nos Gadgets. Além disso uma outra forma de colocar um bonito menu no seu blog é usar um menu accordion no blog (menu sanfona).
Para criar esse menu horizontal copie o código abaixo e coloque no seu blog através da pagina layout, adicionar gadget, html/javascript:
<style type="text/css">
<!--
#page-bar {margin: 0px;
padding: 0px;
width:auto;
}
#page-bar ul {
list-style-position: inside;
list-style-image: none;
list-style-type: none;
}
#page-bar li {
float:left;
display:block;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#page-bar li a{
margin: 0px;
color:#000000;
display:block;
text-decoration: none;
width: 150px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
padding-top: 5px;
padding-bottom: 5px;
}
#page-bar li a:hover {
color: #0000FF;
text-decoration: underline;}
-->
</style>
<ul id="page-bar">
<li><a href="url do item" target="_blank">Item 1</a></li>
<li><a href="url do item" target="_blank">Item 2</a></li>
<li><a href="url do item" target="_blank">Item 3</a></li>
<li><a href="url do item" target="_blank">Item 4</a></li>
<li><a href="url do item" target="_blank">Item 5</a></li>
</ul>
Se preferir que os links abram na mesma janela retire o trecho target="_blank" que está nas linhas acima, você pode retirar de todas ou escolher quais links devem ou não abrir em uma nova janela do navegador.
No meio desse código todo uma das partes mais importante é a configuração de largura dos botões veja no estilo #page-bar li a tem width: 150px; isso é a largura de cada item, então faça os ajustes necessários, ou seja, se o menu horizontal ficar menor que a largura do blog aumente esse valor. Caso um ou mais itens do menu ficar na linha debaixo é preciso diminuir a largura de cada item(150) ou tirar algum dos itens do menu.
A parte final do código é só colocar o endereço dos sites e trocar o texto item1, item 2.. pelos nomes dos sites, mais uma vez cuidado com a quantidade de links, pois se colocar muitos links o menu ficará muito largo então mudará de linha, como já dissemos se acontecer isso é preciso tirar links ou diminuir o valor 150px.
As partes #page-bar li a{...} e #page-bar li a:hover{...} são o que controlam aparência dos links, então se quiser é possível modificar esse estilo para deixar do jeito que combine melhor com seu blog. Já fizemos uma postagem sobre menu horizontal, mas alguns acharam que ficou difícil de instalar, espero que assim, colocando o código num lugar só fique mais fácil.
Veja também:
Fazer e alterar bordas
Colocar menu Horizontal
Fazer botões com imagens
Mudar o estilo do texto
Código das Cores
Programas para editar imagens
Onde e como hospedar imagens
Para criar esse menu horizontal copie o código abaixo e coloque no seu blog através da pagina layout, adicionar gadget, html/javascript:
<style type="text/css">
<!--
#page-bar {margin: 0px;
padding: 0px;
width:auto;
}
#page-bar ul {
list-style-position: inside;
list-style-image: none;
list-style-type: none;
}
#page-bar li {
float:left;
display:block;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#page-bar li a{
margin: 0px;
color:#000000;
display:block;
text-decoration: none;
width: 150px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
padding-top: 5px;
padding-bottom: 5px;
}
#page-bar li a:hover {
color: #0000FF;
text-decoration: underline;}
-->
</style>
<ul id="page-bar">
<li><a href="url do item" target="_blank">Item 1</a></li>
<li><a href="url do item" target="_blank">Item 2</a></li>
<li><a href="url do item" target="_blank">Item 3</a></li>
<li><a href="url do item" target="_blank">Item 4</a></li>
<li><a href="url do item" target="_blank">Item 5</a></li>
</ul>
Se preferir que os links abram na mesma janela retire o trecho target="_blank" que está nas linhas acima, você pode retirar de todas ou escolher quais links devem ou não abrir em uma nova janela do navegador.
No meio desse código todo uma das partes mais importante é a configuração de largura dos botões veja no estilo #page-bar li a tem width: 150px; isso é a largura de cada item, então faça os ajustes necessários, ou seja, se o menu horizontal ficar menor que a largura do blog aumente esse valor. Caso um ou mais itens do menu ficar na linha debaixo é preciso diminuir a largura de cada item(150) ou tirar algum dos itens do menu.
A parte final do código é só colocar o endereço dos sites e trocar o texto item1, item 2.. pelos nomes dos sites, mais uma vez cuidado com a quantidade de links, pois se colocar muitos links o menu ficará muito largo então mudará de linha, como já dissemos se acontecer isso é preciso tirar links ou diminuir o valor 150px.
As partes #page-bar li a{...} e #page-bar li a:hover{...} são o que controlam aparência dos links, então se quiser é possível modificar esse estilo para deixar do jeito que combine melhor com seu blog. Já fizemos uma postagem sobre menu horizontal, mas alguns acharam que ficou difícil de instalar, espero que assim, colocando o código num lugar só fique mais fácil.
Veja também:
Fazer e alterar bordas
Colocar menu Horizontal
Fazer botões com imagens
Mudar o estilo do texto
Código das Cores
Programas para editar imagens
Onde e como hospedar imagens
No meu blog não estão aparecendo os gadgets e a lista de links quando se usa o navegador Internet Explorer.
ResponderExcluirTudo funciona bem com o Firefox.
Meu blog: www.maiakowsky.blogspot.com
Fabiano Roberto, guru destas coisas da internet, será que você pode ensinar a esta ignorante recém-blogueira como se fazem barras divisórias entre posts? Ou se você já ensinou aqui, onde procuro?
ResponderExcluirMuito obrigada!
( Se é o mesmo Fabiano Roberto que me respondeu no Yahoo, desculpe ter-lhe trocado o nome quando agradeci!)
entre na pagina editar html e coloque isso junto com os outros estlilos CSS
ResponderExcluir.post{background-image: url(http://img211.imageshack.us/img211/2967/fim.gif);
background-repeat: repeat-x;padding-bottom:27px;
background-position: bottom;}
é uma imagem que vai aparecer entre os posts depois pode trocar a imagem, veja nosso link no guia rapido sobre imagem de fundo
nao entendi essa parte do css
ResponderExcluiralguem pode me explicar?
CSS: Cascading Style Sheet - folha de estilos que formam o padrão para o design de sites, como tamanho de fontes, cores, imagens, padrões de tabelas.
ResponderExcluirEsta definição está na Net, Vitor.
É só escrever CSS significado, que está tudo muito especificado.
Obrigado Roberto!
(agora até me sinto importante porque ajudei o Vítor!)
brigado!
ResponderExcluircomo q eu faço para colocar um igual ao do blog?:[http://4.bp.blogspot.com/_MK_w7dxCpUQ/SgRhSHPdhgI/AAAAAAAAAG4/Wkn2JVTR5d8/s1600-h/imagem.bmp]
ResponderExcluirVictor Leãovarias pessoas já perguntaram sobre isso, então acabei de publicar uma explicação sobre o como fazer para colocar um menu com submenu no blog
ResponderExcluirBoa Tarde.
ResponderExcluirNo meu blog não aparece os gadgets e a lista de links.uso firefox actual.
Onde meto "colar" lá no editar?
O meu blog:http://perolasdofacebook.blogspot.com
Cumprimentos.
tem que entrar na pagina layout, adicionar gadget, html/javacript
ResponderExcluirse não aparece isso no seu blog provalmente você usa um modelo classico, então pode mudar para o modelo layout entrando na pagina editar html, depois da caixa dos códigos do blog tem a opção mudar para layout
Fabiano Ola tudo bem
ResponderExcluirColoquei no meu blog os menus lado a lado, mas como faço para colocar conteúdos nos menus????
Sandra
ResponderExcluiré só trocar os links que estão no modelo
Fabiano agradeço o retorno, consegui colocar os menus, mas por exemplo gostaria de colocar um menu quem sou eu, mas que abrisse uma pagina do meu blog e eu não consigo, só consegui salvando uma pagina da web e colar o link da pagina. Outra coisa quando coloco todos os 5 itens eles ficam na vertical e não na horizontal.
ResponderExcluirSe voce quiser dar uma olhada
descobrindosaopaulo.blogspot.com
Agradeço desde já
Sandra Guimaraes
esse código é um pouco complicado de mexer, cuidado com as li e ul isso faz o menu apresentar falhas
ResponderExcluirOlá Fabiano Roberto. Obrigado pela dica. Fiz com 6 itens e deu certo. Apenas gostaria de poder colocar uma cor de fundo(uma barra por trás dos itens), vinho, por exemplo, para combinar com meu blog.
ResponderExcluirNo caso do meu blog funcionou no IE e no Mozila, apenas ficaram aparecendo as duas linhas que dividem as áreas do blog, por cima do menu. Também aparece o sinal >> ao lado de cada item (é isso mesmo?).
meu blog: http://dicur.blogspot.com
Se puder ajudar ficarei grato.
Como gostei muito das suas dicas, coloquei um banner do seu blog no meu.
Paulo Roberto
ResponderExcluirnão esse sinal está em outra parte do seu blog .sidebar ul li{background:url(http://1.bp.blogspot.com/_XByc9SCisZM/Sa4DzwR1zAI/AAAAAAAAA58/MdZL8bZQ0es/s1600/arrowmaggrey.gif) no-repeat 2px .4em; text-indent:0;
ele é uma imagem de fundo, se quiser é só pagar background:url(http://1.bp.blogspot.com/_XByc9SCisZM/Sa4DzwR1zAI/AAAAAAAAA58/MdZL8bZQ0es/s1600/arrowmaggrey.gif)
olá queria que me judassem pois mudei o fundo do meu blogger e a minha apresentação aparece no fim como posso por de lado, tal como outras coisas que queria por, desde já agradeço a ajuda .
ResponderExcluirSe quiser dar uma olhadela para melhor me ajudar agradeço.
http://omeuespasso.blogspot.com/
na pagina editar html vai encontrar #outer-wrapper {
ResponderExcluirwidth:740px;
margin:0 auto;
se aumentar o valor 740 deve resolver seu problema
Obrigado por me ter respondido Fabiano Roberto.
ResponderExcluirEu sou nova nisto, entendo muito pouco, posso te pedir mais um favor?
Me dá uma dica como posso alargar o texto,uma vez que tenho muito espaço em branco , e como posso por imagens ao lado do texto , nesse espaço branco.
Te agradeço desde já.
Maria
ResponderExcluirveja essa postagem sobre largura do blog
http://www.dicasparablogs.com.br/2007/08/largura-do-blog.html
Bom dia estou fazendo um blog esta ficando legal já usei algumas dicas do seu site, mas não estou entendendo assim como eu faço para criar uma página e que os menus horizontais vão para essa página por exemplo: música é o menu, logo quero que ele vai para uma página só de músicas, e ai que está minha dúvida como fazer esse link, como criar essa página, o link do meu blog da uma olhada http://velomachine.blogspot.com/
ResponderExcluirse puder tira essa minha dúvida ficarei muito grato, digo seu site está ajudando e muito, se quiser me mandar um e-mail é silva.felipe55@gmail.com
você pode criar o marcador musica para o seu blog e usar o link no menu horizontal.
ResponderExcluiro blog não permite pagina extras
Fabiano adorei essa dica,só não consegui colocar borda,como meu blog é preto,ficaria legal uma borda...mas ñ sei onde trocar.
ResponderExcluirMesmo assim te agradeço meu lindo.
Bjos
L Loroza
ResponderExcluirveja aqui como fazer botões e bordas
http://dicasparablogs.blogspot.com/2009/04/como-fazer-e-colocar-botoes-no-blog.html
http://www.dicasparablogs.com.br/2008/08/colocar-ou-alterar-as-bordas.html
Há, mas eu queria com botão =/
ResponderExcluirAnônimo
ResponderExcluirmas é só mudar o estilo CSS para fazer o botão, veja no final da postagem os links que estão em Veja também.. lá tem como fazer botões
Olá tenho uma duvida:
ResponderExcluirtem como eu colocar a imagem dos banners uma em cima da outra em linha rera ou uma do lado da outra ''que nem nesse blog? pq nesse tutorial eu fiz e apareceu o nome dos blog em linha reta um em cima do outro
Obrigado!!
pode me explicar como eu posso colocar um botão ai no menu horizontal?
ResponderExcluiros botões são os proprios links é só mudar a formatação dos links no trecho #page-bar li a{...
ResponderExcluirMuito bom. Não sabia que era tao simples assim.
ResponderExcluirObrigado.
Fabiano Roberto suas dicas me ajudam muito, eu praticamente criei meu blog com suas dicas!
ResponderExcluirEu queria saber como que coloca uma caixa de busca personalizada no menu horizontal?
OBRIGADO!
http://blogdiarreiamental.blogspot.com/
[ADM] Diarréia Mental , coloque o código da caixa de busca no lugar do código de um dos links
ResponderExcluirGostaria de saber como colocar figuras ou pelo menos colocar linhas para separar as palavras de um menu horizontal
ResponderExcluirBoa dia,
ResponderExcluirGostaria de saber como mudar a cor das palavras dentro do widget em meu blog.
O fundo é branco e as palavras ficam brancas tambem , aqui nao da para enchergar ! So os links ficao brancos e as palavras sem links ficao cinza ...
Qual ér a tag para arrumar isso ?
Herrera [ Agente blog Filippo ]
ResponderExcluiracho que precisa mudar a cor do texto da #sidebar, isso você faz pela pagina editar html
http://www.dicasparablogs.com.br/2009/04/como-formatar-o-texto-do-blog.html
Fabiano, obrigado pelas dicas, gostaria que me explicasse melhor como colocar botões com o texto dos links. Aí em cima voce disse que é so mudar a formatação dos links no trecho #page-bar li a{... Poderia dar mais detalhes? Mais uma vez obrigado.
ResponderExcluirDorival
ResponderExcluirse usar criar um botão é só colocar no lugar do link de texto mas retire os:
padding-top: 5px;
padding-bottom: 5px;
que estão no código.
para colocar imagens use esse código
<a href="endereço do site"><img border="0" src="endereço da imagem" /></a>
Mais uma vez obrigado, deu certo. Agora eu vou melhorando aos poucos. Abraços
ResponderExcluirGostei muito das dicas, mas meu template já vem com os botões para o menu horizontal, só preciso saber como inserir os links em cada icone. Por exemplo, "sobre" eu desejo que apareça o meu perfil.
ResponderExcluirAté agora, as unicas que funcionam são o login e a pagina inicial.
Pode dar uma ajuda?Estou fazendo testes com ele ainda para depois postar.
rimaricafrasefeita.blogspot.com
se não tiver como clicar para editar o gadget daquele menu entre na pagina editar html e procure por:
ResponderExcluir<ul id='menu'>
<li><span class='home'><a Title='Home' href='http://rimaricafrasefeita.blogspot.com/'>Inicial</a></span></li>
<li><span class='about'><a href='http://www.blogger.com/profile/13122548678339145743'>Sobre</a></span></li>
<li><span class='subscribe'><a href='http://rimaricafrasefeita.blogspot.com/feeds/posts/default'>recados</a></span></li>
<li><span class='contact'><a href='mailto:#'>Contato</a></span></li>
<li><span class='archives'><a href='http://www.blogger.com/home'>Login </a></span></li>
</ul>
é nesta parte que edita os links
bem legal e facil de mecher , mas como eu coloco uma barra divisoria entre os itens ??
ResponderExcluirRafael
ResponderExcluirna pagina editar html você pode procurar ou colocar isso
.sidebar .widget {margin: 12px 0 13px 0;padding: 0;border-bottom:1px solid #FFFFFF;}
a parte border-bottom:1px solid #FFFFFF; faz uma borda no final de cada gadget, claro pode alterar como desejar ou usar uma imagem de fundo fixa na parte de baixo, mas se fizer isso nao esqueça de colocar padding-bottom: 20px também para dar o espaço para imagem aparecer.
amigo como eu faço para quando clicar nos liks do menu horizontal não abrir outra pagina mais sim ir direto na mesma pagina
ResponderExcluirvlw.
para não abrir em outra pagina é só retirar a parte target="_blank"
ResponderExcluirvaleu cara esse é o melhor site de dicas para blog
ResponderExcluirProfessor Fabiano, bom dia!
ResponderExcluirComo eu coloco no Texto ou Htrml/Javascript (gadgets) fundos brancos? Pois o fundo dos gadgets Texto e Html/Javascript ficaram invisíveis ou transparentes.
Como eu coloco a cor ou a imagem nas barras das abas das páginas do meu blog? Pois as abas ficam invisíveis ou transparentes.
Gustavo Reis, geralmente a cor das colunas laterais é na pagina editar html, no estilo #sidebar
ResponderExcluirveja aqui Template do Blog, colunas de tamanhos iguais
Olá professor Fabiano!
ResponderExcluirBoa tarde!
Como eu coloco uma linha horizontal grossa para separar as postagens?
Obrigado!
Gustavo
Gustavo Reis, você pode colocar no html do seu blog esse código
ResponderExcluir.post{padding-bottom:15px;border-bottom: 2px dashed #990000;margin-bottom:30px}
o valor 15 é a margem antes da borda, e o 30 depois dela, veja aqui como formatar o borda
Colocar ou alterar as bordas
ola,,
ResponderExcluireu queria saber como faço para colocar bordas no menu e se tem como mudar a letra e a cor dos links do menu
Oi Fabiano Roberto, como vai??
ResponderExcluirLi todos os comentários dessa pagina e minha duvida é a mesma da Sandra, como faço pra colocar o conteúdo do menu??
Desde já agradeço a atenção!
Claudia
tem que acrescentar mais linhas
ResponderExcluir<li><a href="url do item" target="_blank">Item 5</a></li>
uma para cada item que desejar
A vários dias estava procurando dicas para colocar botões lado a lado e não consegui. Mas pra minha sorte encontrei o Dicas para blogs, e consegui resolver com muita facilidade. Deixo aqui os meus parabéns pela boa informação que recebi.
ResponderExcluirMeu Blog:http://reliquiasetunados.blogspot.com/
Grato
VALEUUU
ResponderExcluirVC ME SALVOU
VALEUU DD++++
SUCESSO
Apareceu um menu padrao do layout, que é aquele layout de caderno que baixei no acessorios para blogs, apareceu um pontinho do lado esquerdo e o link do lado direito, e ainda um de baixo do outro, me ajuda aew, VLW.
ResponderExcluirComo que eu faço pra abrir o link na mesma janela?
ResponderExcluirpara abrir na mesma janela retire o target="_blank" do codigo
ResponderExcluirOla Fabiano,
ResponderExcluirComo faço para alterar a altura do menu pois ficou muito larga. Consegui colocar cor, bordas e aumentar a largura, porem a altura nao consegui encontrar o local para modificar. Poderia me ajudar?
Ficou uma beleza, só preciso fazer este pequeno ajuste.
obrigada,
Katia
alteramos a altura do botão com os paddings:
ResponderExcluirpadding-top: 5px;
padding-bottom: 5px;
tenho uma pergunat se me poderem ajuadr ficava muito grato. e o seguite e tenho um blog 2&1 tv=downloads gratis de link direto.a questao e quie eu queria colcar o menu da tv com iamgens ou logo de cada canal. genero muitos sites de stream na internet. alguem faz alguma ideia...fica a questao. desde ja agradeco uma breve resposta
ResponderExcluirmeu blog: downloadsapedido.blogspot.com
você precisa achar as imagens e os links para os canais, não sei quais links pois nunca usei canais na internet.
ResponderExcluirobrigado roberto. sei mais ao menos como e, sei que as imagens vem de links da net os links de tv sao do meu blog. cada tv cada link. mas fazer um menu ou um botao para cada link com imagem e mais dificel. a ver se aprendo isso. de qlquer forma obrigado. e se postares aqui algo sobre o assunto LET ME KNow.abraco
ResponderExcluirse quiser colocar imagens(banners) uma do lado da outra, crie um estilo css assim:
ResponderExcluir.banners img{padding: 5px;display: inline
<div class="banners">
codigo dos banners
</div>
claro veja se o seu blog já usa o estilo banners se tiver use outro nome qualquer.
linguagem css html senpre dificel de entender. lol mas ya roberto eu percebi por onde comecar. mas mais dicas sao bem vindas; eu uso o blogspot. passa la pa veres co o tenho o menu. mas com imagnes vai ser dificel para mim que ando nisto a coisa de 2 anos. muito pouco tenpo. abraco
ResponderExcluirComo diminuo o comprimento ?
ResponderExcluirvocê fala o comprimento de cada botão? é no trecho width: 150px;, neste estilo #page-bar li a{
ResponderExcluirNão, o comprimento total, no meu blog fica estranho, veja só: http://insaneskull.blogspot.com/
ResponderExcluiro comprimento total não é ajustavel, só o tamanho de cada botão, sugiro que coloque mais botões e aumente a largura de cada um deles, pode usar um botão para assinar feed, mostrar comentários recentes e outras coisas
ResponderExcluirO meu mais sicero obrigado!
ResponderExcluirQuebrei muito a solucionou perfeitamente este tutorial, e a minha sorte foi ter prestado atenção e lido todos os comentários pois achei o complemento para o que eu necessitava.
Foi um comentário questionando como deveria se proceder para mudar os itens por imagens linkaveis, a resposta a essa pergunta não apenas esclareceu como resolveu definitivamente o meu problema.
Parabéns Roberto.
no meu deu um erro bX-2myth2 oque devo fazer, coloquei do jeito que esta pra testa antes de modificar e deu esse erro
ResponderExcluirdesde já agradeço
os erros do blogger são dificeis de explicar ou corrigir, mas normalmente é algo momentaneo, se tentar mais tarde deve conseguir.
ResponderExcluirpode excluir o histórico de internet para seu computador não entrar na pagina atraves dele
Fabiano ..
ResponderExcluirqueria q vs me ajudasse ..
pq tô com um problema ...
O meu template, jah veio com o menu horizontal ... Soh q quando eu adiciono alguma 'categoria' à alguma postagem, essa categoria naõ aparece no menu. jah procurei em vários lugares como solucionar isso . mas ainda nem achei nenhuma resposta .. será q vs sabe o q tah acontecendo ? e o q eu posso fazer pra ajeitar isso ? .
ô se vs quiser vê como tah o link do blog . http://www.diario-de-uma-garota-moderna.blogspot.com/
vs vai vê q lah em cima, tem duas 'categorias' .. sendo q elas estão juntas, ou seja quando alguém clicar lah, ela nem vai sair do canto ... naão sei se eu fui clara o bastante . mas agradeceria mt se vs pudesse me ajudar .!
Desde jah eu agradeço
BejiTOs :*
E maiis sucesso pra vs ! (:
Oii Fabiano ! (:
ResponderExcluirbem , disconsidere o meu outro comentário .. futucando no blog com calma, eu achei a solução .!
BejiTOs :*
e Sucesso , mais uma vez ! ;D
no meu não esta aparecendo esse htmal/javascript no meu gadget pfv bote fotos assim fica melhor para entender
ResponderExcluirAndr£ Lu!$ ¬¬
ResponderExcluiresse menu é feito basicamente com códigos, para usar imagens para explicar é meio estranho afinal é só copiar e colocar o código, e depois fazer as alterações de links
Desculpe eu acho que vc entendeu errado,o que eu queria dizer era :que eu não entendo muito disso,e que eu não tinha achado o html/javascript e que eu pedi foi para você colocar fotos no post.Eu não entendo muito sobre CSS(na verdade é que eu nem sei o que é CSS).PFV me ajude
ResponderExcluirFabiano, estou eu aqui outra vez para incomoda-lo. Por favor me ajuda! é o seguinte eu queria colocar os botões lado a lado com você colocou na sua sidebar. Como faço? Desde já obrigado!
ResponderExcluiré só seguir os passos que mostramos no tutorial e conseguirá fazer um menu igual a esse que usamos
ResponderExcluirÉ que na verdade Fabiano, eu não quero a link bar. O que eu qro na verdade é coloca os botões que vc tem na sua sidebar (orkut, youtube e facebook). Eu qro colocar os botões na minha sidebar um do lado do outro como vc fez, mas como faço pra colocar lado a lado?
ResponderExcluiraqui está o código para dividir um gadget de html em colunas
ResponderExcluirDividir um gadget em duas colunas
depois é só usar imagens comuns para linkar
Boas, não estou conseguindo mesmo nada.
ResponderExcluircriei uma caixa de links,horizontal, e criei posts de mensagens com as etiquetas, mas depois quando clico nos links diz que não tem posts.
onde será estou a errar?
se faço com marcadores, eles alteram o tamanho e a posição quando são clicados.
o que eu queria era um menu de fotos(naturez,urbana,outras), e que os posts correspondentes fossem para lá.
tou perdido.
abraço
francesco
então provavelmente está usando os endereço errados das paginas no links, tem que ser o link completo com o http://...
ResponderExcluirComo faço um menu horizontal expancivel ?
ResponderExcluirAnonimo, está querendo um submenu? veja aqui: Como Colocar Submenu no Blog
ResponderExcluirOla Fabiano, eu quero saber como faço assim um fundo para o meu menu horizontal, tipo o seu, o seu é azul claro e quando passa o mouse por cima vira outra cor, me ensina ?
ResponderExcluirveja aqui como formatar o texto do blog
ResponderExcluirComo Formatar o Texto do Blog
e use no estilo #page-bar li a:hover, pode fazer qualquer formatação, trocar cor de fundo, colocar bordas..
Como ponho uma lista vertical com vários links para um menu do Linkbar?
ResponderExcluirse apagar a linha float:left; neste trecho:
ResponderExcluir#page-bar li {
float:left;
display:block;
os links ficam um embaixo do outro
ele ficou colado na sidebar, onde eu ajeito isso, pra colocar mais distancia ?
ResponderExcluirneste trecho #page-bar {margin: 0px;
ResponderExcluirpadding: 0px;
width:auto;
}
você pode trocar padding:0px por padding-bottom:5px
faça testes alterando o valor 5 até chegar na distancia que desejar.
padding-bottom:5px alterou a distancia dos lados, e nao de baixo ;S
ResponderExcluirah, consegui nesse trecho!
ResponderExcluir#page-bar li a{
background-color: #000000;
border: 2px solid #FF1493;
margin-bottom: 7px;
add o margin-bottom: 7px; :D
MariaGoisainda bem que conseguir mas sinceramente não sei o que aconteceu o estilo com a palavra bottom só deveria criar espaço para baixo
ResponderExcluirExatamente, " margin-bottom: 7px; " criou espaço embaixo do menu; entre as colunas e o menu (:
ResponderExcluirsó que nao alterei no trecho #page-bar { , alterei no #page-bar li a{
Eu queria saber como diminui o espaço de um lado pro outro , tipo deixar certinho , ou deixar a cor da barra trasparente , tem como ?
ResponderExcluirOlá! Fabiano, tudo bom? Mto legal o seu blog.Parabéns!
ResponderExcluirBom, to c um prob, to criando um blog e qndo vou por aquelas CAIXA DE LINK HTML(pra as pessoas copiarem) FICA MUITO GRANDE. axo q é o template q ja peguei quase pronto. Se poder me ajudar fico mto grata!
Mel
ResponderExcluirveja aqui como Personalizar Caixinha link-me
Ola fabiano sou a debora do outro poste, desculpe encomodar voce novamente, mais eu fiz todo procedimento mais o menu ainda está no corpo do blogger. tem um detalhe eu peguei o modelo de ums dos seus entra la pra voce ver qual é o problema http://tudoqueeugosto16.blogspot.com/
ResponderExcluirdesde ja agradeço ;D
Aqui não ficou lado a lado ficou um abaixo do outro alguem poderia me ajudar?
ResponderExcluirentão deve ter colocado alguma coisa errada.. muitas pessoas já usaram esse código e sempre funcionou..
ResponderExcluirveja se já não tem algum estilo page-bar no seu html além deste que indicamos aqui
Bom dia.
ResponderExcluirUsei todas as suas dicas e gostei bastante do resultado no meu blog. valeu :)
Fiquei, no entanto, com uma dúvida em relação ao fundo do botão.
Gostaria que o botão ficasse com a textura de um vidro fosco (não sei como é isso em CSS), ou seja, com uma transparência de 50% aproximadamente.
Isso é possível, pois só encontrei background como "transparent"(100%)?
Grato
para textura de fundo em botões é melhor usar imagens, veja aqui: Como fazer e colocar botões no blog
ResponderExcluirFabiano, consegui e ficou muito legal.
ResponderExcluirvaleu pelas dicas.
Mas tem um "pulo do gato" aí: primeiro é necessário criar uma pequena figura com o Gimp, com a opacidade desejada e em ".png"
Depois hospeda-se ela em algum lugar e segue-se o seu roteiro.
No meu blog, usei para o botão, um figura de 10x2 pixels, fundo branco com 40% de transparência. O botão suspenso muda de cor ao passar o mouse.
Até mais
Fabiano, adorei esse menu, funcionou direitinho.
ResponderExcluirApenas um problema; criou um espaço grande entre o menu e as postagens, gostaria de diminuir. Tem como?
Agradeço se puder me ajudar.
abç
ranulfo
os espaços depende de onde você colocou o gadget com o menu e as configurações de largura(width) que usou nele.
ResponderExcluiro problema das minhas imagens nao carregarem é o IMAGESHAKE, me indique um site q funcione, minhas imagens so carregam uma parte , observe os Wallpapers na coluna do blog: http://fasdesolangealmeida.blogspot.com/
ResponderExcluirso carregam um pedaço, :@
MariaGois
ResponderExcluiro imageshack é um bom site de hospedagem, acho que o problema é mostrar imagens grandes demais no seu blog.. ele fica demorado para carregar
o certo seria criar duas imagens, uma no tamanho original(que vc já fez) e outra miniatura para mostrar na coluna do blog, assim sua pagina carregaria mais depressa
Eu vi um comentário com a duvida que eu estou, mas eu não achei sua resposta, então me desculpe perguntar a mesma coisa dinovo, mas eu não entendo, eu consegui criar o menu horizontal certinho e ainda mudar o nome, mas eu sei como fazer para escrever o que eu quero em cada parte do menu, entendi minha duvida?
ResponderExcluirQlq da uma olhada no meu blog
http://prendadagarota.blogspot.com
Obrigadaaa
Carla Cambiaghi
ResponderExcluirnos lugares onde tem:
<a href="url do item" target="_blank">Item 1</a>
você pode trocar por endereços de postagens do seu blog, desta forma:
<a href='http://www.dicasparablogs.com.br/2009/05/links-lado-lado-menu-horizontal.html' title='Links lado a lado (menu horizontal)'>Links lado a lado (menu horizontal)</a>
fabiano por favor me ajude,nao sei onde coloco o link do site no codigo me ajuda ........
ResponderExcluirOlá Fabiano.
ResponderExcluirPrimeiro quero dizer que o seu blog está de parabéns.
Agora vamos a dúvida:
Usei o seu código para barra de menu horizontal e deu certo.
Ficou semelhante ao blog, fume, eu alterei a cor da fonte e também quando se posiciona o ponteiro do mouse sobre cada botão.
Agora quero fazer um espaço entre cada botão que seja na cor transparente.
Você pode me ajudar?
Caso queira dar uma olhada:
semeandoapalavradosenhorjesus@blogspot.com
Dê uma opinião de como está o meu blog.
para criar um espaço entre os botões você pode colocar no trecho #page-bar li a{...} margin:1px;
ResponderExcluirisso faz uma margem de 1 px ao redor do botão, se quiser o espaço somente na lateral pode usar margin-left:1px
claro ajuste o valor até ficar no espaço que você deseja
Fabiano.
ResponderExcluirDesculpe, mas eu não formulei minha pergunta corretamente.
Além da margem ou separação nos botões da barra horizontal, quero saber sd tem como fazer essa separação ou margem sendo ela transparente.
Pois minha barra horizontal é fume meio transparente.
Se eu colocar #page-bar li (...) Margin-left: 2x;
Color: código de transparência;
Funcionará?
Obrigado mais uma vez.
Luiz Carlos Do Nascimento
ResponderExcluirfunciona bem porque o margin é um espaço vazio, ou seja ficará a cor de fundo do seu blog
Olá Fabiano, eu gostaria de saber como faço para: no menu, eu quero um botão " Todos os animes" e que quando a pessoa clique apareça uma página com uma lista, com os links das postagens. Como faço isso?? Eu nao sei direito como eu faria, ou qual link eu colocaria ali em cima (no botão). Me ajude por favor.
ResponderExcluirblog afetado: www.mikigifs.blogspot.com/
veja aqui como mostrar um link com todas as postagens: Criar um Índice do blog - Mostrar links de todos os posts
ResponderExcluirMuito bom msm, o primeiro que eu consegui colocar, mas como faço pra por uma imagem como fundo do menu? Aqui no meu ficou transparente, aparecendo o fundo do blog mesmo.
ResponderExcluirObg des de já.
Fabiano Roberto
ResponderExcluirEu quero tirar o menu do meu blog porque coloquei um do CSS Menu Maker e ficou em cima do menu horizontal. Como faço pra tirar ? Não aparece mais o gadget desse menu, mas continua lá. Me ajuda
veja se colocou o ´codigo completo, se faltar algo gera esse tipo de erro que mostra o código em fez de executar
ResponderExcluirDescobri um jeito de colocar páginas lado a lado. Atenção: isso só funciona com páginas. Não com links.
ResponderExcluirNa página desing, arraste o gadget "páginas" para debaixo do cabeçalho.
Pronto, agora todas as suas páginas do blog aparecerão lado a lado.
O seu site e uma maravilha.Um obrigadao por nos ajudar.
ResponderExcluirEu vi um conjunto de imagens passando em rodape num site lituano( http://www.lrytas.lt/ ) .A minha ideia era passar no meu blogue essa barra mas com as fotos dos blogues que me seguem.Pode ajudar ?
Obrigado.
JJD
ResponderExcluiraqui tem um código para fazer Banners deslizando
Oi,como coloco conteudo nos links lado a lado?
ResponderExcluirconteudo nos links? ...
ResponderExcluiré onde tem url do item, é para colocar o endereço das paginas e depois mudar o texto item logo a seguir...
as paginas podem ser postagens do seu blog
só que nao da certo,visite meu blog......aparece pagina nao encontrada
ResponderExcluirComo colocar um fundo de cor atras dos itens?
ResponderExcluirno estilo page-bar li a{... você pode colocar a cor de fundo ou formatar como quiser... veja os links no final do tutorial..
ResponderExcluirAonde que eu coloco a cor de fundo??pq na page-bar li a só fica a cor,mas a de fundo é aonde que coloca?
ResponderExcluirmeus itens ficaram muito pequenos,não to conseguindo aumentalos para o lado...como faço?
ResponderExcluirei,pq no meu blog aparece um sapo falando!dominio não registrado,registre-se?
ResponderExcluirOlá,gostaria de fazer uma pagina sobre mim no blog,como crio uma pagina tipo assim Eu e dai o conteudo?
ResponderExcluirAnonimo
ResponderExcluirnão entendi sua duvida... você pode criar a pagina com o conteudo que desejar
Tipo eu quero colocar no menu horizontal CONTATO,mais quando clico o que faço para abrir a pagina e aparecer o meu contato?
ResponderExcluirGiro Dos Famosos
ResponderExcluira paginas que abrem no menu podem ser postagens ou paginas extras do blog... se nãofuncionou provavelmente o endereço da pagina está errado
como que eu coloco parceiros no meu blog?
ResponderExcluira nossa lista de parceiros é feita manualmente, são links de texto comuns, não tem nenhum código
ResponderExcluirOlá! o meu problema é que eu coloco para abrir o link em outra aba só que quando clico pra salvar aparece essa frase "O URL não pode conter '<'".
ResponderExcluirGostaria de uma ajudinha!
valeu
Você, a Bola e Eu!
ResponderExcluirprovavelmente você apagou algo errado na hora de colocar os links no código, se tirar os sinais ' o código dá erro
Olá novamente,como coloco uma cor de fundo nos links??
ResponderExcluirno trecho #page-bar li a{....} é só colocar o código background-color:#000000;
ResponderExcluirclaro que usando a cor que desejar, esse exemplo é preto
Como troco a cor das opçoes da enquete!!é urgente..
ResponderExcluiras enquetes geradas pelo blogger tem formatação propria não dá para alterar
ResponderExcluiramigo por favor, estou com dificuldade de tirar um contorno da barra, o link da imagem esta logo abaixo, se puder me ajudar por favor responda, a barra ta perfeita so preciso tirar essa risca, não é um subilhado, acredito eu q seja a sombra do botao, porem nao consigo tira ela, ai vai a imagem, agradeço desde já!
ResponderExcluir[http://img852.imageshack.us/img852/4881/barramenu.png]
vlw
o site imageshack removeu muitas imagens inclusive essa... não tem como recuperar o jeito é criar e hospedar outra imagem
ResponderExcluirO meu funciona direitnho,mudei a cor e tdooO tá perfeitinho,vlw!!!
ResponderExcluirComo deixar a barra menor?pq coloquei todos os link,mais ainda sobra muito espaço dos lados
ResponderExcluirno trecho abaixo você pode mudar a largura de cada botão e assim fazer que o menu fique do tamanho que desejar, altere o valor 150
ResponderExcluir#page-bar li a{
margin: 0px;
color:#000000;
display:block;
text-decoration: none;
width: 150px;
Olá,poderia me dar uma dica de onde posso divulgar meu blog para ter mais visitas?
ResponderExcluiraqui tem alguns dicas sobre Ganhar Tempo e Conseguir mais Visitas no Blog
ResponderExcluirmas use nossa pesquisa no inicio da pagina achará varios outros tutoriais sobre o assunto
Olá.Como faço uma pagina de fotos igual a esta http://selmg.6te.net/galeria/index.php
ResponderExcluiresse tipo de pagina é complicado de fazer... precisa criar um site para isso não tenho como explicar isso num comentário ou mesmo em um tutorial...
ResponderExcluirFabiano boa tarde,coloco lá o código e fica tudo direitinho mais quando vou fazer os botões da errado.Quando visualizo no gadget vejo perfeito ai quando salvo aparece assim: .Item1
ResponderExcluir.Item 2
um abaixo do outro,estou mexendo nessa parte #page-bar li a{ e #page-bar li a:hover{ estou tentando colocar uma imagem nos botões que tem 150 de largura e 32 de altura.Poderia me da uma dica de onde que to errando?Consegui colocar aquele menu seu vertical,mais queria esse e não to conseguindo,me ajuda por favor,te agradeço.
para colocar imagens é nestes trechos que citou... veja se a url da imagem está certa...
ResponderExcluirOi, eu tenho duas duvidas sobre o menu horizontal, 1º como trocar (item 1....)pelo nome que desejo? 2° tem que criar pagina extra pro item 1, como faço? Se puder responder, grato...... há e o site Dicas para blog está ótimo, parabéns.....
ResponderExcluiro texto item 1 você escreve o que deseja que apareça na sua pagina, por exemplo em nosso blog usamos tutoriais diversos - depois no item 2 anuncie e assim por diante
ResponderExcluiras paginas algumas são postagens do blog e outras são Paginas extras para o Blogspot
Olá Fabiano. Excelente Post!
ResponderExcluirEstou com duas dúvidas.
Você sabe se é possível neste código, fazer com que o link que foi clicado ficar realçado enquanto o usuário está nele, da mesma forma como acontece com o menu de Pagínas original do blog?
No meu site acervotecnico.com.br ficaria legal essa função para o menu que criei na barra lateral com o visual do menu de Páginas.
Outra coisa hehe. Já quebrei a cabeça neste blog e em outro que administro, ambos usam os Novos templates do blogger, que possuem o Design de Modelo. Até hoje não consegui achar onde eu modifico os PADDINGs dos widgets. Queria reduzir as distâncias entre os widgets laterais, e entre os widgets acima e abaixo do corpo de postagens. Sabe onde fica?
Desde já muito obrigado e parabéns pelo blog!
sobre deixar o link visitado diferente você pode criar um estilo .#page-bar li a:visited{....
ResponderExcluirOlá Fabiano acho que você é o único que pode me ajudar!!! Coloquei um menu no meu site http://animesvarios.blogspot.com e deu tudo certo mas ele não é daqui.
ResponderExcluirQueria te perguntar se posso colocar uma imagem no lugar do título da palavra menu (que é o título do widget) aguardo respostas abraço
seria mais facil usar a imagem com o código html em vez de editar o titulo do gadget..
ResponderExcluirou seja deixe o gadget sem titulo e antes do código do menu coloque isso aqui:
<center>
<img src="endereço da imagem" border="0">
</center>
Eu postei no meu blog e depois sai depois quando voltei minha conta tinha sido desativada(http://muisic-better.blgospot.com) porque?
ResponderExcluirdeve ter feito algo errado no seu blog ou colocado algum código que está redirecionando para outra pagina... não consegui entrar no endereço...
ResponderExcluirPq o titulo da postagem do meu blog nao tem link? tipo quando clica abre só aquela postagem?? meu blog >> http://giro-dosfamosos.blogspot.com/
ResponderExcluirGiro Dos Famosos
ResponderExcluirdepende do template que usa.. o link nos titulos faz parte do html do blo
Olá, usei o código que você postou deu tudo certo com excessão do fato de os botões do menu so aparecerem o nome quando passa a seta por cima dele. poderia me ajudar e se possivel me enviar um endereço que me ensine a fazer um menu com rolagem.
ResponderExcluirObrigado desde já pela sua iniciativa, é muito importante para nós leigos.
veja aqui Alterar cores dos links - CSS, provavelmente a cor do link é a mesma do fundo por isso só aparece quando passa o mouse
ResponderExcluiressa cor do link você altera no estilo #page-bar li a
Como colocar um fundo branco atras do titulo do glaglets?? ex: este blog aqui http://selmg.blogspot.com/
ResponderExcluirJuleide
ResponderExcluira formatação dos gadget é no estilo h2 na maior parte dos templates, então entre na pagina editar html e procure por h2{....}
e coloque dentro das chaves background-color: #FFFFFF;
claro que usando a cor que desejar, veja aqui o Código das Cores
Eu nao achei essa parte ai!
ResponderExcluiressa parte não deve ter.. só vai achar o h2 ou .sidebar h2 e deve colocar o background....
ResponderExcluirnão tenho como dizer exatamente como é pois isso varia conforme o template
Eu tbm nao achei..será que tem como vcs acharem pra mim se eu mandar o código?
ResponderExcluirSe eu te mandar o código vc acha?
ResponderExcluirWord Selena
ResponderExcluirno seu blog tem o estilo
.sidebar .widget h2 {
text-shadow: 0 0 -1px #000000;
}
mas se as alterações não funcionarem mexendo neste trecho veja que existem muitos outros h2 na sua pagina, será precisa apagar alguns trechos deles, por exemplo se mudar a cor e não funcionar terá que tirar a cor dos outros estilos h2
Aconteceu uma coisa no meu blog....O numero de postagens em cada pagina ta para 10..mas só esta aparecendo 2..oq faço?
ResponderExcluirWord Selena
ResponderExcluirveja se nas configurações estão 10 postagens ou 10 dias...
senão pode ser algum erro no html do blog, então é mais complicado de achar..
Ta em 10 postagens..
ResponderExcluirEu acho que esta com erro no html...Por favor me ajude,este blog é tudo que eu mais amo!
ResponderExcluirachar o erro no html é mais dificil precisa fazer os testes diretamente no seu blog, por isso não tenho como dizer onde é o problema
ResponderExcluirA tempo tentava colocar este menu horizontal no meu blog e por não ter muito conhecimento não conseguia, mas ao ler o seu post tentei novamente e para minha surpresa deu certo. Fiz o ajustes necessários e gostei muito do resultado. Muito obrigada por partilhar conosco, postagens tão simples e de fácil entendimento!!!!!
ResponderExcluirÉ possível os botões terem larguras diferentes uns dos outros? Tenho botões que o texto é composto por duas palavras, outros composto por apenas uma. No código aparece "width: 150px", se eu diminuo este valor, diminui todos os botões e não apenas alguns como eu gostaria. Tem como fazer botões de larguras diferentes?
ResponderExcluirAnonimo
ResponderExcluirse você retirar esse trecho da largura do botão então cada item ficará da largura do texto do botão.
mas isso é mais dificil para acertar a largura total do menu pois dependerá do que escrever nele.
se resolver tentar naquele trecho onde tem a largura (#page-bar li a), use padding-left: 2px; padding-right:2px;
isso é um espaço de cada lado do texto, então pode alterar esses valores 2 px até deixar o menu completo na largura certa
ola gostaria que meus links de fotos ficassem lado a lado e nao um embaixo do outro como faco?
ResponderExcluirhttp://magicomediante.blogspot.com/p/dicas.html
se usar esse código os links ficam lado a lado é só não usar < br> ou < p > para mudar de linha
ResponderExcluirMuito boa essa dica. Tenho um blog a alguns meses e só agora consegui fazer essa barra lateral. Isso q sou burrinha p\ essas coisas e até eu consegui....rsrrs
ResponderExcluirMuito obrigada, vejam como ficou:
http://vivaiona.blogspot.com/
Boa Noite Fabiano Roberto,
ResponderExcluirO Blog permite que se faça 10 paginas extras, eu fiz 07, mas apenas 03 ficam visíveis, o que fazer para que todas apareçam??
Obrigada e Parabéns pelo Blog.
Penha
ceramica é...
ResponderExcluirvocê pode colocar os links para as paginas extras no seu blog como um menu..
essas paginas não aparecem na pagina inicial do blog é normal
Como colocar o titulo do gladget no meio do sidebar?
ResponderExcluirWord Selena
ResponderExcluirprecisa colocar text-align:center; no estilo CSS do titulo do gadget, normalmente é o estilo h2{...} ou h3{....}
veja na pagina editar html
Olá Fabiano tudo bem?
ResponderExcluirMeu posso pedir uma ajuda tua?
É o seguinte coloquei no meu blog um menu horizontal desse que esta em sua postagem, o problema é que gostaria que ele ficasse certinho tanto dos lados quanto pra cima e a foto do cabeçalho gostaria que ficasse certinho tambem dá uma olha lá por favor e me diz se dá pra arrumar, se for o caso podemos conversar via e-mail pra acertar direitinho seu trabalho.
Desde já agradeço.
Segue o link: vimetorto.blogspot.com
Valeu!!!
o código do nosso menu tem os botões em tamanho fixo, veja aqui:
ResponderExcluir#page-bar li a{
margin: 0px;
color:#000000;
display:block;
text-decoration: none;
width: 150px;
o numero 150 é a largura de cada botão, é assim que fazemos o menu ficar no tamanho certo
Olá, estou testando o menu horizontal, mas gostaria de saber se existe uma maneira de mudar o fundo preto para transparente...Obrigado pela ateção.
ResponderExcluirpode colocar a cor de fundo neste trecho:
ResponderExcluir#page-bar li a{background-color: #FFFFCC;
margin: 0px;
color:#000000;
display:block.....
....
....
veja que no tutorial não tem background-color: #FFFFCC; isso é a cor de fundo....
deixar transparente não vai adiantar pois aparece a cor de fundo do seu blog
valew pela ajuda
ResponderExcluirOlá Fabiano, tdo bem?
ResponderExcluirOlha, eu to com uma dúvida aqui..o meu template tem esse menu, até sei editar isso..
O que eu quero saber, é como eu crio essas páginas no blog, sem que elas apareçam direto no blog, (tipo que fiquem ocultas) e só clicando no menu para poder acessa-las..
Obrigado desde já!!!
Este comentário foi removido pelo autor.
ResponderExcluirOs Skolaxadus
ResponderExcluirveja aqui Paginas extras para o Blogspot
Ola Fabiano, eu q so o "Os Skolaxadus" to aqui de novo..primeiramente quero agradecer, sua resposta foi muiito util pra mim..
ResponderExcluirMais agora to com outra dúvida aqui, sobre o menu horizontal deu tudo certo, eu quero saber, se tem como eu criar outro menu (ex:lateral), ou criar mais páginas, páginas estáticas (ocultas) para que eu possa usar o link e criar um menu manual no blog...
Obrigado desde Já!
sim pode criar outro menu vertical... apenas as paginas extras tem o limite de 10 paginas... se quiser mais terá que usar postagens do seu blog
ResponderExcluirTem alguma forma de criar esses posts sem que eles apareçam na página inicial, porque toda vez crio um post, pra tenta criar uma página ele fica na página inicial, e é isso que eu não quero, vi uns tutoriais que ensina esconde-los, mais não consegui fazer nenhum funcionar. o que mais me interessa, e esconder as páginas, ou os posts (ex: criando eles com marcadores) só que não aparecendo o post na página inicial, como se eu estivesse publicado uma página normal de um site.
ResponderExcluirObrigado...
Mike"Japa"
ResponderExcluiras postagens sempre vão para a pagina inicial do blog... não tem outro jeito...
existem as paginas extras do blogger, mas são apenas 10
Pow foi de boa utilidade pra mim, vlw ^^
ResponderExcluir