25 de nov. de 2012

Esconder/Revelar conteúdo

Hey, angels :) What's up?

Eu trouxe um tutorial bem legal que aprendi no Jackie Dream (créditos dados). Em minha opinião, fica super legal para um blog que não quer uma Elite de Afiliados tão grande. É só clicar e então aparece o resto dela, para que não fique muito exagerado. Assim:


Vamos ao tutorial?

Vá em Design > Editar HTML e clique em "Expandir Modelos de Widgets". Dê Ctrl+F e procure por ]]></b:skin>  . Assim que encontrar, cole o seguinte código acima da 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;   /* tamanho */
color:#3D81EE;    /* cor */
margin-top:15px;
Aperte Ctrl + F novamente e dessa vez busque por </head>. Quando achar, cole esse código antes:
<!--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--> 
A parte em negrito ([Ver Conteúdo]) pode ser alterada como vocês quiserem. No meu caso, substituí por [Mais/Menos].
Depois é só visualizar para ver se algo que não deveria ser modificado mudou. Caso tenha continuado certo, salve.

Bom, por hoje é só.
Espero que tenham entendido e que tenham gostado.
Beijos,


Mrs. Nightshade.

8 comentários:

  1. Muito bom o tutorial Bem explicado eu vou usar
    beautifulworldoficial.blogspot.com.br

    ResponderExcluir
  2. AMEI, estava proucurando muito isso. Ajudou super flor.
    Você poderia postar um tutorial, de como fazer o título da sidebar ( Gadgets ) Igual ao daqui ou igual a Mrs. Nightshade ? Kissus ~

    ResponderExcluir
    Respostas
    1. Olá! Fico muito feliz em ter ajudado =D

      Como personalizar o título dos gadgets: http://tutoriais-mrs-nightshade.blogspot.com.br/2012/10/hey-angels-whats-up-trouxe-hoje-um.html

      Estilos dos meus blogs: http://extras-placefame.blogspot.com.br/2011/07/personalizando-os-titulos-dos-gagdets.html << Uso o terceiro

      Super simples ^^ Beijos!

      Excluir
  3. Esse tutorial é bem legal A-M-O , pena que eu tive que tirar do meu blog por que tava demorando muito para carregar e minhas princesinhas estavam reclamando :/

    Fofa , achei seu blog uma gracinha muiiito lindo mesmo PARABÉNS muito cute , A-M-E-I de coração seguindo você lindona ~~~beijoos ♥

    lorhannyschneeider(.)blogspot(.)com(.)br
    (Retire os parenteses)

    ResponderExcluir
    Respostas
    1. Olá! Awwwn, que bom que gosta *---* kkk
      Não imagina o quão feliz eu fico sabendo que gostou :') Muito obrigada, anjo *-*
      Seguindo de volta ♥

      Beijos!

      Excluir