Olá, leitor!
Quero compartilhar com você um menu colorido bem fofo e fácil de instalar.
Clique no botão para ver a demonstração:
Para ter em seu blog é bem simples:
Acesse o painel de seu blog e clique na aba Layout.
Clique em Adicionar um gadget e escolha HTML/JAVASCRIPT.
Na janela que expandir cole esse código:
Leia:
Como usar os tutoriais deste blog?
Entenda o código:
<span style='border-radius: 7px; /*grau de arredondamento da aba*/
background-color:#f781f3; /*cor de fundo da aba*/
padding: 5px 15px 5px 15px;'> /*espaçamento interno*/
<a href="LINK 1 ">categoria 1</a></span>
Onde você lê LINK 1 coloque, claro, o endereço para onde deseja direcionar o leitor quando ele clicar.
Em geral a aba 1 é para o começo do blog, o endereço principal.
As demais você coloca o que desejar, sendo que em geral são páginas Sobre, Contato, Mapa do blog, etc.
Onde você lê categoria1 coloque o nome da aba como deseja que apareça.
Para trocar a cor das abas troque o código hexadecimal pelo código da cor que você deseja.
Veja minha demonstração e configure o seu como desejar.
Depois de pronto arraste para onde deseja que apareça e salve as alterações.
Caso deseje incluir mais abas repita esse trecho antes de fechar a div, tantas vezes quantas forem as abas que deseja acrescentar.:
Gostou?
Então curte aí!
E ajude a divulgar o blog!
Eu agradeço!!!!
Elaine, além de agradecer por sempre estares compartilhando o que sabes pra nos ajudar
ResponderExcluir¸.•*´¨`*•.¸¸.•*´¨`*•.¸¸.•*´¨`*•
Meu agradecimento pelos carinhos todos nesse ano e desejos de FELIZ NATAL e lindo, iluminado e com muita garra 2014 ! beijos,chica
¸.•*´¨`*•.¸¸.•*´¨`*•.¸¸.•*´¨`*•
Adorei vou tentar no meu blog, se puder seguir o meu agradeço beijos http://duasirmasatelie.blogspot.com/
ResponderExcluirEstava querendo colocar Abas no meu Variedade!
ResponderExcluirVou tentar fazer.
Obrigada.
Beijos.
Coloquei as abas.
ResponderExcluirLi mas não entendi como trocar a cor, você me explica mais detalhado.
Obrigada.
Beijos.
Jo, para trocar as cores troque o código hexadecimal das que estão pelo código das que deseja, conforme explico no tutorial.
ExcluirAqui tem uma tabela de cores:
http://cores.gratuita.com.br/
beijos
Oi Elaine,
ResponderExcluirMuito legal!
Eu vou aproveitar as férias do blog para fazer algumas mudanças, mas ainda não sei o que farei rs
Vou guardando todas as dicas.
bjs
Ótimo finde!
Obrigada! Consegui trocar a cor (pelo código da tabela).
ResponderExcluirValeu mesmo.
Beijos.
Ótima dica! Quando sair de férias vou dar uma melhorada no layout do meu blog e com certeza vou passar por aqui pra pegar umas dicas!
ResponderExcluiroblogdafenixx.blogspot.com
Simplesmente lindooooo...
ResponderExcluirQue fofo!!!
ResponderExcluirNão fosse o meu menu tão lindo (graças às SUAS mãos de fada!), colocaria no meu bloguito!
Obrigada por compartilhar!
Beijinhos,
Cris
Oii linda , seu blog tem tudo queeu preciso , obrigada <3
ResponderExcluirElaine:
ResponderExcluirPassei pra agradecer pelas preciosas dicas, inclusive já alterei meu menu.
Agora ele tá linduxo, rsrsrsrs.
E aproveitei para divulgar seu blog na minha Sinopse Semanal.
Para conferir o post, basta acessar esse link:
http://meusdevaneiosescritos.blogspot.com.br/2013/12/sinopse-semanal-n-07.html
E se quiser, aproveite para participar, ok. (As informações de participação, estão no post)
Bjs.:
Sil
Gostei sim , mas vou deixar para a menina que renovará a carinha do meu blog .
ResponderExcluirBeijinhos
Deus abençõe
Elaine minha querida já deixei outros recados aqui e não foram publicados! Eu achei legal vc colocar o seu arquivo neste menu, ficou mais fácil para a pesdquisa!
ResponderExcluirBeijinhos...
Obrigada minha flor... vc foi a minha salvação, nunca vi alguém explicar tão bem como vc, estou colocando em pratica tudo o que vc ensinou, bjoos...
ResponderExcluirFeliz natal e o prospero ano novo.
gosto muito do seu blog , vc é simpática e explica tudo direitinho ! Parabéns !
ResponderExcluirse quiser dar uma passadinha no meu blog , agradeço : http://princesasdosalvador100.com.br
Mudando o visual do Pitacos de Lua aproveitei esse seu tutorial para colocar os botões no meu blog...ficaram ótimos. Só estou tentando descobrir como afastar eles da imagem do layout, ficou muito grudado, não ficou com o mesmo espaçamento dos gadgets da lateral, mas mesmo assim já fiquei muito feliz com meus novos botões colorido :)
ResponderExcluirMais uma vez, obrigada pela dica...gente ajudando a nós blogueiros a configurar nossos blogs.
Um grande 2014 para você e sua família.
Abraço
Lualessi, experimente definir o espaçamento inserindo o valor margin-top depois de center;
ExcluirValores negativos sobem, positivos descem. Tente algo como 10px e vá alterando até ficar como deseja.
Não testei, mas é por aí...
beijosss
ooi Elaine td bem ? estou ADORANDO AS SUAS DICAS MUITO OBRIGADA comecei agora meu blog e esta ficando cada vez mai slindo graças a vc !!! mas por favor me ajuda não to conseguindo mudar os nomes nos inten ainda continuam como categoria 1 e categoria 2 e tals ... como mudar ?? obg bjs
ResponderExcluirLAILA, é muito simples, substitua o nome categoria 1, 2 , 3 etc ... e coloque o nome que você achar melhor bjs xau.
ExcluirOlá
ResponderExcluirElaine tem como mudar a cor e a fonte do menu, se sim como faço rs
Milena, as cores você troca mudando os códigos hexadecimais precedidos do sinal #
ExcluirA fonte não dá pra trocar, ela segue o padrão de seu blog.
bjssss
Oi Elaine, td bem? Fiz tudo certinho porém ficou colado na imagem do cabeçalho. Como faço pra aumentar a margem? vi num comentário acima que vc mandou colocar margin-top 10px logo após o center, mas qdo faço isso essas palavras aparecem no blog e a margem não muda... Como devo escrever exatamente? Obrigada pela ajuda! Patricia
ResponderExcluirPatrícia,
ExcluirNesse caso você precisa retirar o gadget Páginas pois em geral o menu vai exatamente ali.
Se ficar muito próximo ao cabeçalho a solução é tentar descer o menu colorido para uma casa abaixo.
Como cada template tem características próprias tem que ir testando até achar o lugar.
bjsss
bjsss
Obrigada Elaine, mas já tinha retirado o gadget páginas e no lugar coloquei o menu colorido, foi aí que ficou em cima da imagem. Se desço o menu para uma casa abaixo, ele vai para a sidebar, e não gostaria que ele ficasse ali, pois não fica no meio de tudo. Bom, vou tentando, apesar de achar que não vai dar certo.... :( Pensei que tivesse algum código pra colocar e mudar a margem... De qquer forma muito obrigada!!!
Excluirwww.lenaepatytasca.com.br
Olá Elaine!
ResponderExcluirEu fiz no meu e deu certo. Fiquei de voltar aqui pra te falar. E hoje pintou esse tempinho :)
Beijinhos e Sucesso lindona!
http://dulcineiadesa.blogspot.com
Oiii adoreeeei !!
ResponderExcluirElaine queria saber como é que muda a letra ???
Oi! Gostaria de saber se as dicas para o blog tambem se aplicam no Wordpress.
ResponderExcluirShelsia, só se aplicam ao Blogger :)
Excluirbjssss
Olá Elaine pode me dizer se neste menu tem como colocar sub menus ?
ResponderExcluirNão, nesse menu não :)
Excluirbjsss
Fiz no meu blog e ficou ótimo! Obrigada pelas dicas :)
ResponderExcluirObrigado me ajudou!
ResponderExcluirbjs
Bom dia Eliane,
ResponderExcluirEste comentário é apenas para lhe alertar sobre o bloqueio ao copiar o código, acredito que seja pelas mudanças que vens promovendo recentemente, mas ainda não colocaste o botão para copiar tal conteúdo.
Um grande abraço, até breve.
Adriano, já atualizei.
ExcluirObrigada!
Atenciosamente
era o que eu precisa muito obrigado Elaine continua com o teu trabalho tenho aprendido muito sempre que visito a tua pagina...
ResponderExcluirOie! Boa noite ! Elaine adoro suas dicas, gostaria de saber como por sub abas nesse menu colorido , o menu já consegui colocar no blog, "sempreligadanasnovidades.blogspot.com.br ,agradeço se puder me dizer , bjss
ResponderExcluirOlá Elaine estou começando agora e deu muito certo o Menu e mudar de cores, mas como faço para criar novas páginas para colocar o link no menu? Obrigada
ResponderExcluirOi gostaria de saber como troco a cor da fonte ?
ResponderExcluirElaine dei uma modificada no menu, coloquei os marcadores como me orientaste, mas quando clico na opção do menu, diz que a página que to procurando no blog não existe. O que está errado?:(
ResponderExcluirO erro está na falta dos links. Observe que na aba Resenhas, por exemplo, tem o link e nas demais não...
Excluir