Poner pestañas (tabs) CSS en blog de blogger - multiventanas en una entrada

Un nuevo post, hoy vamos a ver como incoporar en nuestro blog o cualquier web plataforma múltiples pestañas para mostrar contenido, es decir, pestañas o tabs con efecto CSS para darle un toque más moderno.

Algo así se ve...

 Pero bueno como con la imagen anterior no es suficiente veamos un demo:

¿Genial no? vamos a agregarlo entonces:

EL TUTORIAL...

1. Lo primero será saber donde queremos pegar las pestañas, recuerda que lo puedes pegar en (EL HTML de una entrada, Gadget HTML, Directamente en la plantilla código). 

2. Decidido donde se va pegar, copiamos el siguiente código completo tal cuál:

<div id="contenedor">
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1">Pestaña1</label>
  
    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">Pestaña2</label>
  
    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
    <label for="tab-3" class="tab-label-3">Pestaña3</label>
  
    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
    <label for="tab-4" class="tab-label-4">Pestaña4</label>
                          
    <div class="content">
        <div class="content-1">
            Contenido1
        </div>
        <div class="content-2">
            Contenido2
        </div>
        <div class="content-3">
            Contenido3
        </div>
        <div class="content-4">
            Contenido4
        </div>
    </div>
</div>

<style>#contenedor {
    margin: 40px auto;
    width: 750px;  /* Ancho del contenedor */
box-sizing: border-box;
-moz-box-sizing: border-box;
}

#contenedor input {
height: 32px;
visibility: hidden;
}

#contenedor label {
float: left;
cursor: pointer;
font-size: 15px;  /* Tamaño del texto de las pestañas */
line-height: 40px;
height: 40px;
padding: 0 20px;
display: block;
color: #888;  /* Color del texto de las pestañas */
text-align: center;
border-radius: 5px 5px 0 0;
background: #eee;  /* Fondo de las pestañas */
margin-right: 5px;
}

#contenedor input:hover + label {
background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
}

#contenedor input:checked + label {
background: #FFDA91;  /* Fondo de las pestañas al presionar */
color: #444; /* Color de las pestañas al presionar */
z-index: 6;
line-height: 45px;
height: 45px;
position: relative;
top: -5px;
-webkit-transition: .1s;
-moz-transition: .1s;
-o-transition: .1s;
-ms-transition: .1s;
}

.content {
background: #FFDA91;  /* Fondo del contenido */
position: relative;
width: 100%;
height: 350px;  /* Alto del contenido */
padding: 30px;
z-index: 5;
border-radius: 0 5px 5px 5px;
}

.content div {
position: absolute;
z-index: -100;
opacity: 0;
transition: all linear 0.1s;
}

#contenedor input.tab-selector-1:checked ~ .content .content-1,
#contenedor input.tab-selector-2:checked ~ .content .content-2,
#contenedor input.tab-selector-3:checked ~ .content .content-3,
#contenedor input.tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.1s;
-moz-transition: all ease-out 0.2s 0.1s;
-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;
} </style>

3. Guarda y listo este se debe visualziar sin problema alguno tal cual como en el demo.

Explicación de colores 

-  En color ROJO está el nombre de las pestañas, ponle el de tu gusto y queda.

- En color  AZUL tenemos el contenido de cada pestaña respectivamente allí podremos poner más código HTML, imágenes, vídeos etc.- "Cuestión de imaginación". 

-  En color VERDE tenemos los respectivos comentarios que señalan en el código CSS las modificaciones para color de nuestras pestañas y otras. 

Hecho esto ya quedó el truco muy fácil y breve, espero les guste.

Hasta la próxima,