Tutoriales Sobre Blogger: Crear Tabla con Pestaña con CSS y JQuery para Blogger

En este tutorial veremos como crear Pestañas con CSS y JQuery para Blogger. Muchos de los blogger buscan una manera mas sencilla de ocupar menos espacio en las
entradas para que los usuarios que leen no tengan que estar bajando todo la pagina para seguir leyendo, con este tutorial lograremos de ocupar menos espacio.

Antes de comenzar veremos una demostración 

Demostración

Comencemos 

Primero paso agregaremos JQuery

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

</head>

• Paso 3: Justo por encima </head> pegamos el código JQuery

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
   
    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return      
        }
        else{            
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });
});
</script>

Segundo paso Agregaremos el código CSS

• Paso 1: Todavía en la plantilla buscamos la siguiente linea 

]]></b:skin> 

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

#tabs{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#tabs li{
  float: left;
  margin: 0 .5em 0 0;
}
#tabs a{
  position: relative;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);
  padding: .7em 3.5em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  border-radius: 5px 0 0 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}
#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
  background: #fff;
}
#tabs a:focus{
  outline: 0;
}
#tabs a::after{
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.5em;
  bottom: 0;
  width: 1em;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transform: skew(10deg);
  border-radius: 0 5px 0 0;
}
#tabs #current a,
#tabs #current a::after{
  background: #fff;
  z-index: 3;
}
#content
{
    background: #fff;
    padding: 2em;
    height: 220px;
    position: relative;
    z-index: 2;     border-radius: 0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

• Paso 3: Guardamos los cambios realizados en nuestra plantilla

Tercer Paso agregaremos el código HTML en la entrada a crear 

<ul id="tabs">
    <li><a href="#" name="tab1">UNO</a></li>
    <li><a href="#" name="tab2">DOS</a></li>
    <li><a href="#" name="tab3">Tres</a></li>
    <li><a href="#" name="tab4">Cuatro</a></li>  
</ul>
<div id="content">
    <div id="tab1">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 id="tab2">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 id="tab3">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 id="tab4">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>

Ya tendríamos nuestra Tabla con Pestaña terminada

Nota:-  Solo tendríamos que cambiar el titulo de cada pestaña y el contenido