21 de fev de 2013

18

Tutorial Efeito mais/menos‏

Olha o DN escondidinho ali *o*

Olá meninas e meninos... Hoje eu vim trazer pra vocês um tutorial, não considerei ele muito simples, admito que o Mah e Eu sofremos um pouco pra aplicar ele no blog, MAS CONSEGUIMOS! HAHA!
Já vi esse efeito em outros blogs sendo usado no mais/menos dos afiliados, mas também já vi na F.A.Q de alguns sites em geral, aqui no blog a gente usa lá no Gadget de Blogs Parceiros e na página de Autores Parceiros. São dois códigos, um é usado com texto como botão e outro como uma imagem... Vamos lá?

Código com Texto

O código com texto é o usado nos Blogs Parceiros do nosso blog, ele é muito fofo, pois tem um efeito de rolagem, mas o ruim é que eu só consegui usar uma vez por página, é ótimo só para usar na elite mesmo.

 - Abra o HTML do seu blog
 - Procure por </head>
 - Cole este código ANTES de </head>


                                                <!--- 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>
Agora vem a parte um pouco mais complicada...
 - Separe todo o código que você quer que fique DENTRO do mais/menos
 - Cole o seguinte código DEPOIS do código que você quer que fique ANTES e FORA do mais/menos:
<center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Mais/Menos</a>
<div id="rabbit" style="display:none">
 - Agora você cola o código que você quer que fique dentro do Mais/Menos. Depois é só fechar com:
</div></center>

Código com imagem 

Esse código é usado na página dos  Autores Parceiros aqui do blog, a diferença do de cima é que no lugar do Mais/Menos você coloca uma imagem como botão e também dá pra usar várias vezes na mesma página. 
 O código é o seguinte:
<div class="divspoiler">
<img src="URL DA IMAGEM DE MAIS/MENOS" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
A explicação é igual ao do código anterior, o código do conteúdo fica DEPOIS desse código e em seguida a tag é fechada por:
</div></div>
É isso aí meninas, espero que tenham gostado, como disse antes eu sofri um pouco com esse código, mas ele não é impossível, qualquer coisa PERGUNTEM! Responderei o mais rápido possível :D

18 comentários:

  1. Código muito bom, eu vou usar ele no meu novo layout!!Mais não se esqueça de dar os créditos de onde pegou :)
    #May-Sun KISS

    Nosso Diário Nada Convencional

    ResponderExcluir
  2. Ah,queria muito usar,mas não tenho afiliados :( Ainda


    www.em-teusbracos.blogspot.com

    ResponderExcluir
  3. Mas logo logo você consegue os afiliados :D

    ResponderExcluir
  4. muito legal o tutorial,bem fácil e deixa o blog mais organizado,pois pode ser usado pra esconder alguns gadgets que não precisam ficar á vista :3 beijos

    ~~Quem precisa de tv para ver Beyoncé // perfil

    ResponderExcluir
  5. Muito bom

    adoreeei

    bjos

    http://ronyalbuquerque.blogspot.com.br/

    ResponderExcluir
  6. Muito legal o tuto! Muito obrigada pela visita no meu blog.Adorei a música que fica tocando manero...Tem post novo lá no blog!Já estou te seguindo bjs mil!

    www.euaprendiblogdanathi.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom que gostou... Eu amo essa música... Muito linda...

      Excluir
  7. Legal esse tuto, amei! Muitas pessoas realmente precisam, ajuda bastante!
    Adorei seu cantinho e já estou seguindo, beijos ;**

    Blog ~~> Kiss of Gloss

    ResponderExcluir
  8. HTML ::::::::::: <3

    Não sei se gosta disso ou aceita, mas eu indiquei você numa tag: http://returningtodarkness.blogspot.com.br/2013/02/tag-11-perguntas.html
    Beijos <3

    ResponderExcluir
    Respostas
    1. Obrigada flor... Assim que eu tiver tempo eu respondo... <3

      Excluir
  9. OMG , esse tutorial é muito show. Estava querendo saber como fazer :D No meu próximo lay eu vou colocar de repente.

    Obrigada pela visita em meu blog =*
    Beijos , Deborah.
    http://deborahmarques-blog.blogspot.com/

    ResponderExcluir
  10. Oie Jessíca amei o tutorial me ajudou bastante!
    http://wonderfulmonitoring.blogspot.com.br/

    ResponderExcluir

Olá! Sinta-se à vontade para comentar :P
- Todos os comentários serão aceitos. Mas lembre-se: Palavrões, chingamentos, comentários como "Seguindo, segue de volta?" deixam feia a sua própria imagem,
- Temos páginas explicando nosso sistema de parceria, afiliação e divulgação e também alguns de nossos conteúdos. Não deixe de olhar!
- Qualquer assunto mais sério nos envie um email que está na página "contato"
- Deixe o link de seu blog para que possamos retribuir ^^

Beijos e Volte Sempre ^^