Tutoriales: Multi-pestañas con efecto Jquery

Y asi son las pestañas =)

      

       Hola mis loqueros!! Hoy hablaremos sobre este tutorial que espero que les sea muy util y la verdad es que es muy sencillo se trata sobre unas pestañas en donde pueden colocarle cualquier cosa con tal de que tengan el codigo HTML ya con eso basta! Pueden ver el demo clic en el boton.

 

★ VIDEO TUTORIAL ★

ESCRITORIO►PLANTILLA►EDICIÓN DE HTML►CTRL F (PARA BUSCAR)

►Primero buscan a </head> y arriba de este pegas el siguiente codigo:

Script

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function(){<br />  var alltabs = $('div.tab');<br />  var tabs = $('#tabs');<br />  alltabs.first().show();<br />  tabs.find('li:first').addClass('on');<br />  tabs.find('a').on('click', function() {<br />    alltabs.hide()<br />    tabs.find('li').removeClass('on')<br />    $(this).parent().toggleClass('on')<br />    var tabref = $(this).attr('rel')<br />    $(tabref).fadeIn(500)<br />    this.blur()<br />    return false;<br />  })<br />})<br />//]]><br /></script>

►Segundo Ahora debes colocar el codigo para mostrar las pestañas, es decir, en algun gadget o en una entrada ( donde usted quiera que se vea )

HTML
 

<div class='tabber'>
  <ul id='tabs'>
    <li><a href='#' rel='div.tab2'> titulo 2 </a></li>
    <li><a href='#' rel='div.tab1'> titulo 1 </a></li>
  </ul>
  <div class='tab tab1'>
    
AQUI CUALQUIER COSA QUE QUIERA MOTRAR EN LA PESTAÑA 1

  </div>
  <div class='tab tab2'>

AQUI CUALQUIER COSA QUE QUIERA MOTRAR EN LA PESTAÑA 2

  </div>
</div>

►Y ahora elija el diseño de su caja. Solo copia y pega el codigo de una de las cajas (hechas por mi)  arriba de ]]></B:SKIN>

 

Pestañas de Miku

CSS
 

.tabber {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU1f2Q5fqSPyNlAZXRFVE-pxbVEK_sWz0VjbbYSXX96UW6ap94UEZyA_4EC45qxFZAxlxMd1jHiklxywnGFmcD81mdRrtsYrGloRRqhTuKzLakaGChrfJ5fM6eTevx7bUpuFZ0BfWsr3w/s1600/gif1.gif") no-repeat scroll 0 0 transparent;
    height: 530px;
    text-decoration: none;
}
#tabs {
    width: 100%;
}
#tabs li {
    border-radius: 10px 0 0 2px;
    float: right;
    height: 2em;
    margin-left: -120px;
    margin-right: 185px;
    margin-top: 210px;
    text-decoration: none;
}
#tabs li.on {
    color: #CCCCCC;
}
#tabs li a {
    color: #666666;
    font-family: Verdana;
    font-size: 18px;
    padding: 0 0 0 15px;
    text-decoration: none;
}
#tabs li.on a {
    color: #666600;
}
#tabs li a:hover {
    color: #333300;
}
#tabs li.on a:hover {
    color: #000000;
}
.tab {
    clear: both;
    display: none;
    font-size: 12px;
    height: 210px;
    margin-bottom: 50px;
    margin-left: 30px;
    overflow: auto;
    padding: 20px;
    width: 395px;
}

Pestañas de Magic

CSS
 

.tabber {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNtSGO_rKWrje6Xp_tWHDOcdBXEnttU-SaP4Z7VC3O465Jjlb749cCltJEW_zvyqMh5LWnVzOnIMvbgSUW55T7Mf4V1jZKq3XUHkVTmBlN6VWwl18WnD-eLtpvD9Of8IOIzg3K2kz1VPE/s1600/gagdet.png") no-repeat scroll 0 0 transparent;
    height: 540px;
    text-decoration: none;
    width: 300px;
}
#tabs {
    width: 100%;
}
#tabs li {
    border-radius: 10px 0 0 2px;
    float: right;
    height: 2em;
    margin-left: -125px;
    margin-right: 150px;
    margin-top: 190px;
    text-decoration: none;
}
#tabs li.on {
    color: #CCCCCC;
}
#tabs li a {
    color: #2E9AFE;
    font-family: Verdana;
    font-size: 18px;
    padding: 0 0 0 15px;
    text-decoration: none;
}
#tabs li.on a {
    color: #666600;
}
#tabs li a:hover {
    color: #333300;
}
#tabs li.on a:hover {
    color: #000000;
}
.tab {
    clear: both;
    display: none;
    font-size: 12px;
    height: 250px;
    margin-bottom: 50px;
    margin-left: 20px;
    margin-top: 10px;
    overflow: auto;
    padding: 10px 50px 50px;
    width: 160px;
}

Pestañas Luna

CSS
 

.tabber {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ7GikhgfkYo7GWSuWRR_G9pPHiUYZJ7icsF27W9-Zp4cvtZUl6AcH9lEx02HV_GkioM_Qcw3ld5bXkqueF9LxISbgdPRaXqlUKrSDKusWRVoLX7GghsLXLgN_HOFtDNPglFKJ7HGvIkc/s1600/luna.png") no-repeat scroll 0 0 transparent;
    height: 540px;
    text-decoration: none;
    width: 300px;
}
#tabs {
    width: 100%;
}
#tabs li {
    border-radius: 10px 0 0 2px;
    float: right;
    height: 2em;
    margin-left: -30px;
    margin-right: 100px;
    margin-top: 155px;
    text-decoration: none;
}
#tabs li.on {
    color: #CCCCCC;
}
#tabs li a {
    color: #B40404;
    font-family: Verdana;
    font-size: 18px;
    padding: 0 0 0 15px;
    text-decoration: none;
}
#tabs li.on a {
    color: #666600;
}
#tabs li a:hover {
    color: #333300;
}
#tabs li.on a:hover {
    color: #000000;
}
.tab {
    clear: both;
    display: none;
    font-size: 12px;
    height: 250px;
    margin-bottom: 50px;
    margin-left: 20px;
    margin-top: 10px;
    overflow: auto;
    padding: 10px 50px 50px;
    width: 160px;
}

Y listo esto es todo! GUARDAS y ya puedes ver los resultados =)

Gracias por tu visita!