23 jul. 2012

Tutorial: hacer una cajita con multipestañas en gadget para poner texto o links

Les traje un tuto de algo muy curioso para mostrar informacion ^o^

Se trata de un como poner una cajita con informacion con multipestañas en un gadget HTML/Javasript n_n
Les muestro la imágen para que se den una idea..:



Es muy práctico para dar información o crearte hasta un menú con links *.*
Sencillo, hacemos lo siguiente..

1: vamos a edición HTML en plantilla y pulsamos: Ctrl+F para buscar en la barrita rapidamente ^^
2:Buscamos este código:  ]]></b:skin> 
3:Arriba del código que buscamos, pegamos lo siguiente:

ul.bltabcaja {height:24px;margin: 0 auto;width: 100%;padding: 0;float: left;list-style: none;list-style-type: none;}ul.bltabcaja li {height:23px;line-height:23px;overflow: hidden;background: #b3e0b5;float: left;position: relative;margin: 0 auto;padding: 0;border-left: none;margin-bottom: -1px;border: 1px solid #999999;}ul.bltabcaja li a {padding: 0 18px;font-size: 14px;text-decoration: none;color: #000000;display: block;outline: none;}ul.bltabcaja li a:hover {text-decoration: none;background:#81D585;}ul.bltabcaja li a:active {background: #6db671;}#bltabcaja2 {width: 218px;clear: both;border-top: none;border: 1px solid #999999;overflow: hidden;float: left;background: #ffffff;}.bltabcaja_contenido {font-size: 14px;padding: 20px;}html ul.bltabcaja li.actual a:hover {background: #ffffff;border-bottom: none;}


Si os fijáis, ahí tenéis los códigos de los colores para modificar el color de las pestañas, el fondo y demás ^^
Si tienes alguna duda de algún código de color avisame.. n.n

Cuando pegues eso, buscas el siguiente código: </head>
Y cuando lo hayas encontrado, arriba pegas este otro código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){$(&quot;.bltabcaja_contenido&quot;).hide();$(&quot;ul.bltabcaja li:first&quot;).addClass(&quot;active&quot;).show();$(&quot;.bltabcaja_contenido:first&quot;).show();$(&quot;ul.bltabcaja li&quot;).click(function(){$(&quot;ul.bltabcaja li&quot;).removeClass(&quot;active&quot;);$(this).addClass(&quot;active&quot;);$(&quot;.bltabcaja_contenido&quot;).hide();var bltababierta = $(this).find(&quot;a&quot;).attr(&quot;href&quot;);$(bltababierta).fadeIn();return false;});});</script>

Ahora guardas plantilla ^^


Bien, ya lo tendrías preparado para siempre que quieras usarlo, ahora para ponerlo, haces lo siguiente..

Vas a diseño>>añadir gadget>>HTML/Javasript


Y pegas este código, que es el código que tienes que poner cada vez que quieras hacer un gadget con esa cajita ^^ :


<ul class="bltabcaja">
<li><a href="#bl1">Titulo pestaña 1</a></li>
<li><a href="#bl2">Titulo pestaña 2</a></li>
</ul>
<div id="bltabcaja2">
<div id="bl1" class="bltabcaja_contenido">
Contenido pestaña 1</div>
<div id="bl2" class="bltabcaja_contenido">
Contenido pestaña 2</div>
</div>

Donde pone: titulo pestaña 1, pones el titulo de la primera pestaña, y donde pone: titulo pestaña 2, pones el titulo de la segunda pestaña n_n

Donde pone: contenido pestaña 1 pones el texto o los links que quieras poner dentro de la cajita, y haces igual con el contenido pestaña 2 ^^ 


 Si quieres agregar otra pestaña.. :

Debajo de donde dice: Contenido pestaña 2 , ves esto:

</div>
Aqui pon el contenido de la nueva pestaña 3
</div>


Pues como dije [donde está en rojito] ahí pones el contenido de la pestaña 3 que quieras hacer ^^
Pero también tienes que poner el titulo de la nueva pestaña 3, pues solamente.. :

<li><a href="#bl1">Titulo 1</a></li>
<li><a href="#bl2">Titulo 2</a></li>
<li><a href="#bl3">Titulo 3</a></li> 
</ul>

Pues debajo de los titulos de pestañas que tenia, agregas abajo otro más así como puse en rojo arriba ^^
Una cosa, puedes poner todas las pestañitas que quieras, pero donde dice: ''#bl3'' no dejes el mismo número, sino si es la cuarta pestaña ''#bl4'' si es la quinta ''#bl5'' y asi susesivamente n_n

Seguro que te servirá de ayuda, si no te sale o sigues con duditas hazmelo saber con un comentario ok?^^

Byee~~

                                                                      ~Deja tu saludito~

3 comentarios:

  1. GRACIAS..LO BUSQUE COMO LOCA!!!GRACIAS!!

    ResponderEliminar
  2. Dayana Cortes:

    Jaja, me lo imagine a ver tu otro coment, por eso me pasé a tu blog a dejartelo ^^
    Tengo muchos tutos, arriba en el menú en la sección de tutoriales, no hay que dudar si se quiere pedir un tuto si?besos<3

    ResponderEliminar

Gracias por dejar tu saludito ·ω· Si tienes algún error o necesitas ayuda con un tutorial, dale a ''haz click aquí'' en la cabecera y mándame un e-mail diciéndome lo que necesitas y si sólo tienes dudas de algo te contestaré en tu blog para que puedas verlo♥♥
––––•(-•RECUERDA: Si quieres afiliar y/o que visite tu blog, pídemelo en ''Afiliados'' en el menú de la cabecera, o en la C-Box (sólo en esos dos sitios, o sino no aceptaré)`•.¸¸.•´´¯`••._.•