25.7.12

Menu deslizante *menu no topo do blog* + Votações

Pessoal, viram que eu mudei o lay né ? Eu quis fazer um lay diferente.. meio colorido assim sabe.. Gostaram?
tumblr_lqrhmoVqqF1qzydnwo1_500.jpg (500×333)

Oi meus amores, tudo bem com vocês ?
Hoje trouxe um tutorial que eu estava procurando em todo lugar, então perguntei para linda da Marilia do Puro Glitter, ela me falou que tinha no Kawaii World, mas estava com permissão negada, mas como eu já sabia o nome do tuto pela url, eu procurei e achei no The Baby. Então, créditos ao The Baby.



Vá em Design > Editar HTML e procure por ]]></b:skin> :


Acima da tag cole:

/* Aqui definimos as propriedades CSS para a lista do menu */ul#navigation { position: absolute; margin: -25px; padding: 0px; top: 0px; right: 150px; list-style: none; z-index:999999; width:721px;}ul#navigation li { width: 103px; display:inline; float:left;}ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#d4d4d4; /*---cor de fundo---*/ background-repeat:no-repeat; background-position:50% 10px; border:1px dashed #8d898b; /*---cor da borda---*/ -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}ul#navigation li a:hover{background-color:#CAE3F2;opacity: 1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}ul#navigation li a span{ letter-spacing:2px; font-size:13px; color:#3e3d3e; /*---cor do link---*/ text-shadow: 0 -1px 1px #fff;}/* Aqui definimos as imagens de fundo para os links dos itens da lista do menu*/ul#navigation .home a{background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/homee.png);}ul#navigation .sobre a {background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/sobre.png);}ul#navigation .foryou a {background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/fpryou.png);}ul#navigation .tutoriais a { background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/tuto.png);}ul#navigation .png a { background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/png.png);}
Procure por </head> :

Acima da tag cole:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(function() { var d=300; $(&#39;#navigation a&#39;).each(function(){ $(this).stop().animate({ &#39;marginTop&#39;:&#39;-80px&#39; },d+=150); }); $(&#39;#navigation &gt; li&#39;).hover( function () { $(&#39;a&#39;,$(this)).stop().animate({ &#39;marginTop&#39;:&#39;-2px&#39; },200); }, function () { $(&#39;a&#39;,$(this)).stop().animate({ &#39;marginTop&#39;:&#39;-80px&#39; },200); });});</script>
Agora procure por <header> :

Acima da tag cole:

<ul id='navigation'> <li class='home'><a href='URL-AQUI'><span>Home</span></a></li> <li class='sobre'><a href='URL-AQUI'><span>Sobre</span></a></li> <li class='foryou'><a href='URL-AQUI'><span>For You</span></a></li> <li class='tutoriais'><a href='URL-AQUI'><span>Tutoriais</span></a></li> <li class='png'><a href='URL-AQUI'><span>Png's</span></a></li></ul>

Parece difícil, mas não é não... se eu consegui fazer vocês também vão conseguir. KKKK' ((:
Beijos, quem gostou levanta a mão \o/


Ah amores, as votações já estão abertas *-* Agora é só pedir seus queridos votinhos.

47 comentários:

Unknown disse...

Muiti Fofis *Uu*
Criei um novo bloguinho te espero
lá-->http://placeswift-diva.blogspot.com.br/

Unknown disse...

Aih! Muiti Fofis *uu*
( Já sigo )
--->http://placeswift-diva.blogspot.com.br/

Por trás do rímel disse...

Tutorial ótimo, adorei *-*

http://portrasdorimel.blogspot.com

Vitória disse...

Fica bem legal esse menu*-*
http://menina-do-sol.blogspot.com.br/

Ágata Bresil disse...

Adorei o novo layout, ta lindérrimo e adorei a dica.

Beijos. Tudo Tem Refrão

Gabriela Karolina disse...

Primeira vez aqui e ja adorei o seu blog e ja to seguindo o layout ta divo flor! sempre quis aprende a fazer esse menu..

Materiais PhotoScape e PhotoFiltre | OFICIAL |

B. disse...

Eu mandei uma foto pro mural >.< Não entendi direito, não. Até quando pode mandar? Podia mandar ontem à noite? Que concurso é esse que eu boiei? e.e
Analogic Bea

Cronya Atimus disse...

Esse menu é oq esta no seu blog?

bakahimesama-oficial.blogspot.com

The baby disse...

AAAAA] eu adooro esse menu *0*
ele causa um efeito muito legal no blog :D
kisses~~

#>>> www.the--baby.blogspot.com

King and Queens disse...

HAHAHAHAHAHAHAHAHAHAHAHAHAHA OBRIGADADAAAAAAA !!

Vou usar no meu próximo layout free.
THANK YOUUU !!

Parabéns pelo seu blog, ele é demais desdo welcome ao ponto final ! estou muito animada aqui, e tudo que tem nele me atrai e me inspira. Parabéns pelo blog, ele realmente é lindo demais e já até salvei nos meus favoritos haha. Parabéns pela criatividade e por tudo isso aqui, serio mesmo.
http://dearkings-and-queens.blogspot.com.br/

Milene disse...

Amei o novo lay ! Tá muito lindo,gostei do tutorial :D
beijos :*
http://mania-de-garotas.blogspot.com.br/

Ariane C. disse...

que fofura de blog, adorei!
seguindo ((:
se quiser segue o meu tbm, rs *-*
beijinhos.
http://dalheesmalte.blogspot.com/

Ana disse...

É super lindo o menu *u*

http://generationteenbr.blogspot.com.br

Ana Teles disse...

O menu é super interessante e fofo, adorei. O novo layout também ficou lindo. Volte sempre no GQ, é uma honra te ver lá!

Beijos,
Anna
http://garota-queen.blogspot.com/

Anônimo disse...

Esse menu é lindo ;D
# ~~>A garota de Preto

Anônimo disse...

Aah, dahora o tuto, o layout ficou bem legal! Mas vou ser cincera, gostava mais do outro, mas esse ficou bem criativo, gosto de cores assim! Bejjos!
http://pqngarota.blogspot.com

Marina Listing disse...

Amei o Menu. lindinho.
Ah, não fica triste, na próxima você vai tá lá. Claro que aceito afiliação, vou te por lá.
xoxo
garotasmustaches.tk

Andressa disse...

onde é que ta o negocio para votar?

http://little-of-everything-blog.blogspot.com

Anônimo disse...

Olá lindinha! Então eu sou meia lenta com esses html da vida, esse menu é aquele que fica lá em cima né? o_o mas tem que colocar links nossos?

Tem post novo lá no blog dá uma passadinha para conferir?

http://acimadoarcoiris.blogspot.com.br

eJhonas disse...

Muito bom tutorial {Postei ele hoje no meu blog também rsss xD}
Por sinal seu blog tá muito divino :D

www.ejhonas.com

Neoma disse...

Ficam super fofo, adorei as cores!
Super lindas!
^^

Beijoos
http://muitasfeminices.blogspot.com/

Fashion Jacket disse...

Esses códigos sempre me confundem!! Adorei as dicas.

Beijos

Jéssica - Fashion Jacket
http://fashionjacket.blogspot.com.br/


FacebookTwitterTumblr

Naiara disse...

oi linda eu vim ajudar na sua meta de 650 seguidores.
bem a minha meta é bem mais pequena é de 100 seguidores conto com sua ajuda =) beijos.

almapoeticaa.blogspot.com

Marina Nobre disse...

Que layout lindoooooo, amei. Parabéns!

Beijos

Maria Emília França disse...

Adorei o seu novo lay ta incrível !!!
Bom eu gostaria muito de te convidar a participar do concurso que ta acontecendo lá no meu blog o Coff Emilia. É bem fácil de participar e os prêmios são incríveis !!
Por favor você pode participar ??
Um beijão Emilia
http://coffemilia.blogspot.com.br/

Matheus Martins disse...

O design do blog tá lindo! Tá Caprichado!
http://www.vitrola3000.com/

Unknown disse...

amei o tuto ^^
s2hay.blogspot.com

Unknown disse...

Perfeito..
Linda para ser afiliada do blog você deve segui-lo também

http://sonhomeu17.blogspot.com.br

Ana Teles disse...

Obrigada, você também é VIP no meu blog *-* Volte sempre no GQ, é uma honra te ver lá.

Beijos,
Anna
http://garota-queen.blogspot.com/

Passaporte Shopaholic disse...

Oi, primeira vez no blog e já me apaixonei! Amei!

Bjs

www.passaporteshopaholic.wordpress.com - Um Blog de Viagens para Mulheres

Hayanne Deise Lins disse...

O layout está muito fofo ^^:
Olha, queria tirar uma dúvida. É que eu estou participando do sorteio e o meu nome não está ali na votação do lado. -.-''
Agora tenho um link novo, e se puder ir lá e responder à minha dúvida, seria muito legal. (Porque eu posso esquecer de aparecer aqui). Obrigado

Novo link:
Hayanne Deise Lins - Profissão Adolescente
http://profissao-adolescente.blogspot.pt/

Facebook * Twitter * Youtube

Stéffany disse...

Super útil o tutorial.
beijos
http://menina-atrevida-oficial.blogspot.com.br/

Descompliquei disse...

Legal o menu.

www.teenlist.blogspot.com

Unknown disse...

Inprecionando sempre ner sua linda ?
que ser minha titia ?
--Ç>http://smileretro.blogspot.com.br/

Dayane Nascimento disse...

Ola, bom ontem você nem entrou no msn nem deixou nenhum recado muito menos enviou algum e-mail eu fiquei esperando o dia inteiro você, te mandei o e-mail das pessoas que não cumpriram as regras e você já abriu as votações sem falar comigo ne,e nem o recado deixa eu não estou entendendo mas se é parceria com os dois blogs os dois tem que abrir juntos né, eu achei isso uma falta de responsabilidade por favor entra logo naquele msn pra gente conversar, não estou sendo mal educada e nem nada eu só to falando o que eu pensei, e eu não gostei disso.

http://conversando-com-a-lua.blogspot.com.br/

Anônimo disse...

Adorei o menu. ^-^
http://bubble-explosion.blogspot.pt

Anônimo disse...

Adorei ^^ ah, pode postar sim! Ai você me manda o link das postagens, ok? ^^
Seguindo aqui, retribui?

Velvet 'n' Leather - Tutoriais Alternativos

Bianca disse...

Não conhecia o seu blog,mais é lindo o seu lay,e adorei o tutorial !


morangohcomvermelho.blogspot.com.br

Laura disse...

Adorei a postagem! Adorei o layout! Adorei seu blog, seguindo.

Ah, você ganhou o game, estarei te colocando lá daqui a pouco. c:

the-rain-will-pass.blogspot.com

Taís disse...

Adorei o tutorial' vou usar no meu proximo lay - kk
bjoos

http://mundoodasblogueiras.blogspot.com/

Unknown disse...

Muito legal o tutu !
http://tissue-sweet.blogspot.com.br
Bjinhos com glitter :*

Unknown disse...

Muito bom o tutorial, todo mundo quer um menu assim ou talvez simples. #gostei

www.ecleticus.com

Unknown disse...

o efeito fica lindo,adorei! rs

http://conectadas2.blogspot.com.br/

NL disse...

Gostei do tutorial!!

bjs

#>>> asgarotasdonl.blogspot.com.br

Laryssa Saboya disse...

ameeeeei aquiii... teu blog é super lindo... parabéns... depois, se poder da uma passadinha no meu... bjs... http://intensevery.blogspot.com.br/

# - Lαuяα disse...

Acho muito lindo esse tipo de menu, fica tão.. Fashion, haha'


Beijos, fique com o Deus!
~Candy Rock~
~Apenas Um Sonho~

Débora Morais disse...

esse menu é muito legal, gostei ^^
spaziodm.com