Quote, Code, Spoiler

Estes são as caixas de texto criadas para organizar as postagens neste blog.

Para utilizar estes efeitos vá em menu > tema > editar html e procure por: ]]></b:skin>, copie o código abaixo e cole-o ACIMA da tag ]]></b:skin>
  blockquote{
    background:#303030;  /* edite cor de fundo*/
    border-left: 4px solid #ccc;  /* edite cor e tipo de borda */
    font: 14px/22px normal helvetica, sans-serif;  /* tipo da fonte */
    text-align:left;
    padding-left: 15px;  /* espaçamento da borda esquerda*/
  }
  code{
    overflow:auto;  /* barra de rolagem*/
    background:#000000;  /* edite cor de fundo*/
    border:2px dashed #999999;  /* edite cor e tipo de borda */
    color:#ffffff;  /* cor da fonte*/
    font-family:'Courier New'; /* tipo da fonte */
    font-size:90%;  /* tamanho da fonte */
    max-height:300px; /* edite a altura máxima da caixa*/
    display:block; /*unica caixa*/
    text-align:left;
    word-wrap:normal; /* sem quebra de texto*/
    padding:10px 10px 10px 20px; /* espaçamento das bordas*/
  }
  .ocultar{
    cursor: pointer;
    background:#555555;  /* edite cor de fundo*/
    border:3px outset #999999 auto;
    font-size:110%;  /* tamanho da fonte */
    color:#0bdcbc;  /* edite cor do link */
    text-align:center;
    padding:10px 10px 10px 20px; /* espaçamento das bordas*/
  }
  .mostrar{
    background:#202020;  /* edite cor de fundo*/
    padding:10px 10px 10px 20px; /* espaçamento das bordas*/
  }
Agora Procure pela tag </head> e cole o seguinte código ACIMA dela:
Obs.: já adicionado no o código a biblioteca jQuery versão 1.8, que esta sendo carregada direto da API do Google.
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 
    <!--Script revelar esconder Inicio -->
    <script type='text/javascript'>
      $(document).ready(function()
      {
        $(".mostrar").hide();
        $(".ocultar").click(function()
        {
          $(this).next(".mostrar").slideToggle(600);
        });
      });
    </script>
    <!--Script revelar esconder Final-->
Vamos testar as caixas começando pela "caixa de Citação" ou "blockquote":

et cetera
et ketĕra,corrente et 'setera/
locução conjunção
1. e outras coisas (encerrando enumeração como informação genérica e, ao mesmo tempo, conclusiva, definitiva ou comprobatória da extensão do que vinha sendo enumerado) [abrev.: etc. ].
2. e assim por diante.

para utilizar adicionar o HTML:
<blockquote> Citação </blockquote>
agora a "caixa de código" ou "code":
et cetera
et ketĕra,corrente et 'setera/
locução conjunção
1. e outras coisas (encerrando enumeração como informação genérica e, ao mesmo tempo, conclusiva, definitiva ou comprobatória da extensão do que vinha sendo enumerado) [abrev.: etc. ].
2. e assim por diante.
para utilizar adicionar o HTML:
<code> Codigo Principal fonte de pesquisa:</code>
e finalmente a caixa oculta ou Spoiler, para utilizar adicionar o HTML:
<div class="ocultar">
<b>&gt;&gt; Mostrar/Ocultar &lt;&lt; </b></div>
<div class="mostrar">
Insira aqui o conteúdo que deve ficar escondido.</div>
vai ficar assim

>> Mostrar/Ocultar <<

et cetera
et ketĕra,corrente et 'setera/
locução conjunção
1. e outras coisas (encerrando enumeração como informação genérica e, ao mesmo tempo, conclusiva, definitiva ou comprobatória da extensão do que vinha sendo enumerado) [abrev.: etc. ].
2. e assim por diante.

Principal fonte de pesquisa: http://www.mundoblogger.com.br/2010/10/caixa-exibir-codigos-no-post.html
                              http://www.mundoblogger.com.br/2009/11/efeito-revelaresconder-conteudo-no-post.html