Tabs para tu pagina web jimdo

Hola les dejo este código muy popular como son los tabs conten

DESPUES DE AGREGAR LOS CODIGOS REFRESCA O ACTULAIZA TÚ PAGINA WEB.

Agregas los códigos así:

Ejemplo de los tabs conten en tu web cambiaran como los que tengo arriba. tu le puedes agregar estilos

aqui tu texto (1).
aqui tu texto (2)
aqui tu texto (3).

Este código agregalo en el head de tu web

smiley

<script type="text/javascript" language="javascript">
    var activeTab = 1;
    function openTab(tabId) {
       // reset old tab and content
       document.getElementById("tabLink"+activeTab).className = "tabLink";
       document.getElementById("tabContent"+activeTab).className = "tabContent";
       // set new tab and content
       document.getElementById("tabLink"+tabId).className = "tabLinkActive";
       document.getElementById("tabContent"+tabId).className = "tabContentActive";
       activeTab = tabId;
    }
</script>
<style>
.tabStrip ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.tabStrip li {
    margin: 0 2px 0 0;
    list-style-type: none;
    float: left;
}
.tabLink {
    display: block;
    text-decoration: none;
    padding: 5px;
    background: #e8e8e8;
    border: #dadada solid;
    border-width: 1px 1px 0 1px;
    color: #8a8a8a;
}
.tabLinkActive {
    display: block;
    text-decoration: none;
    padding: 5px;
    background: #e0e0e0;
    border: #c0c0c0 solid;
    border-width: 1px 1px 0 1px;
    color: #0066ff;
}
.tabContent {
    display: none;
}
.tabContentActive {
    display: block;
    clear: both;
    background: #f0f0f0;
    border: 1px #dedede solid;
    padding: 10px;
}
</style>

Este código agregalo en un widget html

smiley

<div class="tabStrip">
    <ul>
        <li>
            <a href="javascript:openTab(1);" class="tabLinkActive" id="tabLink1" name="tabLink1">Tab uno</a>
        </li>

        <li>
            <a href="javascript:openTab(2);" class="tabLink" id="tabLink2" name="tabLink2">Tab dos</a>
        </li>

        <li>
            <a href="javascript:openTab(3);" class="tabLink" id="tabLink3" name="tabLink3">Tab tres</a>
        </li>
    </ul>
</div>

<div class="tabContentActive" id="tabContent1">
    aqui tu texto (1).
</div>

<div class="tabContent" id="tabContent2">
    aqui tu texto (2)
</div>

<div class="tabContent" id="tabContent3">
    aqui tu texto (3).
</div>

Asi insertas un código html en jimdo

Asi insertas un código en el head jimdo

Escribir comentario

Comentarios: 9
  • #1

    Misterangelalonso (martes, 04 septiembre 2012 19:03)

    Que buen codigo Esthela buen Trabajo :D

  • #2

    profilestooge (miércoles, 19 septiembre 2012 16:40)

    todos los colores se cambian en el head

  • #3

    sensationtagangaonline (miércoles, 02 enero 2013 08:26)

    Gracias

  • #4

    doulas mexico (sábado, 22 junio 2013 22:12)

    muchas gracias justo lo que buscaba ya que no conosco nada de codigos qjeri

  • #5

    renoproductionsperu (viernes, 21 febrero 2014 09:28)

    como hago para poner es cuadrito de texto que dice codigo en el head

  • #6

    reik (martes, 10 junio 2014 16:51)

    que bueno

  • #7

    cristian araujo padilla (martes, 15 julio 2014 20:36)

    hola buenas noches,como hago para colocarle color

  • #8

    brindisreflexionestutorial (jueves, 11 septiembre 2014 09:10)

    Lo que se puede hacer con Jimdo
    Fondos con esquinas originales- http://brindisreflexionestutorial.jimdo.com/tutorial-codigos/texto-con-fondo/1-1/

    1.
    <center> <div style=
    "background-image: url('http://u.jimdo.com/www62/o/s74570cee1b505a12/img/ib873433bcfab8858/1390587625/std/image.gif'); width:400px; height:100px; -webkit-transform:skew(10deg); -moz-transform:skew(30deg); -o-transform:skew(30deg); tranform:skew(30deg);height: 100%;">
    <div style="padding: 3px;"> <div style="background-image: url('https://lh6.googleusercontent.com/-qMiTSbsOkJ8/U29NXR4QinI/AAAAAAAAYf8/50sYydutS1c/s168-no/2.gif'); height: 100%;"> <div style="padding: 20px;"> <div style=
    "background-image: url('http://u.jimdo.com/www62/o/s74570cee1b505a12/img/ib873433bcfab8858/1390587625/std/image.gif'); height: 100%;-webkit-border-radius: 50px;-moz-border-radius: 50px; border-radius: 50px;"> <div style="padding: 3px;">
    <div style= "background-image: url('https://lh5.googleusercontent.com/-2A9R6y-P5Fc/U95XYNJ6GfI/AAAAAAAAzmw/dRi7yqcQygA/w150-h140-no/32.jpg'); -webkit-border-radius: 50px;-moz-border-radius: 50px; border-radius: 50px;box-shadow: inset 1px 1px 10px #000000; height: 100%;">
    <div style="padding: 12px;"> <div style=
    "background-image: url('http://u.jimdo.com/www62/o/s74570cee1b505a12/img/ib873433bcfab8858/1390587625/std/image.gif'); -webkit-border-radius: 50px;-moz-border-radius: 50px; border-radius: 50px; width: 300px; background-repeat: repeat; height: 100%;">
    <div style="padding: 3px;"> <div style=
    "background-image: url('https://lh6.googleusercontent.com/-qMiTSbsOkJ8/U29NXR4QinI/AAAAAAAAYf8/50sYydutS1c/s168-no/2.gif');-webkit-border-radius: 50px;-moz-border-radius: 50px; border-radius: 50px; height: 100%;"> <div style="padding: 20px;"> <div style= "background-image: url('http://u.jimdo.com/www62/o/s74570cee1b505a12/img/ib873433bcfab8858/1390587625/std/image.gif'); -webkit-border-radius: 50px;-moz-border-radius: 50px; border-radius: 50px; height: 100%;"> <div style="padding: 3px;">
    <div style= "height: 100%; background-image: url('http://u.jimdo.com/www62/o/s54593b1f8c82bdd3/img/i0da5da056b8a0290/1380200464/std/image.jpg'); border: hidden 1px solid; -webkit-border-radius: 50px;-moz-border-radius: 50px; border-radius: 50px; box-shadow: inset 1px 1px 20px #000000;"> <div style="padding-top: 40px; padding-bottom: 20px;">
    <p style= "font-family:monotype corsiva;line-height:1em;color:#000000;font-weight:bold;font-size:21px;text-shadow:0px 0px 0px #d68080,1px 1px 0px #b18080,2px 2px 0px #808080,3px 3px 0px #9c0000,4px 4px 0px #730000,5px 5px 4px #F75E5E,5px 5px 1px #D59C80,0px 0px 4px #450000;">Texto</p>
    <img src="http://www.123gifs.eu/free-gifs/love/liebe-0332.gif" alt="" /> </div>
    <div style="text-align: right; padding-right: 20px;"> <span style="color: #000000; font-size: 12px;">☺ GloriaV</span> </div> </div> </div> </div> </div> </div> </div>
    </div> </div> </div> </div> </div> </div> </div> </div> </div></center>
    ....................
    2. <div style="width: 500px; height: 540px; margin: 0 0 20px 0; float: left; box-shadow: 0px 5px 10px #000000; border-radius: 130px 0px 130px 0px; -webkit-border-radius: 130px 0px 130px 0px; -moz-border-radius: 130px 0px 130px 0px; border: 4px double#eb744e; background-image: url('http://www.design-warez.ru/uploads/posts/2010-01/1263831344_schecasal23.gif'); background-size: cover; overflow: hidden;">
    <p class="los4" style="width: 390px; height: 420px; border: 2px dotted #eb744e; border-radius: 0px 130px 0px 130px; -webkit-border-radius: 0px 130px 0px 130px; -moz-border-radius: 0px 130px 0px 130px; color: grey; box-shadow: 0px 0px 0px 240px rgba(128,128,128,0.5);">&nbsp;</p>
    <span style="font-weight: 400; text-align: center; font-family: Harrington; font-size: 18px; line-height: 150%; text-shadow: 1px 2px 5px #ef908f,3px 2px 5px #fbae05, 1px 1px 1px #eb744e; column-count: 3;"><span style="color: #000000; font-family: 'Harrington';"><span style="font-family: Harrington;">Texto</span></span></span></div>

  • #9

    KaoruMishimaru (sábado, 13 diciembre 2014 05:29)

    ¡Gracias! Es muy bueno y muy fácil de personalizar, yo lo cambie totalmente el Css y un poco el Js es muy bueno, ya hace rato queria esto.