21/06/2009

Personalizar títulos do menu do blog

Colocar os títulos da sidebar, menu lateral, com formatação diferente ou dentro de uma caixa, ou qualquer outra forma como fazemos aqui em um retângulo com cantos arredondados devemos fazer isso pela pagina editar HTML, colocando uma imagem de fundo de fundo no estilo h2 .

Falamos h2, pois é assim na maioria dos blogs, mas se no seu caso não funcionar para saber qual o estilo dos títulos do menu veja o HTML do seu blog e procure pelos títulos que usa então saberá qual configurar. Entre no seu blog clique com o botão direito do mouse num espaço vazio(fora de imagens ou video) e escolha a opção exibir código de fonte, então procure por um dos títulos do seu menu. No caso do Dicas para Blogs encontramos assim: <h2>Guia Rápido</h2> , portanto vamos formatar o h2, mas se no seu blog for outro use esse outro estilo.

Na pagina editar HTML encontramos

h2{..........} então coloque aqui a imagem de fundo junto com o restante do código. O nosso blog ficou assim:
h2 {background-image: url(http://img24.imageshack.us/img24/8909/menudm1.jpg);background-repeat: no-repeat;background-position: center;font-size: 120%;text-align: center;height: 30px;padding-top:9px;color: #000000}

o começo do código é a imagem de fundo background-image: url(http://img24.imageshack.us/img24/8909/menudm1.jpg

Depois tem a parte que impede a repetição e centraliza a imagem de fundo background-repeat: no-repeat;background-position: center;

height: 30px; é a altura da linha, ou seja, deixe igual à altura da imagem.

Outro detalhe é caso aparecer essa imagem de fundo em outro lugar como, por exemplo, no titulo das postagens, então corrigimos isso assim:

h2.date-header {background-image: none;

Isso faz que o estilo h2 date-header não tenha fundo, mais uma vez se precisar localizar o nome exato do estilo faça do mesmo jeito que indicamos para saber qual o estilo dos títulos do menu.

Veja também:

Imagem da carta - enviar postagem
Deixar a mesma postagem no ínicio do blog
Formatação diferente em uma parte do texto
Noções de formatação em CSS
Sobre imagens de fundo
Como hospedar imagens
Related Posts with Thumbnails

57 comentários:

  1. Amado mais uma boa dica, valeu Fabiano. Bom domingo
    A paz

    ResponderExcluir
  2. Ótima dica, parabéns.

    Vou precisar reler algumas coisas porque não entendo tão bem dos códigos, mas fiquei bem interessada. Faço somente uma idéia do que ele fará.

    ResponderExcluir
  3. Agatha

    personalizar os titulos do menu é facil o problema é que envolve varias outras coisas, como imagem de fundo, css, fazer e hospedar a imagem.

    mas tenha calma, vai conseguir fazer. crie um blog para fazer testes é o melhor jeito de aprender...

    ResponderExcluir
  4. Boas dicas!

    http://www.daonda.blogspot.com

    Valeu

    ResponderExcluir
  5. Olá amigo, sou um iniciante em blogs, e esse blog me ajuda bastante, valeu!!!
    O meu blog também fala sobre dicas, mas dicas sobre qualquer coisa. Dá uma passada lá:
    www.dicandonet.blogspot.com

    ResponderExcluir
  6. Baixei um template irado com menu suspenso porem não sei como faza-los direcionar para uma nova pagina na web,mudei os nomes do menu mas não consigo postar conteúdo para visitas. Obrigado se puder ajudar. marceloalmeidacwb@hotmail.com

    ResponderExcluir
  7. Marcelo, veja aqui como fazer o menu abrir em uma nova janela
    http://www.dicasparablogs.com.br/2009/04/abrir-menu-jump-em-nova-janela.html

    ResponderExcluir
  8. cara eu queria cria um contorno em volta dos titulos, tipo os que tu tem aqui, GUIA RAPIDO, DIVULGUE, INSCREVER-SE, ENQUETE, TOP PARCEIROS, tipo esses, todos tem um contorno azul, isso que eu queria fazer no meu. Tem como me ajudar?
    qualquer coisa lenin163@hotmail.com
    desde ja agradeço, abraço.

    ResponderExcluir
  9. veja essa postagem sobre titulos
    http://www.dicasparablogs.com.br/2009/06/personalizar-titulos-do-menu-do-blog.html

    ResponderExcluir
  10. cara, MUITO OBRIGADO mesmo, deu tudo certo aqui! muito bom blog mesmo!
    abração

    ResponderExcluir
  11. Muito bom Fabiano.
    Acho que era a ultima coisa eu tinha que colocar no meu blog. :)

    ResponderExcluir
  12. Poxa, o meu fica um botão na data da postagem =/

    me ajuda por favor.

    ResponderExcluir
  13. Débora , talvez no seu blog para editar o titulo da postagem seja no h3 em vez de h2 como dissemos, isso varia conforme o modelo do blog

    ResponderExcluir
  14. Débora, se você não quiser mexer no HTML, porque é bem complicado pra quer mexer a primeira vez, você vai à página do Layout, clica edita postagem do blog, e desmarca a 1 2 3 opção, não aparecer data, mas em compensação o botão não vai aparecer. :)

    ResponderExcluir
  15. Onde devo colocar esse codigo "h2 {background-image: url(http://img24.imageshack.us/img24/8909/menudm1.jpg);background-repeat: no-repeat;background-position: center;font-size: 120%;text-align: center;height: 30px;padding-top:9px;color: #000000}"
    que vc deu de exemplo, nao entendi essa parte.

    ResponderExcluir
  16. na pagina editar html do blog já tem um h2 e um monte de outros estilos parecidos então se já estiver como esse só deve trocar o que tem dentro das chaves.
    se não colocar em qualquer parte por exemplo antes do h3 ou #main, mas tome cuidado para não misturar o conteudo das chaves, cada estilo abre e fecha as chaves

    ResponderExcluir
  17. Ola, quando vc disse: No caso do Dicas para Blogs encontramos...no comecinho da explicação.mas vc não explicou esse modo...no meu blog e esse por favor explique-me

    ResponderExcluir
  18. essa é apenas uma maneira de ter certeza qual é o estilo usado no menu do seu blog, alguns usam o h3

    ResponderExcluir
  19. Ótimas dicas
    Agora eu preciso aprender a utilizá-las
    Sou leigo e não consegui praticamente nada
    Valew

    ResponderExcluir
  20. Olá pessoal, mais uma vez estou passando por aqui... Aprendendo mais um pouquinho com vocês. Se puderem me ajudar, estou com uma grande dúvida: Tento colocar minigifis ao lado dos meus marcadore, mas não consigo. Vocês têm alguma explicação aquin sobre esse tema? Agradeço muito.
    Andrea

    deacarmoorg@gmil.com

    ResponderExcluir
  21. Déi@, veja aqui como personalizar os marcadores do blog

    http://www.dicasparablogs.com.br/2009/03/personalizando-os-marcadores-do-blog.html

    mas todos os links ficarão com a mesma imagem ao lado

    ResponderExcluir
  22. Fabiano, procurei antes aqui no site essa dica mas nem achei. Testei outros códigos de outros sites mas nada me agradou ate achar essa ótima dica aqui no seu site rsrs.

    Obrigado cara, parabéns!!

    ResponderExcluir
  23. Cara nao consiguir entender como fazer =\

    ResponderExcluir
  24. Kamus
    você precisa achar qual o estilo do seu titulo e mudar a formatação, faça um teste alterando o h2 e depois h3 e veja qual deles funciona.

    ResponderExcluir
  25. só um conselho para seu blog
    retire a navbar do blog
    fica mais lega
    :)
    mais o site ajuda bastante!!

    ResponderExcluir
  26. suas dicas são boas, mas cara, muda esse visual, mude as cores, está muito colorido, doe vista!

    ResponderExcluir
  27. Eu segui a tag 'sidebar' e acabei parando aqui. Mas na verdade meu problema não é esse , estou testanto um template há muito tempo mesmo, mas nunca consegui resolver um bug terrível na sidebar. Peço que me ajude por favor!! Visita aqui, http://5minutooos.blogspot.com/ lá está bem explicadinho o problema que assola minha permanência na blogosfera! Me ajuda?! Desde já obrigado! Aguardo resposta!

    ResponderExcluir
  28. o jeito que colocou os 4 gadgets foram o mesmo? ou alguns já vieram com o template.

    veja esse trecho do html:

    #sidebar .widget h2{font-weight:bold;font-size:140%;background:transparent url(http://www.opendrive.com/files/6177252_BsxQ3/block-title.png) no-repeat left top;color:#fff;line-height:100%;letter-spacing:normal;margin:0;padding:0;text-shadow:#7a910d 1px 1px 1px;text-transform:uppercase;text-align:left;line-height:23px;}

    #sidebar .widget h2 span{background:transparent url(http://www.opendrive.com/files/6177252_BsxQ3/block-title.png) no-repeat right top;margin-left:7px;display:block;padding:4px 8px 0 4px;}


    tente apagar o que está dentro das chaves da primeira parte e colocar igual ao da segunda, pra ficar assim:

    #sidebar .widget h2{background:transparent url(http://www.opendrive.com/files/6177252_BsxQ3/block-title.png) no-repeat right top;margin-left:7px;display:block;padding:4px 8px 0 4px;}

    #sidebar .widget h2 span{background:transparent url(http://www.opendrive.com/files/6177252_BsxQ3/block-title.png) no-repeat right top;margin-left:7px;display:block;padding:4px 8px 0 4px;}

    ResponderExcluir
  29. Nossa! Estou surpreso com a eficiência. Mas enfim ... Roberto eu fiz o que vc sugeriu, mas tudo continuou da mesma forma. E respondendo sua pergunta : Sim alguns gadgets já vieram com o template, o que não funciona na verdade é o que eu adiciono! #Poxa

    ResponderExcluir
  30. o mais correto seria excluir esses gadgets que já vieram no seu modelo e criar uma nova imagem para usar como fundo dos titulos.

    o caso foi que a pessoa que criou o template usou a tag span nos titulos:
    <h2 class='title'><span>Blogroll</span></h2>

    tente usar nosso tutorial para colocar outra imagem, pode até só editar aquela que já veio com seu template.

    ResponderExcluir
  31. Já tentei trocar de imagem, mas não funciona como tudo que já tentei. Na verdade, os gadgets que eu adiciono, o bg de seus títulos parece que tem um espaço bem menor que os que já vem! Você acredita que pode ser um bug ocasionado pelo fato de o tema ter sido convertida de WP para blogger?

    ResponderExcluir
  32. pode ser um erro na hora de converter o template, mas retire todos os gadgets e depois recoloque, assim o código deles ficarão todos iguais (gerados pelo blogger) então poderá usar o nosso tutorial para personalizar a imagem de fundo.

    o problema é que tem dois tipos de códigos nos seus gadgets atualmente.

    ResponderExcluir
  33. Fabiano, Muito obrigado cara! Você me deu a luz agora , exclui os gadgets mudei a imagem e adicionei de nova imagem! Agora só falta acertar o Título que ficou mais pra baixo e muito encostado no lado esquerdo! Como faço pra mexer no título do gadget?

    ResponderExcluir
  34. para mexer na posição dele veja se tem padding ou margin no código e altere os valores

    ResponderExcluir
  35. Cara deu tudo certo, estou quase na perfeição , graças a vc!Muito obrigado, salvaste minha vida!

    ResponderExcluir
  36. Valeu!Estava tentando dar uma reotimizada no meu blog e isso me ajudou muito!Seu blog é muito bom,é o unico que ensina um pouco de html pra quem não sabe!Brigado!

    ResponderExcluir
  37. aonde fica o widgets?ñ acho o widgets no meu blog!alguem me ajuda?queria por um sontador de visitas,mas sem o widgets ñ dá,ñ acho o widgets no meu blog!!

    ResponderExcluir
  38. Ágatha Renata
    se estiver falando de expandir widgets isso é na pagina editar html, mas se quiser adicionar algo no blog pode ser adicionar gadget na pagina designer

    ResponderExcluir
  39. vALEU.
    mAIS AGORA EU QUERIA SABER COMO FAZ PARA POR IMAGENS DE PLANO DE FUNDO QUE BRILHAM NO PLANO DE FUNDO DO MEU BLOG,QUANDO EU PONHO NÃO BRILHA O PLANO DE FUNDO,SÓ FICA O GLITTER PARADO!

    ResponderExcluir
  40. Sim, a postagem ficou muito clara para mim, mas como mudar apenas a fonte do menu? Eu devo imaginar que é bem mais simples, mas mesmo assim eu não sei :/

    ResponderExcluir
  41. Great Girls!
    depende de qual menu você está falando... se for o menu horizontal, pode ver aqui: Links lado a lado (menu horizontal)

    ou algum gadget em especifico veja neste outro link: Personalizar gadgets do Blog

    ResponderExcluir
  42. Ao add gadget no meu blog (blogdojequi.blogspot.com) as abas do menu desapareceram. Engraçado que mesmo voltando com o backup realizado não funcionou. Ao voltar com o mesmo backup no blog de testes (testesblogdojequi.blogspot.com) as abas e subabas funcionaram normalmente, mas no blog original não. O que pode ter ocorrido? Please..Muitos leitores estão reclamando...

    ResponderExcluir
  43. Bernardo Vieira
    esses códigos de submenus são complicados... e tem varias partes veja se não esqueceu de alguma delas

    ResponderExcluir
  44. Ta dando 404 quando tento entrar na minha o página! O q faço!?!?

    ResponderExcluir
  45. Já voltou ao normal, mais que medo -__-

    ResponderExcluir
  46. as vezes o blogger dá esse erro, mas geralmente em alguns minutos volta ao normal

    ResponderExcluir
  47. Pode me fazer uma aula ? não entendi aonde certamente colocar o código pois têm outros códigos se puder ajudar valeu. augusto.antipou@gmail.com

    ResponderExcluir
  48. Gu
    essa é uma alteração de html... não tem como demostrar em video pois seria só achar o código na pagina editar html

    ResponderExcluir
  49. Sim, mas acontece que têm vários e já tentei de todas as formas e dá erro não sai nada ! ( Obrigado por responder e olá).

    ResponderExcluir
  50. eu não consigo ultilizar esse negocio pq aqui aparece o codigo acima do gadget ...

    ResponderExcluir
  51. o trecho h2 não é para colocar no gadget, mas na pagina editar html junto com os outros estilos de formatação de texto

    ResponderExcluir
  52. Olá pessoal! Acompanho o Dicas há muito tempo mas acho que nunca tive coragem pra comentar, agora tenho um blog no início, já recebi bastante visita mas o engraçado é que só recebo visitas estrangeiras kkkkkk! Então coloquei um Tradutor como um widget para as línguas mais populares do mundo, vê dando certo mas quero receber visitas aqui do Brasil! Fabiano, por favor, peço que deixe que eu publique meu site aqui! É o:


    http://fabugamesnet.blogspot.com

    Estamos com um novo endereço pois já existe um fabugames.blogspot então coloquei fabugamescom só que ficou estranho, então decidi o fabugamesnet!

    ResponderExcluir
  53. O seu blog é simplesmente um pronto-socorro para quem está com seu blog praticamente convalescido...Muita coisa só aqui consegui aprender e fazer. Mas estou há dias e dias tentando diminui da fonte dos títulos das colunas, dos Gadgets e simplesmente não consigo. Vc me poderia me dar um help. Link: http://biblioteconomiasocial.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. eu achei no seu html o trecho

      .sidebar h2{font-size:12color:#000;

      o código está certo é mesmo no estilo .sidebar h2

      o erro foi que faltou colocar px e ; depois do numero 12.

      Deste jeito:

      .sidebar h2{font-size:12px;color:#000;

      Excluir
    2. Caramba...sem palavras, o que levei dias tentando arrumar, você simplesmente deu jeito assim, do tipo: "Quem sabe sabe"... Valeu, messssssssssmo. Este seu espaço deveria ser uma cartilha obrigatória de todo e qualquer blogueiro inexperiente. Muito, mas muito obrigada!!! Você é THE BEST!!!!

      Excluir