Con el gadget Pginas de Blogger, puedes publicar informacin permanente en pginas independientes a las que se puede acceder desde

el blog mediante un enlace. Por ejemplo, puedes utilizar Pginas para crear una del tipo Acerca de este blog que trate sobre la evolucin del blog o del tipo Contacto para proporcionar direcciones, un nmero de telfono y un mapa para llegar a tu ubicacin.

Puedes crear una pgina de forma similar a como redactas la entrada de un blog. Haz clic en la pestaa Editar entradas | Editar pginas y, a continuacin, en Pgina nueva.

Si ests usando nuestra interfaz de usuario actualizada, haz clic en el men desplegable situado junto al icono gris de lista de entradas y desplzate hacia abajo hasta Pginas. Puedes crear hasta 10 pginas.

Con el gadget Pginas, puedes decidir qu pginas contendrn enlaces y en qu orden aparecern. Tambin puedes decidir si deseas que se creen enlaces de las pginas de forma automtica cuando las crees. Para ello, marca o desmarca la casilla que se encuentra a la izquierda de Aadir pginas nuevas de forma predeterminada.

Para obtener informacin acerca de cmo aadir gadgets al blog, consulta Aadir un gadget.

Cmo hacer que las plantillas sean compatibles con las pestaas de pginas Si ests familiarizado con HTML y quieres incluir las pginas como pestaas, sigue estos pasos con atencin (precaucin: no apto para corazones delicados): 1. Asegrate de que no se haya aadido ya el widget Pginas; si se ha aadido, suprmelo. 2. Ve a las pestaas Diseo | Edicin de HTML de tu blog. 3. Descarga una copia de seguridad de la plantilla. Para ello, haz clic en "Descargar plantilla completa". 4. Haz clic en la casilla de verificacin situada junto a "Expandir plantillas de artilugios". 5. Busca las siguientes tres lneas de HTML. Si existe este HTML, cambia showaddelement='no' a showaddelement='yes'

<div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/> </div>.

6. Si no existen, pega las siguientes lneas de cdigo HTML donde quieras que aparezcan las pestaas (por ejemplo, despus de <div id='content-wrapper'>)

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddel ement='yes'/> </div>.

7. Asegrate de que las pestaas se hayan aadido correctamente y haz clic en Guardar plantilla. 8. Ve a Diseo | Elementos de la pgina, busca el rea de gadget horizontal nuevo y pega ah el gadget Pginas. 2. Ahora volvemos a Blogger y vamos a Diseo -> Edicin de HTML. En esta seccin vamos a agregar el cdigo necesario para llamar al JavaScript y la primera parte del diseo de las pestaas. Debemos agregar la primera lnea de cdigo debajo de ]]></b:skin> pero antes de </head>. <script type="text/javascript" src="http://www.tusitio.com/tabber.js"> </script> Obviamente el www.tusitio.com se debe modificar por la URL de donde subiste el Java Script, por ejemplo, tusitio.googlepages.com, etc. 3. Seguimos en la misma seccin pero ahora vamos a agregar parte el cdigo de diseo, que en el ejemplo es muy pobre jaja pero era a modo de ejemplo. Es mas, es parte del ejemplo que viene en el archivo .zip que bajamos antes.

Este cdigo debe ser insertado justo antes de ]]></b:skin>. /*-------------------------------------------------REQUIRED to hide the non-active tab content. But do not hide them in the print stylesheet! --------------------------------------------------*/ .tabberlive .tabbertabhide { display:none;} /*-------------------------------------------------.tabber = before the tabber interface is set up .tabberlive = after the tabber interface is set up --------------------------------------------------*/ .tabber {} .tabberlive { margin-top:1em;} /*-------------------------------------------------ul.tabbernav = the tab navigation list li.tabberactive = the active tab --------------------------------------------------*/ ul.tabbernav { margin:0; padding: 3px 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif;} ul.tabbernav li { list-style: none; margin: 0; display: inline;} ul.tabbernav li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none;} ul.tabbernav li a:link { color: #448; } ul.tabbernav li a:visited { color: #667; } ul.tabbernav li a:hover { color: #000; background: #AAE; border-color: #227;} ul.tabbernav li.tabberactive a { background-color: #fff; borderbottom: 1px solid #fff;}

ul.tabbernav li.tabberactive a:hover { color: #000; background: white; border-bottom: 1px solid white;} /*-------------------------------------------------.tabbertab = the tab content Add style only after the tabber interface is set up (.tabberlive) --------------------------------------------------*/ .tabberlive .tabbertab { padding:5px; border:1px solid #aaa; border-top:0; /* If you don't want the tab size changing whenever a tab is changed you can set a fixed height */ /* height:200px; */ /* If you set a fix height set overflow to auto and you will get a scrollbar when necessary */ /* overflow:auto; */ } /* If desired, hide the heading since a heading is provided by the tab */ .tabberlive .tabbertab h2 { display:none;} .tabberlive .tabbertab h3 { display:none;} /* Example of using an ID to set different styles for the tabs on the page */ .tabberlive#tab1 {}

.tabberlive#tab2 {} .tabberlive#tab2 .tabbertab { height:200px; overflow:auto;} .tabberlive .tabbertab li{list-styletype:none;background:transparent url(i/b.gif) no-repeat 0 2px;border:0;margin:0 0 1px;padding:0 0 0 15px;} Guardamos los cambios que hicimos y vamos a agregar el contenido de las pestaas o tabs en nuestro sitio. 4. Vamos a "Elementos de la pgina" y agregamos un nuevo elemento HTML. Lo ponemos donde querramos que aparezcan las pestaas y dentro de ste ponemos el siguiente cdigo: <div class="tabber"> <div class="tabbertab"> <h3>Seccin 1</h3> Contenido de la seccin 1. </div> <div class="tabbertab" title="Ttulo"> Contenido de la seccin 2. </div> </div> Si guardamos lo que hicimos y vemos nuestro sitio deberamos ver 2 pestaas, una llamada Seccin 1 y la otra Seccin 2. Hasta ahora ambas tienen slo texto pero ese contenido de la seccin se puede cambiar por cualquier cdigo que nosotros querramos agregar.

En el caso de la seccin 1, el ttulo de dicha pestaa est definido por <h3>, ahora en el segundo caso se utiliz un title dentro del <div>. Por ejemplo, podramos agregar una lista de enlaces o cualquier otro trozo de cdigo HTML que nosotros querramos. No tengo a mano una forma de agregar los links destacados pero podemos hacer una lista a mano con los 5 enlaces que mas queremos que la gente visite. El diseo se puede modificar a travs del cdigo CSS que se agreg mas arriba. Dejo a la imaginacin de cada uno para realizar dichas modificaciones y lograr el mejor diseo para Blogger. Por otro lado, podemos agregar tantas pestaas como querramos o nos entren en nuestro diseo, para cada pestaa que querramos agregar debemos utilizar el siguiente cdigo justo antes del ltimo </div> que se ve mas arriba. <div class="tabbertab"> <h3>Ttulo de la Pestaa</h3> Contenido HTML de la seccin </div> Con este artculo vas a poder agregar las pestaas o tabs en Blogger. El cdigo que introduzcas en dichas pestaas ser el poder que le des a este sistema muy utilizado ltimamente en los sitios ya que permite ordenar parte de la navegacin para el usuario utilizando menos espacio. Si no te funciona, cualquier duda o consulta por favor dejame un comentario e intentar responder a la brevedad.