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:

Somii S. disse...

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

Somii S. 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 |

Bia 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

Nina-chan 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/

Miih / MDG disse...

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

! Daalhe Esmaltes ! disse...

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

Ana (Generation Teen) disse...

É super lindo o menu *u*

http://generationteenbr.blogspot.com.br

Anna {GQ} 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/

disse...

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

Viih Sophiia 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 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

Acima do Arco Íris 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

Jhonas Balsas 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

Nell 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 rabelo 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 F. 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/

Hay Barros disse...

amei o tuto ^^
s2hay.blogspot.com

Paula Cristina disse...

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

http://sonhomeu17.blogspot.com.br

Anna {GQ} 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 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/

TeenList disse...

Legal o menu.

www.teenlist.blogspot.com

Somii S. disse...

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

Dayane 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/

Van :3 disse...

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

Hellion Katsu - カツオ 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

Laurinha :3 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

Tais disse...

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

http://mundoodasblogueiras.blogspot.com/

Amanda Cardoso disse...

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

JEFF BOLTON | ECLETICUS disse...

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

www.ecleticus.com

Rebeca:) disse...

o efeito fica lindo,adorei! rs

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

NL disse...

Gostei do tutorial!!

bjs

#>>> asgarotasdonl.blogspot.com.br

Lary Li disse...

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

Liih ♪ 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