#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Modo de arranque rápido en Windows 10
Generador de Tooltip
Teclado Windows 10
Menu vertical jGlideMenu
 Poner un botón "Ir arriba" con jQuery
Eliminar fondo de una imagen rapidamente
Tener dos cuentas de WhatsApp en un solo movil
Formato Condicional para Excel- Resaltar fines de semana
Generadores de logos Online
SIDEBAR O BARRA LATERAL FLOTANTE Y DESPLEGABLE PARA TU BLOG
Como descubrir las contraseñas ocultas mediante asterisco
 Aprenda a filtrar un elemento DIV según su nombre de clase.

Imágenes con texto desplegable

Vamos a mostrar como podemos poner tanto imágenes como texto plegable en nuestro blog.




Instalar en nuestra plantilla el código Css.
Nos vamos a Tema > Editar HTML y buscamos la etiquea </b:skin> y pegamos arriba el siguiente código

Diseño con texto desplegable




Código CSS


/* Static state */
#container  {
 width: 400px;
 height: 400px;
 position: relative;
 border: 1px solid #ccc;
 background: url(http://artisticthings.com/wp-content/uploads/2010/04/apreis6-400x400.jpg) 0 0 no-repeat;
}
.parent1  {
 height: 0;
overflow: hidden;
-webkit-transition-property: height;
-webkit-transition-duration: .5s;
-webkit-perspective: 1000px;
-webkit-transform-style: preserve-3d;
-moz-transition-property: height;
-moz-transition-duration: .5s;
-moz-perspective: 1000px;
-moz-transform-style: preserve-3d;
-o-transition-property: height;
-o-transition-duration: .5s;
-o-perspective: 1000px;
-o-transform-style: preserve-3d;
transition-property: height;
transition-duration: .5s;
perspective: 1000px;
transform-style: preserve-3d;
}
.parent2 {
 /* full content during animation *can* go here */
 }
.parent3 {
height: 56px;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-webkit-transform: rotateX(-90deg);
-webkit-transform-origin: top;
-moz-transition-property: all;
-moz-transition-duration: .5s;
-moz-transform: rotateX(-90deg);
-moz-transform-origin: top;
-o-transition-property: all;
-o-transition-duration: .5s;
-o-transform: rotateX(-90deg);
-o-transform-origin: top;
transition-property: all;
transition-duration: .5s;
transform: rotateX(-90deg);
transform-origin: top;
}

/* Hover states to trigger animations */
  #container:hover .parent1 { height: 111px; }
  #container:hover .parent3 {
   -webkit-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg);
   height: 111px;
  }

h3.post-title {
 font-family: 'Poppins', sans-serif;
}


body {
 font-family: 'Poppins', sans-serif;
}



.header h1 {
font-family: 'Poppins', sans-serif;
}


.post-body {
  font-family: ‘Poppins’;
}


h3.post-title {
 font-family: 'Poppins', sans-serif;
}


body {
 font-family: 'Poppins', sans-serif;
}



.header h1 {
font-family: 'Poppins', sans-serif;
}


.post-body {
  font-family: ‘Poppins’;
}

 Ahora el HTML lo van a ubicar segun su criterio, puede ser en una entrada o hasta un gadget
Código HTML


<center><div id="container">
  <div class="parent1">
   <div class="parent2">
    <div class="parent3">
    <img src="https://blogger.googleusercontent.com/img/proxy/AVvXsEjwYU-9zR-1qiyl68ObLwTwg-pEq3vVYPBiQOVp8hhVK_MITQCArsKMh5HpL2etEO5VsAMqPBAlMdOrCw_GYK3G7ZvgzC1So9t9g-2bRwwkrv8BFyRRKLJtpNb0n_YLaVZD09eI8ks5xDEgPJtW=" style="opacity: .7;">    </div>
   </div>
  </div>
  </div></center>

Diseño con texto desplegable


Código CSS


/* Static state */
#container  {
 width: 400px;
 height: 400px;
 position: relative;
 border: 1px solid #ccc;
 background: url(http://static1.actualidadiphone.com/wp-content/uploads/2010/11/AngryBirds_Xmas_GameIcon_512x512-400x400.png) 0 0 no-repeat;
}
.parent1  {
 height: 0;
overflow: hidden;
-webkit-transition-property: height;
-webkit-transition-duration: .5s;
-webkit-perspective: 1000px;
-webkit-transform-style: preserve-3d;
-moz-transition-property: height;
-moz-transition-duration: .5s;
-moz-perspective: 1000px;
-moz-transform-style: preserve-3d;
-o-transition-property: height;
-o-transition-duration: .5s;
-o-perspective: 1000px;
-o-transform-style: preserve-3d;
transition-property: height;
transition-duration: .5s;
perspective: 1000px;
transform-style: preserve-3d;
}
.parent2 {
 /* full content during animation *can* go here */
 }
.parent3 {
height: 56px;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-webkit-transform: rotateX(-90deg);
-webkit-transform-origin: top;
-moz-transition-property: all;
-moz-transition-duration: .5s;
-moz-transform: rotateX(-90deg);
-moz-transform-origin: top;
-o-transition-property: all;
-o-transition-duration: .5s;
-o-transform: rotateX(-90deg);
-o-transform-origin: top;
transition-property: all;
transition-duration: .5s;
transform: rotateX(-90deg);
transform-origin: top;
}

/* Hover states to trigger animations */
  #container:hover .parent1 { height: 111px; }
  #container:hover .parent3 {
   -webkit-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg);
   height: 111px;
  }

 Ahora el HTML lo van a ubicar segun su criterio, puede ser en una entrada o hasta un gadget
Código HTML


<center><div id="container">
  <div class="parent1">
   <div class="parent2">
    <div class="parent3">
   <div class="text-parent3" style="color: #fff;background: rgba(0, 0, 0, .5)">
     <span style="color: #fff; font-size: 24px; display: block; padding: 20px 0 0 20px; 1px 1px 0 rgba(0, 0, 0, 0.25)">TITULO</span>
     <span style="color: #fff; font-size: 16px; display: block; padding: 20px 0 0 100px; 1px 1px 0 rgba(0, 0, 0, 0.25)">Subtitulo</span>
    </div>    </div>
   </div>
  </div>
  </div></center>





Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso


 Print Friendly and PDF

Publicar un comentario

0 Comentarios