Android

CreanDroid Nuevo blog Con tips de Desarrollo Android
http://creandroid.blogspot.com/
Etiquetas: , , , , , , , ,


Crear gadget con pestañas

Ejemplo como luce la sección con pestañas

Hoy veremos la forma de agregar a la columna lateral de su blog, una sección con pestañas a la que podrán agregar cualquier gadget que Blogger ofrece u otro externo; tiene un efecto de fundido que se aprecia en el cambio de los gadgets, que lo hace ver muy elegante, nos ahorra espacio, ya que se pueden mostrar ahí varios gadgets y además hace ver el contenido muy ordenado ¿no lo creen?.
Soh Tanaka, quien es un excelente Desarrollador Web, nos facilita en su blog, todas las indicaciones para lograrlo; ¡gracias a Soh Tanaka por este maravilloso trabajo!; nosotros simplemente lo que haremos, es adaptarlo a Blogger, para que sea mostrado ahí, cualquier gadget.
Este truco utiliza jQuery, sé que muchos que les encanta personalizar el blog, estarán familiarizados con esto, pero si tu nunca has usado jQuery, no te preocupes, que aquí explicaré paso a paso como implementarlo en tu blog :).
Funciona en todos lo navegadores incluyendo al único, inigualable e irrepetible IE6 (Internet Explorer 6).
Antes de empezar, quiero decirles que yo lo agregué usando la plantilla Sencillo, del nuevo diseñador de plantillas, probablemente haya algunas diferencias sobre donde exactamente ubicar la sección, con el resto de las plantillas y tendrán que buscarla, sin embargo el CSS, HTML y demás códigos no varían.
Para las plantillas anteriores al diseñador de plantillas será sumamente sencillo adaptar esto, ya que las capas se muestran de una manera más sencilla.
Así se verá la sección con los widgets, en los elementos de la página, del diseño de la plantilla:

 

 

image

 

Claro que ustedes podrán poner ahí los widgets que quieran, y modificar los títulos de las pestañas.

Pueden ver el Demo el este blog. Empecemos...

 

Instrucciones paso a paso:
Paso 1: Vamos a Diseño ►Edición de HTML de la plantilla, y con la ayuda de Ctrl f, buscamos ]]></b:skin>.


Paso 2: Inmediatamente después colocamos jQuery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
...y luego, después de eso, ponemos el script que trabaja en cordinación con jQuery, para que funcione la sección con las pestañas...

 

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
//]]>
</script>

...después ponemos los estilos o CSS...

 

<style type='text/css'>
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--altura de las pestañas--*/
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px; /*--Alineación vertical del texto--*/
border: 1px solid #999999;
border-left: none;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
font-size:1.2em;
color:#000000;
text-decoration: none;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #ffffff; /*--le da a la pestaña 1px de borde blanco por dentro--*/
outline: none;
}
ul.tabs li a:hover {
background: #cccccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
background: #ffffff;
border-bottom: 1px solid #ffffff; }
.tab_container {
border: 1px solid #999999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #ffffff;
}
.tab_content {
padding: 20px;
}
</style>

 

Paso 3: Finalmente lo que resta es agregar el HTLM, que hará aparecer la sección con las pestañas, y lo colocaremos en el lugar que queramos; si utilizamos las plantillas anteriores a las del diseñador de plantillas, será muy fácil, solo necesitamos identificar la envoltura de la columna lateral que generalmente viene así...
<div id='sidebar-wrapper'>...
Si quisiéramos que se mostrara en primer lugar, ponemos el HTML, que es el siguiente, inmediatamente después de esa linea de codigo:

<ul class='tabs'>
    <li><a href='#tab1'>Populares</a></li>
    <li><a href='#tab2'>Etiquetas</a></li>
    <li><a href='#tab3'>Archivo</a></li>
</ul>
    <div class='tab_container'>
   <b:section class='tab_content' id='tab1' maxwidgets='1' preferred='yes' showaddelement='yes'/>                                        
    <b:section class='tab_content' id='tab2' maxwidgets='1' preferred='yes' showaddelement='yes'/
       <b:section class='tab_content' id='tab3' maxwidgets='1' preferred='yes' showaddelement='yes'/>
</div>
<div style='height:10px;clear:both;'/>

Tendrán que editar Populares, Etiquetas y Archivo, para que se muestre respectivamente en cada pestaña  coincidiendo con el widget correspondiente. Lo dejé así, para que lo vieran igual que el DEMO y fuera fácil de entender el orden.

Si usas la plantilla Sencillo, que es la que usé para el DEMO, lo puedes poner inmediatamente después de:

<div class='column-right-outer'>

...y se mostrará como primer elemento de la columna lateral.

Paso 4: Checas en vista previa y si todo luce bien Guardas los cambios.

Ahora puedes ir a los elementos de página de tu plantilla y la sección lucira así:

Después puede agregar los widgets que desees, pero recuerda editar el  texto de las pestañas ;).

Nota: Puedes cambiar los colores de fondo y borde a tu antojo etc. :).

Recomienda ;) :)

Related Posts Plugin for WordPress, Blogger...