3 de jun de 2012

Menu Deslizante e houver.

Tumblr_m51wsglkfe1r3x8uwo1_500_large
Oi amores! Fiquei 2 dias sem postar né?
Desculpem,estou fazendo um layout rock divo. Pra por semana que vem,no blog ou até mês, que vem mesmo.
Hoje,vou trazer dois menus,lindos.
Se,quiser ver o tutu cliquem em Leia mas
Leia mas
1-Menu deslizante
Exemplo :

Vá em design-> editar HTML-> aperte f3 e preoucure  na caixinha de pesquise por <head>
ABAIXO,cole
<!--- MENU DESLIZANTE --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script src='http://static.tumblr.com/ghoye6x/xBmloszst/colpaso.js' type='text/javascript'></script><script type='text/javascript'>animatedcollapse.addDiv('jason', 'fade=1,height=80px')animatedcollapse.addDiv('kelly', 'fade=1,height=100px')animatedcollapse.addDiv('michael', 'fade=1,height=120px')animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')animatedcollapse.addDiv('lion', 'fade=0,speed=400,group=pets,persist=1,hide=1')animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted //$: Access to jQuery //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID //state: "block" or "none", depending on state}animatedcollapse.init()</script>

 Depois vá em --> elementos de página --> adicionar novo gadget--> HTML/javascript
e cole :
<center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 1</a> |<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 2</a> |<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 3</a></center><div id="rabbit" style="display:none">Conteúdo do menu deslizante 1</div><div id="dog" style="display:none">Conteúdo do menu deslizante 2</div><div id="cat" style="display:none">Conteúdo do menu deslizante 3</div>
Obs : Aonde,está título e o título do conteúdo.
2-Menu Houver
exemplo :
Menu,que uso aqui no blog.
Vá em Design  Editar HTML  Ctrl f e procure por]]></b:skin> agora que achou é só colar acima o código:
 /*-----Início do Menu Bad Reputation-----*/kbr {
background:#eee; /* Cor de fundo do Menu */
width: 20%; /* Tamanho do Menu (Largura) */
text-align: center;
font-size: 8px; /* Tamanho da fonte */
color: #000; /* Cor da fonte */
letter-spacing:1px;  /* Espaço entre as letras */
padding: 4px;
margin: 2px;
float: left;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
-webkit-transition-duration: .90s; /* Tempo do Efeito */
}
kbr:hover {
background:#000; /* Cor do fundo do Menu ao passar o mouse */
width: 20%; /* Tamanho do Menu ao passar o mouse */
text-align: center;
font-size: 8px; /* Tamanho da fonte ao  passar o mouse */
color: #fff; /* Cor da fonte ao passar o mouse */
letter-spacing:1px; /* Espaço entre as letras */
padding: 4px;
margin: 2px;
float: left;
-moz-border-radius: 10px 25px / 25px 10px;
border-radius: 10px 25px / 25px 10px;
-webkit-transition-duration: .90s; /* Tempo do Efeito */
}
/*-----Fim do Menu Bad Reputation-----*/
Agora vá em elementos de página --> adicionar gadget--?Html/Javascript 

<a href="URL"><kbr>Nome</kbr></a>
<a href="URL"><kbr>Nome</kbr></a>
<a href="URL"><kbr>Nome</kbr></a>
<a href="URL"><kbr>Nome</kbr></a>
Prontinho : Menu feito por Bad-Repution,se usar credite o CCM, e o Bad-repution também.




7 comentários:

  1. gostei dos dois!
    segindo!
    bjs

    http://euemeujardimsecreto.blogspot.com/

    ResponderExcluir
  2. Obrigada sou nova no blogger e esse post realmente ajudou!
    bjoss,
    Renata

    www.blogteenguide.blogspot.com

    ResponderExcluir
  3. amei super legal >.<
    Beijos
    >> http://diariosamigas.blogspot.com.br/ <<

    ResponderExcluir
  4. Lindo seu blog!
    Seguindoo , retribui ??? '
    bjss ' http://mylollipiink.blogspot.com.br/

    ResponderExcluir
  5. Óoh , muito legal o post ! Amei o tutorial ! Continue assim !

    http://adorablemoon.blogspot.com.br/

    ResponderExcluir
  6. Haha gostei do nome usado como exemplo se não me engano Bad Reputation é uma música da Joan Jett *u* haha adoro essa música..

    ResponderExcluir

Leia as regras,antes de comentar.Por favor!
1- Comentários do tipo "seguindo,segue de volta",Adoro teu blog, e não fala nada sobre a postagem, ou xingamentos. Serão,totalmente ignorados.
2-Retribuo comentários.
3-Pedido pra seguir,o seu blog,sem seguir o meu ,não irei seguir o seu também não.
3-Aceito críticas construtivas,para o bem do blog,não ofensas.
4-Aceito "inspirações",mas credite.
5-Comente a vontade,você faz um blogueiro feliz!