September 2013 | ghaabycaptor-Telemanagement

Sunday, September 29, 2013

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!

Saturday, September 28, 2013

Anime: Shakugan No Shana Temporda 1, 2 y 3 Sub. Español MF

Titulo: Shakugan No Shana
Género: Drama, Acción, Romance, Misterio, Fantasía, Comedia
Año de emisión: 2005
Episodios/Capitulos: 24/24 (Terminada)
Audio: Japonés
Subtitulos: Español
Censura: Sin Censura
Formato: Mp4
Peso: 60-70 mb aprox.
Calidad: Excelente
Uploader: By choco - descargando-anime.com
Servidor: Mediafire (MF)

Sakai Yuji llevaba una vida normal de estudiante hasta que un día descubre que ya había muerto, que era sólo una antorcha que poco a poco se iba apagando hasta desaparecer. Sin embargo, no sabía que además es objetivo de los devoradores de almas del Mundo Carmesí por la peculiaridad de tener un mistes como morador en su interior. Para evitar que los devoradores se hagan con el mistes, una Neblina de la Llama se encarga de que esto no ocurra Yuji al no saber como llamarla x q no posee un nombre propio decide ponerle el nombre de Shana esto los llevará a tener batallas con los devoradores y conllevar una relación algo complicada, sobre todo para Shana, quien no sabe cómo lidiar con la vida cotidiana de un alumno de secundaria.