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...
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…
Happy blogoversary!
Ó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!
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
Olá Paulo, adorei seu post!!
Você como sempre ajudando, muito legal mesmo!!
Abraços
Luka
Binho…
onde comprou seu domínio?
Muito bom amigo
seus codigos sempre me ajudam!
Obrigado
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 !
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 ?
opa.. blz!!
queria saber se tem como fazer isso com varios marcadores..
http://guigesso.blogspot.com/
vlw..
Seu blog é otimo cara, estou começando nesse ramo agora, estou sempre passando por aq e pegando otimas informações.
htpp://informaticafacildemais.blogspot.com
=))
JD…
É só substituir por um link válido!
Só isso.
Como faz para mudar a cor, pus no blog mais ficou preto, eu queria na cor branca valeu responde ai!
Po Vlw Cara Eu Precisava Disso a Muito Tempo Vlwwwwww!!!!!!!!!
@RN
Essas cores estão no padrão do seu template.
Para mudar, mude o padrão do seu template.
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
Pessoal: Arrumei o problema dos ícones!
Adorei a dica
Meu blog é:
http://baixeevolluttion.blogspot.com/
Paulo,como que se deixar igual o desse blog http://www.mundoblogger.com.br?
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!!!
Tem como fazer na horaizaontal ? ! .
Coloque: float: normal; no primeiro lugar do css.
abraços
CARA VALEU DEU TUDO CERTO QUE DEUS TE ILUMINE!!!!!
Estou começando agora e seu blog está me ajudando muito. Obrigado!
Vlw 😀
muito bom a tua resposta
Tem como colocar tipo dentro de uma barra no topo do blog???
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)