Efeito Esconder e Revelar no Sidebar

5 Deixa um comentário
 http://data.whicdn.com/images/17627776/5745686381_bcfbef3dc7_z_large.jpg



Oii,comoo stãoooO ? Hojee vouu ensinar para vocês como colocar efeito 'Revelar e Esconder'
no Widget na sidebar ' HTML/JavaScrip' ;

Em 'Design > Editar HTML , Dê 'Ctrl + F' e  procure por ]]></b:skin>
 e cole EM CIMA o código:


#box-toggle {
margin:0 auto;
}
#box-toggle .tgl {
margin-bottom:20px;
}
#box-toggle span {
display:block;
cursor:pointer;
font-weight:bold;
font-size:14px;   /* edite fonte */
color:#f95eb2;    /* edite cor do link */
margin-top:15px;
}

Ok,agora Salve !

  Procure por </head>  e cole em cima o código :



<!--ScriptjQuery Toggle revelar esconder Inicio -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.toggleText = function(a,b) {
return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}
$(document).ready(function(){
$('.tgl').before('<span>[Mostrar Conteúdo]</span>');
$('.tgl').css('display', 'none')
$('span', '#box-toggle').click(function() {
$(this).next().slideToggle('slow')
.siblings('.tgl:visible').slideToggle('fast');
$(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')
});
})
</script>
<!--ScriptjQuery Toggle revelar esconder Final-->


Agora em Design > Elemento de Página' > Adicionar Gadget > HTML/JavaScript



<div id="box-toggle">
<div class="tgl">
Coloque a parte que vai ficar em OCULTO
</div>
</div>

Exemplo:

Esse tutorial é sobre ...
Efeito Esconder e Revelar

Depois de fazer isso,tudo certinho,você dê Ok ! E salve para ver se deu certo !
Espero que ssiim .. hehe! Kiss inteeeh !!




Volte sempre, tá?

5 comentários:

  1. Gostei do tutorial muito bom !
    Segue?
    http://sweetdreamssah.blogspot.com

    ResponderExcluir
  2. Oinn mana!
    Vimmm visitar seu cantinhoo q stá lindoo demaiss!
    Stá APROVADO!*-*
    adoreiii o tutorialll....
    Ahh...tem novo post lá no blog(:
    bjs!

    http://grazigrazieli.blogspot.com

    ResponderExcluir
  3. oi flor, aceito parceria sim.
    ja posso colocar seu link?
    beijinhos
    deboramoraiss.blogspot.com

    ResponderExcluir
  4. Adorei o tutorial ! Super fácil !


    Agora venho trazer uma dica para você blogueira : a @TodaProva está abrindo vagas para as blogueiras ficarem antenadas sobre os produtos antes de comprar http://belezaatodaprova.com.br/qh1in

    Vale a pena, se cadastrar :D

    http://pensamentosdasgirls.blogspot.com/
    Beijos @maysa_lobo

    ResponderExcluir

O que achou da postagem?
Lembrando que ....
- Não aceito selinhos e tags ;)
- Não participo de sorteios de maquiagens e de bijuterias
- Não irei participar de concursos no momento.