Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1513101242
Vida do cache: 1513144442
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Widgets

Menu com imagem

Estou recebendo muitos emails de leitores pedindo para ensinar a fazer algum Menu de navegação para o blog.
Fiz um muito fácil de modificar, então vou ensinar aqui. O menu vai ficar mais ou menos assim:

1º – Faça login no Blogger, entre em: “Layout” -> “Editar HTML”.

2º – Procure (Ctrl + F):

]]></b:skin>

Cole o seguinte código ANTES:

#menu-lateral ul li { display: inline; font-weight: bold; list-style-type: none; padding: 5px 5px 5px 0; margin: 0; }
#menu-lateral li span.home { background: url('http://codigosblog.net/servidor/icones/home.gif') no-repeat; padding: 0 0 0 20px; }
#menu-lateral li span.sobre { background: url('http://codigosblog.net/servidor/icones/about_kde.png') no-repeat; padding: 0 0 0 20px; }
#menu-lateral li span.contato { background: url('http://codigosblog.net/servidor/icones/mail_post_to.png') no-repeat; padding: 0 0 0 20px; }

* Onde está de vermelho são as imagens do menu, caso queira troca-las, basta substituir o link pela nova imagem desejada (tamanho ideal: 16px por 16px);
* Para criar novos links para o menu copie esse código abaixo:

#menu-lateral li span.NOVO { background: url('IMAGEM') no-repeat; padding: 0 0 0 20px; }

* Onde está de azul substitua pelo nome do novo link, em letra minuscula, exemplo:

#menu-lateral li span.templates { background: url('http://codigosblog.net/servidor/icones/layout.png') no-repeat; padding: 0 0 0 20px; }

Simples, faça cada código para cada link do menu.
 Depois teste, se não modificou NADA no template, salve!

3º - Entre em: "Layout" -> Elementos da página".
Clique em "Adicionar um Gadget" no lugar desejado que fique o menu. Escolha adicionar um: "HTML/Java Script".

E adicione o seguinte código:

<div id="menu-lateral">
  <ul>
  <li><span class="home"><a href="LINKAQUI">Home</a></span></li>
  <li><span class="sobre"><a href="LINKAQUI">Sobre</a></span></li>
  <li><span class="contato"><a href="LINKAQUI">Contato</a></span></li>
  </ul>
  </div>

* Onde está de preto é o que vai "ligar" com o código que você colou no template.
* Onde está de azul você deve colocar o link desejado para o menu.
* Onde está de rosa é o que vai aparecer no menu, é o nome do link.

Substitui tudo de acordo e salve.
Pessoal, esse tutorial é um pouco complicado de ensinar, desculpe, mas tentei fazer do geito mais fácil.
Faça várias vezes, se mesmo assim não conseguir entre em contato por email, mande o código que você modificou, os links desejados para colocar no menu e as imagens (já hospedadas) para cada link.
E eu vou ver o que posso fazer.
abraços...



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

29 Comentários

  1. Binho disse:

    Paulo queria uma ajuda sua se puder, eu comprei domínio próprio .com e coloquei no meu blogspot como vc ensinou no tutorial aki do seu blog, tah certinho abrindo http://www.blogdobibnhozito.com so que naum abre se digitar blogdobinho.com sem o www, e reparei que o seu blog abri digitando codigosblog.com.br como vc fez pra conseguir issu? tem como ajudar ae?

    flw…

  2. Teena in Toronto disse:

    Happy blogoversary!

  3. mundodosblogues disse:

    Ótima dica, tem muita gente que não sebe como adicionar um menu horizontal no blog.

    Eu mesmo, antes de saber como faz, corri para outros blogs de ajuda.

    Abçs!

  4. Leandro Cassorielo de Andrade disse:

    Gostei do seu blogger. Sou de TI também, mexo com bancos de dados e Linux e estou criando/personalisando meu Blog. Valeu pelas dicas…

    Leandro Andrade
    andradeti.blogspot.com

  5. Luka disse:

    Olá Paulo, adorei seu post!!
    Você como sempre ajudando, muito legal mesmo!!
    Abraços
    Luka

  6. Paulo disse:

    Binho…
    onde comprou seu domínio?

  7. Cesar Mauricio disse:

    Muito bom amigo

    seus codigos sempre me ajudam!

    Obrigado

  8. Admin disse:

    Vlw,aqui deu certinhu….
    Apesar de vc falar q naum da pra explica direito,se seguir como vc falo as pessoas naum vaum en contrar nehum problema.
    Obrigado !

  9. JD disse:

    O cara mais Tipo nao sei nada sobre HTML
    eu fiz ae certinho Funciono mais tipo eu cliquei em contato ai apareceu o blog que voce esta preucurando nao foi encotrado. Não tinha que aparece a pagina do meu blogger tipo issu? e como que eu vo fazer pra editar( escrever entre outras coisas ) na kele lugar ?

  10. Thales BM disse:

    opa.. blz!!
    queria saber se tem como fazer isso com varios marcadores..

    http://guigesso.blogspot.com/

    vlw..

  11. Informatica fácil demais disse:

    Seu blog é otimo cara, estou começando nesse ramo agora, estou sempre passando por aq e pegando otimas informações.

    htpp://informaticafacildemais.blogspot.com

  12. gta carros game disse:

    =))

  13. Paulo Estevão disse:

    JD…
    É só substituir por um link válido!
    Só isso.

  14. RN Umarizal, Nossa Terra. Nossa gente! disse:

    Como faz para mudar a cor, pus no blog mais ficou preto, eu queria na cor branca valeu responde ai!

  15. TrunkS disse:

    Po Vlw Cara Eu Precisava Disso a Muito Tempo Vlwwwwww!!!!!!!!!

  16. Paulo Estevão disse:

    @RN
    Essas cores estão no padrão do seu template.
    Para mudar, mude o padrão do seu template.

  17. Lucas Corrêa de Souza disse:

    kr eu tentei ele nao aparece as imagens elas saum grandes em ela saum de 250×300 keria saber pq sera ki nao tah aparecendo a img aparece um menu simples obrigado

  18. Paulo Estevão disse:

    Pessoal: Arrumei o problema dos ícones!

  19. Lukas disse:

    Paulo,como que se deixar igual o desse blog http://www.mundoblogger.com.br?

  20. adicionarpagina disse:

    Muito boa a sua dica amigão,era o que eu estava procurando para colocar no meu blog.muito obrigado!continuarei lendo mais aqui…tudo de bom!!!

  21. Yonline disse:

    Tem como fazer na horaizaontal ? ! .

  22. Paulo Estevão disse:

    Coloque: float: normal; no primeiro lugar do css.
    abraços

  23. Viu como se faz.com disse:

    CARA VALEU DEU TUDO CERTO QUE DEUS TE ILUMINE!!!!!

  24. kenia disse:

    Estou começando agora e seu blog está me ajudando muito. Obrigado!

  25. Caio438 disse:

    Vlw 😀

  26. muito bom disse:

    muito bom a tua resposta

  27. Gih disse:

    Tem como colocar tipo dentro de uma barra no topo do blog???

  28. Gustavo Nunes disse:

    Cara, eu quero mudar aquela parte do menu do blog que fica o nome Menu, aquela parte que tem uma imagem eu quero mudar, como muda? (PELO HTML)

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.