domingo, septiembre 29, 2013

[ TutosBlogs ] Multi-pestañas con efecto Jquery

By: Ghaaby Captor | Fecha: 9/29/2013 |
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:






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 )


 

<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


 

.tabber {
    background: url("http://1.bp.blogspot.com/-VcUkVIZk_tw/UjZDwNQqVpI/AAAAAAAARUE/kjdyx7f62FY/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


 

.tabber {
    background: url("http://1.bp.blogspot.com/-XEeGo8qo7eU/Uji2rcVL3BI/AAAAAAAARUY/jnpVGjGno2M/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


 

.tabber {
    background: url("http://2.bp.blogspot.com/-EBXNmoeZ1v0/Uj9nQ15IqFI/AAAAAAAARU4/AeHjwsozDn8/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!
avatar
♥Luna♥
Admin
29 de septiembre de 2013, 8:45

es muy lindo :3 .me encanta este efecto *-* capas lo use y claro k dare los creditos :3

avatar
Neko-chan
Admin
29 de septiembre de 2013, 8:54

me encanto el tuto *0* gracias por compartirlo :3 me encanta tu voz es super linda, ya quisiera yo tener una voz igual D: lo usare cuando pueda :D
saluditos!!! >w<

avatar
Rei Osaki:
Admin
29 de septiembre de 2013, 9:13

Está muy interesante!! :D ¿De dónde sacas todas estas ideas?

Y por cierto, bonita voz ^^

avatar
кuму
Admin
29 de septiembre de 2013, 10:08

me encantaaaaaaaaaaaaaaaaa muchas gracias por cierto el blog esta fantastico

avatar
POPOTAN
Admin
29 de septiembre de 2013, 10:41

>.< Muy bueno Ighaby, muy bueno el tutorial, me gusto mucho... quizas lo use cuando tenga algo de tiempopara editar mi super olvidado blog TTwTT, bueno aqui despues de tiempo, vera que te hice una entrada especial (La verdad que es lo primero que se me vino a la mente) buen tambein para ver que se ha modificado un poco las plantillas de blogger, al punto que ahora tus lindos emoticones no funcionan, es decir que no sale el codigo para pegarlos en el mensaje.,.. deberias arregalrlo...
Bueno no pienso tampoco darle un gran cambio al blog, pero si ya tengo casi listo al seccion de publicidad en donde solo estaran 3 blogs... bueno solo pasaba a aludar para que sepas que aun sigo con vida WTF... vi todas tus anteriores entradas, pero no podia comentar por que mi INFESNET, esta algo raro y no e dejó entra a mi cuenta... quzias sea por el poco uso que le estaba dando... bueno suete ne todo y besotes.

avatar
yukii
Admin
29 de septiembre de 2013, 13:15

muchas gracias por el tutorial ! :) esta muy bonito :3

avatar
Citu
Admin
29 de septiembre de 2013, 17:52

Uy me encantaron cuando este mejorcita y mas avispada lo reviso. Un beso y te me cuidas

avatar
29 de septiembre de 2013, 17:59

Muy buen tutorial! Gracias Ghaby!

avatar
RainboWxMikA
Admin
29 de septiembre de 2013, 22:33

Gracias por el tutorial,se ven muy bien lastima que yo no uso pestañas ni sé ponerlas XD

avatar
YoSueño
Admin
30 de septiembre de 2013, 4:34

Aquí estoy comentándote, para decirte que es muy interesante lo que nos pones.Un ABRAZO

!!FELIZ COMIENZO DE SEMANA!!

avatar
Ludymila
Admin
30 de septiembre de 2013, 6:05

Hola cielo son preciosos los estilos. gracias por la info. besos

avatar
Franela
Admin
30 de septiembre de 2013, 9:23

¡Gracias por la idea!

BSS...desde el blog de Fr@nela

avatar
1 de octubre de 2013, 13:35

Hola

Se ve muy útil, muchas gracias por el tutorial n.n

Saludos :D

avatar
Lee Rae Mi
Admin
1 de octubre de 2013, 18:56

yay!Gracias por el tutorial!
Adoro tus tutoriales!
te kielo!