domingo, 29 de septiembre de 2013

Tab Widget Animado Con JQuery Para Blogger

By andante77 7:24 a.m. , , , , , , Leave a Comment
En super trucos te traigo un "Tab widgets" o "Widget Pestaña" que es muy comodo de aplicar a tu blog de blogger y ocupa muy poco espacio. Te  mostrare como añadir este tab widget especial a tu blogger.jQuery tabs son estilizados y bastante conocido entre los blogeros.Este widget es hecho con codigo como Css y jQuery.Este tab widget trabaja en cada navegador moderno.Pero no con IE.
tab widget para blogger

Demo en http://fixcd.blogspot.com/

Como Añadir el Widget Jquery Animado a Blogger


1. Entra en Blogger > Plantilla
2. Encuentra el siguiente codigo ]]></b:skin>
3. Pega el codigo de abajo antes de etiqueta]]></b:skin>

<style>

.b, .c{ display:none;}

.buttons{

    border-bottom:solid #d1c8b8 4px;

    display:block;

    padding:8px;

    width:80px;-moz-border-radius: 1em 4em 1em 4em;

    border-radius: 1em 4em 1em 4em;

    text-align:center;

    margin:1px;

    background:#4b7975;

    text-decoration:none; color:#FFFFFF;

    float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px

}

.buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;}

a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;}

#multitab {

    background:#919b9d;

    text-align:justify;

    overflow:hidden;

    color:#fff;

    padding:20px;

    -moz-border-radius: 1em 4em 1em 4em;

    border-radius: 1em 4em 1em 4em;    height:200px;

    width:272px;

}

#multwrap{

    text-align:left;

    overflow:hidden;

    width:350px;

    height:380px;

}

  </style>



<script type='text/javascript'>

// <![CDATA[

$(document).ready(function() { 

    $("#first-tab").addClass('buttonHover');

});

function navigate_tabs(container, tab)

{   

    $(".b").css('display' , 'none');

    $(".c").css('display' , 'none');

    $(".a").css('display' , 'none');

   

    $("#first-tab").removeClass('buttonHover');

    $("#second-tab").removeClass('buttonHover');

    $("#third-tab").removeClass('buttonHover');

   

    $("#"+tab).addClass('buttonHover');

    $("."+container).show('slow');

}

// ]]>

</script>

<script charset='utf-8' src='https://bloggertrixcode.googlecode.com/files/jquery1.2.6.js' type='text/javascript'/>

4. Entra en Diseño en blogger
5. Da Click Añadir un Gadget y selecciona 'HTML/Javascript'
6. Pegue el codigo de abajo.
<div id="multwrap">
 <a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">Tab 1</a>
<a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">Tab 2</a>
<a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">Tab 3</a>
   <br clear="all" />
      <div id="multitab" align="center">
          <div class="a">
                <em>B</em>logger Es Un Servicio publicode publicacion que permite blogs privados o multi-usuario con las entradas con fecha y hora. Fue desarrollado por Pyra Labs, que fue comprado por Google en 2003. En general, los blogs están alojados por Google en un subdominio de blogspot.com. <br /> <br /> Gracias!
                </div>
                <div class="b"><em>L</em>orem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500

                </div>
                <div class="c"><em>E</em>mpezando en febrero de 2013 se inició la integración de blogs Blogger de usuario con múltiples URL específica de cada país aborda decir exampleuserblogname.blogspot.com será redirigido automáticamente a exampleuserblogname.blogspot.ca en Canadá, exampleuserblogname.blogspot.co.uk en el Reino Unido, etc </ div >
</ div> </ div>
</ div>

Note:  Puedes pegar cualquier texto o codigo,reemplazando las tres lineas de texto presente. 

7. Luego guarda tu HTML/Javascript'.
 Todo listo
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario