Tutoriales Sobre Blogger: Acordeon para Blogger con solo CSS

En este tutorial veremos como crear un acordeón utilizando únicamente CSS. Un sistema de acordeon consiste en mostrar/ocultar múltiples contenidos


Antes de Comenzar veremos una demostración:

Demostración

Comencemos:

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

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el código CSS 

.block{
background: #369;
color: #fff;
padding-top: 5px;
border: solid 1px #ddd;
border-top:none;
line-height:25px;
}
.block input[type='radio']:checked ~ .info{
height: 130px;
transition: height 0.5s linear;
-moz-transition:height 0.5s linear;
-webkit-transition:height 0.5s linear;
-o-transition:height 0.5s linear;
}
input[type='radio']{
display: none;
}
label{
width: 470px;
margin-left: 15px;
cursor: pointer;
}
span{
font-weight: bold;
}
.info{
background: #F4F4F4;
color: #555;
font-size:12px;
line-height:17px;
height: 0;
padding:0 15px;
display: block;
overflow: hidden;
box-sizing: border-box;
transition: height 0.5s linear;
-moz-transition:height 0.5s linear;
-webkit-transition:height 0.5s linear;
-o-transition:height 0.5s linear;
} 

• Paso 4: Guardamos los cambios realizados en nuestra plantilla

Agregar el Acordeón en nuestras entradas

• Paso 5: En nuestra entrada agregamos el codigo HTML 

<div class="block">
<input id="bloque_1" name="bloque_1" type="radio" />
  <label for="bloque_1">Bloque 1</label>
  <br />
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel libero quis massa interdum fermentum. Aenean lorem purus, eleifend condimentum fermentum vitae, euismod a turpis. Vivamus a pellentesque nisi. Quisque consequat lobortis nisl, ac hendrerit ligula placerat at. Cras id dui id enim gravida sagittis at vitae dui. Etiam convallis magna vel urna sodales consequat. </div>
</div>
<div class="block">
<input id="bloque_2" name="bloque_1" type="radio" />
  <label for="bloque_2">Bloque 2</label>
  <br />
<div class="info">
Sed luctus elementum augue, vel eleifend diam condimentum posuere. Pellentesque quis erat et nunc faucibus rutrum eu in ante. Curabitur at auctor velit. Suspendisse potenti. Donec at velit ac nisl tempus vestibulum. Vestibulum bibendum, mi sed interdum aliquet, ligula tellus euismod odio, lacinia adipiscing lacus ipsum ut tortor. Cras id dui id enim gravida sagittis at vitae dui. Etiam convallis magna vel urna sodales consequat. </div>
</div>
<div class="block">
<input id="bloque_3" name="bloque_1" type="radio" />
  <label for="bloque_3">Bloque 3</label>
  <br />
<div class="info">
Nullam elit sem, egestas sed blandit sit amet, posuere at diam. Sed at eros et purus commodo malesuada. Aenean et dui nunc, nec pharetra libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam turpis orci, cursus pulvinar feugiat nec, sollicitudin quis enim. Cras id dui id enim gravida sagittis at vitae dui. Etiam convallis magna vel urna sodales consequat. </div>
</div>

Nota:-  Solo deberás cambiar el Titulo del Bloque y el articulo de dicho bloque