Herramientas para Webmasters de Blogger

Ocultar, mostrar sidebar

2011-10-16T07:16:00.000-07:00

Una interesante alternativa para los lectores de nuestro blog es que puedan mostrar y ocultar la barra lateral (Sidebar), a voluntad. Este efecto se puede lograr fácilmente, así (Únicamente para plantillas antiguas):

Tomamos como referencia la plantilla Mínima original:

Vamos a Edición de HTML:
Página principal ► Diseño ► Edición de HTML
...y, sin expandir plantillas de artilugios, localizamos el siguiente código:


/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

  width: 660px;

  margin:0 auto;

  padding:10px;

  text-align:$startSide;

  font: $bodyfont;

  }



#main-wrapper {

  width: 410px;

  float: $startSide;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }



#sidebar-wrapper {

  width: 220px;

  float: $endSide;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

El anterior codigo no lo vamos a modificar. Sencillamente vamos a observar en él las medidas de nuestro blog:

El primer bloque, #outer-wrapper, nos indica el ancho del blog, que es de 660px.
El segundo bloque, #main-wrapper, nos indica el ancho de las entradas, que es de 410px.
El tercer bloque, #sidebar-wrapper, nos indica el ancho de la sidebar, que es de 220px.

Para lograr nuestro objetivo debemos darle al #main-wrapper, ancho de las entradas, dos alternativas:

Que adquiera el ancho total del blog (660px) y de esta manera impida ver la sidebar, y
que vuelva a su ancho normal (410px), y permita ver la sidebar.

Para lograr lo anterior vamos a Diseño ► Elementos de página:

...añadimos, debajo de la cabecera del blog, un gadget del tipo HTML/Javasript, en el cual pegamos el siguiente código:


<center>

<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display='none'; getElementById('main-wrapper').style.width='660px';">Ocultar Sidebar</a> - 

<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display=''; getElementById('main-wrapper').style.width='410px'">Mostrar Sidebar</a>

</center>

Como podemos observar el anterior código contiene tanto el ancho del blog (660px), como el ancho del cuerpo de las entradas (410px), que debemos cambiar por las medidas de nuestro blog.

Veamos este efecto en funcionamiento:

Imágenes subidas a Blogger

2011-04-21T12:39:00.000-07:00

Las imágenes subidas a Blogger tienen características que, en ocasiones, producen confusión para su manejo. Vamos a analizar dos aspectos fundamentales: Las dimensiones y los códigos.

Dimensiones

Las imágenes que subimos a Blogger se alojan, en su versión original, con un máximo de 1.600px en su dimensión más larga (ancho o alto), o en ambas, cuando son cuadradas. Pero en nuestro blog quedarán, sometidas a tres limitaciones, dependiendo del tamaño que hayamos escogido al subirlas. Las opciones son: Pequeño, Mediano y grande. Estas opciones tiene en cuenta el ancho (width) y el alto (height), y son:

Para Pequeño: 200px
Para Mediano: 320px
Para Grande: 400px

Se puede presentar uno de estos casos:

Que las dos dimensiones sean iguales o menores que 200 pixeles : En este caso la imagen quedará en el blog con sus medidas originales.
que una o las dos dimensiones estén dentro del rango mayor que 200px e igual o menor que 400px : En este caso la dimensión mayor adquirirá el tamaño escogido, y la menor se ajustará, por defecto, guardando la proporción.
Que una o las dos dimensiones sea(n) mayor(es) que 400 pixeles : En este caso la dimensión mayor adquirirá el tamaño escogido y la menor se ajustará, por defecto, guardando la proporción.

Cuando necesitamos que la imagen subida tenga un ancho específico y con ninguna de las opciones lo conseguimos, podemos ajustar las medidas manualmente (en el código de la imagen), aplicando una sencilla fórmula matemática de proporciones. Por ejemplo, para disminuír el tamaño de la imagen cuyas medidas originales son 320px de ancho y 118 px de alto, tomamos el nuevo ancho que le queremos dar (Ej. 250px), y aplicamos la siguiente fórmula:

en donde: a = nuevo ancho, b = altura actual, c = ancho actual, x = nueva altura (tres valores conocidos y una incógnita). Reemplazamos en la fórmula:

Resuelta la fórmula, el resultado indica que la nueva altura debe ser de 92px, que es la que corresponde para guardar la proporción con el nuevo ancho (250px), al que redujimos el originalo (320px).

Si lo que necesitamos es una altura específica aplicamos la fórmula con estas equivalencias: a = nueva altura, b = ancho actual, c = altura actual, x = nuevo ancho.

Es necesario tener en cuenta que, en caso de aumentar el tamaño de la imagen, ésta se distorsiona tanto más cuanto mayor sea el aumento del tamaño.

Códigos

Los códigos generados cuando subimos imágenes a Blogger tienen características especiales que es necesario conocer para adaptar convenientemente las imágenes al diseño de la entrada o del elemento del blog en el cual las ponemos.

Las características de los códigos generados, cuando se suben imágenes a Blogger, varían dependiendo de:

Editor de entradas

Editor anterior
Editor actualizado

Navegador
- Internet Explorer
- Mozila Firefox y otros

Código de imagen subida con el editor anterior

La imagen, cuyo código vamos a analizar, tiene las siguientes dimensiones en su versión original (imagen real): Ancho (Width): 388px, Alto (Height): 143px, fue subida con tamaño Mediano, y ubicada a la Izquierda.

1.- Con Internet Explorer


<a href="http://4.bp.blogspot.com/-NVWNUanDPsA/TZt8GVuRjZI/AAAAAAAAAV4/C9BTDosmTus/s1600/Blogger.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 118px;" src="http://4.bp.blogspot.com/-NVWNUanDPsA/TZt8GVuRjZI/AAAAAAAAAV4/C9BTDosmTus/s320/Blogger.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5592199810662894994" /></a>

2.- Con Mozila Firefox


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-TLjqYzLDIOk/TZySZsHYaSI/AAAAAAAAAXQ/g4Nx-Dt9oTw/s1600/Blogger.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 118px;" src="http://1.bp.blogspot.com/-TLjqYzLDIOk/TZySZsHYaSI/AAAAAAAAAXQ/g4Nx-Dt9oTw/s320/Blogger.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5592505807323818274" /></a>

Elementos del código:

1.1.-


<a href="http://4.bp.blogspot.com/-NVWNUanDPsA/TZt8GVuRjZI/AAAAAAAAAV4/C9BTDosmTus/s1600/Blogger.png">

2.1.-


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-TLjqYzLDIOk/TZySZsHYaSI/AAAAAAAAAXQ/g4Nx-Dt9oTw/s1600/Blogger.png">

Contiene la dirección URL de la imagen, en su versión original, y hacia la que apunta el enlace que, en este caso, es la imagen generada en el blog por defecto. Es decir que un click hecho sobre la imagen llevará a la misma imagen, pero en su versión original. Si queremos que en nuestro blog quede la imagen real (versión original), volvemos a subirla pero utilizando esta URL, y eliminando este elemento del código generado.

En general es aconsejable eliminar este elemento, junto con la etiqueta de cierre (</a>), que está al final del código. Se debe conservar este elemento en dos casos:

Cuando, para mejor comprensión de la imagen, sea necesario ver una ampliación de la misma, y
Cuando se utiliza la imagen como un enlace, pero reemplazando la dirección URL por la que debe enlazar la imagen.

1 y 2 (Para ambos códigos)


<img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 118px;" src="http://4.bp.blogspot.com/-NVWNUanDPsA/TZt8GVuRjZI/AAAAAAAAAV4/C9BTDosmTus/s320/Blogger.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5592199810662894994" />

Este elemento tiene las siguientes características:

float:left; : Sitúa la imagen a la izquierda de la página, con el texto a su dereha. Esta característica varía así:
- float:right; : si la imagen es ubicada a la derecha, y
- display:block; : si la imagen es ubicada en el centro.
margin:0 10px 10px 0; : Establece los márgenes o espacios, en pixeles entre cada lado de la imagen y el texto, teniendo en cuenta la ubicación de la imagen (izquierda, derecha o centro). El orden en que están definidos estos márgenes sigue el sentido de las manecillas del reloj, empezando por el margen superior. En este caso (imagen a la izquierda), el margen superior es 0 , el derecho 10px , el inferior 10px y el izquierdo 0 . Estos márgenes se pueden modificar sin que con ello se altere la imagen. Esta característica varía así:
- margin:0 0 10px 10px; , si la imagen es ubicada a la derecha, y
- margin:0px auto 10px; , si la imagen es ubicaha en el centro. En este caso no se define sino un solo margen, el inferior, (auto 10px), ya que al situar la imagen en el centro, todo el texto se desplaza debajo de la misma.
cursor:pointer; cursor:hand; : Define el puntero del cursor, cuando se pone sobre la imagen, como la imagen de una mano.
width: 320px; height: 118px; : Fija las medidas en pixeles de la imagen, como quedará alojada en el blog: ancho (width) y alto (height). Como ya se explicó, estas medidas son modificables si se quiere mostrar la imagen de tamaño diferente, teniendo cuidado de guardar la proporcionalidad y de que el tamaño no sea superior al cuerpo de la entrada o del elemento en donde pongamos la imagen.
src="http://4.bp.blogspot.com/-NVWNUanDPsA/TZt8GVuRjZI/AAAAAAAAAV4/C9BTDosmTus/s320/Blogger.png" : Contiene la dirección URL de la imagen tal como quedará alojada en el blog, dependiendo del tamaño que le hayamos dado al subirla, y sometida a cualquiera de las opciones explicadas al comienzo de este tutorial. s320 indica que fue subida con tamaño Mediano.
border="0" : Establece un borde para la imagen, obviamente con una cifra diferente de cero (0), dependiendo del grosor que le queramos dar. Para que esta característica funcione es necesario eliminar el enlace del código, o sea la primera URL (<a href="URL">), y su correspondiente etiqueta de cierre, al final del código (</a>).
alt="" : En este entrecomillado ponemos una descripción de la imagen, que el atributo alt hará que se vea al poner el cursor sobre la misma. Debido a que este atributo parece ya obsoleto, para asegurarnos que este efecto funcione agregamos a continuación este: title="" , con la misma descripción entre las comillas.
id="BLOGGER_PHOTO_ID_5592505807323818274" : Es la identificación que Blogger da a cada imagen.

Código de imagen subida con el editor actual

Con el editor actual los códigos generados, con Internet Explorer y con Mozila Firefox, son iguales. Continuando con el ejemplo que estamos analizando, el código es:


<div class="separator" style="clear: both; text-align: center;">

<a href="http://3.bp.blogspot.com/-QF0xTTcPMec/TZuENyGCwSI/AAAAAAAAAWo/9Vntqz-XEw0/s1600/Blogger.png" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="118" width="320" src="http://3.bp.blogspot.com/-QF0xTTcPMec/TZuENyGCwSI/AAAAAAAAAWo/9Vntqz-XEw0/s320/Blogger.png" /></a></div>

Elementos del código:

Este código contiene elementos que también están en los códigos de imágenes subidas con el editor anterior, y que ya analizamos; y otros que no están en dichos códigos, y son:

Los elementos resaltados en amarillo: Parecen inocuos, sin una función definida; si se eliminan del código la imagen no se altera en nada.
margin-right:1em; margin-bottom:1em : Establece los márgenes o espacios entre cada lado de la imagen y el texto, teniendo en cuenta la ubicación de la imagen (izquierda, derecha o centro). En este caso (imagen a la izquierda), están definidos los márgenes derecho (right) e inferior (bottom). Para los demás casos este elemento varía así:
- margin-left:1em; margin-bottom:1em : Cuando la imagen es ubicada a la derecha, y
- margin-left:1em; margin-right:1em : Cuando la imagen es ubicada en el centro.

Como podemos observar, en este código los márgenes están dados en em's y no en pixeles, como sucede con las imágenes subidas con el editor anterior. Un em es una unidad de Longitud en hojas de estilo, representa la altura de la fuente de un elemento y equivale a 16px. Una herramienta para convertir pixeles a em's, la encontramos aquí: Em Calculator.

Para eliminar el enlace entre la imagen alojada en al blog y la imagen real, suprimimos del código lo resaltado en rojo

Enlazar este blog

2011-04-21T12:30:00.000-07:00

Para enlazar este blog copie y pegue, en su blog, el código de la imagen que escoja de entre las siguientes:

**Imagen #1**

**Código #1**
<a href="http://bloguermast.blogspot.com/" title="Herramientas para Webmasters de Blogger"></a>

**Imagen #2**

**Código #2**
<a href="http://bloguermast.blogspot.com/" title="Herramientas para Webmasters de Blogger"></a>

**Imagen #3**

**Código #3**
<a href="http://bloguermast.blogspot.com/" title="Herramientas para Webmasters de Blogger"></a>

**Imagen #4**

**Código #4**
<a href="http://bloguermast.blogspot.com/" title="Herramientas para Webmasters de Blogger"></a>

**Imagen #5**

**Código #5**
<a href="http://bloguermast.blogspot.com/" title="Herramientas para Webmasters de Blogger"></a> çç

Personalizar blog eliminando sidebar

2011-04-03T09:11:00.000-07:00

Podemos personalizar nuestro blog acabando con la monotonía de que en todas las entradas aparezca la misma sidebar, y dándole la apariencia característica de una página web cualquiera.

Este tutorial pueden aplicarlo, preferiblemente, quienes van a crear un blog nuevo. La razón es la siguiente: para lograr el objetivo propuesto tendremos que trabajar con tablas, y, para trabajar con tablas, es conveniente activar la opción NO en Convertir saltos de línea:

Configuración ► Formato ► Convertir saltos de línea:

Ver el tutorial: Espacios en blanco y saltos de línea.

Si hacemos esta modificación en un blog ya creado (que normalmente se hace con la opción mencionada activada en SI), se nos van a desconfigurar todas las entradas, pues los textos nos quedarán sin saltos de línea.

En el blog nuevo tendremos que crear las entradas únicamente en el editor de HTML e introducir los saltos de línea con una etiqueta <br />, para retornos forzados simples y, con dos etiquetas <br /> <br />, para retornos forzados dobles.

Para que la personalización de nuestro blog sea completa debemos crear la Portada o Página de inicio, teniendo en cuenta que debe tener el ancho del blog, ya que, como veremos adelante, vamos a eliminar la sidebar. Para crear dicha portada éste es el tutorial: Crear Portada o Página de inicio.

Hechas las anteriores aclaraciones, vamos a personalizar nuestro blog recién creado:

1.- Vamos a Elementos de página y podremos observar, en la sección correspondiente a la sidebar, los elementos correspondientes a los gadgets que están en el blog por defecto (Seguidores, Archivo del blog, Datos personales, Attribution):

Editar

Attribution


<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

true

false

2.- Vamos a Edición de HTML:
Página principal ► Diseño ► Edición de HTML
Hasta aquí el procedimiento es igual tanto para plantillas antiguas como para las nuevas. A continuación veremos cada caso en particular:

Para plantillas antiguas (Plantilla de referencia: Mínima)

1.- Localizamos y eliminamos el siguiente código:


#sidebar-wrapper {

  width: 220px;

  float: $endSide;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

}

De esta manera hemos eliminado la sidebar. 2.- Ahora debemos ocupar el espacio dejado por la sidebar, ya eliminada. Localizamos el siguiente código:


/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

  width: 660px;

  margin:0 auto;

  padding:10px;

  text-align:$startSide;

  font: $bodyfont;

  }



#main-wrapper {

  width: 410px;

  float: $startSide;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

410px

660px

Para plantillas nuevas

1.- Localizamos el siguiente código:


    <b:template-skin>

      <b:variable default='930px' name='content.width' type='length' value='860px'/>

      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>

      <b:variable default='360px' name='main.column.right.width' type='length' value='260px'/>

2.- Modificamos las cifras resaltadas, debiendo el código quedar así:


    <b:template-skin>

      <b:variable default='930px' name='content.width' type='length' value='860px'/>

      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>

      <b:variable default='0' name='main.column.right.width' type='length' value='0'/>

Diseño

Diseñador de plantillas

Ajustar ancho

Conclusión

La personalización de un blog como se explicó en este tutorial tiene la ventaja que cada entrada puede tener su sidebar, cuyo contenido sea relacionado con el tema de la entrada. Lo que no ocurre con el blog tradicional, en el que en todas las entradas aparece la misma sidebar. Podemos, así mismo, crear las entradas con un único cuerpo, sin sidebar.

Damos, a continuación, algunos ejemplos de códigos para crear entradas personalizadas:

1.- Entrada simple: entrada sin formato especial, no lleva tablas, por consiguiente no necesita ningún código para formato. La creamos como una entrada normal (en el editor de HTML, y utilizando etiquetas <br />, para introducir los saltos de línea, como se explicó al comienzo de este tutorial.

2.- Entrada con sidebar derecha: Configuramos un formato para dividir la entrada en dos secciones, una será el cuerpo de la entrada, y la otra será una especie de sidebar. Para lograr este objetivo ponemos en la entrada (Edición de HTML) tres tablas anidadas, así:


<table border="0" cellspacing="0" cellpadding="0" width="660px">

<tbody>

<tr>

<td>

   <table border="0" cellspacing="0" cellpadding="0" width="410px" align="left">

   <tbody>

   <tr>

   <td>

      Contenido de la entrada

   </td>

   </tr>

   </tbody>

   </table>

   <table border="0" cellspacing="0"cellpadding="0" width="240px" align="right">

   <tbody>

   <tr>

   <td>

      Contenido de la sidebar

   </td>

   </tr>

   </tbody>

   </table>    

</td>

</tr>

</tbody>

</table>

Debemos ser cuidadosos al aplicar los anchos a las tablas, para que la suma de las interiores no exceda el ancho de la principal, ni ésta exceda el ancho del blog.

Así se verán las entradas creadas con este formato:

3.- Entrada con sidebar izquierda: Utilizamos el mismo código anterior (punto 2), con esta modificación: En donde está left ponemos right, y viceversa:

4.- Entrada con sidebar derecha color de fondo diferente: Con este formato lo que hacemos es ponerle a la sidebar un color diferenta al del blog. Las medidas son diferentes a las de los formatos enteriores, porque esta entrada la vamos a crear en un blog diseñado con la plantilla Awesone, que es más ancha que la Mínima. El siguiente es el código:


<table border="0" cellspacing="0" cellpadding="0" width="100%">

<tbody>

<tr>

<td>

   <table border="0" cellspacing="0" cellpadding="0" width="590px" align="left">

   <tbody>

   <tr>

   <td>

      Contenido de la entrada

   </td>

   </tr>

   </tbody>

   </table>

   <table border="0" cellspacing="0"cellpadding="0" width="260px" align="right" bgcolor="#463636">

   <tbody>

   <tr>

   <td>

      Contenido de la sidebar

   </td>

   </tr>

   </tbody>

   </table>    

</td>

</tr>

</tbody>

</table>

Así se verá una entrada creada con este formato:
5.- Entrada con dos sidebar, izquierda y derecha: En este formato las dos sidebar tienen un color de fondo diferente al del blog (bgcolor="#322a2a"), que puede ser cambiado o eliminado. El siguiente es el código:


<table border="0" cellspacing="0" cellpadding="0" width="100%">

<tbody>

<tr>

<td>

   <table border="0" cellspacing="0"cellpadding="0" width="210px" align="left" bgcolor="#322a2a">

   <tbody>

   <tr>

   <td>

      Contenido de la sidebar izquierda

   </td>

   </tr>

   </tbody>

   </table>

   <table border="0" cellspacing="0"cellpadding="0" width="210px" align="right" bgcolor="#322a2a">

   <tbody>

   <tr>

   <td>

      Contenido de la sidebar derecha

   </td>

   </tr>

   </tbody>

   </table>  

   <table border="0" cellspacing="0" cellpadding="0" width="400px" align="center">

   <tbody>

   <tr>

   <td>

      Contenido de la entrada

   </td>

   </tr>

   </tbody>

   </table>  

</td>

</tr>

</tbody>

</table>

Así se verá una entrada creada con este formato:
6.- Entrada con dos barras a la derecha: Con el siguiente formato podemos crear entradas en un blog diseñado con la plantilla Travel, con dos columnas a la derecha. Después de hechas las modificaciones indicadas arriba para las plantillas nuevas, en el Diseñador de plantillas le damos un ancho de 980px al blog. El siguiente es el código:


<table border="0" cellspacing="0" cellpadding="0" width="100%">

<tbody>

<tr>

<td>



<table border="0" cellspacing="0"cellpadding="0" width="500px" align="left">

<tbody>

<tr>

<td>

Contenido de la entrada 

</td>

</tr>

</tbody>

</table>



<table border="0" cellspacing="0"cellpadding="0" width="400px" align="right"> 

<tbody>

<tr>

<td>



<table border="0" cellspacing="0"cellpadding="3" width="195px" align="left" bgcolor="#0f211c"> 

<tbody>

<tr>

<td>

Contenido de la primera sidebar

</td>

</tr>

</tbody>

</table>

</td>

<td>

<table border="0" cellspacing="0"cellpadding="0" width="195px" align="right" bgcolor="#0f211c"> 

<tbody>

<tr>

<td>

Contenido de la segunda sidebar

</td>

</tr>

</tbody>

</table>



</td>

</tr>

</tbody>

</table>



</td>

</tr>

</tbody>

</table>

Así se verá una entrada creada con este formato en un blog-plantilla Travel:

Contraseña de acceso a una entrada del blog

2011-02-23T06:12:00.000-08:00

Podemos restringir el acceso a una(s) entrada(s) de nuestro blog habilitando un formulario de acceso con contraseña, así:

1.- Cuando creemos la entrada, en Edición de HTML...

...pegamos, antes del contenido de la misma, el siguiente Script:


<Script languaje="javascript">

  var getin = prompt("Necesitas una contaseña para acceder a esta entrada.")

  if (getin!="Aquí la contraseña")

  {location.href='URL de página anunciando error'}

  else

  {alert('Contraseña correcta, acepta para ingresar')}

</Script>

En Aquí la contraseña ponemos el número de la contraseña.
Cuando la contraseña anotada en el formulario no es la correcta, el Script nos rediccionará a la página cuya URL debemos poner en URL de página anunciando error.

Debemos advertir que este script tiene una limitación: No funciona con Internet Explorer.

2.- Para crear la página con el anuncio de Error tenemos dos opciones:

Crear una entrada con el texto en donde anunciamos el error. Esta alternativa no es aconsejable porque, mientras no creemos más entradas, ésta, en la que anunciamos el error, se verá en la página principal, lo cual no es nada estético.
Crear un nuevo blog (en Blogger podemos crear todos los blogs que queramos) con una única entrada, que es la que va a contener el texto con el anuncio de Error. La URL de este blog es la que debemos poner en URL de página anunciando error. Esta opción es la ideal.

Si son varias las entradas con acceso restringido, ponemos en cada una el Script (véase punto 1), y creamos en el nuevo blog una entrada con el anuncio de error por cada entrada, del blog principal, con acceso restringido, y en URL de página anunciando error ponemos la URL de la entrada respectiva.

En este último caso, en el que debamos crear varias entradas con anuncio de error en el nuevo blog, debemos habilitar en este blog, en Configuración ► Formato ► Mostrar un máximo de 1 entrada en la página principal. Esto con el fin de evitar que nos aparezcan, en la entrada principal del nuevo blog, varios anuncios de error.

3.- En la entrada que va a contener el anuncio de error, y a la que no le pondremos título, ponemos, en Creación de entradas ► Nueva entrada ► Edición de Html, el siguiente código:


<p>

<center>

<b>¡¡Contraseña errada!! Regresa, haciendo click sobre la flecha, e inténtalo de nuevo.</b>

<p>

<a href="URL de la entrada con acceso restringido"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 47px;" src="http://www.clker.com/cliparts/e/a/7/a/1194985593422726425arrow-left-blue_benji_pa_01.svg.thumb.png" border="0" alt="Intentar de nuevo" title="Intentar de nuevo"/></a>

</center>

En URL de la entrada con acceso restringido ponemos la URL de la entrada a la que debemos acceder con contraseña.
http://www.clker.com/cliparts/e/a/7/a/1194985593422726425arrow-left-blue_benji_pa_01.svg.thumb.png es la URL de la imagen (flecha), que puede ser cambiada.

Esta entrada se verá así:

En la Demo vamos a utilizar esta clave: 12345. Probemos utilizando la clave correcta y otra incorrecta:

Nota

La contraseña se nos exigirá cuando queramos ingresar a la(s) entrada(s) con acceso restringido, pero también se nos exigirá para ingresar a la página principal cuando en ésta haya varias entradas y entre las mismas esté una entrada con acceso restringido.

Dividir cabecera (header) del blog, cabecera (header) doble

2011-02-20T10:30:00.000-08:00

Vamos a "dividir" la cabecera (header) de nuestro blog, eliminando la original y reemplazándola por una doble. Tomamos como referencia la plantilla Minima

1.- Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML

2.- Localizamos el código CSS de la cabecera o header:


#header-wrapper {

  width:660px;

  margin:0 auto 10px;

  border:1px solid $bordercolor;

}

3.- Lo eliminamos y lo reeemplazamos por el siguiente:


#header-wrapper-doble {

  width:660px;

  margin:0 auto 10px;

  border:1px solid $bordercolor;

}

4.- Para poner en su sitio y de manera simétrica las dos partes de la nueva cabecera pegamos, debajo del código anterior, el siguiente:


#columna-izda {

  width: 50%;

  float: left;

}

#columna-dcha {

  width: 50%;

  float: right;

}

Aplicando el 50% a cada columna lograremos que las dos partes de la cebecera queden iguales. Si las queremos de diferente ancho les cambiamos el porcentaje, sin exceder entre ambas, lógicamente, el 100%.

5.- Más hacia abajo localizamos este código:


#header { 

  margin: 5px;

  border: 1px solid $bordercolor;

  text-align: center;

  color:$pagetitlecolor;

}

...lo eliminamos y lo reeemplazamos por éste:


#header-doble { 

  margin: 5px;

  border: 1px solid $bordercolor;

  text-align: center;

  color:$pagetitlecolor;

}

6.- Desplazándonos hacia abajo en la plantilla, localizamos el código HTML de la cabecera:


    <div id='header-wrapper'>

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>

</b:section>

    </div>

Al anterior código le hacemos dos modificaciones:

Para habilitar la opción Eliminar en el gadget correspondiente a la cabecera, cambiamos true por false.
Para habilitar los dos gadgets que reemplazarán a la cabecera que vamos a eliminar pegamos, antes de la etiqueta </div>, el siguiente código:


     <div id='header-wrapper-doble'>

       <b:section class='header' id='columna-izda' maxwidgets='1' showaddelement='yes'/>

       <b:section class='header' id='columna-dcha' maxwidgets='1' showaddelement='yes'/>

     <div style='clear: both;'/>

     </div>

...debiendo quedarnos así:


    <div id='header-wrapper'>

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='false' title='Título del blog (cabecera)' type='Header'/>

</b:section>

     <div id='header-wrapper-doble'>

       <b:section class='header' id='columna-izda' maxwidgets='1' showaddelement='yes'/>

       <b:section class='header' id='columna-dcha' maxwidgets='1' showaddelement='yes'/>

     <div style='clear: both;'/>

     </div> 

    </div>

Con maxwidgets='1' (únicamente los resaltados en azul) habilitaremos la opción para añadir solamente un gadget (widget) en cada bloque de la nueva cabecera. Si queremos tener la posibilidad de añadir más de un gadget por bloque, lo eliminamos.

Posteriormente, cuando agreguemos los gadgets de la nueva cabecera, el anterior código se nos modificará, por defecto.

7.- Vista previa y Guardar plantilla.

En la Vista previa veremos la cabecera original del blog porque aún no la hemos eliminado, únicamente hemos habilitado la opción para poder eliminarla.
No veremos los dos gadgets que van a reemplazar la cabecera original porque aún no los hemos añadido, únicamente habilitamos la opción para poder hacerlo.

8.- Una vez guardados los cambios vamos a Elementos de página en donde veremos el gadget correspondiente a la cabecera, que vamos a eliminar, y las opciones para añadir los que la van a reemplazar:

9.- Accedemos al gadget de la cabecera, haciendo click en Editar y, como ya habilitamos la opción Eliminar, hacemos click y la eliminamos:

10.- Ahora sí procedemos a añadir los gadgets que reemplazarán la cebecera poniendo, por ejemplo, en el de la izquierda el título del blog y, en el de la derecha, una imagen o lo que la imaginación de cada bloggero le dicte.

En el siguiente ejemplo hemos añadido, en el gadget de la izquiereda, un elemento de página tipo Texto, y en el de la derecha uno tipo Imagen.

Podemos ponerle color al fondo de la cabecera que acabamos de crear, añadiendo al código del punto 3 la línea resaltada en morado:


#header-wrapper-doble {

  width:660px;

  margin:0 auto 10px;

  border:1px solid $bordercolor;

  background:#XXXXXX;

}

...y reemplazando las XXXXXX por el número del código del color correspondiente.

También podemos modificar la longitud de la altura de la cabecera poniendo en el código anterior, antes de }, esta línea: height:XXXpx; en donde XXX es el número de pixeles, teniendo cuidado que la altura sea igual o mayor a la de la imagen o imágenes que pongamos.

Habilitar la opción para responder comentarios en Blogger

2011-02-08T09:46:00.000-08:00

En los blogs de Blogger no contamos con una opción para responder comentarios a cada comentarista en particular.

En este tutorial vamos a explicar la forma de habilitar la opción "Responder a este comentario".

1.- Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ► Expandir plantillas de artilugios

2.- Una vez expandidas las plantillas de artilugios localizamos el siguiente segmento de código:


            <dd class='comment-footer'>

              <span class='comment-timestamp'>

                <a expr:href='data:comment.url' title='comment permalink'>

                  <data:comment.timestamp/>

                </a>

                Sitio para el código

                <b:include data='comment' name='commentDeleteIcon'/>

              </span>

            </dd>

          </b:loop>

        </dl>

      </div>

3.- En la línea indicada (sitio para el código), pegamos el siguiente código:

 
<span class='blrespondrcmnt'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=xxxxxxxxxxxxxxxxxx&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;' title='Responder a este comentario'><img src='http://i56.tinypic.com/2vxod29_th.jpg'/>Responder a este comentario</a></span>

En ID=xxxxxxxxxxxxxxxxxx reemplazamos las xxxxxxxxxxxxxxxxxx por el número de identificación de nuestro blog (ID) que lo encontramos así:
- En la barra de direcciones, estando en la ventana en la que tenemos la plantilla de nuestro blog, podremos ver esta dirección:
  http://www.blogger.com/html?blogID=xxxxxxxxxxxxxxxxxx
  Los números que ocupan el lugar de las xxxxxxxxxxxxxxxxxx son la ID (Identificación) de nuestro blog.
La URL http://i56.tinypic.com/2vxod29_th.jpg corresponde al ícono que aparecerá al lado izquierdo de la opción "Responder a este comentario". Este ícono lo podemos cambiar por otro de nuestro gusto.

4.- Hasta aquí habremos logrado que la opción "Responder a este comentario" aparezca después de cada comentario, al lado derecho de la fecha de los mismos. Para lograr una mejor estética sería conveniente que no apareciera la fecha; si queremos que así sea, la eliminamos borrando del código del punto dos (2) la línea resaltada en azul.

5.- Vista previa y Guardar plantilla

6.- Cuando alguien quiera responder un comentario y haga click en la opción Responder a este comentario aparecerá la ventana emergente, con un enlace:

Este enlace permite que en la respuesta se haga referencia al nombre del comentarista a quien se responde y que, al hacer click sobre el nombre, la página se desplace, quedando en primer témino el comentario respondido:

En la Demo podemos ver la respuesta a comentarios en funcionamiento:

Nota

Se recomienda habilitar, en Configuración de comentarios ► Ubicación del formulario de comentarios, la opción Entrada incrustada a continuación, así:

Página principal ► Diseño ► Configuración ► Comentarios ► Ubicación del formulario de comentarios

De esta menera lograremos que, cuando haya comentarios en una entrada, éstos aparezcan todos a continuación, con la opción Responder a este comentario, y el box para un nuevo comentario, al final, accediendo a Comentarios desde la página principal. Lo que no ocurriría al acceder a Comentarios de una entrada, estando en la página principal, si tenemos habilitada la opción Página completa o la opción Ventana emergente, ya que en éstas aparecerán los comentarios sin la opción para responder a cada uno, sino el box para un nuevo comentario. De todas maneras la ventana emergente sí aparecerá siempre que se quiera responder un comentario.

Menú de Navegación Lateral con Efecto Slide jQuery y CSS

2011-02-06T11:59:00.000-08:00

Este menú en diapositiva, cuya explicación (en inglés) para su creación, encontramos en tympanus.net, tiene un interesante efecto slide: sus elementos se ocultan al ingresar en la página, permaneciendo semiescondidos, mostrándose en su totalidad cuando se pasa el cursor por las partes visibles de los mismos. Para ponerlo en nuestro blog:

1.- Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

2.- Para obtener la librería jQuery v1.3.2 pegamos, antes de la etiqueta </head>, el siguiente código:

3.- Para animar el efecto agregamos el script correspondiente pegando, después del código anterior, el siguiente:


<script type="text/javascript">

$(function() {

$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);



$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({'marginLeft':'-2px'},500);

},

function () {

$('a',$(this)).stop().animate({'marginLeft':'-85px'},500);

}

);

});

</script>

Los números 500 corresponden a la velocidad del efecto slide que, en el caso de la DEMO, es de 500 milisegundos. Podemos cambiarlos si queremos que la velocidad sea mas lenta o más rápida.

4.- Para darle estilo al menú localizamos la etiqueta ]]></b:skin>; y, antes de la misma, pegamos el siguiente código:


/* CSS menú de Navegación Slide*/

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 10px;

left: 0px;

list-style: none;

z-index:9999;

}

ul#navigation li {

width: 100px;

}

ul#navigation li a {

display: block;

margin-left: -2px;

width: 100px;

height: 70px;

background-color:#cfcfcf;

background-repeat:no-repeat;

background-position:center center;

border:1px solid #AFAFAF;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;

/*-moz-box-shadow: 0px 4px 3px #000;

-webkit-box-shadow: 0px 4px 3px #000;

*/

opacity: 0.6;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);

}

ul#navigation .imagen1 a{

background-image: url(http://s7.tinypic.com/1428pag_th.jpg);

}

ul#navigation .imagen2 a {

background-image: url(http://s7.tinypic.com/ke8ax1_th.jpg);

}

ul#navigation .imagen3 a {

background-image: url(http://s7.tinypic.com/r210fl_th.jpg);

}

ul#navigation .imagen4 a {

background-image: url(http://s7.tinypic.com/a4vexe_th.jpg);

}

ul#navigation .imagen5 a {

background-image: url(http://s7.tinypic.com/50ruz7_th.jpg);

}

ul#navigation .imagen6 a {

background-image: url(http://s7.tinypic.com/15qpxj8_th.jpg);

}

ul#navigation .imagen7 a {

background-image: url(http://s7.tinypic.com/2r4lh0z_th.jpg);

}

Las URLs resaltadas en rojo corresponden a las imágenes utilizadas en la DEMO. Las cambiamos por las URLs de nuestras imágenes.

5.- Vista previa y Guardar plantilla.

6.- Finalmente, para que funcionen el CSS y el Script, Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript, y en este gadget pegamos el siguiente código HTML:


<ul id="navigation">

<li class="imagen1"><a href="#" title="descripción"></a></li>

<li class="imagen2"><a href="#" title="descripción"></a></li>

<li class="imagen3"><a href="#" title="descripción"></a></li>

<li class="imagen4"><a href="#" title="descripción"></a></li>

<li class="imagen5"><a href="#" title="descripción"></a></li>

<li class="imagen6"><a href="#" title="descripción"></a></li>

<li class="imagen7"><a href="#" title="descripción"></a></li>

</ul>

Reemplazamos todos los # por las URLs de las páginas enlazadas, y las descripción por una descripción resumida de las mismas, que se verá al poner el cursor sobre dada elemento.

Menú horizontal dinámico, con submenús

2011-01-31T13:32:00.000-08:00

Vamos a crear un menú horizontal dinámico, con submenús. El resultado será una barra navegable cuyos elementos cambian de color al poner el cursor sobre los mismos. Veámoslo:

Para ponerlo en nuestro blog:

1.- Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML

2.- Localizamos ]]></b:skin> e inmediatamente antes pegamos el siguiente código CSS:


#subnavbar {

width: 100%;

height: 27px;

font-weight:bold;

color: #FFFFFF;

margin: 0px;

padding: 0px;

font-family:"Trebuchet MS";

background: #0b3861;

}



#subnav {

margin: 0px;

padding: 0px;

}



#subnav ul {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}



#subnav li {

list-style: none;

margin: 0px;

padding: 0px;

}



#subnav li a, #subnav li a:link, #subnav li a:visited {

color: #FFFFFF;

display: block;

font-size: 11px;

text-transform: uppercase;

margin: 0px 0px 0px 0px;

padding: 5px 10px 5px 10px;

border-left: 1px solid #FFFFFF;

}



#subnav li a:hover, #subnav li a:active {

background: #81bef7;

color: #000000;

display: block;

text-decoration: none;

margin: 0px 0px 0px 0px;

padding: 5px 10px 5px 10px;

}



#subnav li li a, #subnav li li a:link, #subnav li li a:visited {

background: #0b3861;

width: 120px;

heigth: 20px

float: none;

margin: 0px;

padding: 5px 10px 5px 10px;

border-bottom: 1px solid #FFFFFF;



border-left: 1px solid #FFFFFF;

border-right: 1px solid #FFFFFF;

}



#subnav li li a:hover, #subnav li li a:active {

background: #81bef7;

margin: 0px;

padding: 5px 10px 5px 10px;

}



#subnav li {

float: left;

padding: 0px;

}



#subnav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0px;

padding: 0px;

}



#subnav li li {

}



#subnav li ul a {

width: 140px;

}



#subnav li ul a:hover, #subnav li ul a:active {

}



#subnav li ul ul {

margin: -25px 0 0 161px;

}



#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover

ul ul, #subnav li.sfhover ul ul ul {

left: -999em;

}



#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul,

#subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li

li.sfhover ul {

left: auto;

}



#subnav li:hover, #subnav li.sfhover {

position: static;

}

En este código podemos hacer cambios en los colores, para ajustar el menú al diseño de nuestro blog, teniendo en cuenta los resaltados, así:

Amarillo (blanco en la Demo) y azul oscuro: Color del texto, los bordes y el fondo de los elementos activos.
Negro y azul claro: Color del texto y el fondo de los elementos con el cursor encima.

3.- Vista previa y Guardar plantilla

4.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript (debajo de la cabecera). En este gadget pegamos el siguiente código:


<div id="subnavbar">

<ul id="subnav">



<li><a href="#"

title="Inicio">INICIO</a>

</li>

<li><a href="#"

title="Texto">MENU 1 </a>

<ul>

<li><a href="#"

title="Texto">SUBMENU 1-1</a>

</li>

<li><a href="#"

title="Texto">SUBMENU 1-2</a>

</li>

<li><a href="#"

title="Texto">SUBMENU 1-3</a>

</li>

</ul>

</li>

<li><a href="#"

title="Texto">MENU 2</a>

<ul>

<li><a href="#"

title="Texto">SUBMENU 2-1</a>

</li>

<li><a href="#"

title="Texto">SUBMENU 2-2</a>

</li>

<li><a href="#"

title="Texto">SUBMENU 2-3</a>

</li>

</ul>

</li>

<li><a href="#"

title="Texto">MENU 3</a>

<ul>

<li><a href="#"

title="Texto">SUBMENU 3-1</a>

</li>

<li><a href="#"

title="Texto">SUBMENU 3-2</a>

</li>

</ul>

</li>

<li><a href="#"

title="Texto">MENU 4</a>

<ul>

<li><a href="#"

title="Texto">SUBMENU 4-1</a>

</li>

<li><a href="#"

title="Texto">SUBMENU 4-2</a>

</li>

</ul>

</li>

<li><a href="#"

title="Texto">MENU 5</a>

<ul>

<li =><a href="#"

title="Texto">SUBMENU 5-1</a>

</li>

<li><a href="#"

title="Texto">SUBMENU 5-2</a>

</li>

<li><a href="#"

title="Texto">SUBMENU 5-3</a>

</li>

<li><a href="#"

title="Texto">SUBMENU 5-4</a>

</li>

</ul>

<li><a href="#" title="Texto">CONTACTO</a>

</li>



</li></ul></div>

En el anterior código reemplazamos:

Todos los signos # por los enlaces correpondientes (URLs de las entradas).
Todos los Texto por un texto explicativo de la página enlazada, que se verá al poner el cursor sobre cada menú o submenú.
Todos los MENU y SUBMENU, así como INICIO y CONTACTO, por los textos o títulos de los menús y submenús.

Podemos agregar o quitar elementos siguiendo la lógica secuencia del código y teniendo cuidado de no alterar la estructura del mismo.

Nota

Se han recibido algunas inquietudes en el sentido de que el menú no se visualiza en su totalidad porque se despliega por detrás del cuerpo de las entradas del blog. Para quienes tengan este problema la solución es la siguiente:

Volvemos a Elementos de página.
Con el cursor arrastramos el gadget que pusimos debajo de la cabecera y que contiene el código del menú, y lo ponemos dentro del cuadro que contiene las entradas del blog, en la parte superior:

... debiendo quedarnos así:

Con esta modificación vamos a tener una pequeña limitación: El menú no podrá ser más ancho que el cuerpo de las entradas del blog.

Índice: Menús
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable

Menú horizontal desplegable con Ajax

2011-01-19T14:21:00.000-08:00

Éste es un menú de múltiples niveles. Vamos a crear dos: Uno con cinco menús principales y otro con nueve menús principales. 1.- Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

2.- Para obtener la librería Jquery localizamos la etiqueta </head> y, antes de la misma, pegamos el siguiente código:


<script src='http://pazos-blogger.googlecode.com/files/libreria.jquery.min.1.4.2.js' type='text/javascript'/>

3.- Para usar la librería Jquery con Ajax y lograr que se muestren los submenús, pegamos, después del código anterior, el siguiente:


<script type='text/javascript'>

function mainmenu(){

// Oculto los submenus

$(" #nav ul ").css({display: "none"});

// Defino que submenus deben estar visibles cuando se pasa el mouse por encima

$(" #nav li").hover(function(){

    $(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);

    },function(){

        $(this).find('ul:first').slideUp(400);

    });

}

$(document).ready(function(){

    mainmenu();

});

</script>

4.- Para darle estilo al menú, pegamos, antes de la etiqueta ]]></b:skin>, el siquiente código CSS:


* { padding:0px; margin:0px; }

body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333; }

#menu { background-image:url(http://oi52.tinypic.com/mwy82v.jpg); background-repeat:repeat-x; height:30px; width:718px; margin:auto; padding-left:0px; }

#nav { list-style:none; }

#nav li { float:left; background-image:url(nav_li_bg.png); background-repeat:no-repeat; background-position:right; }

#nav li a { display:block; padding:7px 10px; text-decoration:none; color:#dcdcdc; font-weight:bold; }

#nav li a:hover { color:#ffffff; }

/* Submenu */

#nav ul.submenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333;}

#nav ul.submenu li { float:none; background-image:none; border-bottom:1px solid #999999; width:200px;}

/* Subsubmenu */

#nav ul.subsubmenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333; margin-left:150px; margin-top:-30px;}

#nav ul.subsubmenu li { float:none; background-image:none; border-bottom:1px solid #999999; min-width:200px;}

En el anterior código resaltamos:

En amarillo: el estilo de los caracteres de todos los títulos y el color del fondo del menú.
En azul: la URL de la imagen que sirve de fondo a la barra del menú, y sus dimensiones (para obtener imágenes con gradiente, como ésta, aquí encontramos una buena herramienta: gradcolor.com.
En verde: El color de los enlaces (títulos), en estado normal.
En rojo: El color de los enlaces (títulos), en estado hover (con el cursor sobre ellos).
En negro: El color de los bordes de submenús y subsubmenús.
En gris: El color del fondo de los submenús y subsubmenús.
En morado: El color de la línea que separa los submenús y los subsubmenús.

5.- Vista previa y Guardar plantilla

Los códigos agregados hasta aquí aplican para cualquiera de los dos menús

6.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript (debajo de la cabecera). En este gadget pegamos el siguiente código:

Para el menú con cinco menús principales:


<div id="menu">

<ul id="nav">

    <li><a href="#">Portada</a>

        <ul class="submenu">

            <li><a href="#">Índice</a>

                <ul class="subsubmenu">

                    <li><a href="#">Alfabético</a></li>

                    <li><a href="#">Capitular</a></li>

                </ul>

            </li>

            <li><a href="#">Sitemap</a></li>

        </ul>

    </li>

    <li><a href="#">HTML</a>

        <ul class="submenu">

            <li><a href="#">Documentos</a>

                <ul class="subsubmenu">

                    <li><a href="#">HTML</a></li>

                    <li><a href="#">XML</a></li>

                </ul>

            </li>

            <li><a href="#">Códigos</a></li>

            <li><a href="#">Tags</a></li>

        </ul>

    </li>

    <li><a href="#">Enlaces</a>

        <ul class="submenu">

            <li><a href="#">Relativos</a></li>

            <li><a href="#">Absolutos</a></li>

        </ul>

    </li>

    <li><a href="#">Tablas</a>

        <ul class="submenu">

            <li><a href="#">Básicas</a></li>

            <li><a href="#">Avanzadas</a></li>

        </ul>

    </li>

    <li><a href="#">Formatear</a>

        <ul class="submenu">

            <li><a href="#">Texto</a>

                <ul class="subsubmenu">

                    <li><a href="#">Estructura</a></li>

                    <li><a 

                        href="#">Preformatear</a></li>

                </ul>

            </li>

            <li><a href="#">Codificación</a></li>

            <li><a href="#">Marcado</a>

                <ul class="subsubmenu">

                    <li><a href="#">Básico</a></li>

                    <li><a href="#">Avanzado</a></li>

                </ul>

            </li>

            <li><a href="#">Espacios y saltos de 

                            línea</a></li>

       </ul>

    </li>

</ul>

</div>

Para el menú con nueve menús principales:


<div id="menu">

<ul id="nav">

    <li><a href="#">Portada</a>

        <ul class="submenu">

            <li><a href="#">Índice</a>

                <ul class="subsubmenu">

                    <li><a href="#">Alfabético</a></li>

                    <li><a href="#">Capitular</a></li>

                </ul>

            </li>

            <li><a href="#">Sitemap</a></li>

        </ul>

    </li>

    <li><a href="#">HTML</a>

        <ul class="submenu">

            <li><a href="#">Documentos</a>

                <ul class="subsubmenu">

                    <li><a href="#">HTML</a></li>

                    <li><a href="#">XML</a></li>

                </ul>

            </li>

            <li><a href="#">Códigos</a></li>

            <li><a href="#">Tags</a></li>

        </ul>

    </li>

    <li><a href="#">Enlaces</a>

        <ul class="submenu">

            <li><a href="#">Relativos</a></li>

            <li><a href="#">Absolutos</a></li>

        </ul>

    </li>

    <li><a href="#">Tablas</a>

        <ul class="submenu">

            <li><a href="#">Básicas</a></li>

            <li><a href="#">Avanzadas</a></li>

        </ul>

    </li>

    <li><a href="#">Formatear</a>

        <ul class="submenu">

            <li><a href="#">Texto</a>

                <ul class="subsubmenu">

                    <li><a href="#">Estructura</a></li>

                    <li><a 

                        href="#">Preformatear</a></li>

                </ul>

            </li>

            <li><a href="#">Codificación</a></li>

            <li><a href="#">Marcado</a>

                <ul class="subsubmenu">

                    <li><a href="#">Básico</a></li>

                    <li><a href="#">Avanzado</a></li>

                </ul>

            </li>

            <li><a href="#">Espacios y saltos de 

                            línea</a></li>

       </ul>

    </li>

    <li><a href="#">CSS</a>

        <ul class="submenu">

            <li><a href="#">Tipos de estilo</a>

                <ul class="subsubmenu">

                    <li><a href="#">Externo</a></li>

                    <li><a href="#">Interno</a></li>

                    <li><a href="#">En línea</a></li>

                </ul>

            </li>

            <li><a href="#">Códigos</a></li>

            <li><a href="#">Campos de texto</a></li>

            <li><a href="#">Recuadros</a></li>

        </ul>

    </li>

    <li><a href="#">Edición HTML</a>

        <ul class="submenu">

            <li><a href="#">Diseñador de 

                            plantillas</a></li>

            <li><a href="#">Eliminar fecha</a></li>

            <li><a href="#">Eliminar hora</a></li>

            <li><a href="#">Agregar sidebar</a></li>

            <li><a href="#">Ensanchar blog</a></li>

            <li><a href="#">Personalizar fecha</a></li>

            <li><a href="#">Personalizar hora</a></li>

            <li><a href="#">Crear portada</a></li>

            <li><a href="#">Eliminar cabecera</a></li>

        </ul>

    </li>

    <li><a href="#">Menús</a>

        <ul class="submenu">

            <li><a href="#">Vertical 

                desplegable</a></li>

            <li><a href="#">Efecto acordeón</a></li>

            <li><a href="#">Con CSS y Jquery</a></li>

        </ul>

    </li>

    <li><a href="#">Contacto</a></li>

</ul>

</div>

Resaltados en los dos códigos HTML anteriores:

En todas los a href="#" reemplazamos # por las URLs de los enlaces correspondienetes.
Los resaltados en verde los reemplazamos por los títulos de los enlaces correspondientes.

Siguiendo estrictamente la estructura del anidamiento podemos agregar todos los submenús y subsubmenús que queramos.

Podemos agregar más menús principales, pero teniendo en cuenta el ancho de la barra del menú (en nuestro caso es de 817px)

Índice: Menús
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable

Cambiar color de fondo de gadgets o widgets

2011-01-18T07:48:00.000-08:00

Podríamos, para darle un mejor diseño a nuestro blog, ponerle al fondo de los gadgets un color diferente al que nos es dado por defecto. En este tutorial veremos el procedimiento.

1.- Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

2.- Localizamos un código como éste:


      <div id='sidebar-wrapper'>

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML3' locked='false' title='TITULO' type='HTML'/>

<b:widget id='HTML1' locked='false' title='TITULO' type='HTML'/>

<b:widget id='Followers1' locked='false' title='TITULO' type='Followers'/>

<b:widget id='HTML2' locked='false' title='TITULO' type='HTML'/>

<b:widget id='BlogArchive1' locked='false' title='TITULO' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='TITULO' type='Profile'/>

</b:section>

      </div>

En el anterior código están identificados los widgets que tenemos en la sidebar. Les ponemos títulos para distinguirlos más fácilmente; después se los borramos, si quremos.

3.- Localizamos esta línea: ]]></b:skin>, y antes de la misma pegamos, por cada widget que tengamos en la sidebar (en nuestro ejemplo tenemos seis), este código:


#HTML1{

background: #XXXXXX; 

}

El resaltado en verde es la identificación de cada widget, y es donde debemos poner los resaltados en verde del código anterior. El resaltado en rojo es el código del color que le daremos al fondo de cada widget.

4.- En nuestro ejemplo el código que debemos pegar antes de: ]]></b:skin>, debería quedarnos así:


#HTML3{

background: #XXXXXX; 

}


#HTML1{

background: #XXXXXX; 

}


#Followers1{

background: #XXXXXX; 

}

#HTML2{

background: #XXXXXX; 

}


#BlogArchive1{

background: #XXXXXX; 

}


#Profile1{

background: #XXXXXX; 

}

Debemos ser cuidadosos con las identificaciones de los widgets (resaltado en verde); Éstas deben ser exactamente iguales en los códigos de los puntos 2 y 4, teniendo en cuenta mayúsculas y minúsculas. Si no es así, los colores no serán interpretados.

Menú vertical con CSS y jquery, efecto acordeón

2011-01-14T09:16:00.000-08:00

Del menú vertical con CSS y jquery, efecto acordeón, podemos ver un ejemplo aquí: ...y para ponerlo en nuestro blog, procedemos así:

1.- Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

2.- Para obtener el script Jquery y la librería Jquery localizamos la etiqueta </head> y, antes de la misma, pegamos el siguiente código:


<script src='http://pazos-blogger.googlecode.com/files/libreria.jquery.min.1.4.2.js' type='text/javascript'/>

<script src='http://pazos-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

3.- Para agregarle la funcionalidad al menú, con Jquery, pegamos, antes de la etiqueta </body>, el siguiente código:


<script type="text/javascript" charset="utf-8">

$(function(){

 $('#menu li a').click(function(event){

  var elem = $(this).next();

  if(elem.is('ul')){

   event.preventDefault();

   $('#menu ul:visible').not(elem).slideUp();

   elem.slideToggle();

  }

 });

});

</script>

4.- Para darle estilo al menú pegamos, antes de la etiqueta ]]></b:skin>, el siguiente código CSS:


#menu{

 -moz-border-radius:5px;

 -webkit-border-radius:5px;

 border-radius:5px;

 -webkit-box-shadow:1px 1px 3px #888;

 -moz-box-shadow:1px 1px 3px #888;

}

#menu li{border-bottom:1px solid #fff;}

#menu ul li, #menu li:last-child{border:none} 

a{

 display:block;

 color:#fff;

 text-decoration:none;

 font-family:'Helvetica', Arial, sans-serif;

 font-size:13px;

 padding:3px 5px;

 text-shadow:1px 1px 1px #000000;

}

#menu a:hover{

 color:#ffffff;

 -webkit-transition: color 0.2s linear;

}

#menu ul a{background-color:#088a85;}

#menu ul a:hover{

 background-color:#04b4ae;

 color:#0b3b39;

 text-shadow:none;

 -webkit-transition: color, background-color 0.2s linear;

}

ul{

 display:block;

 background-color:#0B3B39;

 margin:0;

 padding:0;

 width:130px;

 list-style:none;

}

#menu ul{background-color:#6594d1;}

#menu li ul {display:none;}

En el anterior código CSS podemos hacer las modificaciones a los colores y caracteres del menú, para adaptarlo al diseño de nuestro blog. El color de los enlaces no los podemos modificar en el menú, ya que nos son dados por defecto en la plantilla; para modificarlo debemos acudir al Diseñador de plantillas.

5.- Guardamos plantilla.

6.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript; quedará bien en la barra lateral (Sidebar). En este gadget pegamos el siguiente código:


<ul id="menu">

<li><a href="#">Menu 1</a>

 <ul>

  <li><a href="#">Submenu 1</a></li>

  <li><a href="#">Submenu 2</a></li>

  <li><a href="#">Submenu 3</a></li>

  <li><a href="#">Submenu 4</a></li>

  <li><a href="#">Submenu 5</a></li>

  <li><a href="#">Submenu 6</a></li>

  <li><a href="#">Submenu 7</a></li>

  <li><a href="#">Submenu 8</a></li>

 </ul>

</li>

<li><a href="#">Menu 2</a>

 <ul>

  <li><a href="#">Submenu 1</a></li>

  <li><a href="#">Submenu 2</a></li>

  <li><a href="#">Submenu 3</a></li>

  <li><a href="#">Submenu 4</a></li>

  <li><a href="#">Submenu 5</a></li>

  <li><a href="#">Submenu 6</a></li>

  <li><a href="#">Submenu 7</a></li>

 </ul>

</li>

<li><a href="#">Menu 3</a>

 <ul>

  <li><a href="#">Submenu 1</a></li>

  <li><a href="#">Submenu 2</a></li>

  <li><a href="#">Submenu 3</a></li>

  <li><a href="#">Submenu 4</a></li>

  <li><a href="#">Submenu 5</a></li>

  <li><a href="#">Submenu 6</a></li>

 </ul>

</li>

<li><a href="#">Menu 4</a>

 <ul>

  <li><a href="#">Submenu 1</a></li>

  <li><a href="#">Submenu 2</a></li>

  <li><a href="#">Submenu 3</a></li>

  <li><a href="#">Submenu 4</a></li>

  <li><a href="#">Submenu 5</a></li>

  <li><a href="#">Submenu 6</a></li>

  <li><a href="#">Submenu 7</a></li>

  <li><a href="#">Submenu 8</a></li>

  <li><a href="#">Submenu 9</a></li>

  <li><a href="#">Submenu 10</a></li>

 </ul>

</li>

<li><a href="#">Menu 5</a>

 <ul>

  <li><a href="#">Submenu 1</a></li>

  <li><a href="#">Submenu 2</a></li>

  <li><a href="#">Submenu 3</a></li>

  <li><a href="#">Submenu 4</a></li>

 </ul>

</li>

<li><a href="#">Menu 6</a>

 <ul>

  <li><a href="#">Submenu 1</a></li>

  <li><a href="#">Submenu 2</a></li>

  <li><a href="#">Submenu 3</a></li>

  <li><a href="#">Submenu 4</a></li>

  <li><a href="#">Submenu 5</a></li>

 </ul>

</li>

<li><a href="#">Menu 7</a>

 <ul>

  <li><a href="#">Submenu 1</a></li>

  <li><a href="#">Submenu 2</a></li>

  <li><a href="#">Submenu 3</a></li>

  <li><a href="#">Submenu 4</a></li>

  <li><a href="#">Submenu 5</a></li>

  <li><a href="#">Submenu 6</a></li>

  <li><a href="#">Submenu 7</a></li>

  <li><a href="#">Submenu 8</a></li>

 </ul>

</li>

<li><a href="#">Menu 8</a>

 <ul>

  <li><a href="#">Submenu 1</a></li>

  <li><a href="#">Submenu 2</a></li>

  <li><a href="#">Submenu 3</a></li>

  <li><a href="#">Submenu 4</a></li>

 </ul>

</li>

<li><a href="#">Menu 9</a>

 <ul>

  <li><a href="#">Submenu 1</a></li>

  <li><a href="#">Submenu 2</a></li>

  <li><a href="#">Submenu 3</a></li>

  <li><a href="#">Submenu 4</a></li>

  <li><a href="#">Submenu 5</a></li>

  <li><a href="#">Submenu 6</a></li>

 </ul>

</li>

<li><a href="#">Menu 10</a>

 <ul>

  <li><a href="#">Submenu 1</a></li>

  <li><a href="#">Submenu 2</a></li>

  <li><a href="#">Submenu 3</a></li>

  <li><a href="#">Submenu 4</a></li>

 </ul>

</li></ul>

En todos los <a href="#"> reemplazamos # por los enlaces correspondientes, y, a los menús y submenús les ponemos los títulos de los enlaces.

El anterior código lo podemos modificar agregando o quitando menús y submenús, según convenga a nuestro blog.

Índice: Menús
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable

Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante

2011-01-13T07:58:00.000-08:00

Vamos a crear un llamativo menú desplegable con efecto jQuery y CSS3. Este menú contiene cuadros de diapositivas e imágenes en miniatura que aparecen y se maximizan al pasar el cursor por encima de cada uno de los elementos del menú y, que al hacer click sobre las mismas, nos llevarán a las páginas de los enlaces correspondientes. También incluye recuadros en los submenús, que contienen enlaces, y con efecto deslizante hacia la derecha o hacia la izquierda. El autor de este menú es tympanus. Para ponerlo en nuestro blog el procedimiento es el siguiente:

1.- Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

2.- Para obtener el script jQuery y la librería jQuery localizamos la etiqueta </head> y, antes de la misma, pegamos el siguiente código:


<script src='http://pazos-blogger.googlecode.com/files/libreria.jquery.min.1.4.2.js' type='text/javascript'/>

<script src='http://pazos-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

3.- Para darle estilo al menú pegamos el siguiente código CSS antes de la etiqueta ]]></b:skin>:


/* Slide Menú desplegable con jQuery y CSS 3

----------------------------------------------- */



ul.sdt_menu{

margin:0;

padding:0;

list-style: none;

font-family:"Myriad Pro", "Trebuchet MS", sans-serif;

font-size:14px;

width:1020px;

}

ul.sdt_menu a{

text-decoration:none;

outline:none;

}

ul.sdt_menu li{

float:left;

width:170px;

height:85px;

position:relative;

cursor:pointer;

}

ul.sdt_menu li > a{

position:absolute;

top:0px;

left:0px;

width:170px;

height:85px;

z-index:12;

background:transparent url(http://lh6.ggpht.com/_NLOc3R4Yqfs/TN7g7VT6viI/AAAAAAAAB6I/ASvXrGS3N-c/overlay.png) no-repeat bottom right;

-moz-box-shadow:0px 0px 2px #000 inset;

-webkit-box-shadow:0px 0px 2px #000 inset;

box-shadow:0px 0px 2px #000 inset;

}

ul.sdt_menu li a img{

border:none;

position:absolute;

width:0px;

height:0px;

bottom:0px;

left:85px;

z-index:100;

-moz-box-shadow:0px 0px 4px #000;

-webkit-box-shadow:0px 0px 4px #000;

box-shadow:0px 0px 4px #000;

}

ul.sdt_menu li span.sdt_wrap{

position:absolute;

top:25px;

left:0px;

width:170px;

height:60px;

z-index:15;

}

ul.sdt_menu li span.sdt_active{

position:absolute;

background:#111;

top:85px;

width:170px;

height:0px;

left:0px;

z-index:14;

-moz-box-shadow:0px 0px 4px #000 inset;

-webkit-box-shadow:0px 0px 4px #000 inset;

box-shadow:0px 0px 4px #000 inset;

}

ul.sdt_menu li span span.sdt_link,

ul.sdt_menu li span span.sdt_descr,

ul.sdt_menu li div.sdt_box a{

margin-left:15px;

text-transform:uppercase;

text-shadow:1px 1px 1px #000;

}

ul.sdt_menu li span span.sdt_link{

color:#ffffff;

font-size:20px;

float:left;

clear:both;

}

ul.sdt_menu li span span.sdt_descr{

color:#81BEF7;

float:left;

clear:both;

width:155px; /*For dumbass IE7*/

font-size:10px;

letter-spacing:1px;

}

ul.sdt_menu li div.sdt_box{

display:block;

position:absolute;

width:170px;

overflow:hidden;

height:170px;

top:85px;

left:0px;

display:none;

background:#000;

}

ul.sdt_menu li div.sdt_box a{

float:left;

clear:both;

line-height:30px;

color:#0b75af;

}

ul.sdt_menu li div.sdt_box a:first-child{

margin-top:15px;

}

ul.sdt_menu li div.sdt_box a:hover{

color:#fff;

}

El código resaltado en amarillo corresponde al color de los títulos del menú principal, que en nuestro ejemplo es blanco. Si el fondo del blog en donde pondremos el menú es blanco, posiblemente los títulos no se verán. En este caso debemos cambiar ese color.

El código resaltado en verde corresponde al color de los subtítulos del menú principal, que en nuestro ejemplo es azul. Si el fondo del blog en donde pondremos el menú coincide con ese color, posiblemente los subtítulos no se verán. En este caso debemos cambiar dicho color.

4.- Localizamos la etiqueta </body> y, antes de la misma, pegamos el siguiente código:


<script type='text/javascript'>

$(function() {

/**

* for each menu element, on mouseenter,

* we enlarge the image, and show both sdt_active span and

* sdt_wrap span. If the element has a sub menu (sdt_box),

* then we slide it - if the element is the last one in the menu

* we slide it to the left, otherwise to the right

*/

$('#sdt_menu > li').bind('mouseenter',function(){

var $elem = $(this);

$elem.find('img')

.stop(true)

.animate({

'width':'170px',

'height':'170px',

'left':'0px'

},400,'easeOutBack')

.andSelf()

.find('.sdt_wrap')

.stop(true)

.animate({'top':'140px'},500,'easeOutBack')

.andSelf()

.find('.sdt_active')

.stop(true)

.animate({'height':'170px'},300,function(){

var $sub_menu = $elem.find('.sdt_box');

if($sub_menu.length){

var left = '170px';

if($elem.parent().children().length == $elem.index()+1)

left = '-170px';

$sub_menu.show().animate({'left':left},200);

}

});

}).bind('mouseleave',function(){

var $elem = $(this);

var $sub_menu = $elem.find('.sdt_box');

if($sub_menu.length)

$sub_menu.hide().css('left','0px');



$elem.find('.sdt_active')

.stop(true)

.animate({'height':'0px'},300)

.andSelf().find('img')

.stop(true)

.animate({

'width':'0px',

'height':'0px',

'left':'85px'},400)

.andSelf()

.find('.sdt_wrap')

.stop(true)

.animate({'top':'25px'},500);

});

$('#relatedPosts').toggle(

function(){

$('#rp_list').animate({'bottom':'10px'},500);

},

function(){

$('#rp_list').animate({'bottom':'-50px'},500);

}

);

$('#rp_list a').tipsy({gravity: 's'});

});

</script>

5.- Guardamos plantilla.

6.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript (debajo de la cabecera del blog). En este gadget añadido pegamos el siguiente código:


<ul id="sdt_menu" class="sdt_menu">

<li>

<a href="#">

<img src="http://t2.gstatic.com/images?q=tbn:04DuiA3qZ5hWeM:" alt=""/>

<span class="sdt_active"></span>

<span class="sdt_wrap">

<span class="sdt_link">Acerca de</span>

<span class="sdt_descr">Webmaster</span>

</span>

</a>

<div class="sdt_box">

<a href="#">Perfil</a>

<a href="#">Contacto</a>

</div>

</li>

<li>

<a href="#">

<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTUx73qNLW4NkNqtAbNHbi7o_aFU4ie5dsrUxpUyuUwLPzPW8edaQ" alt=""/>

<span class="sdt_active"></span>

<span class="sdt_wrap">

<span class="sdt_link">En Blogger</span>

<span class="sdt_descr">Blogs</span>

</span>

</a>

<div class="sdt_box">

<a href="#">Herramientas</a>

<a href="#">Castorluxerías</a>

<a href="#">Poesía</a>

<a href="#">Castorluxando</a>

</div>

</li>

<li>

<a href="#">

<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcRS_OfFGuJxy5B7n-23AAH45kfMzvAF9uO83TerlYs9Zdlo2i8YNDvebhz4" alt=""/>

<span class="sdt_active"></span>

<span class="sdt_wrap">

<span class="sdt_link">Herramientas</span>

<span class="sdt_descr">para webmasters</span>

</span>

</a>

<div class="sdt_box">

<a href="#">Generador de botones</a>

<a href="#">Generador de Popups</a>

<a href="#">Generador de Mailto</a>

<a href="#">Tutoriales</a>

</div>

</li>

<li>

<a href="#">

<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSPbN1_-2LGMAJ0Fw9Y9aJ92Xq2cPPbDf43i7Sc9vpv44-PtoADlhXIOf21pg" alt=""/>

<span class="sdt_active"></span>

<span class="sdt_wrap">

<span class="sdt_link">HTML</span>

<span class="sdt_descr">Lenguaje de marcado</span>

</span>

</a>

<div class="sdt_box">

<a href="#">Elementos</a>

<a href="#">Atributos</a>

<a href="#">Códigos básicos</a>

</div>

</li>

<li>

<a href="#">

<img src="http://4.bp.blogspot.com/_A8s1QW_050o/TS2y4BlgD0I/AAAAAAAAG-8/SlR-UWa13Z8/s1600/css_1.jpg" alt=""/>

<span class="sdt_active"></span>

<span class="sdt_wrap">

<span class="sdt_link">CSS</span>

<span class="sdt_descr">Hojas de estilo en cascada</span>

</span>

</a>

<div class="sdt_box">

<a href="#">Externa</a>

<a href="#">Interna</a>

<a href="#">En línea</a>

</div>

</li>

<li>

<a href="#">

<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcQpdVytNQH_UzRLW7W-DthbKuVY4v49MO39OdhWVa5mAL4GO8qIRs9n5c60" alt=""/>

<span class="sdt_active"></span>

<span class="sdt_wrap">

<span class="sdt_link">Visitantes</span>

<span class="sdt_descr">Libro de visitas</span>

</span>

</a>

<div class="sdt_box">

<a href="#">Comentarios</a>

</div>

</li>

</ul>

En todos los <a href="#"> reemplazamos # por nuestros enlaces.
Tolas las URLs resaltadas en rojo corresponden a las imágenes del ejemplo; las reemplazamos por las URLs de nuestras imágenes. Un click sobre cada una de las imágenes nos llevará a las página enlazada.
Las imágenes deben ser de 170px por 170px, o con dimensiones lo más próximas a éstas, para que no se distorsionen de manera notoria.
Los títulos (ejemplo: ACERCA DE), y los subtítulos (ejemplo: WEBMASTER), del menú principal, y los títulos de los enlaces de los submenús que van en el recuadro (ejemplo: PERFIL y CONTACTO), los cambiamos por nuestros títulos.

Índice: Menús
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable

Menú horizontal desplegable con CSS y Jquery

2011-01-10T13:17:00.000-08:00

En este menú horizontal cada elemento contiene un submenú vertical que se despliega, con un efecto relieve, proporcionado por la imagen gradiente utilizada como fondo.

Veamos cómo ponerlo en nuestro blog:

Página principal ► Diseño ► Edición de HTML ►

1.- Para añadir la funcionalidad del menú incluimos la librería jQuery, para lo cual pegamos inmediatamente antes de la etiqueta </head>, el siguiente código:


<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

2.- También necesitaremos añadir el plugin backgroundPosition para jQuery, lo cual lograremos pegando, después del anterior código, éste:


<script type="text/javascript" src="jquery.backgroundPosition.js"></script>

3.- Para usar la función slideDown/slideUp y el evento hover y así mostrar el submenú correspondiente cuando pasemos el cursor por uno de los elementos del menú principal pegamos, después del anterior código, el siguiente:


<script type="text/javascript">

$(function(){

 $('#nav>li').hover(

  function(){

  $('.submenu',this).stop(true,true).slideDown('fast');

  },

  function(){

  $('.submenu',this).slideUp('fast');

  }

 );

 

 $('.submenu li a').css( {backgroundPosition: "0px 0px"} ).hover(

  function(){

  $(this).stop().animate({backgroundPosition: "(0px -99px)"}, 250);

  },

  function(){

  $(this).stop().animate({backgroundPosition: "(0px 0px)"}, 250);

  }

 );   

});

</script>

4.- Con el siguiente código CSS lograremos mejorar el aspecto visual del menú. Funcionalmente podemos destacar varios aspectos: Los elementos de la lista principal (#nav) se encuentran flotados a la izquierda, para formar el menú horizontal, y tienen position: relative para que sirva de referencia a cada submenú. A la lista del submenú le asignamos position: absolute, para que cuando se despliegue esté situada bajo su menú correspondiente. Este submenú lo ocultamos por defecto con display: none para después mostrarlo con javascript cuando pasemos el cursor por encima de su menú principal. A cada enlace del elemento del submenú añadiremos la imagen del gradiente como background. Este es el codigo CSS que debemos pegar antes de la etiqueta ]]></b:skin>:


a{

display: block;

text-decoration: none;

color: #004a80;

padding: 5px;

}

 

ul{

width: 500px;

height: 28px;

}

 

ul,li{

list-style: none;

margin:0;

padding:0;

}

 

#nav{

font-family: 'Arial', sans-serif;

background: url('http://i56.tinypic.com/2vi05cj_th.jpg') repeat-x 0 0;

}

 

#nav li{

float:left;

position: relative;

width: 125px;

font-size: 14px;

font-variant: small-caps;

border-top:1px solid #004a80;

border-bottom:1px solid #004A80;

}

 

.submenu{

display: none;

position: absolute;

left: -1px;

border:none;

height: auto;

background: none;

}

 

#nav .submenu li{

float: none;

position: static;

margin: 0;

font-size: 11px;

font-variant: normal;

border: 1px solid #004a80;

border-top: none;

width: 124px;

}

 

#nav .submenu li a{

color: #FFFFFF;

background:  url('http://oi54.tinypic.com/2djb6c.jpg') repeat-x 0 0;

width: 114px;

height: 16px;

}

En el anterior código resaltamos:

En azul: El código color del fondo y los bordes del menú.
En rojo: Las dimensiones de la barra.
En amarillo: El estilo de los caracteres de los títulos.
En café: Los códigos de las imágenes que sirven de fondo a:
- En #nav{, a la barra de navegación del menú.
- En #nav .submenu li a{, a los submenús.
  Si las anteriores imágenes no son compatibles con el diseño de nuestro blog, en Gradcolor.com podemos generar la imagen adecuada. También podemos poner como fondo simplemente un color, en cuyo caso reemplazamos el código de la imagen por el código del color que elijamos (#XXXXXX). Ésta es una buena herramienta para conseguir códigos hexadecimalesde colores: Códigos hexadecimales de colores.
En verde: Las dimensiones de los encabezados de los submenús.
En negro: El ancho del fondo de los submenús.
En morado: El código del color de los caracteres de los títulos de los submenús y las dimensiones de los submenús.

5.- El html empleado es una simple lista con otra lista anidada para cada submenú. El siguiente es el código correspondiente que pegaremos en Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/Javacsript:


<ul id="nav">

 <li><a href="#"><big><b>Menu 1</b></big></a>

  <ul class="submenu">

   <li><a href="#">Submenu 1</a></li>

   <li><a href="#">Submenu 2</a></li>

   <li><a href="#">Submenu 3</a></li>

   <li><a href="#">Submenu 4</a></li>

   <li><a href="#">Submenu 5</a></li>

   <li><a href="#">Submenu 6</a></li>

  </ul>

 </li>

 <li><a href="#"><big><b>Menu 2</b></big></a>

  <ul class="submenu">

   <li><a href="#">Submenu 1</a></li>

   <li><a href="#">Submenu 2</a></li>

   <li><a href="#">Submenu 3</a></li>

   <li><a href="#">Submenu 4</a></li>

   <li><a href="#">Submenu 5</a></li>

   <li><a href="#">Submenu 6</a></li>

  </ul>

 </li>

 <li><a href="#"><big><b>Menu 3</b></big></a>

  <ul class="submenu">

   <li><a href="#">Submenu 1</a></li>

   <li><a href="#">Submenu 2</a></li>

   <li><a href="#">Submenu 3</a></li>

   <li><a href="#">Submenu 4</a></li>

   <li><a href="#">Submenu 5</a></li>

   <li><a href="#">Submenu 6</a></li>

  </ul>

 </li>

 <li><a href="#"><big><b>Menu 4</b></big></a>

  <ul class="submenu">

   <li><a href="#">Submenu 1</a></li>

   <li><a href="#">Submenu 2</a></li>

   <li><a href="#">Submenu 3</a></li>

   <li><a href="#">Submenu 4</a></li>

   <li><a href="#">Submenu 5</a></li>

   <li><a href="#">Submenu 6</a></li>

  </ul>

 </li>



</ul>

Este gadget lo ponemos debajo de la cabecera del blog.

Índice: Menús
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable

Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery

2011-01-06T14:12:00.000-08:00

Vamos a crear un menú horizontal con efecto card-shuffle, el cual hace que cuando se ingresa a la página que lo contiene los iconos se deslizan hacia adentro; luego, cuando se pasa el cursor por cada uno de los elementos, los íconos se deslizan desde la parte superior hacia afuera. Podemos verlo en funcionamiento aquí:

Vamos a ponerlo en nuestro blog:

Página principal ► Diseño ► Edición de HTML ►

1.- Debemos tener en nuestra plantilla la librería jQuery v1.3.2, para lograrlo localizamos la etiqueta </head> e inmediatamente antes pegamos el siguiente código:


<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script
/jQuery1.3.2.min.js' type='text/javascript'/>

2.- Añadimos el Script que producirá el efecto card-shuffle, para lo cual pegamos, después del código anterior y antes de la etiqueta </head>, el siguiente código:


<script type="text/javascript">

$(function() {

var d=1000;

$('#menu span').each(function(){

$(this).stop().animate({

'top':'-17px'

},d+=250);

});



$('#menu > li').hover(

function () {

var $this = $(this);

$('a',$this).addClass('hover');

$('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});

},

function () {

var $this = $(this);

$('a',$this).removeClass('hover');

$('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});

}

);

});

</script>

3.- Para darle estilo al menú pegamos, antes de la etiqueta ]]></b:skin>, el siguiente código CSS .


.navigation{

position:relative;

margin:0 auto;

width:915px;

}

ul.menu{

list-style:none;

font-family:"Verdana",sans-serif;

border-top:1px solid #bebebe;

margin:0px;

padding:0px;

float:left;

}

ul.menu li{

float:left;

}

ul.menu li a{

text-decoration:none;

background:#7E7E7E url(http://lh4.ggpht.com/_CJgyaq5cULk/S4qKDiprV2I/AAAAAAAAAx0/1Wy-zbsIeRs/bgMenu.stilo.apple.png) repeat-x top left;

padding:15px 0px;

width:128px;

color:#333333;

float:left;

text-shadow: 0 1px 1px #fff;

text-align:center;

border-right:1px solid #a1a1a1;

border-left:1px solid #e8e8e8;

font-weight:bold;

font-size:13px;

-moz-box-shadow: 0 1px 3px #555;

-webkit-box-shadow: 0 1px 3px #555;

}

ul.menu li a.hover{

background-image:none;

color:#fff;

text-shadow: 0 -1px 1px #000;

}

ul.menu li a.first{

-moz-border-radius:0px 0px 0px 10px;

-webkit-border-bottom-left-radius: 10px;

border-left:none;

}

ul.menu li a.last{

-moz-border-radius:0px 0px 10px 0px;

-webkit-border-bottom-right-radius: 10px;

}

ul.menu li span{

width:64px;

height:64px;

background-repeat:no-repeat;

background-color:transparent;

position:absolute;

z-index:-1;

top:80px;

cursor:pointer;

}

ul.menu li span.perro{

background-image:url(http://images.gograph.com/Images-9921/Icons/scoobydoo.gif);

left:33px; /*128/2 - 32(mitad del icono) +1 de borde*/

}

ul.menu li span.loro{

background-image:url(http://images.gograph.com/Images-9921/Icons/parrot.gif);

left:163px; /* más 128 + 2px de borde*/

}

ul.menu li span.oso{

background-image:url(http://images.gograph.com/Images-9921/Icons/jap38.gif);

left:293px;

}

ul.menu li span.dromedario{

background-image:url(http://images.gograph.com/Images-9921/Icons/afr21.gif);

left:423px;

}

ul.menu li span.canguro{

background-image:url(http://images.gograph.com/Images-9921/Icons/oce61.gif);

left:553px;

}

ul.menu li span.conejo{

background-image:url(http://images.gograph.com/Images-9921/Icons/ebunny19.gif);

left:683px;

}

ul.menu li span.leon{

background-image:url(http://images.gograph.com/Images-9921/Icons/afr34.gif);

left:813px;

}

En el anterior código podemos identificar los colores aplicados al menú y cambiarlos según convenga al diseño de nuestro blog.

Debemos tener en cuenta:

Las palabras resaltadas en verde son las que "atenderán al llamado" que se hará al estilo y al efecto, desde el elemento HTML/JavaScript, que crearemos en el punto siguiente.
Las direcciones (URL) resaltadas en rojo corresponden a las de los íconos del menú. Las cambiaremos por la direcciones (URL) de los íconos que se adapten a los temas de nuestro menú.

3.- Guardamos los cambios y, por último, vamos a:

Diseño ► Elementos de página ► Añadir un gadget

Elegimos un elemento tipo HTML/JavaScript y pegamos el siguiente código:


<div class="navigation">

<ul class="menu" id="menu">

<li><span class="perro"></span><a href="URL" class="first">Perros</a></li>

<li><span class="loro"></span><a href="URL">Loros</a></li>

<li><span class="oso"></span><a href="URL">Osos</a></li>

<li><span class="dromedario"></span><a href="URL">Dromedarios</a></li>

<li><span class="canguro"></span><a href="URL">Canguros</a></li>

<li><span class="conejo"></span><a href="URL">Conejos</a></li>

<li><span class="leon"></span><a href="URL" class="last">Leones</a></li>

</ul></div>

Las palabras resaltadas en verde deben ser idénticas a las resaltadas en verde, del código anterior, para que "la llamada" hecha al estilo y al efecto sea "atendida".
Los resaltados en azul los reemplazamos por las direcciones (URL) de las páginas a las que nos llevarán los enlaces.
Las palabras resaltadas en amarillo las cambiamos por los títulos de los enlaces.

Este elemento lo ponemos debajo de la cabecera del blog.

Índice: Menús
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable

Agregar una sidebar doble

2010-12-16T10:08:00.000-08:00

Podemos agregar una sidebar doble, debajo de la que ya tenemos, con el siguiente procedimiento (tomamos como referencia la plantilla Denim):

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantillas de artilugios:

1.- Localizamos el código CSS de la sidebar original:


#sidebar-wrapper {

  margin-$endSide: 14px;

  width: 240px;

  float: $endSide;

  background-color: $mainBgColor;

  display: inline;       /* fix for doubling margin in IE */

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

}

...lo copiamos y pegamos inmediatamente después, agregando lo que aparece resaltado:


}

#sidebar-wrapper-doble {

  margin-$endSide: 14px;

  width: 240px;

  float: $endSide;

  background-color: $mainBgColor;

  display: inline;       /* fix for doubling margin in IE */

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

}

2.- Para poner en su sitio y de manera simétrica las dos partes de la nueva sidebar pegamos, debajo del código anterior, el siguiente:


#columna-izda {

width: 48%;

float: left;

}

#columna-dcha {

width: 48%;

float: right;

}

3.- Desplazándonos hacia abajo en la plantilla, localizamos el código HTML de la sidebar original:


      <div id='sidebar-wrapper'>

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

</b:section>

      </div>

...y pegamos, antes de la etiqueta </div>, el siguiente código, correspondiente a la sidebar doble que hemos agregado:


     <div id='sidebar-wrapper-doble'>

       <b:section class='sidebar' id='columna-izda' showaddelement='yes'/>

       <b:section class='sidebar' id='columna-dcha' showaddelement='yes'/>

     <div style='clear: both;'/>

     </div>

4.- Guardamos plantilla

Así se verán los elementos de página con la sidebar doble que hemos agregado debajo de la original:

Ahora ya podemos añadir gadgets en cada una de las partes de la sidebar doble.

Agregar otra sidebar sencilla debajo de la sidebar doble

Si queremos agregar otra sidebar sencilla debajo de sidebar doble procedemos así:

1.- Localizamos el siguiente código, que hemos agregado para la sidebar doble:


#columna-izda {

width: 48%;

float: left;

}

#columna-dcha {

width: 48%;

float: right;

}

...y debajo del mismo pegamos éste:


}

#newsidebar-wrapper {

  margin-$endSide: 14px;

  width: 240px;

  float: $endSide;

  background-color: $mainBgColor;

  display: inline;       /* fix for doubling margin in IE */

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

}

2.- Descendemos en la plantilla y localizamos el código HTML de la sidebar doble:


     <div id='sidebar-wrapper-doble'>

       <b:section class='sidebar' id='columna-izda' showaddelement='yes'/>

       <b:section class='sidebar' id='columna-dcha' showaddelement='yes'/>

     <div style='clear: both;'/>

     </div> 

     </div>

...y antes de la última etiqueta </div> de ese código pegamos éste:


      <div id='newsidebar-wrapper'>

        <b:section class='sidebar' id='newsidebar' preferred='yes'/>

      </div>

3.- Guardamos plantilla.

Así se verán los elementos de página con las dos sidebar que hemos agregado: la doble y la sencilla, y podremos agregar gadgets en ellas.

Nota

En este tutorial se han tomado las medidas originales de la plantilla Denim, por consiguiente si hemos modificado el ancho del blog en donde vamos a agregar las sidebar, debemos ajustar el ancho de las mismas con el que le hemos dado al blog, guardando la simetría.

Índice: Agregar una sidebar
Para plantillas Herbert
Para plantillas Minima
Para plantillas Denim
Para plantillas Rounders
Para plantilla Simple
Para plantilla Picture Window
Para plantilla Travel
Para plantilla Awesome
Agregar sidebar doble

◄Anterior | Siguiente►

Ensanchar blog - plantilla Thisaway

2010-10-08T17:30:00.000-07:00

La plantilla Thisaway la podemos identificar en su encabezado, así:


-----------------------------------------------

Blogger Template Style

Name:    Thisaway

Date:     29 Feb 2004

Updated by: Blogger Team

----------------------------------------------- */

Ensanchar un blog diseñado con la plantilla Thisaway es un tanto complicado, ya que esta plantilla contiene, en su diseño, esquinas redondeadas, y como éstas no se desplazan por pertenecer a imágenes prediseñadas, tendremos que modificarlas para acondicionarlas al ancho que pretendamos darle al blog, subir las imágenes resultantes, y cambiar las URLs en la plantilla.

Podemos también eliminar las esquinas redondeadas, eliminando las URLs de las imágenes correspondientes, y como consecuencia lógica el blog nos quedará con las esquinas cuadradas.

El siguiente es el procedimiento para ensanchar el blog conservando las esquinas redondeadas:

Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

Sin expandir Plantillas de artilugios localizamos los siguientes segmentos y hacemos las modificaciones indicadas:

1.-


/* global

----------------------------------------------- */

body {

  margin: 0;

  text-align: center; 

  min-width: 760px;

  background: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x $startSide top;

  color: $textColor;

  font-size: small;

}

Cambiamos 760 por 940, para aumentar el ancho del cuerpo del blog.

2.-


/* layout

----------------------------------------------- */

#outer-wrapper {

  margin: 0 auto;

  width: 760px;

  text-align: $startSide;

  font: $bodyFont;

}

Cambiamos 760 por 940, para aumentar el ancho del diseño.

3.-


#content-wrapper {

  position: relative;

  width: 760px;

  background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;

}

Cambiamos 760 por 940, para aumentar el ancho de la envoltura del contenido.

4.-


#main-wrapper {

  display: inline; /* fixes a strange ie margin bug */

  float: $startSide;

  margin-top: 0;

  margin-$endSide: 0;

  margin-bottom: 0;

  margin-$startSide: 3px;

  padding: 0;

  width: 483px;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

}

Cambiamos 483 por 595, para aumentar el ancho del cuerpo de las entradas, guardando las proporciones del diseño original.

5.-


#sidebar-wrapper {

  display: inline; /* fixes a strange ie margin bug */

  float: $endSide;

  margin-top: 0;

  margin-$endSide: 3px;

  margin-bottom: 0;

  margin-$startSide: 0;

  width: 269px;

  color: $textColor;

  line-height: 1.4em;

  font-size: 90%;

  background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x $startSide top;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

}

Cambiamos 269 por 330, para aumentar el ancho de la sidebar, guardando las proporciones.

6.-


#sidebar {

  padding-top: 7px;

  padding-$endSide: 11px;

  padding-bottom: 0;

  padding-$startSide: 14px;

  background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 179px 0;

}

Cambiamos 179 por 245, para conservar la imagen de fondo de la sidebar en el mismo sitio en donde la tenía la plantilla original.

Cambio de las imágenes con esquinas redondeadas

Este Webmaster modificó las imágenes para acondicionaralas al nuevo ancho del blog, y subió las nuevas imágenes. Volvemos al inicio de la plantilla y, sin expandir plantillas de artilugios, localizamos los siquientes segmentos en los cuales cambiamos las URLs, así:

1.-


#header-wrapper {

  padding-bottom: 15px;

  background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif)
 
no-repeat $startSide bottom;

}

Eliminamos la URL resaltada y en su lugar ponemos ésta:


http://4.bp.blogspot.com/_A8s1QW_050o/TK3nro1CvmI/AAAAAAAAGzQ/

82FIeIZ9O9Y/s1600/bg_header_bottom.jpg

2.-


#content-wrapper {

  position: relative;

  width: 760px;

  background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif)
 
repeat-y $startSide top;

}

Eliminamos la URL resaltada y en su lugar ponemos ésta:


http://1.bp.blogspot.com/_A8s1QW_050o/TK3nOn_rauI/AAAAAAAAGzA/SHXZAwM_yCU/

s1600/bg_main_wrapper.jpg

3.-


#main {

  padding-top: 22px;

  padding-$endSide: 8px;

  padding-bottom: 0;

  padding-$startSide: 8px;

  background: url(http://www.blogblog.com/thisaway/bg_content.gif)
 
repeat-x $startSide top;

}

Eliminamos la línea resaltada, sin reemplazarla.

4.-


#sidebar-wrapper {

  display: inline; /* fixes a strange ie margin bug */

  float: $endSide;

  margin-top: 0;

  margin-$endSide: 3px;

  margin-bottom: 0;

  margin-$startSide: 0;

  width: 330px;

  color: $textColor;

  line-height: 1.4em;

  font-size: 90%;

  background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif)
 
repeat-x $startSide top;

  word-wrap: break-word; /* fix for long text breaking sidebar
 
float in IE */

  overflow: hidden;     /* fix for long non-text   content breaking
 
IE sidebar float */

}

Eliminamos la línea resaltada, sin reemplazarla.

5.-




#footer-wrapper {

  padding-top: 15px;

  background: url(http://www.blogblog.com/thisaway/bg_footer_top.gif)
 
no-repeat $startSide top;

  clear: both;

}

Eliminamos la URL resaltada y la reemplazamos por ésta:


http://3.bp.blogspot.com/_A8s1QW_050o/TK3m3fdWpoI/AAAAAAAAGy4/

jKc5Xb1yrug/s1600/bg_footer_top.jpg

Por último: Vista previa y Guardar plantilla.

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Minima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

◄Anterior | Siguiente►

Imagen de fondo para blogger, plantillas nuevas

2010-10-01T15:43:00.000-07:00

Vamos a poner una imagen de fondo para un blog creado con el Diseñador de Plantillas (Plantillas nuevas).

Vamos a Edición de HTML:

Sin expandir artilugios localizamos esta variable (puede no ser igual en todas las plantillas, pero éste es el parámetro general):


  <Variable name="body.background" description="Body Background" type="background"

       color="$(body.background.color)" default="$(color) none repeat-x scroll top center" value="#539bcd url(http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat-x fixed top center"/>

La eliminamos y en su lugar ponemos ésta:


 <Variable name="body.background" description="Body Background" type="background"

       color="$(body.background.color)" default="$(color) none repeat-x scroll top center" value="#539bcd url(http://www.blogblog.com/dots_dark/bg_minidots.gif) repeat fixed top center"/>

La parte resaltada es la URL de la imagen; la cambiamos por la que queremos colocar.

Con la característica repeat hacemos que la imagen se repita horizontal y verticalmente, a todo lo ancho y largo del fondo del blog.

Con la característica fixed logramos que la imagen quede fija mientras el blog se desplaza.

Nota

Las características con las que definimos posición y repetición de imágenes de fondo, son:

Con el valor no-repeat la imagen no se repite.
Con el valor repeat la imagen se repetirá horizontal y verticalmente, ocupando todo el fondo del blog.
Con el valor repeat-x la imagen se repetirá horizontalmente.
Con el valor repeat-y la imagen se repetirá verticalmente.
Con el valor fixed, la imagen será fija, sin él se desplazará con el contenido.
El valor top define la posición de la imagen: con left la ubica a la izquierda, con right a la derecha y con center al centro.

Ver: Poner imagen de fondo, plantillas antiguas

Índice Edición HTML
Poner imagen de fondo a un blog	Cambiar enlaces pie de página
Eliminar enlaces pie de página	Eliminar 'Publicado por'
Eliminar fechas	Eliminar la hora
Efecto subrayar links	Eliminar barra superior
Evitar copias de blogs	Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera	Ícono para barra de direcciones
Centrar títulos posts	Ensanchar blog
Cambiar color fondo posts	Color fondo sidebar
Agregar una sidebar	Color fondo de comentarios
Personalizar firma pie de posts	Personalizar fechas de los posts
Diseñador de plantillas de Blogger	Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas	Cambiar de sitio la sidebar
Centrar imagen de la cebecera

Menú vertical desplegable

2010-09-02T18:58:00.000-07:00

Un menú desplegable tiene la ventaja que, conteniendo un buen número de enlaces, ocupa poco espacio.

El siguiente es un modelo de código para un menú desplegable, que quedará muy bien en un gadget HTML/JavaScript puesto en la barra lateral de un blog:


<table border="1" width="253px" align="center">

<tr>

<th>

<center>

TITULO DEL MENÚ

</center>

</th>

</tr>

<tr>

<th>

<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu"> 

<option />Tema 1

<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

</select>



<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu"> 

<option />Tema 2

<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

</select>



<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu"> 

<option />Tema 3

<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

</select>



<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu"> 

<option />Tema 4

<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

</select>



<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu"> 

<option />Tema 5

<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

<option value="URL" />Título

</select>

</th>

</tr>

</table>

Reemplazamos:

TÍTULO DEL MENÚ, por el que le queramos dar, ejemplo: CONTENIDO, ÍNDICE.
Tema #, por los nombres que queramos darles a las divisiones con que hayamos diseñado nuestro blog, ejemplo: Sección #, Capítulo #.
URL, por las URLs de las entradas de nuestro blog.
Título, por el título de cada una de las entradas al lado de su correspondient URL.

Este menú se ha puesto en una tabla con un ancho de 253 pixeles y con ubicación en el centro. El número de guiones (32) debe ser igual en todos los desplegables para que el menú tenga uniformidad. Los títulos y los temas no deben superar ese ancho.

Para un menú más ancho se deben aumentar el número de pixeles de la tabla y los guiones de los desplegables, y viceversa.

Se puede aumentar, siguiendo los parámetros del modelo, el número de desplegables y dentro de éstos, el número de enlaces.

Así se verá el menú:

TITULO DEL MENÚ

Menú con color personalizado

Para poner color al menú hacemos las siguientes modificaciones al código:

1.- Para ponerle color al fondo agregamos a la primera línea del código la parte resaltada:

<table border="1" width="253px" align="center" bgcolor="#194155">

Con esto le damos un color al fondo del menú.

2.- Para ponerle color a las celdas cambiamos en cada uno de estos segmentos desplegable por combobox:

<select class="combobox" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">

3.- Vamos al CSS de nuestra plantilla, localizamos ]]></b:skin>, e inmediatamente antes pegamos esto:

.combobox { background-color: #0b615e; color: #ffffff; }

Con esto lograremos que las celdas tengan un color (el mismo del fondo), y el texto color blanco.

Así se verá el menú:

TITULO DEL MENÚ

Aquí encontramos una buena herramienta con códigos hexadecimales de colores:

Códigos hexadecimales de colores.

Índice: Menús
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable

Ensanchar blog-plantilla Dots

2010-08-22T13:45:00.000-07:00

Vamos a modificar la plantilla Dots para ensanchar blogs diseñados con la misma. La podemos identificar en el encabezamiento, así:


-----------------------------------------------

Blogger Template Style

Name:     Dots

Date:     24 Feb 2004

Updated by: Blogger Team

----------------------------------------------- */

Vamos a Editición HTML:

Sin expandir plantilla de artilugios localizamos los siguientes códigos y hacemos las modificaciones indicadas:

1.-


#outer-wrapper {

  background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;

  width:700px;

  margin:0 auto;

  text-align:$startSide;

  font:$bodyfont;

  }

Cambiamos 250 por 300 y 700 por 890.

2.-


#main-wrapper {

  width:450px;

  float:$endSide;

  padding:100px 0 20px;

  font-size:85%;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

Cambiamos 450 por 600. 3.-


#sidebar-wrapper {

  width:200px;

  float:$startSide;

  font-size:85%;

  padding-bottom:20px;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

Cambiamos 200 por 245.

4.-


#sidebar {

  background:url("http://www1.blogblog.com/dots/bg_dots2.gif") 150px -50px;

  padding:40px 10px 15px;

  width:200px;

  width/* */:/**/180px;

  width: /**/180px;

  }

Cambiamos 200 por 245 y 180 (dos veces) por 225.

5.-

Vista previa y Guardar plantilla.

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Minima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

◄Anterior | Siguiente►

Ensanchar blog - plantilla Harbor

2010-08-21T14:21:00.000-07:00

El blog que vamos a ensanchar es el diseñado con la plantilla Harbor, que podemos identificar en el encabezamiento, así:


-----------------------------------------------

Blogger Template Style

Name:     Harbor

Date:     24 Feb 2004

Updated by: Blogger Team

----------------------------------------------- */

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantilla de artilugios localizamos los siguientes bloques y hacemos las modificaciones indicadas:

1.-


#outer-wrapper {

  max-width:890px;

  padding: 0 30px 50px;

  width:100%;

  width/* */:/**/auto;

  width: /**/auto;

  }

Cambiamos la parte resaltada por: 100%, y con esto le damos al blog un ancho que se acomode a cualquier pantalla (también podemos dar el ancho en términos absolutos, o sea en determinado número de pixeles).

2.-


#main-wrapper {

  width:64%;

  float:$endSide;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

Cambiamos la parte resaltada por 71% y con esto aumentamos el ancho del cuerpo de las entradas. 3.-


#sidebar-wrapper {

  width:32%;

  float:$startSide;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

Cambiamos la parte resaltada por 25% y con esto disminuimos, proporcionalmente, el ancho de la barra lateral. Con el ancho que tenía (32%)ocupaba, más o menos, la tercera parte del ancho del blog. Con el ancho que le hemos dado ocupará la cuarta parte.

Podemos modificar los porcentajes teniendo en cuenta que el ancho del cuerpo de las entradas, y el ancho de la barra lateral no deben exceder el 96%.

4.-


.Header .description {

  margin:0;

  max-width:700px;

  line-height:1.8em;

  text-transform:uppercase;

  letter-spacing:.2em;

  color:$titlecolor;

  font: $blogDescriptionFont;

}

La parte resaltada corresponde al ancho que ocupa la descripción del blog, ubicada en la cabecera. Podemos modificarla, por ejemplo por 100%, para que dicha descripción ocupe todo el ancho de la cabecera, o el porcentaje que queramos darle sin sobrepasar, lógicamente, el 100%.

5.-

Vista previa y Guardar plantilla.

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Minima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

◄Anterior | Siguiente►

Agregar sidebar (barra lateral) - Plantilla Awesome

2010-08-15T16:18:00.000-07:00

La plantilla Awesome (Fantástico, S.A.) es de las nuevas de Blogger. Tiene una barra lateral (sidebar) derecha. Agregaremos una izquierda.

Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantillas de artilugios localizamos los siguientes códigos y hacemos las modificaciones indicadas con el resaltado en rojo:

Código original:


    <b:template-skin>

      <b:variable default='930px' name='content.width' type='length' value='860px'/>

      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>

      <b:variable default='360px' name='main.column.right.width' type='length' value='260px'/>

Código modificado:


    <b:template-skin>

      <b:variable default='930px' name='content.width' type='length' value='980px'/>

      <b:variable default='360px' name='main.column.left.width' type='length' value='220px'/>

      <b:variable default='360px' name='main.column.right.width' type='length' value='220px'/>

Hemos aumentado el ancho del blog a 980px, y a las dos barras laterales (sidebars), tanto a la que ya teníamos, como a la que agregamos, les hemos puesto un ancho, a cada una, de 220px.

Código original:


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

        <div class='column-left-inner'>

          <aside>

          <macro:include id='main-column-left-sections' name='sections'>

            <macro:param default='0' name='num' value='0'/>

            <macro:param default='sidebar-left' name='idPrefix'/>

            <macro:param default='sidebar' name='class'/>

            <macro:param default='true' name='includeBottom'/>

          </macro:include>

          </aside>

        </div>

        </div>

Código modificado:


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

        <div class='column-left-inner'>

          <aside>

          <macro:include id='main-column-left-sections' name='sections'>

            <macro:param default='2' name='num' value='1'/>

            <macro:param default='sidebar-left' name='idPrefix'/>

            <macro:param default='sidebar' name='class'/>

            <macro:param default='true' name='includeBottom'/>

          </macro:include>

          </aside>

        </div>

        </div>

Hemos habilitado la columna izquierda o barra lateral (sidebar) izquierda.

Al final de la plantilla encontramos este código:


<b:section-contents id='sidebar-right-1'>

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

</b:section-contents><b:section-contents id='footer-1'/><b:section-contents id='footer-2-1'/><b:section-contents id='footer-2-2'/></html>

Inmediatamente encima del mismo ponemos esto:


<b:section-contents id='sidebar-left-1'>

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

</b:section-contents>

La línea resaltada debemos eliminarla del código que teníamos, para que no nos dé error por repetición, ya que la hemos puesto en el código que agregamos. Corresponde al widget del perfil, que hemos puesto en la barra lateral izquierda.
Vista previa y guardar plantilla.
Vamos a Diseño ► Diseñador de plantillas ► Diseño ► Ajustar ancho:

..y veremos que ya tenemos habilitado el control para la barra lateral izquierda.

Éste es el blog original:

Y éste es el blog con la barra lateral que agregamos, en la cual está el perfil más un gadget añadido:

Podemos añadir en las dos barras más gadgets en Añadir y organizar elementos de página.:

Índice: Agregar una sidebar
Para plantillas Herbert
Para plantillas Minima
Para plantillas Denim
Para plantillas Rounders
Para plantilla Simple
Para plantilla Picture Window
Para plantilla Travel
Para plantilla Awesome
Agregar sidebar doble

◄Anterior | Siguiente►

Agregar sidebar - Plantilla Travel

2010-08-14T15:29:00.000-07:00

La plantilla que vamos a modificar es la Travel, que podemos identificar en el encabezamiento, así:


-----------------------------------------------

Blogger Template Style

Name:     Travel

Designer: Sookhee Lee

URL:      www.plyfly.net

----------------------------------------------- */

Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantilla de artilugios localizamos los siguientes códigos, y les hacemos las modificaciones indicadas con el resaltado en rojo:

Código original:


    <b:template-skin>

      <b:variable default='930px' name='content.width' type='length' value='860px'/>

      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>

      <b:variable default='360px' name='main.column.right.width' type='length' value='260px'/>

Código modificado:


    <b:template-skin>

      <b:variable default='930px' name='content.width' type='length' value='980px'/>

      <b:variable default='360px' name='main.column.left.width' type='length' value='220px'/>

      <b:variable default='360px' name='main.column.right.width' type='length' value='220px'/>

Código original:


/* Widgets

----------------------------------------------- */

.sidebar .widget {

  border-bottom: 2px solid $(widget.border.bevel.color);

  padding-bottom: 10px;

  margin: 10px 0;

}



.sidebar .widget:first-child {

  margin-top: 0;

}



.sidebar .widget:last-child {

  border-bottom: none;

  margin-bottom: 0;

  padding-bottom: 0;

}

Código modificado:


/* Widgets

----------------------------------------------- */

.sidebar .widget {

  border-bottom: 2px solid $(widget.border.bevel.color);

  padding-bottom: 10px;

  margin: 10px 0;

}



.sidebar .widget:first-child {

  border-bottom: none;

  margin-bottom: 0;

  padding-bottom: 0;

}



.sidebar .widget:last-child {

  border-bottom: none;

  margin-bottom: 0;

  padding-bottom: 0;

}

Código original:


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

        <div class='column-left-inner'>

          <aside>

          <macro:include id='main-column-left-sections' name='sections'>

            <macro:param default='0' name='num' value='0'/>

            <macro:param default='sidebar-left' name='idPrefix'/>

            <macro:param default='sidebar' name='class'/>

            <macro:param default='true' name='includeBottom'/>

          </macro:include>

          </aside>

        </div>

        </div>

Código modificado:


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

        <div class='column-left-inner'>

          <aside>

          <macro:include id='main-column-left-sections' name='sections'>

            <macro:param default='2' name='num' value='1'/>

            <macro:param default='sidebar-left' name='idPrefix'/>

            <macro:param default='sidebar' name='class'/>

            <macro:param default='true' name='includeBottom'/>

          </macro:include>

          </aside>

        </div>

        </div>

En el siguiente código, al final de la plantilla, eliminamos la parte resaltada:


<b:section-contents id='sidebar-right-1'>

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

</b:section-contents><b:section-contents id='footer-1'/><b:section-contents id='footer-2-1'/><b:section-contents id='footer-2-2'/></html>

Inmediatamente encima del anterior código pegamos el siguiente:

<b:section-contents id='sidebar-left-1'> <b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/> </b:section-contents>

Con los puntos 4 y 5 hemos pasado el perfil a la barra lateral (sidebar) izquierda.
Vista previa y Guardar plantilla

Vamos a Diseño ► Diseñador de plantillas ► Diseño ► Ajustar ancho:

..y veremos que ya tenemos habilitado el control para la barra lateral izquierda

El blog original:

El blog con dos barras laterales:

Índice: Agregar una sidebar
Para plantillas Herbert
Para plantillas Minima
Para plantillas Denim
Para plantillas Rounders
Para plantilla Simple
Para plantilla Picture Window
Para plantilla Travel
Para plantilla Awesome
Agregar sidebar doble

◄Anterior | Siguiente►

Ensanchar blog - Plantilla Scribe

2010-08-13T19:08:00.000-07:00

La plantilla que vamos a modificar es la Scribe, que podemos identificar en el encabezamiento, así:

----------------------------------------------------- Blogger Template Style Sheet Name: Scribe Date: 27 Feb 2004 Updated by: Blogger Team ------------------------------------------------------ */

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantilla de artilugios localizamos los siguientes códigos, y modificamos las cifras resaltadas en rojo:

Para ensanchar todo el blog, 700 por 940:
#outer-wrapper { background-color:#473624; border-$startSide:1px solid #332A24; border-$endSide:1px solid #332A24; width:700px; margin:0px auto; padding:8px; text-align:center; font: $bodyFont; } #main-top { width:700px; height:49px; background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top $startSide; margin:0px; padding:0px; display:block; } #main-bot { width:700px; height:81px; background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg") no-repeat top $startSide; margin:0; padding:0; display:block; } #wrap2 { width:700px; background:#FFF3DB url("http://www1.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y; margin-top: -14px; margin-$endSide: 0px; margin-bottom: 0px; margin-$startSide: 0px; text-align:$startSide; display:block; }
Para ensanchar el cuerpo de las entradas, 430 por 600:
#main { width:430px; float:$endSide; padding:8px 0; margin:0; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
Para ensanchar la barra lateral (sidebar), 150 por 220:
#sidebar { width:150px; float:$startSide; padding:8px 0; margin:0; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
Debemos cambiar las imágenes que le dan un efecto sombreado al fondo del blog y al marco del mismo, como también las que corresponden a las líneas que se encuentran encima y debajo de las entradas. Si no hacemos esto, como las imágenes no se ensanchan, el blog se nos va a ver muy mal. Para lograr esto cambiamos las URLs de las imágenes originales por las URLs de las mismas imágenes, pero adaptadas al ancho que le hemos dado al blog. Éstos son los cambios:
En:
#main-top { width:940px; height:49px; background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top $startSide; margin:0px;         padding:0px; display:block; }
...cambiamos la URL (resaltada en rojo), por ésta:
http://2.bp.blogspot.com/_A8s1QW_050o/TGV7VbaVixI/AAAAAAAAGmE/i81nV7RTyU4/s1600/imagenScribe1.jpg
En:
#main-bot { width:940px; height:81px; background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg") no-repeat top $startSide; margin:0;         padding:0; display:block; }
...cambiamos la URL (resaltada en rojo), por ésta:
http://1.bp.blogspot.com/_A8s1QW_050o/TGV65O3BxFI/AAAAAAAAGl8/vg11kMfo_p0/s1600/imagenScribe2.jpg
En:
#wrap2 { width:940px; background:#FFF3DB url("http://www1.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y; margin-top: -14px; margin-$endSide: 0px; margin-bottom: 0px; margin-$startSide: 0px; text-align:$startSide; display:block; }
...cambiamos la URL (resaltada en rojo), por ésta:
http://4.bp.blogspot.com/_A8s1QW_050o/TGV5xhUS73I/AAAAAAAAGl0/4GVpnPH6X0k/s1600/imagenScribe3.jpg
En:
#footer { clear:both; background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat top $startSide; padding-top:10px; _padding-top:6px; /* IE Windows target */ }
...y en:
#header {   background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat bottom $startSide; }

...Cambiamos la URL (resaltada en rojo), por ésta:
http://3.bp.blogspot.com/_A8s1QW_050o/TGV-CLvPLqI/AAAAAAAAGmM/YQmnWbFuH2E/s1600/imagenScribe4.gif
Vista previa y Guardar plantilla

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Minima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

◄Anterior | Siguiente►

Agregar una sidebar - plantilla Picture Window

2010-08-06T08:46:00.000-07:00

La plantilla Picture Window es de las nuevas de Blogger. Tiene una barra lateral (sidebar) derecha. Agregaremos una izquierda.

Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantilla de artilugios localizamos los siguientes códigos y hacemos las modificaciones indicadas con el resaltado en rojo:

Código original:


    <b:template-skin>

      <b:variable default='930px' name='content.width' type='length' value='860px'/>

      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>

      <b:variable default='360px' name='main.column.right.width' type='length' value='260px'/>

Código modificado:


    <b:template-skin>

      <b:variable default='930px' name='content.width' type='length' value='980px'/>

      <b:variable default='360px' name='main.column.left.width' type='length' value='220px'/>

      <b:variable default='360px' name='main.column.right.width' type='length' value='220px'/>

Hemos aumentado el ancho del blog a 980px, y a las dos barras laterales (sidebars), tanto a la que ya teníamos, como a la que agregamos, les hemos puesto un ancho, a cada una, de 220px.

Código original:


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

        <div class='column-left-inner'>

          <aside>

          <macro:include id='main-column-left-sections' name='sections'>

            <macro:param default='0' name='num' value='0'/>

            <macro:param default='sidebar-left' name='idPrefix'/>

            <macro:param default='sidebar' name='class'/>

            <macro:param default='true' name='includeBottom'/>

          </macro:include>

          </aside>

        </div>

        </div>

Código modificado:


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

        <div class='column-left-inner'>

          <aside>

          <macro:include id='main-column-left-sections' name='sections'>

            <macro:param default='2' name='num' value='1'/>

            <macro:param default='sidebar-left' name='idPrefix'/>

            <macro:param default='sidebar' name='class'/>

            <macro:param default='true' name='includeBottom'/>

          </macro:include>

          </aside>

        </div>

        </div>

Al final de la plantilla encontramos este código:


<b:section-contents id='sidebar-right-1'>

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

</b:section-contents><b:section-contents id='footer-1'/><b:section-contents id='footer-2-1'/><b:section-contents id='footer-2-2'/></html>

Inmediatamente encima del mismo ponemos esto:


<b:section-contents id='sidebar-left-1'>

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

</b:section-contents>

La línea resaltada debemos eliminarla del código que teníamos, para que no nos dé error por repetición, ya que la hemos puesto en el código que agregamos. Corresponde al widget del perfil, que hemos puesto en la barra lateral izquierda.
Vista previa y guardar plantilla.
Vamos a Diseño ► Diseñador de plantillas ► Diseño ► Ajustar ancho:

..y veremos que ya tenemos habilitado el control para la barra lateral izquierda

Así Teníamos en Diseño la página para añadir y organizar elementos:

Ahora la tendremos así:

Y el blog se verá así, con el perfil en la barra lateral (sidebar) que agregamos:

Índice: Agregar una sidebar
Para plantillas Herbert
Para plantillas Minima
Para plantillas Denim
Para plantillas Rounders
Para plantilla Simple
Para plantilla Picture Window
Para plantilla Travel
Para plantilla Awesome
Agregar sidebar doble

◄Anterior | Siguiente►

Centrar imagen de la cabecera de Blogger

2010-08-05T10:54:00.000-07:00

Cuando subimos una imagen a la cabecera de nuestro blog se puede presentar uno de estos casos:

Que la imagen sea más ancha que la cabecera: En esta caso la imagen se saldrá de la cabecera, y por tanto se debe descartar.
Que la imagen tenga el mismo ancho de la cabecera: En este caso la imagen encajará perfectamente, y es una imagen que se puede aceptar ya que no afectará la simetría del blog. Es la opción ideal.
Que la imagen sea menos ancha que la cabecera del blog: En esta caso la imagen nos aparecerá, por defecto, en el lado izquierdo. Si queremos que, para un mejor diseño, la imagen aparezca en el centro de la cebecera, debemos efectuar las siguientes modificaciones en nuestra plantilla (tomando como ejemplo un blog diseñado con el Nuevo Diseñador de Plantillas, y la plantilla Picture Window):

Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantillas de artilugios vamos a la sección CSS de la cabecera, e inmediatamente debajo de la siguiente línea:


/* Header

----------------------------------------------- */

...pegamos este código:


.header .widget {

margin-top: 4px;

margin-bottom: 4px;

width: 663px;

padding: 0 95px;

}

margin-top: 4px; corresponde a la distancia de la imagen al borde superior de la cabecera.
margin-bottom: 4px; corresponde a la distancia de la imagen al borde inferior de la cabecera.
width: 663px; corresponde a una imagen con 663 pixeles de ancho.
padding: 0 95px; corresponde a la distancia entre la imagen y los bordes laterales de la cabecera.

En el ejemplo de este tutorial, la imagen está centrada así: al ancho de la imagen corresponde un padding de 0 95px, con esta plantilla.

Dependiendo del ancho de la imagen (width) podemos centrarla aumentando o disminuyendo la distancia en pixeles (0 95px) entre la imagen y los bordes laterales (padding) de la cabecera, observando la ubicación de la imagen en la Vista previa, antes de guardar plantilla.

Para seguir conservando la simetría en la apariencia de nuestro blog, centramos, dentro de la imagen, el título del blog, así:

Siguiendo hacia abajo en la sección CSS de la cabecera (header), localizamos este código:


.Header h1 {

  font: $(header.font);

  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

}

...y le agregamos esta línea:


  text-align:center;

Debiendo quedarnos así:


.Header h1 {

  text-align:center;

  font: $(header.font);

  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

}

Observamos Vista previa y guardamos plantilla.

Así se verá el blog:

Índice Edición HTML
Poner imagen de fondo a un blog	Cambiar enlaces pie de página
Eliminar enlaces pie de página	Eliminar 'Publicado por'
Eliminar fechas	Eliminar la hora
Efecto subrayar links	Eliminar barra superior
Evitar copias de blogs	Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera	Ícono para barra de direcciones
Centrar títulos posts	Ensanchar blog
Cambiar color fondo posts	Color fondo sidebar
Agregar una sidebar	Color fondo de comentarios
Personalizar firma pie de posts	Personalizar fechas de los posts
Diseñador de plantillas de Blogger	Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas	Cambiar de sitio la sidebar
Centrar imagen de la cebecera

◄Anterior | Siguiente►

Agregar sidebar - Plantilla simple

2010-08-04T09:48:00.000-07:00

La plantilla Simple es de las nuevas de Blogger. Tiene una barra lateral (sidebar) derecha. Agregaremos una izquierda.

Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantilla de artilugios localizamos los siguientes códigos y hacemos las modificaciones indicadas con el resaltado en rojo:

Código original:


    <b:template-skin>

      <b:variable default='930px' name='content.width' type='length' value='860px'/>

      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>

      <b:variable default='360px' name='main.column.right.width' type='length' value='260px'/>

Código modificado:


    <b:template-skin>

      <b:variable default='930px' name='content.width' type='length' value='980px'/>

      <b:variable default='360px' name='main.column.left.width' type='length' value='220px'/>

      <b:variable default='360px' name='main.column.right.width' type='length' value='220px'/>

Hemos aumentado el ancho del blog a 980px, y a las dos barras laterales (sidebars), tanto a la que ya teníamos, como a la que agregamos, les hemos puesto un ancho, a cada una, de 220px.

Código original:


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

        <div class='column-left-inner'>

          <aside>

          <macro:include id='main-column-left-sections' name='sections'>

            <macro:param default='0' name='num' value='0'/>

            <macro:param default='sidebar-left' name='idPrefix'/>

            <macro:param default='sidebar' name='class'/>

            <macro:param default='true' name='includeBottom'/>

          </macro:include>

          </aside>

        </div>

        </div>

Código modificado:


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

        <div class='column-left-inner'>

          <aside>

          <macro:include id='main-column-left-sections' name='sections'>

            <macro:param default='2' name='num' value='1'/>

            <macro:param default='sidebar-left' name='idPrefix'/>

            <macro:param default='sidebar' name='class'/>

            <macro:param default='true' name='includeBottom'/>

          </macro:include>

          </aside>

        </div>

        </div>

Hemos habilitado la columna izquierda o barra lateral (sidebar) izquierda.

Al final de la plantilla encontramos este código:


<b:section-contents id='sidebar-right-1'>

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

</b:section-contents><b:section-contents id='footer-1'/><b:section-contents id='footer-2-1'/><b:section-contents id='footer-2-2'/></html>

Inmediatamente encima del mismo ponemos esto:


<b:section-contents id='sidebar-left-1'>

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

</b:section-contents>

La línea resaltada debemos eliminarla del código que teníamos, para que no nos dé error por repetición, ya que la hemos puesto en el código que agregamos. Corresponde al widget del perfil, que hemos puesto en la barra lateral izquierda.
Vista previa y guardar plantilla.
Vamos a Diseño ► Diseñador de plantillas ► Diseño ► Ajustar ancho:

..y veremos que ya tenemos habilitado el control para la barra lateral izquierda

Así Teníamos en Diseño la página para añadir y organizar elementos:

Ahora la tendremos así:

Y el blog se verá así, con el perfil en la barra lateral (sidebar) que agregamos:

Índice: Agregar una sidebar
Para plantillas Herbert
Para plantillas Minima
Para plantillas Denim
Para plantillas Rounders
Para plantilla Simple
Para plantilla Picture Window
Para plantilla Travel
Para plantilla Awesome
Agregar sidebar doble

◄Anterior | Siguiente►

Ensanchar blog - Plantillas nuevas

2010-08-03T08:09:00.000-07:00

Éstas son las plantillas nuevas:

Simple (Sencillo)


    <b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name:     Simple

Designer: Josh Peterson

URL:      www.noaesthetic.com

----------------------------------------------- */

Picture Window


    <b:skin><![CDATA[/*-----------------------------------------------

Blogger Template Style

Name:     Picture Window

Designer: Josh Peterson

URL:      www.noaesthetic.com

----------------------------------------------- */

Awesone Inc (Fantástico S.A.)


    <b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name:     Awesome Inc.

Designer: Tina Chen

URL:      tinachen.org

----------------------------------------------- */

Watermark (Filigrana)


    <b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name:     Watermark

Designer: Josh Peterson

URL:      www.noaesthetic.com

----------------------------------------------- */

Ethereal (Stéreo)


    <b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name:     Ethereal

Designer: Jason Morrow

URL:      jasonmorrow.etsy.com

----------------------------------------------- */

Travel (Viajes)


    <b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name:     Travel

Designer: Sookhee Lee

URL:      www.plyfly.net

----------------------------------------------- */

Para ensanchar los blogs diseñados con las plantillas nuevas de Blogger no es necesario modificar las plantillas. Sencillamente vamos al diseñador de plantillas y modificamos los anchos, tanto del blog completo como el de la barra lateral:

Vamos a Diseño ► Diseñador de plantillas ► Diseño ► Ajustar ancho:

Sin embargo el diseñador permite anchar el blog hasta un máximo de 1000 pixeles. Si queremos aumentar ese límite procedemos así:

Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantilla de artilugios localizamos el siguiente código:


    <b:template-skin>

      <b:variable default='930px' name='content.width' type='length' value='860px'/>

      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>

      <b:variable default='360px' name='main.column.right.width' type='length' value='260px'/>

El resaltado 860px, corresponde al ancho del blog. Cambiamos el número de pixeles por el ancho que queramos darle, mayor que 1000px.

El resaltado 260px, corresponde al ancho de la barra lateral, en este caso derecha. Lo dejamos así ya que podemos modificarlo con el diseñador, que nos permite, para la barra lateral un máximo de 500px, que es un ancho más que suficiente.

A diferencia de plantilla antiguas, con las nuevas no tenemos que modificar el ancho de la cabecera ni del pie del blog, ya que éstos forman parte integral del cuerpo del blog. Por lo tanto las imágenes que pongamos en la cabecera y en el pie no deberán exceder el ancho que le demos al blog.

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Minima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

◄Anterior | Siguiente►

Ensanchar blog - plantillas Rounders

2010-07-31T08:30:00.000-07:00

La plantilla que vamos a modificar es la Rounders, que podemos identificar en el encabezamiento, así:


-----------------------------------------------

Blogger Template Style

Name:     Rounders

Date:     27 Feb 2004

Updated by: Blogger Team

----------------------------------------------- */

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantilla de artilugios localizamos los segmentos de códigos y hacemos las modificaciones indicadas con los resaltados en rojo:

Para ensanchar el blog:

#outer-wrapper { width:940px; margin:0 auto; text-align:$startSide; font: $bodyFont; }

Para ensanchar el cuerpo de las entradas:


#main-wrap1 {

  width:635px;

  float:$startSide;

  background:$mainBgColor url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat $startSide bottom;

  margin:15px 0 0;

  padding:0 0 10px;

  color:$mainTextColor;

  font-size:97%;

  line-height:1.5em;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

#main-wrap2 {

  float:$startSide;

  width:100%;

  background:url("http://www1.blogblog.com/rounders/corners_main_top.gif") no-repeat $startSide top;

  padding:10px 0 0;

  }

#main {

  background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y $startSide;

  padding:0;

  width:635px;

  }

Para ensanchar la sidebar:


#sidebar-wrap {

  width:290px;

  float:$endSide;

  margin:15px 0 0;

  font-size:97%;

  line-height:1.5em;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

Para ensanchar el widget pie de post:

.main .widget { margin-top: 4px; width: 618px; padding: 0 13px; }
Para ensanchar el marco exterior de las entradas:

.main .Blog { margin: 0; padding: 0; width: 634px; }
Para ensanchar la envoltura exterior del blog:

body#layout #outer-wrapper { width: 930px; }
Debido a que loa blogs diseñados con las plantillas Rounders tienen las esquias redondeadas, y éstas no se desplazan, la apariencia del blog aparecerá muy extraña. Para evitar esto eliminamos todas las URLs de las imágenes que redondean las esquinas para que éstas adquieran la forma cuadrada, que también es un buen diseño. Dichas URLs las localizarremos fácilmente porque todas tienen la palabra Corners. Son las siguientes:

url("http://www1.blogblog.com/rounders/corners_main_bot.gif")

url("http://www1.blogblog.com/rounders/corners_main_top.gif")

url("http://www2.blogblog.com/rounders/corners_cap_top.gif")

url("http://www.blogblog.com/rounders/corners_cap_bot.gif")

url("http://www.blogblog.com/rounders/corners_prof_bot.gif")

url("http://www2.blogblog.com/rounders/corners_prof_top.gif")

url("http://www.blogblog.com/rounders/corners_side_top.gif")

url("http://www1.blogblog.com/rounders/corners_side_bot.gif")

url("http://www2.blogblog.com/rounders/corners_cap_top.gif")

url("http://www.blogblog.com/rounders/corners_cap_bot.gif")
Por último eliminamos esta URL, que corresponde a la imagen del marco que une las esquinas redondeadas del cuerpo de las entradas (la parte resaltada):

#main { background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y $startSide; padding:0; width:485px;
Vista previa y, si todo está bien, guardamos plantilla.

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Mínima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

◄Anterior | Siguiente►

Ensanchar blog - plantillas Denim

2010-07-29T06:27:00.000-07:00

El blog que vamos a ensanchar es el diseñado con la plantilla Denim, que podemos identificar en el encabezamiento del código, así:


-----------------------------------------------

Blogger Template Style

Name:     Denim

Designer: Darren Delaye

URL:      www.DarrenDelaye.com

Date:     11 Jul 2006

-----------------------------------------------

Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantillas de arilugios localizamos el siguiente segmento de código de la cabecera del blog:


/* Header

----------------------------------------------- */

#header-wrapper {

  margin:0;

  padding: 0;

  background-color: $headerCornersColor;

  text-align: $startSide;

}



#header {

  width: 760px;

  margin: 0 auto;

  background-color: $headerBgColor;

  border: 1px solid $headerBgColor;

  color: $headerTextColor;

  padding: 0;

  font: $headerFont;

}

Modificamos la línea resaltada, así:

width: 760px;

Por:

width: 950px;

Con esto hemos ensanchado únicamente la cabecera.

Vamos al código del contenido y modificamos las líneas resaltadas, así::


/* Content

----------------------------------------------- */



.clear { 

  clear: both;

}





#content-wrapper {

  width: 760px;

  margin: 0 auto;

  padding: 0 0 15px;

  text-align: $startSide;

  background-color: $mainBgColor;

  border: 1px solid $borderColor;

  border-top: 0;

}

#main-wrapper {

  margin-$startSide: 14px;

  width: 464px;

  float: $startSide;

  background-color: $mainBgColor;

  display: inline;       /* fix for doubling margin in IE */

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

}

#sidebar-wrapper {

  margin-$endSide: 14px;

  width: 240px;

  float: $endSide;

  background-color: $mainBgColor;

  display: inline;       /* fix for doubling margin in IE */

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

}

width: 760px;

Por:

width: 950px;;

...y

width: 464px;

Por:

width: 654px;

Así hemos ensanchado el cuerpo del contenido y el de las entradas. Hemos aumentado en 190px el ancho del blog y el cuerpo de las entradas. La sidebar la hemos dejado como estaba (240px).

Podemos variar los anchos según nuestra conveniencia, teniendo en cuenta que la suma del ancho del cuerpo de las entradas, más el ancho de la sidebar, más 56px que corresponden al espacio entre el cuerpo de las entradas y la sidebar, debe ser igual al ancho del blog. En nuestro caso 654 más 240 más 56 nos da 950px, que es el ancho del blog.

Vista previa y guardar cambios.

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Minima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

◄Anterior | Siguiente►

Agregar una sidebar - Plantillas Rounders

2010-07-25T10:00:00.000-07:00

La plantilla que vamos a modificar es la Rounders, que podemos identificar en el encabezamiento del código, así:


-----------------------------------------------

Blogger Template Style

Name:     Rounders

Date:     27 Feb 2004

Updated by: Blogger Team

----------------------------------------------- */

Los blogs con plantilla Rounders tienen una sidebar derecha. Vamos a agregar una sidebar izquierda:

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantilla de artilugios:

Aumentamos el ancho del blog, para lo cual localizamos el siguiente código:

#outer-wrapper { width:740px; margin:0 auto; text-align:$startSide; font: $bodyFont; }

Modificamos la línea resaltada cambiando

width:740px;

...por:

width:985px;

De esta manera aumentamos el ancho del blog en 245px, que es el ancho de la sidebar que vamos a agregar (240px), para que nos quede igual a la que ya tenemos, mas 5px para sumarlos a los 15px del espacio entre la primera sidebar y el cuerpo del blog y repartir esos 20px entre los espacios que dejaremos entre cada sidebar y el cuerpo de las entradas.

Para lograr lo anterior vamos al siguiente código, que se encuentra inmediatamente después del anterior:


#main-wrap1 {

  width:485px;

  float:$startSide;

  background:$mainBgColor url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat $startSide bottom;

  margin:15px 0 0;

  padding:0 0 10px;

  color:$mainTextColor;

  font-size:97%;

  line-height:1.5em;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

...y modificamos la parte resaltada, así:

margin:15px 0 0;

...por:

margin:10px 10px 0;

Más hacia abajo localizamos este código:


#sidebar-wrap {

  width:240px;

  float:$endSide;

  margin:15px 0 0;

  font-size:97%;

  line-height:1.5em;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

...lo copiamos y lo pegamos inmediatamente después del mismo, modificando las líneas resaltadas, en el que pegamos, así:

#sidebar-wrap {

...por:

#newsidebar-wrap {

...y

float:$endSide;

...por:

float:$startSide;

En los dos anteriores códigos, el que teníamos y el que pegamos, modificamos la otra línea resaltada, así:

margin:15px 0 0;

...por:

margin:10px 0 0;

Siguiendo hacia abajo en la plantilla localizamos este código:


  <div id='main-wrap1'><div id='main-wrap2'>

    <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

  </div></div>

...encima del cual pegamos éste:


    <div id='newsidebar-wrap'><b:section class='sidebar' id='newsidebar' preferred='yes'><b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/></b:section></div>

A continuación localizamos el código de la sidebar que ya teníamos:


  <div id='sidebar-wrap'>



    <div id='sidebartop-wrap'><div id='sidebartop-wrap2'>

      <b:section class='sidebar' id='sidebartop'>

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

</b:section>

    </div></div>

...y borramos la parte resaltada, correspondiente al perfil, que hemos puesto en la sidebar nueva, para que no nos dé error por repetición.

Debido a que los blogs diseñados con esta plantilla tienen todas las esquinas redondeadas y éstas no se desplazan al ensanchar, la cabecera (header) y el pie (footer) del blog nos quedarán partidos; Además la sidebar izquierda nos quedará con esquinas cuadradas y la derecha con esquinas redondeadas. Para evitar que esto ocurra y lograr uniformidad en el blog, eliminamos las imágenes que redondean estas esquinas, borrando todas las URLs en las que aparezca la palabra corners, y que son éstas:

url("http://www1.blogblog.com/rounders/corners_main_bot.gif")

url("http://www1.blogblog.com/rounders/corners_main_top.gif")

url("http://www2.blogblog.com/rounders/corners_cap_top.gif")

url("http://www.blogblog.com/rounders/corners_cap_bot.gif")

url("http://www.blogblog.com/rounders/corners_prof_bot.gif")

url("http://www2.blogblog.com/rounders/corners_prof_top.gif")

url("http://www.blogblog.com/rounders/corners_side_top.gif")

url("http://www1.blogblog.com/rounders/corners_side_bot.gif")

url("http://www2.blogblog.com/rounders/corners_cap_top.gif")

url("http://www.blogblog.com/rounders/corners_cap_bot.gif")
Eliminamos esta URL, que corresponde a la imagen del marco que une las esquinas redondeadas del cuerpo de las entradas (la parte resaltada):

#main { background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y $startSide; padding:0; width:485px;

Le ponemos a la nueva sidebar el mismo color de la que ya teníamos. Para ello regresamos al código de dicha sidebar, que ya creamos, y le agregamos la línea resaltada:


#newsidebar-wrap {

  background:#ccddcc;

  width:240px;

  float:$startSide;

  margin:10px 0 0;

  font-size:97%;

  line-height:1.5em;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

Vista previa y guardar.

Así se verá el blog con el perfil y un widget en la sidebar agregada (izquierda):

Índice: Agregar una sidebar
Para plantillas Herbert
Para plantillas Minima
Para plantillas Denim
Para plantillas Rounders
Para plantilla Simple
Para plantilla Picture Window
Para plantilla Travel
Para plantilla Awesome
Agregar sidebar doble

◄Anterior | Siguiente►

Agregar una sidebar - Plantillas Denim

2010-07-16T16:26:00.000-07:00

La plantilla que vamos a modificar es la Denim, que podemos identificar en el encabezamiento del código, así:


-----------------------------------------------

Blogger Template Style

Name:     Denim

Designer: Darren Delaye

URL:      www.DarrenDelaye.com

Date:     11 Jul 2006

-----------------------------------------------

Los blogs con plantilla Denim tienen una sidebar derecha. Vamos a agregar una sidebar izquierda:

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantilla de artilugios:

Aumentamos el ancho del blog, para lo cual localizamos el siguiente código:


#content-wrapper {

  width: 760px;

  margin: 0 auto;

  padding: 0 0 15px;

  text-align: $startSide;

  background-color: $mainBgColor;

  border: 1px solid $borderColor;

  border-top: 0;

Modificamos la línea resaltada cambiando:

width: 760px;

...por:

width: 1000px;

De esta manera aumentamos el ancho del blog en 240px, que es el ancho de la sidebar existente, el mismo que le daremos a la sidebar que vamos a agregar.

En el código que está a continuación:


#main-wrapper {

  margin-$startSide: 14px;

  width: 464px;

  float: $startSide;

  background-color: $mainBgColor;

  display: inline;       /* fix for doubling margin in IE */

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float

...podemos observar que el ancho del cuerpo de las entradas es de 464px.

Inmediatamente después encontramos este código:


#sidebar-wrapper {

  margin-$endSide: 14px;

  width: 240px;

  float: $endSide;

  background-color: $mainBgColor;

  display: inline;       /* fix for doubling margin in IE */

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

}

...lo copiamos y lo pegamos enseguida del mismo, modificando (en el que hemos pegado) las líneas resaltadas, así:

#sidebar-wrapper

...por

#newsidebar-wrapper

float: $endSide;

...por:

float: $startSide;

De esta manera creamos la nueva sidebar.

Nótese que la suma de los anchos de las dos sidebar's (240px c/u), más el ancho del cuerpo de las entradas (464px), suman 944px, que no excede el ancho de 1000px que le hemos dado al blog.

Podemos modificar los anchos de las sidebar's y del cuerpo de las entradas (columna central) a nuestro gusto y según nuestras conveniencias, siempre y cuando que la suma de los mismos no exceda al ancho del blog.

En la parte inferior de la plantilla localizamos este código:


      <div id='main-wrapper'>

        <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

      </div>

...encima del cual pegamos éste:


    <div id='newsidebar-wrapper'><b:section class='sidebar' id='newsidebar' preferred='yes'><b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/></b:section></div>

Así crearemos el Widget con el prefil, ubicado en la nueva sidebar.

Bajando en la plantilla localizamos el código de la sidebar que ya teníamos:


      <div id='sidebar-wrapper'>

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

</b:section>

      </div>

...y borramos la parte resaltada, para que no nos dé error por repetición.

Subiendo en la plantilla localizamos este código:


#header {

  width: 760px;

  margin: 0 auto;

  background-color: $headerBgColor;

  border: 1px solid $headerBgColor;

  color: $headerTextColor;

  padding: 0;

  font: $headerFont;

}

...y cambiamos la línea resaltada, así:

width: 760px

por:

width: 1000px

...para darle a la cabecera el mismo ancho que le dimos al blog.

Hacemos vista previa y, si todo lo hemos hecho correctamente, veremos la sidebar izquierda y en ella, el perfil. Ahora podremos agregar gadgets en esta sidebar.

Así se verá el blog con un widget agregado en la sidebar nueva:

Índice: Agregar una sidebar
Para plantillas Herbert
Para plantillas Minima
Para plantillas Denim
Para plantillas Rounders
Para plantilla Simple
Para plantilla Picture Window
Para plantilla Travel
Para plantilla Awesome
Agregar sidebar doble

◄Anterior | Siguiente►

Agregar una sidebar - Plantilla Minima

2010-07-15T15:35:00.000-07:00

La plantilla que vamos a modificar es la Minima, que podemos identificar en el encabezamiento del código, así:


-----------------------------------------------

Blogger Template Style

Name:     Minima

Date:     26 Feb 2004

Updated by: Blogger Team

----------------------------------------------- */

Los blogs con plantilla Minima tienen una sidebar derecha. Vamos a agregar una sidebar izquierda:

Página principal ► Diseño ► Edición de HTML ►

Sin expandir plantilla de artilugios:

Aumentamos el ancho del blog, para lo cual localizamos el siguiente código:

#outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; }
Modificamos la línea resaltada cambiando:

width: 660px

...por:

width: 950px

Aumentamos el ancho de las entradas localizando el siguiente código:


#main-wrapper {

  width: 410px;

  float: $startSide;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

Modificamos la línea resaltada, cambiando:

width: 410px;

...por:

width: 440px;

Localizamos y copiamos este segmento de código:


#sidebar-wrapper {

  width: 220px;

  float: $endSide;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

}

...y lo pegamos a continuación del mismo, modificando las líneas resaltadas, así:

#sidebar-wrapper

...por:

#newsidebar-wrapper

float: $endSide;

...por:

float: $startSide;

Con esto creamos la nueva sidebar.

Debemos tener en cuenta que la suma de los anchos de las dos sidebar's, más el del cuerpo de las entradas, no deben exceder al ancho del blog.

Bajando en la plantilla buscamos este código:


      <div id='main-wrapper'>

        <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

      </div>

...encima del cual pegamos éste:


    <div id='newsidebar-wrapper'><b:section class='sidebar' id='newsidebar' preferred='yes'><b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/></b:section></div>

Vamos al código de la sidebar que ya teníamos:


      <div id='sidebar-wrapper'>

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

</b:section>

      </div>

...y borramos la parte resaltada, para que no nos dé error por repetición.

Le damos a la cebecera el mismo ancho que le dimos al blog, para lo cual localizamos este código:

#header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; }

...y modificamos la parte resaltada cambiando:

width:660px;

...por:

width:950px;
Hacemos vista previa y, si todo lo hemos hecho correctamente, veremos la sidebar izquierda y en ella, el perfil. Ahora podremos agregar gadgets en esta sidebar.

Así se verá el blog con un widget agregado en cada sidebar:

Índice: Agregar una sidebar
Para plantillas Herbert
Para plantillas Minima
Para plantillas Denim
Para plantillas Rounders
Para plantilla Simple
Para plantilla Picture Window
Para plantilla Travel
Para plantilla Awesome
Agregar sidebar doble

◄Anterior | Siguiente►