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 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 


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 
- - 3 Comentarios
Tag

Comentarios (3)

  1. Hola buenas tardes, que chévere tienes el blog y los trucos; solo hay una cosita que no me gusta es que no colocas las fechas en que posteaste las entradas

    ResponderEliminar
    Respuestas
    1. Anonimo gracias por tu comentario, la verdad que tenias razón tiene una mejor vista. Gracias y espero que sigas visitándonos

      Eliminar
  2. Excelente tutorial, lo acabo de colocar en mi Blog y funciona a la perfección.. Saludos.

    ResponderEliminar
:))
:((
: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