Guest Post: Criando um menu horizontal no blogger

Esse artigo é um Guest Post escrito por Gothic Darkness. Ela possui o excelente blog, de mesmo nome, onde transmite, através de excelentes tutoriais, seu conhecimento em html, css e Blogger. Aconselho que siga-a no Twitter e visite o Gothic Darkness.

O que é um Guest Post?

Aqui vou disponibilizar 2 tipos de menus, um que pode ser utilizado com imagens e outros que usa apenas css.

Menu 1) Criando um menu horizontal com imagens:

Vá em Layout >> Editar HTML >> Expandir modelos de widgets. Copie o código abaixo e coloque-o antes de ]]></b:skin>

Edite as cores de borda e cores da fonte do texto de acordo com seu gosto. Ajuste-as para combinar com as cores do seu blog. Salve as modificações. Volte em Layout >> Editar HTML >> não precisa clicar em ‘Expandir modelos de widgets’, e procure pelo trecho abaixo:

<div id=’header-wrapper’>

E cole o seguinte código logo ABAIXO dele:

No tutorial acima, o menu ficará logo abaixo do cabeçalho no seu blog. utilize as imagens que quiser para compor seu menu, mas lembre-se que você deverá utilizar uma imagem com altura máxima de 27px. Para incluir seus links em seu menu basta inserir os links nos locais destacados(Link1, Link2 etc). Você pode inserir quantos links quiser, para isto basta incluir mais uma linha:

Menu 2) Menu acima do cabeçalho do blog usando apenas CSS.

Neste tutorial você vai ver como Criar um menu simples usando apenas CSS:

Salve as modificações. Volte em Layout >> Editar HTML >> não precisa clicar em ‘Expandir modelos de widgets’, e procure pelo trecho abaixo:

No tutorial acima, o menu ficará acima do cabeçalho, bem no topo do seu blog, mas se quiser que fique abaixo do cabeçalho, basta colar o código logo acima da tag <div id=’header-wrapper’>
As partes que você deve editar estão marcadas no código. Edite as cores de acordo com as cores do seu template.

Bom , é isso, espero que tenha ajudado. Agora é só usar a imaginação e criar seu menu com as cores que combine com o seu blog. Boa Blogagem a todos!
Quer conhecer um pouco mais sobre a autora? Então leia o Guest Post dela no GF Soluções.

Rate this post

Quer aprender a ganhar dinheiro com Google Adsense em blogs?

Gustavo Freitas

Problogger e empreendedor digital. Criador do Método Start, que ele utiliza para criar blogs de sucesso e ganhar dinheiro na internet.

Website: http://querocriarumblog.com.br/

8 Comentários

  1. Olá tudo bem? Legal este post. Fiz tudo mas… não encontrei no meu html a linha abaixo:
    <br

    então se não há… o que eu faço? Há outro lugar para inserir o codigo mencionado? Aguardo, e muito obrigada

  2. Gustavo Freitas

    Verifique se o seu blog está no idioma português. Acesse a área administrativa em http://www.blogger.com e vá em Configurações – Formatação – Idioma.
    abraço.

  3. Ita Costa

    Eu tentei fazer com imagens mas nao deu certo, nao sei onde errei, fui seguindo passo a passo…….

  4. Gustavo Freitas

    Lucas,
    com certeza, o conhecimento e, principalmente, a vontade de compartilhar da Clau são fantásticos,
    abraço.

  5. Lucas

    realmente a clau è dimais!Os templates dela são os melhores,alèm de ter um grande conheçimento nisso tudo.

  6. Gustavo Freitas

    Alessandra,
    fico aguardando seu feedback então,
    um abraço.

  7. Alessandra

    Que ótimo! Estava procurando por isso.
    Vou tentar, depois conto se deu certo!

    Obrigada,
    Alessandra

Deixe uma resposta