Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

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 

- - 8 Comentarios
Tag

Comentarios (8)

  1. Este blog me parece de lo más genial!! muy buen diseño, me gusta mucho! :)
    http://3.bp.blogspot.com/-zPiK-QQoDNs/T97UvLo-0hI/AAAAAAAAAFU/ei1RBsZPjQ8/s400/quien-es-genial.jpg

    ResponderEliminar
  2. Hola, acabo de encontrar tu blog y me preguntaba si se pueden colocar mas botones (de cuatro en adelante) y si en vez de "Mostrar verde" y "ocultar verde" se pueden colocar imagenes

    ResponderEliminar
    Respuestas
    1. Agregar una imagen claro que se puede. Solo debes de cambiar
      Aqui se esconderá el verde y aparecerá el rojo

      por lo siguiente

      <img src="http://3.bp.blogspot.com/-zPiK-QQoDNs/T97UvLo-0hI/AAAAAAAAAFU/ei1RBsZPjQ8/s400/quien-es-genial.jpg ">

      y respecto agregar un botón mas: no se puede ya que un spoiles se utilza para mostrar y ocultar, lo que son dos botones el de mostrar y el de ocultar, si me entiendes.

      Espero que me hallas entendido

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
  3. Buen aporte... Solo una cosita:
    En el css dices que la clase es botonpequenio, pero al enlace le colocaste la clase smallbutton

    ResponderEliminar
    Respuestas
    1. Claro cambia smallbutton por botón pequeño, ya que el botón lo saque de otro tutorial...
      Saludos

      Eliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar