Tutoriales Sobre Blogger: Mostrar u Ocultar objetos con spoiler para blogger

En este tutorial veremos como crear un Spoiler para blogger un poco particular. Como muchos saben y para los que no. Un spoiler se utiliza para ocultar o mostrar algunos contenidos que seguramente son demasiado
extenso lo que cansaría a un usuario desplazare hacia abajo, en esas ocasiones se utiliza un spoiler

Antes de comenzar veremos una demostración en vivo: 

Mostrar VerdeOcultar Verde

Aqui se escondera el verde y aparecerá el rojo

Aqui se esconderá el rojo y aparecerá el verde

Comencemos:

Solo agregaremos en nuestra plantilla el codigo CSS de los botones ya que el estilo que le daremos a los spoiler dentro lo utilizaremos solo dentro de la entrada, mas adelante explico. 

• Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente codigo CSS.

.botonpequenio { display:inline-block; text-decoration:none; outline:none; cursor:pointer; font:normal 12px/1em HelveticaNeue, Arial, sans-serif; padding:6px 11px; color:#555; text-shadow:0 1px 0 #fff; background:#f2f2f2; background:linear-gradient(#fff, #f9f9f9, #f0f0f0);; border:1px solid #d9d9d9; border-color:#d9d9d9 #d6d6d6 #d1d1d1;border-radius:4px;box-shadow:0 1px 2px #eaeaea, inset 0 1px 0 #fbfbfb;margin-right:10px;}
a.botonpequenio, a:visited.botonpequenio {color:#999; text-shadow:0 1px 0 #fff;text-decoration:none}
.botonpequenio a:hover{color:#353535; text-decoration:none}
.botonpequenio:hover,.botonpequenio:focus { color:#555; background:#efefef; background:linear-gradient(#fff, #f9f9f9, #e9e9e9);border-color:#ccc;box-shadow:0 1px 2px #e0e0e0, inset 0 1px 0 #fbfbfb;}
.botonpequenio:active { position:relative; top:1px; color:#555; background:#efefef; background:linear-gradient(#fff, #eaeaea, #f4f4f4);border-color:#c6c6c6;box-shadow:0 1px 0 #fff, inset 0 0 5px #ddd;} 

• Paso 4: Guardamos los cambios realizados en la plantilla.

Dentro de una entrada agregaremos el código HTML

<a class="smallbutton" href="javascript:void(0)" onclick="document.getElementById('Verde').style.display='block';document.getElementById('Rojo').style.display='none'">Mostrar Verde</a><a class="smallbutton" href="javascript:void(0)" onclick="document.getElementById('Verde').style.display='none';document.getElementById('Rojo').style.display='block'">Ocultar Verde</a><br />
<br />
<div id="Rojo">
Aqui se escondera el verde y aparecerá el rojo</div>
<div id="Verde">
Aqui se esconderá el rojo y aparecerá el verde </div>
<br />
<br />
<style scoped="" type="text/css">
#Rojo {
width:100%; Ancho de la caja 
height:100px; Alto de la caja
background:#c94e5c; Color Rojo
color:#fff; Color del texto
text-align:center; Posición del texto
margin:0 auto;
text-transform:uppercase;
font-size:10px; Grande de la letra
line-height:30px; Posición de la texto separado 
vertical-align: middle;
}
#Verde {
width:100%;  Ancho de la caja 
height:100px;;  Alto de la caja
background:#64ba4d; Color Verde
color:#fff; Color del texto
text-align:center;  Posición del texto
margin:0 auto;
text-transform:uppercase;
font-size:10px; Grande de la letra
line-height:30px; Posición de la texto separado 
vertical-align: middle;
display:none;
}
</style></div>

Listo ya estaríamos disfrutando de nuestro spoiler  un poco particular