Enfim, vamos a postagem, eu ja vi esse tutorial em vários blogs e eu achei muito interessante. Funciona como o "Continue Lendo" porém você não se perde na leitura e talz, então muita gente prefere esse link de "Revelar conteúdo" e "Esconder conteúdo", pra saber como faz clica em Leia Mais.
Primeiro, vá no seu blog em design, editar HTML, selecione a opção "expandir modelos de widget" e procure por: ]]></b:skin> e cole esse código logo ACIMA:
#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;
}
Ok, não precisa salvar nem nada, só aperte Ctrl f de novo e procure por: </head> e coloque esse código logo ACIMA:
<!--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-->
<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-->
Pronto,
salve. Maaas ainda não vai funcionar, por isso você cola esse código no HTML do post:
<div id="box-toggle">
<div class="tgl">
Coloque aqui o conteúdo que ficará Oculto
</div>
</div>
<div class="tgl">
Coloque aqui o conteúdo que ficará Oculto
</div>
</div>
Espero que tenham gostado do tutu! Comentem.
Beijos,
Nenhum comentário:
Postar um comentário