Faça um menu com imagens e rollover


Tutorial Atualizado! Pessoal, me desculpem! Cometi alguns erros nos códigos. Sabem como é, né? Herrar é umano. Se você não conseguiu fazer o menu, por favor, releia o tutorial.

Muita gente tem me perguntado como eu fiz o menu do Menina Nerd. Bom, eu aprendi nesse site. É um pouquinho complicado e por isso eu vou tentar recriar o tutorial para ficar mais fácil. Lembrem-se: o mérito é todo do site O Básico da Web. Vamos lá:

1.  A imagem:

Ela deve ser o menu inteiro. Alinhe direitinho as palavras uma de baixo da outra pra que dê tudo certo. Em cima faça a parte do menu "normal" ( sem o mouse por cima ) e embaixo, com o efeito que você quer que apareça quando o mouse fica por cima (que no caso do Menina Nerd aparece uma raíz). Não deixe nenhum espaço entre as duas partes.


2. O código 

Agora chega a parte chata, o código é imenso. Então, vamos por partes. Aconselho colar no word ou no bloco de notas para fazer as edições.

Código de todo o Menu :

#menu{
margin-top:0px;
position:relative;
width: LARGURA DA SUA IMAGEMpx;
height: ALTURA DO SEU MENU (OU SEJA, METADE DA ALTURA DA SUA IMAGEM)px;
background: url(URL DA SUA IMAGEM) no-repeat 0 0;
}
#menu ul{
list-style:none;
text-indent:-9999em;
}
#menu li{
position:absolute;
top:0;
height:ALTURA DO SEU MENU (OU SEJA, METADE DA ALTURA DA SUA IMAGEM)px;
}
#menu li a{
display:block;
text-decoration:none;
width:100%;
height:100%;
top:0;
}
#menu li a span{
position:absolute;
display:block;
width:100%;
height:100%;
top:0;
}

Foi aqui que eu errei! Portanto, repare somente ESSA PARTE! O erro foi tão pequeno que eu duvido que você descubra o que mudou =P HAHA

Nas partes destacadas EM AZUL faça as modificações de acordo com a sua imagem.

Logo depois cole o código para cada um dos links do menu :

#um{
width: LARGURA DO ESPAÇO DO PRIMEIRO LINKpx;
left:0;
}
#dois{
width: LARGURA DO ESPAÇO DO SEGUNDO LINKpx;
left: MESMA LARGURA DO ESPAÇO DO PRIMEIRO LINKpx;
}
#tres{
width: LARGURA DO ESPAÇO DO TERCEIRO LINKpx;
left: SOMA DOS VALORES DE WIDTH E LEFT ANTERIORpx;
}
#quatro{
width: LARGURA DO ESPAÇO DO QUARTO LINKpx;
left: SOMA DOS VALORES DE WIDTH E LEFT ANTERIORpx;
}
#cinco{
width: LARGURA DO ESPAÇO DO QUINTO LINKpx;
left: SOMA DOS VALORES DE WIDTH E LEFT ANTERIORpx;
}
#seis{
 width: LARGURA DO ESPAÇO DO SEXTO LINKpx;
left: SOMA DOS VALORES DE WIDTH E LEFT ANTERIORpx;
}

  Agora as coisas complicam um pouco. Como assim "largura do espaço do link"? É a largura do espaço do link, oras! Ok, palavras não são o meu forte. Deixe a imagem falar por mim:

E por que somar os valores de width e left anterior?? Porque você tem que dar as coordenadas pra que cada link fique no lugar certo. O left é o espaço pra chegar em determinado link. Pensem: pra chegar no terceiro link, é preciso passar pelos dois primeiros, certo? Pois então! Temos que dar o valor desse espaço, e para isso é preciso a soma das larguras. Em vez de somar um por um, é mais fácil somar o width e left anterior.
Tá Andreza, mas como eu vou saber a largura dos links? Bom, eu usei o PhotoScape pra descobrir isso ;)
É só você simular o corte da área e ver o valor, olha:



Não precisa ser necessariamente o PhotoScape, você pode usar outro editor que mostre esses valores (acho que todos mostram).
Ah, e detalhe: eu coloquei seis links (#um, #dois, etc...) porque O MEU menu tem seis (início, o blog, etc...). Se o seu tiver mais ou menos links você apaga ou adiciona mais, ok?

Vamos para o próximo código:


#um a span{
background:url (URL DA SUA IMAGEM) no-repeat 0 0;
}
#dois a span{
background:url (URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #dois{px 0;
}
#tres a span{
background:url (URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #tres{px 0;
}
#quatro a span{
background:url (URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #quatro{px 0;
}
#cinco a span{
background:url (URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #cinco{px 0;
}
#seis{
background:url (URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #seis{px 0;
}

Nessa parte eu acho que não pode ter nenhuma dúvida, né? Você só tem que substituir as partes EM AZUL colocando a url da sua imagem e colocando o valor de left de cada link correspondente. Ah, e NÃO RETIRE O SINAL NEGATIVO ( - ), ou o tracinho, sei lá.
Lembrando que se o seu menu tiver mais ou menos links, você deve apagar ou adicionar mais.
Aí vai a penúltima parte:

#menu ul li a:hover{
z-index:1000;
}
#um a:hover span{
background:url(URL DA SUA IMAGEM) no-repeat 0 -ALTURA DO SEU MENUpx;
}
#dois a:hover span{
background:url(URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #dois{px -ALTURA DO SEU MENUpx;
}
#tres a:hover span{
background:url(URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #tres{px -ALTURA DO SEU MENUpx;
}
#quatro a:hover span{
background:url(URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #quatro{px -ALTURA DO SEU MENUpx;
}
#cinco a:hover span{
background:url(URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #cinco{px -ALTURA DO SEU MENUpx;
}
#seis a:hover span{
background:url(URL DA SUA IMAGEM) no-repeat -MESMO VALOR DE LEFT DE #seis{px -ALTURA DO SEU MENUpx;
}

Esse código corresponde ao seu menu quando o mouse passar por cima. Acho que é por isso que tem tanta coisa pra alterar! Mas só as partes EM AZUL, hein? NÃO RETIRE O SINAL NEGATIVO ( - )! Ah, e na parte "altura do seu menu", você deve colocar o valor de metade da sua imagem. Já que ela está duplicada, lembra?

Depois de alterar todos esses códigos de acordo com o seu menu, vá em Design, depois em Editar HTML , dê Ctrl + F e procure por:

]]></b:skin>


E cole todo o código ANTES dele.

Agora, o último código:

<div id='menu'>
  <ul>
    <li id='um'><a href='ENDEREÇO DO 1º LINK'><span/>Primeiro link</a></li>
    <li id='dois'><a href='ENDEREÇO DO 2º LINK'><span/>Segundo link</a></li>
    <li id='tres'><a href='ENDEREÇO DO 3º LINK'><span/>Terceiro link</a></li>
    <li id='quatro'><a href='ENDEREÇO DO 4º LINK'><span/>Quarto link</a></li>
    <li id='cinco'><a href='ENDEREÇO DO 5º LINK'><span/>Quinto link</a></li>
    <li id='seis'><a href='ENDEREÇO DO 6º LINK'><span/>Sexto link</a></li>
  </ul>
</div>

Agora você só tem que colocar os endereços dos links, não esqueça de colocar o "http://".
O lugar onde você deve colocar esse último código depende do lugar onde você quer que o menu apareça. Meio óbvio, né?

Se quiser o seu menu ABAIXO do cabeçalho, vá em Design, Editar HTML e procure por:

<div id="Header-outer">


e procure o </div> dessa parte. Desculpem, mas eu acho que essa parte não é igual em todos os templates, no Menina Nerd o código é assim:


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Menina Nerd (Cabeçalho)' type='Header'/>
</b:section>
</div>



Ache o código parecido com esse, e cole logo DEPOIS dele só o último código.
Lembrando que o meu blog tem como base o Mínima...

Se você usa os novos templates do blogger, o código é diferente. Se quiser o menu ABAIXO do cabeçalho, procure por </header> e cole DEPOIS dele o último código.

E se quiser o menu ACIMA do cabeçalho, procure por <header> e cole Antes dele o último código.
Caso o menu não fique bem alinhado, altere o valor de margin-top que eu coloquei logo abaixo de #menu{

Bom, é isso. Espero que consigam! Sei que vai haver muitas dúvidas e por isso já vou deixando o meu msn: dre.za_oliveira@hotmail.com

Beeeijos.

100 comentários:

Ieda disse...

Adorei a postagem, ajudou mesmo *-*
O blog tá incrível!

Dá uma passadinha lá (:
http://blog-da-ieda.blogspot.com/

beijos
Ieda

Andreza disse...

@Ieda - Conseguiu fazer? *o*

Princess Teens * disse...

Hum, adorei a "ajuda" mais não vou nem tentar, se não vou acabar estragando o design do meu blog, rs!
Obrigado pela parceria *-*

Andreza disse...

@Princess Teens - Magina, não precisa ter medo!
É só fazer o backup do seu template por prevenção ;B
Ah, de nada (:

Steph@nie! (@stehlouise) disse...

Own' seu blog é mui perfeito, sempre que entro fiko babando querendo um igual. kkkkk' Hey, tenho um monte de selinho pra vc!! http://dilemasdeadolescente.blogspot.com/2011/01/voltei-e-ganhei-mais-selinhos.html beijonas linda (:

MireliSantana disse...

No meu template não da pra fazer :/
Sabe o que eu sempre tentei e nunca consegui?
trocar as imagens de anterior, home e próximo.
Ensina? *---------*
teus tutorias são legal pq milagrosamente funcionam.
beijos :*

Andreza disse...

@Steph@nie! (@stehlouise) - AUSHAUHS Obrigada amr *o*
Depois eu pego os selinhos, é que eu ando sem tempo pra cumprir as regras/desafios deles ><

@MireliSantana - Não dá? Por que não? o_O
rs Ensino sim, prometo.

Beeijos meninas.

Camilla disse...

Nossaaa

dá tantooo trabalhooo

deixa o meu assim msm

haushasuhaushash

mas, valeu por colocar...

bjo

http://camillagama.blogspot.com/

Carol! disse...

oii fofa, tem selinho pra vc lá no blog

fashionrockteens.blogspot.com

Karol Barros disse...

Muito obrigada floor, vou tentar fazer !

Mais tarde vou divulgar o seu blog, teho certeza de que minhas leitoras vão gostar !

Karol Barros disse...

eu fiz tudo certinho, mas não apareceu nada ;/ vou tentar de novo amanha.

Andreza disse...

@Camilla - Pois é Camilla ;/
Eu sou só conheço esse jeito... mas vou procurar outras maneiras de fazer e se eu achar outra mais fácil eu posto (:

@Carol! - Obrigada, dps eu pego.

@Karol Barros - De nada *o*
Puxa, muito obrigada ♥

Hm >_<
Ah, e as vezes, quando a gente visualiza, nao aparece o efeito do mouse por cima (a:hover) então é melhor fazer num blog de teste, ok? (:

Monalisa ♥ disse...

Ooi flor, nossa o seu blog é simplismente LINDO amei mesmo de verdade, agora eu queria q tu fizesse um orkut pra galera do blog pra gente fazer pedidos, da ideias de post, tu ficar informando agente de novos post etc e etc, e eu gostaria q tu fizesse o tutorial de como tu fez esses bichinhos (elefante, girafa, tigre), a barra de categoria, como tu fez a imagem do menu,a imagem em baixo do site escrito volte sempre, o balão com o twitter, e o layount, sei q é muito mais qualquer coisa q vc nos ensina já é uma grande ajuda, eu tenho uma base boa de como fazer blogs e etc, sendo q eu vou fazer outra conta na google, e criar outro blog, quando tiver pronto eu te digo, mas antes eu quero aprender pelo menos assim oq vc sabe, tÔ determinada a fazer um blog bem legal, ah vc já fez algum curso de informatica? ou aprendeu isso td sozinha pela internet?
ah se der me adc no MSN classe550@hotmail.com
quero ser muito sua amiga

Tudo Junto disse...
Este comentário foi removido pelo autor.
Tudo Junto disse...

aceitamos a parceria, iremos colocar o seu link-me , e você faça o mesmo ><'

http://idontspeakbrasileiro.blogspot.com

blog fofod *-*

Andreza disse...

@Monalisa ♥ - Obrigada pelos elogios *o*
Bem legal a ideia do orkut, talvez mais tarde eu faça uma comunidade...
Os bichinhos não fui eu quem fez ;/ rs
Teus pedidos estão anotados guria. Vou ir fazendo os tutoriais um a um! Eu aprendi tudo o que sei na internet mesmo...
Te adicionei no msn :*

@Tudo Junto - Ok, obrigada (:

AT' //Oficial (attitude teen) disse...

aceito parceria sim! Já peguei o seu link-me, faça o mesmo com o meu! promoção rolando, participa? bjs !

Andreza disse...

@AT' //Oficial (attitude teen) - Ok :3

Amanda Cristina . disse...

oooi , amei esse blog, muito lindo *-*
visita o meu ?
http://realidade-imperfeita.blogspot.com

beijos ;**

Andreza disse...

@Amanda Cristina - Obrigada *o*
Visitei (:

Ana_carool disse...

Adorei essa dica!
Parabéns!

beijos
blogloucamistura.blogspot.com

J.R. Glamour disse...

Ai que blog FOFo amor , amei seu blog *.* hem flor irei linkar vc na minha pagina de PARCERIAS espero sua resposta... Sue blog tem um design muito lindo e suas materias sao boas. Beijos

Gαb ∞ disse...

Andreza,será que você poderia fazer um tutorial ensinando a por essa foto grande ao invés do 'Sobre mim' e sobre como por imagens ao invés de títulos nos títulos das colunas do blog?
Eu ia adorar! Vou tentar fazer esse menu! Valeu,flor!
Beijudds :*

Debbie disse...

oooi ! *-*
nossa, amei seu blog, o layout, os post, tudo lindo. Amei. Aceita parceria? *-* Seguindo, se puder segue de volta >.<
http://letsfroze.blogspot.com/
Beijos, Debbie :* ♥

Jéssica disse...

Olá. Gostei do seu blog. Pode seguir o meu blog ? http://xxx-memories-xxx.blogspot.com/ Ficarei feliz em ver você por lá. Beijoos ♥

Skarlet disse...

Amei o site, mas nem vou tentar que vou acabar estragando todo o meu blog :P
Quer fazer parceria?

www.diariodajuliam.blogspot.com

Andreza disse...

@Ana_carool - Que bom que gostou :D

@J.R. Glamour - Ok, obrigada *-* rs
Eu fui te linkat também, não não seu banner ><

@Gαb ∞ - Claro, posso sim! Mas olha, pra colocar a foto ao invés do "sobre mim" é só você editar a imagem do jeito que quiser, depois hospedar em sites como o Imageshack.us, adicionar o gadget "texto" e colar a imagem :D rs
Nossa, imaginei que a explicação ficasse mais curta...

@Debbie - Também AMEI o seu blog, sério *-* Com certeza vou fazer uma indicação dele aqui! Já estou seguindo e aceito a parceria sim *o*

@Jéssica - Seguindo <3

Andreza disse...

@Skarlet - Sabe que são muitas as blogueiras que tem esse medo? rs
Mas é o que eu sempre digo: não tenham medo, pra prevenir acidentes e só fazer o backup do seu template ;B

Aceito parceria sim amr *-*

Julie disse...

qual eh o nome da fonte que vc usa no texto do"bem-vindo"?
meninaarteirajulia.blogspot.com
bjs

Andreza disse...

@Julie - A fonte é "Tahoma" :B

Ve disse...

seu menu eh realmente muitooooooooooooo lindo....

seu blog inteiro eh muito fofo

bjos

www.machiando.blogspot.com

Jornal da Lulu Teen - By Luíza disse...

amei o post!!! qualquer hora vou tentar fazer.
bjnsssss ♥ ♥ ♥
Luíza
http://jornaldaluluteen.blogspot.com

Andreza disse...

@Ve - Obrigada fofa!

@Jornal da Lulu - Isso, tente mesmo. Depois me conta se conseguiu, ok?

Beijos

Rachel Figueiredo disse...

Ahh adorei o tuto! To querendo fazer isso , mais só de ver tantos códigos dá uma preguiça! SAUHSAUH
Peguei seu link-me !
Beijos <3

http://blogbombaastic.blogspot.com

Mah disse...

florzinha vou colocar seu banner agora no meu ta, obg florrr

beijaum

Beatriz F. disse...

Oiii florzinhaa
é claro q aceito parceria..Ja vou la por seu banner, pode pegar o meu..Estou seguindo já! :)
bzitOs'

Equipe Like a Friday disse...

oi! já estamos seguindo você!! obrigada por seguir! adoramos aqui! <3

Andreza disse...

@Rachel Figueiredo - AUSHAUSH sei cumé.

@Mah - Ok, vou fazer o mesmo.

@Beatriz F. - Certo.

@Equipe Like a Friday - Obrigada por seguirem!

Marina disse...

Oiee,adorei o seu blog,aceita parceria?(responde na minha cbox) beijos

http://pinkperola.blogspot.com

• Fяαη¢єℓℓє Mσяgαη • disse...

Nussa!!! Que código difícil né??!! Mas o resultado fica liindo depois...\Õ/
Adorei a dica amoree...S2

Ahh,estou te seguindo aki tbm e aceeito a parceria com certeza...seu blog é liiindo!!! Muito bem feito,tem um design liindo...XD

Já estou te linkando lá...me avise quando me linkar aki tbm amoree??

Kisses e sucesso...
http://backstreetmorgan.blogspot.com

Amanda disse...

Adorei tudoooo

beijos,

Maonamake.blogspot.com

⋆ ─ It's Jessica Z! disse...

AAAAAAAAA e eu amei seu blog todo KKKKKKKKKKK'

Aceitosimams adc meu msn, ele esta na minha foto no blog

Beijos ;*

Karen Moraes disse...

Tem selinho pra ti lá no blog flor ! (http://garotaswant.blogspot.com/)

Karine Lima disse...

Oi, adorei o blog
estou seguindo aqui, visita o meu
e se gostar siga tbm, um bj

http://livreelouca.blogspot.com/

Karen Moraes disse...

aah, eu fiz tudo e não deu certo :/

Karen Moraes disse...
Este comentário foi removido pelo autor.
Karen Moraes disse...

O último código colo antes do < header > ou depois? Ou ainda: antes do < / header > ou depois?

Ajuda please :D

Karen Moraes disse...

Em que site você aprendeu isso tudo? *-*

Karen Moraes disse...

enviei um e-mail com dúvidas

Naaty*Souza disse...

aameii seu blog, vou inscrevelo no concurso do meu blog!!Acessa: sweetgirlsencomendas.blogspot.com
bjos Naaty

Liiih Oliveira disse...

Flor seu blog é lindo também amei o template que vc fez *------* aceitoo parceria sim http://liiih-oliveira.blogspot.com/p/link-me.html ai ta meu banner e já colokei o seu no meu tb =)

BRENDA CURTY ; disse...

Aceito parceria sim!
Peguei seu banner já, por favor pegue o meu!
beijos :*

Andreza disse...

Respondidos (:

Princess Teens * disse...

Andreza , meu blog já tem uma caixinha de link-me mas na verdade não sou eu quem as fiz! Percebi que voce é uma nerd nisso (no bom sentido lógico haha) , sera que poderia me mandar um email me ensinando ou me adicionar no msn , ou fazer um post sobre isso aqui ? eu juro que coloco todos os créditos!
email : barbara.murat@hotmail.com

beijos espero mt que voce me ajude *-*

Thais disse...

Heeey ! Você é destaque lá no Pink Star !!
Bj Bj

' aninha disse...

Olá Andreza, amei o seu blog !!!
Claro que aceitamos parceria !!!
Já estou seguindo aqui também...

Já vou colocar o seu link lá...

Beijos ! ( www.garotas-de-atitudes.blogspot.com )

Beatriz disse...

Flor eu amo seu blog
Parabéns por tudo viu!!!
bjaum

Thaís disse...

Olá, eu adorei a dica, era o que eu queria!
Mas, apesar de ter conseguido colar o menu lá, ocorreram alguns problemas x-x
Se puder ajudar...
Beijos :*

Julie disse...

Vc faz encomendas??
meninaarteirajulia.blogspot.com
bjs

João Rafael disse...

o blog ta hiper minha cara, porque sou hiper NERD, e adorei ele , hum segue meu blog ? http://www.teennewsjoaorafael.blogspot.com/ hum vamos fazer parceria ?

Garotas Cliche disse...

Tutorial incrivel, adorei parabéns!

Anônimo disse...

Oiie flor, como conseguimos selinho de aprovação?
beiijos www.fanaticospornoticia.tk

Equipe Like a Friday disse...

Adooreii o tutorial, muito boom! otima dica pra quem quer encrementar o blog, (:

@Hollekast_x disse...

Gente, virou uma anarquia aqui no meu pc...
Não deu nada certo..
Mas vou tentar até conseguir!
Kkkkk

Um beijo, Line.

http://miss-scd.blogspot.com/

Anônimo disse...

- Rebecca

OI, é que eu to com uma duvida...
eu sei fazer tudo sertinho mas oque é:SOMA DOS VALORES DE WIDTH E LEFT ANTERIOR

? bjús

Cindy°' disse...

Oi querida.
Poderia fazer um tuto ensinando a personalizar essa barrinha que separa os gadgets (Bem Vindo, Categoria, A nerd, Seguidores) como faz pra personalizar isso desse jeito lindo q vc faz?
Beijos

Cindy°' disse...

Obs..:no comentário aí de cima... isso foi uma pergunta. (Se vc poderia fazer o tuto...) rs, só pra confirmar.
bjss

G.R disse...

êêê eu fiz com o seu menu, rs, só para os testes, só que eu não consegui ter o "raio" quando eu passo o mouse, me ajuda?

Andreza disse...

Jesus! Quanto comentário pra responder ><
Vou responder somente os mais necessários ok gente?

@Thaís - É, eu vi ;/
Procura por:

#menu li{
position:absolute;
top:0;
height:35px;
}

E no lugar de 35 coloca a altura do seu menu (:
Se ainda assim ficar errado me avisa, ok?

@@Hollekast_x - Qualquer dúvida me manda um email, ok?

@Anônimo - Exemplo, se o seu #dois for:

#dois {
width: 10
left: 5

no left de #tres {
você deve somar 10+5, entendeu? (:

@Cindy - Ok, posso sim!

@G.R - Você chegou a salvar?? É que quando a gente só visualiza não aparece o efeito do mouse ><
Cole em blog de teste e salve (:

Edilberto Júnior disse...

Se tu fizer um blog de encomendas na primeiras semana vai lotar! a. faz um blog de encomendas eu gostei hiper-mega do teu blog eu sou menino mas sei que você num vai fazeer desse jeito mas pode fazer um como por exemplo... unisex para todos os sexs tanto masculino quanto pra feminino que agrade os dois e num desagrade nenhum! =]

Edilberto Júnior disse...

Falei tanto que esquecii de dizer que quero parceria, ja coloquei o seu nome laa no meu blog, e to seguindo e queria pedir pra você segui de volta Bjss!
http://edilbertojr.blogspot.com/

Laurinha ♪♫ disse...

Nossa, seu blog ta mto lindo... O design tá d+ (:
To seguindo (: Olha queria saber uma coisa... Tô tentando mudar o íconezinho do blog, que fica na barra de endereços (sl como e o nome dakilo, esqueci), e não consigo... Vc poderia me ajudar?
Bjus!
http://girlson-line.blogspot.com/

Bruna Morgan disse...

Eu fiz tudinho, mas quando coloquei no blog, a imagem de baixo (quando bota o mouse por cima) não apareceu! E continuou com a imagem de cima D:
e agora???


(responde no meu blog ou por e-mail? obrigada)

slipkwomam2005@gmail.com

Bella Dieguez disse...

quase consegui D: onde coloca esse código maior?
bjs :* destemidagarota.blogspot.com

Vivi_G_v disse...

Não apareceu no meu!!

Mariana disse...

Oi, eu fiz Tudo exatamente como estava no Tutorial e não apareceu a imagem, só os Links. :(

http://maariihsouza.blogspot.com/

Giovanna disse...
Este comentário foi removido pelo autor.
Giovanna disse...

Oi,
Ameii o seu blog, é fantásticoo!
Fiz tudo como mandava, só que a imagem não ficou, tem o link, mas não a imagem...
Me ajuda?
Obg!

Jéssica disse...

oie amei o tuto mais as imagens ficara dupla fiz tudo certo e coloquei a altura certinha mais ñ funcionou me ajuda

Jéssica disse...

Ah conssegui era o tamanho da imegem que eu tinha esquecido de colocar metade kk

Jéssica disse...

só que não ta aparcendo a cor que eu ecolhi quando o mause fica em cima

Mariana Solis disse...

Andreza, faz um mês que já fiz esse tutorial, mas até hoje não consegui arrumar um probleminha, digamos, bem grandinho. Então nada melhor do que procurar alguém que entende do assunto, né? hahaha
Fiz do jeitinho que está, mas ao invés de colocar o código dos links abaixo do HEADER-OUTER, adicionei o html/java nos elementos da página. Creio que o problema não seja por isso, até porque fiz dos dois jeitos e aconteceu a mesma coisa.
Então, meu menu ficou dois menus sobrepostos! O menu da imagem, e o menu que eu creio que seja padrão do Blogspot. Além de ficar descontínuo, ao aplicar o efeito hover, o background do "menu Blogspot" se aplica a imagem. Tentei de tudo pra ocultar o "menu intruso", mas não consegui de jeito nenhum. Outra coisa que não consegui, foi alinhar a parte esquerda do menu para um pouco antes do body, sendo assim, ficou com uma margem esquerda de +/- 25px, e a margem direita sobressaiu MUITO! A intenção era ficar uma beiradinha pra cada lado, como no seu. Acho que a coisa é comigo, porque tá tão bem explicadinho que não sei como consegui errar tão feio! Você pode me ajudar, Andreza? O que eu posso acrescentar ou alterar? Dá uma olhadinha no código fonte do meu blog de testes pra tentar entender onde eu errei hahahaha obrigada flor, adoro seu blog!

Meu blog de testes, onde fiz o menu http://marianasolis.blogspot.com/

Magali disse...
Este comentário foi removido pelo autor.
Crazy Girls disse...

nao deu certo D:
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute "{1}" associated with an element type "href".

foi isso que apareceu ):

adoro seus tutoriais eles sempre dão certo, mas ele não =//

Pamella Paschoal disse...

Deu certo, mas agora eu nao sei o que aconteceu! Olha :( http://pamellatestes123.blogspot.com/

ზ Fernanda Moraes disse...

Eu fiz tudo certinho, o que aconteceu de errado foi a imagem que não apareceu /:
Que raiva!!!

Carolina-BlogueirasTeen disse...

Não entendi :x

Bela S. disse...

Não entendi e não consegui esse tutorial!Me ajuda???

madame chair disse...

Oi flor *--* seu post ta muuuito bom, juro por Deus que procuro esse tutorial a ANOS mais agora que encontrei não consigo fazer ;-( pelo amor de Jesus cristo faz ele pra mim? Eu te do o código do meu template, entra em contato por favo, meu e-mail é:madame_chair@hotmail.com e meu blog é: capotino.blogspot.com

Malena disse...

Fiz certinho, mas o meu hover não quer funcionar.

Ah, como alinho certinho na página(borda).
Aguardo.

http://embalaco.blogspot.com/

madame chair disse...

Oi *--* conseguir fazer, mais o efeito hover não fucionou, quando passo o mouse por cima continua a mesma imagen ;-p mim ajuda por favo? Se você mim ajudar eu faço um post de agradecimento a você e ao blog menina nerd la no meu blog

Giovanna disse...

Aaaaaaaaaaaaaaaaaaa ! Eu consegui fazer (:Oh my gosh obrigada obrigada obrigada s2 s2 ! Aaain (:

Anônimo disse...

nossa nao consigui tem um geito mais facil de fazer?

Tayná Britto disse...

aaah, eu consegui fazer, só que não fica no lugar onde eu quero ;/ pode me ajudar?

' Natii - disse...

Flor o que é valor de left?
vc não explicou muito bem
eu consegui tudo mas quando chegou nessa parte ferrou tudo pq eu não sei oq é.

http://naty-todasaspequenascoisas.blogspot.com/

' Natii - disse...

Consegui fazer tudo mas não achei os códigos
no Html pra por tudo que eu fiz lá.
Só perdi tempo. :/

Haaannah disse...

Andreza, tem um selinho te esperando lá no blog.
xoxo, Hannah

http://sweets2dreams.blogspot.com/

Gabriela disse...

Nossa, eu fiquei mais de meia hora tentando ajeitar tudo, e quando eu fui salvar não apareceu NADA! continuou como tava antes... me ajuda por favoor !

Tayná Britto disse...

Eu fui tentar fazer em outro blog e não deu certo. Só que o menu é vertical, então pensei em alterar width por height e top por left, mas não deu certo, então fiz igual ao seu. A imagem não aparece, só os links que ainda são acompanhado da codificação html. O Menu fica apenas na direita e o menu está na esquerda. Então alterei meu cabeçalho deixando o menu no cabeçalho utilizando só o link, mas mesmo assim o link não muda de lugar, fica posicionado na esquerda, pode me ajudar?

Sabrina Andrade disse...

Oi Andreza (: estou iniciando meu blog agora, na verdade já tinha um desde 2008, isso não vem ao caso né? Então, gostaria da sua visita no meu blog, e queria que você pudesse seguir, obrigada. Beijos.

http://innocencefeminist.blogspot.com