1 2 3 4

23.4.12

Tutorial: Ocultar conteúdo em "menu"

Girls, votem na enquete aqui do lado!
Untitled Album
WeHeartIt
 Oii meninas! Prometi, cumpri, certo? Hoje vou ensinar para vocês como ocultar algum conteúdo em "menus". O efeito está mostrado ali do lado, em Nossas Metas e Juntos!. Serão 4 tutoriais de quatro maneiras diferentes. Let's go?
Código Base
A partir deste código, os quatro tipos podem ser feitos.
Vá no HTML do seu blog, aperte CTRL+F e digite <head>.
Logo abaixo de <head>, 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>
1. Básico
Vá em layout, na lateral do seu blog e adicione um novo gadget de HTML/Javascript. No gadget, 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 1
</div>
<div id="dog" style="display:none">
Conteúdo 2
</div>
<div id="cat" style="display:none">
Conteúdo 3
</div>
Para colocar um link, coloque no conteúdo:
<a href="[link]">[texto com link]</a> 
 Basta personalizar.


2. Com imagem no conteúdo
Vá em layout, na lateral do seu blog e adicione um novo gadget de HTML/Javascript. No gadget, 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>
<div id="cat" style="display:none">
<img src="[urldaimagem]" />
</div>

 3. Com imagem com link no conteúdo
Vá em layout, na lateral do seu blog e adicione um novo gadget de HTML/Javascript. No gadget, 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>
<div id="cat" style="display:none">
<a href="[link]"><img src="[urldaimagem]" /></a>
</div>


4. Com imagem no título

Vá em layout, na lateral do seu blog e adicione um novo gadget de HTML/Javascript. No gadget, cole:

 <center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"> <img src="[urldaimagem] </a> |

<div id="cat" style="display:none">
<a href="[link]"><img src="Conteúdo" /></a>
</div>

Se não der certo, avise!
 Bezzos!


6 comentários:

  1. Tem um selinho lá no blog, para você, beijo. Amei o tutorial.

    http://garotasdeporcelana.blogspot.com.br/2012/04/selinho-denovo-gente.html#more

    ResponderExcluir
  2. Amei demais esse tutorial, facinhoo né.. acho massa! Beijos

    http://www.blogmeninamulher.com/

    ResponderExcluir
  3. @Brandy Obrigada, flor! Já vou responder :)

    Bezzos!

    ResponderExcluir
  4. Adorei o tuto amor e amei o blog<3
    Ele é lindo *---*

    Sweet Smile

    ResponderExcluir
  5. @Blair Brigada Linda! Já seguindo o Sweet Smile!

    ResponderExcluir