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.
Demo en http://fixcd.blogspot.com/
1. Entra en Blogger > Plantilla
2. Encuentra el siguiente codigo ]]></b:skin>
3. Pega el codigo de abajo antes de etiqueta]]></b:skin>
4. Entra en Diseño en blogger
5. Da Click Añadir un Gadget y selecciona 'HTML/Javascript'
6. Pegue el codigo de abajo.
Note: Puedes pegar cualquier texto o codigo,reemplazando las tres lineas de texto presente.
7. Luego guarda tu HTML/Javascript'.
Todo listo
Read More
Demo en http://fixcd.blogspot.com/
Como Añadir el Widget Jquery Animado a Blogger
1. Entra en Blogger > Plantilla
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
