06/03/13

MT : Efeito revelar/esconder conteúdo no post


Leiam a minha 1ª entrevista, gostei muito de fazê-la. Cliquem

Olá, trago mais um tutorial, o efeito revelar/esconder conteúdo no post, se quiserem ver como é cliquem. Créditos ao JD e ao MG.

Se gostaste do efeito e queres metê-lo, vai ao html, marca a opção "Expandir modelos de widgets", dá ctrl + f e procura por </b:skin>. Cola o código acima dessa tag :

#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:#3D81EE;    /* edite cor do link */
margin-top:15px;

Agora procura a tag </head> e cola o código acima dela :

<!--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>[Ver 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--> 

Salva. Cada vez que quiseres utilizar este efeito no post, tens que colocar o seguinte código na aba html :


<div id="box-toggle">
<div class="tgl">
Coloque aqui o conteúdo que ficará Oculto
</div>
</div> 

Depois voltas para a parte de escrever e continuas o teu post... qualquer dúvida, perguntem. Bye bye !

4 comentários:

  1. O tutorial está muito bem explicado.
    Acho que é este que foi usado no meu lay..mas eu gosto muito de usar ele porque tira um pouco o excesso de texto do blog. :D

    Hayanne Deise Lins
    *Profissão Adolescente*
    *Il Mio Mondo Sei Tu*
    >>Facebook<<
    >>Twitter<<

    ResponderEliminar
  2. Adorei haha' é bem fácil e bem util, adoro tutoriais <3

    siteiloveit.blogspot.pt

    ResponderEliminar
  3. Amei, vou usar um dia desses, sem contar que é bem pratico.
    Beijos
    Inside Of Me (perfil)

    ResponderEliminar

-Não coloques o link do teu blog para ele não ser excluído. Retribuo mesmo que deixes só "Cat Girl".

-Comentários do género "Seguindo, segue de volta", "Adoro seu blog", "Novo concurso..." não serão respondidos.

-Fala alguma coisa sobre o post, senão não retribuo.

-Aceito críticas construtivas, nada de palavrões ou coisas do género.

Beatriz


Layout by Beatriz D. ~ Cat Girl | Proibido cópias