Desde hoy ya está disponible en Blogger el nuevo diseñador de plantillas.
Para acceder a él, solo tenéis que pulsar en la ficha Diseño y ahí tendréis la nueva opción incorporada, Diseñador de plantillas.
Mostrando entradas con la etiqueta plantillas blogs. Mostrar todas las entradas
Mostrando entradas con la etiqueta plantillas blogs. Mostrar todas las entradas
Nuevo diseñador de plantillas en Blogger
Blogger pone a nuestra disposición un nuevo diseñador de plantillas para nuestros blogs.
La opción, de momento, solo está disponible en la página de Blogger in draft (Blogger en borrador)
Para quien no lo sepa aún, Blogger in draft es una versión especial de Blogger en la que podremos probar las nuevas funciones de Blogger antes de que éstas salgan a la luz.
Como he dicho anteriormente, para poder probar el nuevo diseñador de plantillas tendremos que acceder a nuestra cuenta de Blogger desde la página Blogger in draft.
Una vez dentro, podemos ver que la apariencia es similar a la que nos ofrece el escritorio de Blogger.
Plantillas Agregar nueva columna
Como hay personas que tienen cierta dificultad para agregar la nueva columna, he decidido poner en descarga directa los archivos de esas plantillas con la columna ya agregada, para que solo tengáis que sustituir la vuestra por la nueva sin modificar nada del código HTML.
No es que haya creado todos los archivos para todas las plantillas de Blogger, pero la mayoría sí están.
Agregar nueva columna - Plantilla Herbert
Hoy os enseñaré como agregar una nueva columna a la plantilla Herbert.
En primer lugar, antes de realizar cualquier modificación, os aconsejo que hagáis la copia de seguridad de la plantilla.
Una vez realizada, accedemos a la ficha Diseño -> Edición de HTML y buscamos el siguiente código:
Como podemos ver, al igual que ocurría con la plantilla Sand Dollar, la anchura tanto de la zona principal como de la barra lateral viene en porcentaje.
Lo que haremos será duplicar el código
Además, cambiaremos el ancho de la zona principal del blog (
También cambiaremos el ancho de las barras laterales (
Hecho esto, accedemos al cuerpo de la plantilla (casi al final) y buscamos el código:
Lo copiamos y pegamos antes de la línea
Guardamos los cambios, desde la opción Elementos de la página agregamos a esta nueva columna un gadget, guardamos de nuevo los cambios y accedemos a visualizar el resultado que debería ser el siguiente:
En primer lugar, antes de realizar cualquier modificación, os aconsejo que hagáis la copia de seguridad de la plantilla.Una vez realizada, accedemos a la ficha Diseño -> Edición de HTML y buscamos el siguiente código:
@media all {
div#main-wrapper {
float: $startSide;
width: 66%;
padding-top: 0;
padding-$endSide: 1em;
padding-bottom: 0px;
padding-$startSide: 1em;
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 */
}
div#sidebar-wrapper {
margin: 0px;
padding: 0px;
text-align: $endSide;
}
div#sidebar {
width: 30%;
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 */
}
}
Como podemos ver, al igual que ocurría con la plantilla Sand Dollar, la anchura tanto de la zona principal como de la barra lateral viene en porcentaje.
Lo que haremos será duplicar el código
div#newsidebar realizando las siguientes modificaciones: div#newsidebar {
width: 30%;
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 */
}Además, cambiaremos el ancho de la zona principal del blog (
div#main-wrapper), en vez de dejarlo en 66% lo vamos a definir en 40%.También cambiaremos el ancho de las barras laterales (
div#sidebar y div#newsidebar) en vez de 30% lo definiremos al 28%.Hecho esto, accedemos al cuerpo de la plantilla (casi al final) y buscamos el código:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
Lo copiamos y pegamos antes de la línea
<div id='main-wrapper'>, haciendo las siguientes modificaciones: <div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
Guardamos los cambios, desde la opción Elementos de la página agregamos a esta nueva columna un gadget, guardamos de nuevo los cambios y accedemos a visualizar el resultado que debería ser el siguiente:
Agregar nueva columna - Plantilla Sand Dollar
Otra nueva entrada a agregar nuevas columnas a las plantillas que tenemos en Blogger. En esta ocasión, le toca el turno a la plantilla Sand Dollar.
Lo primero de todo, como siempre, antes de realizar cualquier modificación os aconsejo que hagáis la copia de seguridad de la plantilla.
Una vez realizada, accedemos a la ficha Diseño -> Edición de HTML y buscamos el siguiente código:
En el código anterior podemos ver la definición de la zona donde se sitúan las entradas (div#main) y la barra lateral (div#sidebar) que tenemos a la izquierda.
A diferencia de las otras plantillas que hemos visto hasta ahora, ésta tiene definida la anchura (witdh) en porcentaje en vez de en píxeles. Vemos que la zona de las entradas tiene una anchura del está definida al 66% y la barra lateral al 31%.
Para agregar la nueva columna, vamos a modificar el ancho anterior, estableciéndolo al 50% para la zona de las entradas y al 23% para la barra lateral.
Una vez hayamos modificado los valores anteriores, agregaremos el código de la nueva columna justo debajo de la llave de cierre de div#sidebar.
Para ello, buscamos el código
lo copiamos y lo pegamos, realizando las modificaciones necesarias, justo antes de la línea
Guardamos los cambios, agregamos un gadget a la nueva columna desde la opción Elementos de la página y comprobamos el resultado final.
Lo primero de todo, como siempre, antes de realizar cualquier modificación os aconsejo que hagáis la copia de seguridad de la plantilla.Una vez realizada, accedemos a la ficha Diseño -> Edición de HTML y buscamos el siguiente código:
@media all {
div#main {
float:$endSide;
width:66%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
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 */
}
div#sidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $startSide;
width: 31%;
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 */
}
}
En el código anterior podemos ver la definición de la zona donde se sitúan las entradas (div#main) y la barra lateral (div#sidebar) que tenemos a la izquierda.
A diferencia de las otras plantillas que hemos visto hasta ahora, ésta tiene definida la anchura (witdh) en porcentaje en vez de en píxeles. Vemos que la zona de las entradas tiene una anchura del está definida al 66% y la barra lateral al 31%.
Para agregar la nueva columna, vamos a modificar el ancho anterior, estableciéndolo al 50% para la zona de las entradas y al 23% para la barra lateral.
Una vez hayamos modificado los valores anteriores, agregaremos el código de la nueva columna justo debajo de la llave de cierre de div#sidebar.
div#newsidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $endSide;
width: 25%;
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 */
}
Una vez añadido el código, nos dirigimos a la parte del cuerpo (body) de la plantilla para agregar la nueva columna.Para ello, buscamos el código
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
lo copiamos y lo pegamos, realizando las modificaciones necesarias, justo antes de la línea
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
Guardamos los cambios, agregamos un gadget a la nueva columna desde la opción Elementos de la página y comprobamos el resultado final.
Agregar nueva columna - Plantilla Thisaway
En esta entrada veremos cómo agregar una nueva columna a la plantilla Thisaway y sus derivaciones.
En primer lugar, realizaremos la copia de seguridad de la plantilla tal y como explica en esta entrada del blog.
Una vez realizada la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos el siguiente código:
Empezaremos modificando el ancho del blog, por lo que en el código anterior sustituimos los 760 píxeles por 990 px.
Esta misma modificación la haremos en el código:
A continuación, buscaremos el siguiente código:
Una vez encontrado, lo copiamos y lo pegamos justo debajo, realizando las modificaciones oportunas en el nombre y alineación de la barra, por lo que el código nuevo sería el siguiente:
Ahora insertaremos la nueva columna en el cuerpo (body) de la página. Para ello, buscamos el código:
Una vez pegado el código, modificaremos el nombre y eliminaremos los gadgets puesto que no pueden estar duplicados, por lo que el código de esta nueva columna quedará de la siguiente forma:
Guardamos los cambios efectuados en el código de la plantilla y, mediante la opción Elementos de la página (ficha Diseño), agregamos un gadget nuevo a la barra lateral creada.
Si guardamos los cambios y visualizamos el resultado, comprobaremos que la barra lateral derecha aparece en la parte inferior por falta de espacio.
Para solucionar esto, vamos a modificar el ancho de las barras laterales. Para ello, accedemos a la ficha Diseño -> Edición de HTML y buscamos la definición de ambas barras, es decir, los siguiente códigos:
barra lateral izquierda ->
barra lateral derecha ->
Estos son los códigos con los que empieza la definición de ambas barras, lo único que tendremos que hacer es modificar el valor del ancho, que lo determina la propiedad width, a 220 píxeles en vez de 269 px que es el ancho que tiene definido actualmente.
Guardamos de nuevo los cambios y el resultado debería parecerse a la siguiente imagen:
Llegado a este punto, ya solo nos hace falta maquillar un poco la apariencia del blog eliminando o retocando las imágenes que aparecen tanto en el encabezado del blog como a derecha e izquierda que es el borde que visualizamos, en este caso, de color marrón más oscuro.
Si decidimos eliminar ambas imágenes solo se perderá ese aspecto redondeado en la parte inferior del encabezado y el borde derecho e izquierdo que aparece en marrón más oscuro.
A continuación os indico donde están definidas, en el código HTML de la plantilla, ambas imágenes y que cada uno decida si quiere eliminarlas o bien retocarlas bien con Photoshop o cualquier otro programa de retoque fotográfico.
Código que define la parte inferior del encabezado:
Si decidimos eliminar la imagen, este código quedaría de la siguiente forma:
Y, por último, os indico el código donde está definida la imagen que hace que aparezca ese borde a derecha e izquierda:
Al igual que antes, si decidís eliminarla, el código quedaría de la siguiente forma:
Hecho esto, guardaríamos los cambios y el resultado, habiendo eliminado ambas imágenes, sería el siguiente:
Por cierto, hablando de programas de retoque fotográfico os he indicado que lo podéis hacer con Photoshop o cualquier otro programa.
Otro programa de retoque fotográfico es Gimp, cuya página principal podéis visitar haciendo clic en este enlace, y cuyo funcionamiento podéis aprender mediante este blog cuya autora es misaani.
En primer lugar, realizaremos la copia de seguridad de la plantilla tal y como explica en esta entrada del blog.Una vez realizada la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos el siguiente código:
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: $startSide;
font: $bodyFont;
}Empezaremos modificando el ancho del blog, por lo que en el código anterior sustituimos los 760 píxeles por 990 px.
Esta misma modificación la haremos en el código:
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
}A continuación, buscaremos el siguiente código:
#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 */
}Una vez encontrado, lo copiamos y lo pegamos justo debajo, realizando las modificaciones oportunas en el nombre y alineación de la barra, por lo que el código nuevo sería el siguiente:
#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $startSide;
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 */
}Ahora insertaremos la nueva columna en el cuerpo (body) de la página. Para ello, buscamos el código:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
Éste es el código de la columna lateral que tenemos a la derecha del blog. Lo que haremos será copiar y pegar este código justo antes de la línea <div id='main-wrapper'>Una vez pegado el código, modificaremos el nombre y eliminaremos los gadgets puesto que no pueden estar duplicados, por lo que el código de esta nueva columna quedará de la siguiente forma:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>Guardamos los cambios efectuados en el código de la plantilla y, mediante la opción Elementos de la página (ficha Diseño), agregamos un gadget nuevo a la barra lateral creada.
Si guardamos los cambios y visualizamos el resultado, comprobaremos que la barra lateral derecha aparece en la parte inferior por falta de espacio.
Para solucionar esto, vamos a modificar el ancho de las barras laterales. Para ello, accedemos a la ficha Diseño -> Edición de HTML y buscamos la definición de ambas barras, es decir, los siguiente códigos:
barra lateral izquierda ->
#newsidebar-wrapper {barra lateral derecha ->
#sidebar-wrapper {Estos son los códigos con los que empieza la definición de ambas barras, lo único que tendremos que hacer es modificar el valor del ancho, que lo determina la propiedad width, a 220 píxeles en vez de 269 px que es el ancho que tiene definido actualmente.
Guardamos de nuevo los cambios y el resultado debería parecerse a la siguiente imagen:
Llegado a este punto, ya solo nos hace falta maquillar un poco la apariencia del blog eliminando o retocando las imágenes que aparecen tanto en el encabezado del blog como a derecha e izquierda que es el borde que visualizamos, en este caso, de color marrón más oscuro.Si decidimos eliminar ambas imágenes solo se perderá ese aspecto redondeado en la parte inferior del encabezado y el borde derecho e izquierdo que aparece en marrón más oscuro.
A continuación os indico donde están definidas, en el código HTML de la plantilla, ambas imágenes y que cada uno decida si quiere eliminarlas o bien retocarlas bien con Photoshop o cualquier otro programa de retoque fotográfico.
Código que define la parte inferior del encabezado:
#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif) no-repeat $startSide bottom;
}Si decidimos eliminar la imagen, este código quedaría de la siguiente forma:
#header-wrapper {
padding-bottom: 15px;
}Y, por último, os indico el código donde está definida la imagen que hace que aparezca ese borde a derecha e izquierda:
#content-wrapper {
position: relative;
width: 990px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
}Al igual que antes, si decidís eliminarla, el código quedaría de la siguiente forma:
#content-wrapper {
position: relative;
width: 990px;
background: #f7f0e9;
}Hecho esto, guardaríamos los cambios y el resultado, habiendo eliminado ambas imágenes, sería el siguiente:
Por cierto, hablando de programas de retoque fotográfico os he indicado que lo podéis hacer con Photoshop o cualquier otro programa.Otro programa de retoque fotográfico es Gimp, cuya página principal podéis visitar haciendo clic en este enlace, y cuyo funcionamiento podéis aprender mediante este blog cuya autora es misaani.
Agregar nueva columna - Plantilla Rounders
En esta entrada veremos cómo agregar la nueva columna a la plantilla Rounders y sus variantes.
Esta es una de las plantillas que nos llevará algo más tiempo, puesto que además de agregar el código, hay que eliminar una de las dos barras laterales que vienen por defecto colocadas a la derecha en esta plantilla.
En primer lugar, antes de hacer cualquier modificación como siempre hacemos la copia de seguridad de la plantilla.
Una vez hecha la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos, dentro del apartado Page Structure, el siguiente código:
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 */
}
Éste es el código de la barra que tenemos a la derecha de la pantalla. Copiamos este código y lo pegamos justo debajo cambiando el nombre por newsidebar y la alineación (float) por el valor $startSide.
Antes de seguir con el siguiente código, aprovechando que estamos en el apartado Page Structure, nos fijaremos los anchos que tenemos definidos tanto para el blog como para las columnas laterales y la central.
Como podemos ver en el código, el ancho del blog (outer-wrapper) está definido en 740 píxeles, la columna central (main-wrap1) en 485 píxeles y cada barra lateral (sidebar-wrap y newsidebar-wrap) en 240 píxeles.
Si sumamos los 485 px y los 480 px de ambas barras podemos comprobar que el ancho de 740 px del blog se queda corto, por lo que modificaremos este ancho a 990 píxeles.
Modificado el ancho del blog, vamos a eliminar una de las dos barras laterales que tenemos creadas por defecto en este blog.
Para ello, accedemos al cuerpo de la página (body) y buscamos el siguiente código:
<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:section>
</div></div>
<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<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>
</div>
Éste es el apartado donde están creadas ambas barras, la de arriba que está identificada como sidebartop-wrap y la de abajo como sidebarbottom-wrap1.
Eliminaremos la barra inferior, por lo que tenemos que borrar el siguiente código:
<b:section class='sidebar' id='sidebar' preferred='yes'>
<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>
Una vez eliminado, agregaremos la barra lateral izquierda al blog. Para ello, insertamos el siguiente código antes de la línea
<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='newsidebar'>
</b:section>
</div></div>
</div>
Guardamos los cambios y, mediante la opción Elementos de la página, agregamos a la nueva barra un gadget para poder apreciar los cambios realizados.
Guardamos de nuevo los cambios y comprobamos el resultado que debería ser algo así:
Si queremos aumentar un poco el espacio que hay entre la columna izquierda y la central, introduciremos el siguiente código en el apartado Page Structure de la nueva columna (newsidebar):
con lo que el resultado final será este:
Si queréis arreglar un poco la zona del encabezado o incluso si habéis modificado las dimensiones de las barras laterales, tendréis que editar las imágenes que aparecen en la parte superior e inferior, puesto que son las causantes que ambos objetos, encabezado y columnas, tengan esa forma redondeada en las esquinas.
Esta es una de las plantillas que nos llevará algo más tiempo, puesto que además de agregar el código, hay que eliminar una de las dos barras laterales que vienen por defecto colocadas a la derecha en esta plantilla.En primer lugar, antes de hacer cualquier modificación como siempre hacemos la copia de seguridad de la plantilla.
Una vez hecha la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos, dentro del apartado Page Structure, el siguiente código:
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 */
}
Éste es el código de la barra que tenemos a la derecha de la pantalla. Copiamos este código y lo pegamos justo debajo cambiando el nombre por newsidebar y la alineación (float) por el valor $startSide.
Antes de seguir con el siguiente código, aprovechando que estamos en el apartado Page Structure, nos fijaremos los anchos que tenemos definidos tanto para el blog como para las columnas laterales y la central.
Como podemos ver en el código, el ancho del blog (outer-wrapper) está definido en 740 píxeles, la columna central (main-wrap1) en 485 píxeles y cada barra lateral (sidebar-wrap y newsidebar-wrap) en 240 píxeles.
Si sumamos los 485 px y los 480 px de ambas barras podemos comprobar que el ancho de 740 px del blog se queda corto, por lo que modificaremos este ancho a 990 píxeles.
Modificado el ancho del blog, vamos a eliminar una de las dos barras laterales que tenemos creadas por defecto en este blog.
Para ello, accedemos al cuerpo de la página (body) y buscamos el siguiente código:
<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:section>
</div></div>
<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<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>
</div>
Éste es el apartado donde están creadas ambas barras, la de arriba que está identificada como sidebartop-wrap y la de abajo como sidebarbottom-wrap1.
Eliminaremos la barra inferior, por lo que tenemos que borrar el siguiente código:
<b:section class='sidebar' id='sidebar' preferred='yes'>
<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>
Una vez eliminado, agregaremos la barra lateral izquierda al blog. Para ello, insertamos el siguiente código antes de la línea
<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='newsidebar'>
</b:section>
</div></div>
</div>
Guardamos los cambios y, mediante la opción Elementos de la página, agregamos a la nueva barra un gadget para poder apreciar los cambios realizados.
Guardamos de nuevo los cambios y comprobamos el resultado que debería ser algo así:
Si queremos aumentar un poco el espacio que hay entre la columna izquierda y la central, introduciremos el siguiente código en el apartado Page Structure de la nueva columna (newsidebar):con lo que el resultado final será este:
Si queréis arreglar un poco la zona del encabezado o incluso si habéis modificado las dimensiones de las barras laterales, tendréis que editar las imágenes que aparecen en la parte superior e inferior, puesto que son las causantes que ambos objetos, encabezado y columnas, tengan esa forma redondeada en las esquinas.
Agregar nueva columna - Plantilla Denim
Siguiendo con el tema agregar columnas al blog, hoy dedicaré esta entrada a la plantilla Denim y sus variantes.
Antes de empezar, aclararé que como la explicación es la misma en todas las plantillas, a partir de hoy iré directamente al código que hay que modificar sin detenerme mucho en explicaciones puesto que las tenéis en las entrada del día 17 de Abril.
En primer lugar, antes de hacer cualquier modificación hacemos la copia de seguridad de la plantilla tal y como está explicado en esta entrada.
Una vez hecha la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos, dentro del apartado Content, el siguiente código:
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 */
}
Éste es el código de la barra lateral que tenemos a la izquierda del blog. Lo que haremos será copiar este código y lo pegarlo justo debajo modificando el nombre sidebar por newsidebar y la alineación (float) por $startSide.
A continuación, bajamos casi hasta el final de la plantilla y, en el cuerpo de la página (body), buscamos el código siguiente:
<b:section class='sidebar' id='sidebar' preferred='yes'>
<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='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
Éste es el código de la barra lateral derecha que tenemos en el blog junto con los gadgets. Lo copiamos y lo pegamos justo antes de
Eliminamos los gadgets que tiene incorporada la barra lateral, porque si no lo hacemos nos dará error por duplicidad de gadgets ya que hay algunos que son únicos y no pueden estar duplicados.
Además cambiaremos el nombre sidebar por newsidebar tal y como hemos hecho anteriormente, y el resultado final del código debería ser este:
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
Una vez hecho esto, guardamos los cambios, accedemos a la ficha Diseño -> Elementos de la página y agregamos un gadget a la nueva barra para poder apreciar la existencia de la misma.
Guardamos de nuevo los cambios y comprobamos el resultado.
A continuación, necesitamos modificar el ancho del blog puesto que como podemos ver la barra derecha aparece en la parte inferior por falta de espacio.
Accedemos de nuevo a la ficha Diseño -> Edición de HTML y buscamos el siguiente código dentro del apartado Content:
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
Tenemos definido un ancho para el blog de 760 píxeles que modificaremos al valor 990 px.
Guardamos los cambios y comprobamos que el resultado se debería parecer a la imagen que se muestra a continuación:
Antes de empezar, aclararé que como la explicación es la misma en todas las plantillas, a partir de hoy iré directamente al código que hay que modificar sin detenerme mucho en explicaciones puesto que las tenéis en las entrada del día 17 de Abril.En primer lugar, antes de hacer cualquier modificación hacemos la copia de seguridad de la plantilla tal y como está explicado en esta entrada.
Una vez hecha la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos, dentro del apartado Content, el siguiente código:
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 */
}
Éste es el código de la barra lateral que tenemos a la izquierda del blog. Lo que haremos será copiar este código y lo pegarlo justo debajo modificando el nombre sidebar por newsidebar y la alineación (float) por $startSide.
A continuación, bajamos casi hasta el final de la plantilla y, en el cuerpo de la página (body), buscamos el código siguiente:
<b:section class='sidebar' id='sidebar' preferred='yes'>
<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='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
Éste es el código de la barra lateral derecha que tenemos en el blog junto con los gadgets. Lo copiamos y lo pegamos justo antes de
Eliminamos los gadgets que tiene incorporada la barra lateral, porque si no lo hacemos nos dará error por duplicidad de gadgets ya que hay algunos que son únicos y no pueden estar duplicados.
Además cambiaremos el nombre sidebar por newsidebar tal y como hemos hecho anteriormente, y el resultado final del código debería ser este:
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
Una vez hecho esto, guardamos los cambios, accedemos a la ficha Diseño -> Elementos de la página y agregamos un gadget a la nueva barra para poder apreciar la existencia de la misma.
Guardamos de nuevo los cambios y comprobamos el resultado.
A continuación, necesitamos modificar el ancho del blog puesto que como podemos ver la barra derecha aparece en la parte inferior por falta de espacio.
Accedemos de nuevo a la ficha Diseño -> Edición de HTML y buscamos el siguiente código dentro del apartado Content:
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
Tenemos definido un ancho para el blog de 760 píxeles que modificaremos al valor 990 px.
Guardamos los cambios y comprobamos que el resultado se debería parecer a la imagen que se muestra a continuación:
Agregar nueva columna - Plantilla Mínima
Comenzaremos esta serie de entradas agregando una nueva columna a la plantilla Mínima y sus variantes.
Para empezar, algo muy importante que no se os debe olvidar es realizar la copia de seguridad de la plantilla tal y como he explicado en la entrada anterior.
Una vez hecha la copia de seguridad, nos podremos manos a la obra. Accedemos a la ficha Diseño -> Edición de HTML.
Teniendo desactivada la casilla Expandir plantillas de artilugios, buscamos el siguiente código que podemos encontrar dentro del apartado Outer-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 */
}
Éste es el código de la barra lateral que tenemos actualmente a la derecha de nuestro blog. Lo que vamos a hacer es crear una nueva a partir de ésta. Para ello, copiaremos el código citado anteriormente y lo pegaremos justo debajo.
A continuación, vamos a realizar algunas modificaciones en el código que acabamos de pegar.
En primer lugar, modificamos el nombre de la barra (sidebar) por newsidebar.
Si nos fijamos en el código, tenemos la propiedad float que indica la alineación de la barra. La primera barra tiene alineación derecha ($endSide), mientras que a la barra que acabamos de crear le daremos alineación izquierda ($startSide), por lo que tendremos que modificar el valor $endSide por $startSide.
Si quisiésemos que las dos barras aparecieran al mismo lado, dejaríamos el código de la propiedad float tal y como está.
La anchura de la barra la indica la propiedad width y viene indicada en píxeles.
El código final de la nueva barra tendría que tener más o menos el siguiente aspecto:
width: 220px;
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 */
}
Para terminar la creación de la nueva columna en nuestro blog, bajaremos casi hasta el final de la plantilla donde comienza el cuerpo de la página (body) y buscaremos el siguiente código:
<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:section>
</div>
Éste es el código de la barra que tenemos en el blog actualmente con sus gadgets de seguidores, archivo del blog y datos personales.
Bien, pues de nuevo, seleccionamos este código y lo pegamos, pero en este caso en vez de a continuación, subimos un poco hacia arriba en la plantilla y lo pegamos antes del siguiente código que tenemos también dentro del cuerpo de la página (body):
Eliminamos los gadgets que tenemos agregados a la barra, puesto que no puede haber dos gadgets archivo del blog ni seguidores, y además modificamos el nombre de la barra por el de newsidebar. Éste sería el código final de la barra nueva:
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
Como podéis ver le he agregado el gadget de Seguidores, desde la ficha Diseño -> Elementos de la página, para que podamos apreciar la existencia de esta nueva barra.
Si guardamos los cambios y comprobamos el resultado comprobaremos que por la anchura del blog y de las columnas, el resultado que queríamos no se visualiza correctamente.
Hasta aqui hemos agregado una nueva columna y le hemos puesto alineación. Ahora modificaremos la anchura del blog para que ambas columnas se encuentren al mismo nivel.
De nuevo, accedemos a la ficha Diseño -> Edición de HTML y buscamos el código que define tanto el ancho del blog como el ancho de las columnas o barras.
En primer lugar, modificaremos el ancho del blog, para ello buscamos dentro del encabezado de la página (head) en el apartado Outer-Wrapper el código siguiente:
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Como podemos ver tenemos definido un ancho de 660 píxeles para el blog. Si nos fijamos un poco más abajo encontraremos el ancho de la zona donde se muestran las entradas (main-wrapper) que inicialmente está definido en 410 píxeles, que si lo sumamos a los 220 píxeles de ancho que tiene cada columna, comprobaremos el por qué no cabe en pantalla.
Pues como he dicho antes, modificaremos el ancho del blog, en vez de 660 píxeles lo vamos a establecer en 870 píxeles (sumamos los 410 px del blog más los 220 px de cada barra y dejamos un poco de margen para el espacio entre cada uno de estos elementos).
Si guardamos los cambios y visualizamos ahora el resultado, más o menos tendríamos esto:
Las medidas son orientativas, podéis jugar con ellas a vuestro gusto.
Solo un apunte más, para modificar el espacio que hay entre la nueva barra y la parte central de nuestro blog, añadiremos en la creación de la barra nueva (newsidebar) el siguiente código:
De esta forma, nuestro blog tendría el siguiente aspecto:
Para empezar, algo muy importante que no se os debe olvidar es realizar la copia de seguridad de la plantilla tal y como he explicado en la entrada anterior.Una vez hecha la copia de seguridad, nos podremos manos a la obra. Accedemos a la ficha Diseño -> Edición de HTML.
Teniendo desactivada la casilla Expandir plantillas de artilugios, buscamos el siguiente código que podemos encontrar dentro del apartado Outer-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 */
}
Éste es el código de la barra lateral que tenemos actualmente a la derecha de nuestro blog. Lo que vamos a hacer es crear una nueva a partir de ésta. Para ello, copiaremos el código citado anteriormente y lo pegaremos justo debajo.
A continuación, vamos a realizar algunas modificaciones en el código que acabamos de pegar.
En primer lugar, modificamos el nombre de la barra (sidebar) por newsidebar.
Si nos fijamos en el código, tenemos la propiedad float que indica la alineación de la barra. La primera barra tiene alineación derecha ($endSide), mientras que a la barra que acabamos de crear le daremos alineación izquierda ($startSide), por lo que tendremos que modificar el valor $endSide por $startSide.
Si quisiésemos que las dos barras aparecieran al mismo lado, dejaríamos el código de la propiedad float tal y como está.
La anchura de la barra la indica la propiedad width y viene indicada en píxeles.
El código final de la nueva barra tendría que tener más o menos el siguiente aspecto:
width: 220px;
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 */
}
Para terminar la creación de la nueva columna en nuestro blog, bajaremos casi hasta el final de la plantilla donde comienza el cuerpo de la página (body) y buscaremos el siguiente código:
<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:section>
</div>
Éste es el código de la barra que tenemos en el blog actualmente con sus gadgets de seguidores, archivo del blog y datos personales.
Bien, pues de nuevo, seleccionamos este código y lo pegamos, pero en este caso en vez de a continuación, subimos un poco hacia arriba en la plantilla y lo pegamos antes del siguiente código que tenemos también dentro del cuerpo de la página (body):
Eliminamos los gadgets que tenemos agregados a la barra, puesto que no puede haber dos gadgets archivo del blog ni seguidores, y además modificamos el nombre de la barra por el de newsidebar. Éste sería el código final de la barra nueva:
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
Como podéis ver le he agregado el gadget de Seguidores, desde la ficha Diseño -> Elementos de la página, para que podamos apreciar la existencia de esta nueva barra.
Si guardamos los cambios y comprobamos el resultado comprobaremos que por la anchura del blog y de las columnas, el resultado que queríamos no se visualiza correctamente.
Hasta aqui hemos agregado una nueva columna y le hemos puesto alineación. Ahora modificaremos la anchura del blog para que ambas columnas se encuentren al mismo nivel.
De nuevo, accedemos a la ficha Diseño -> Edición de HTML y buscamos el código que define tanto el ancho del blog como el ancho de las columnas o barras.
En primer lugar, modificaremos el ancho del blog, para ello buscamos dentro del encabezado de la página (head) en el apartado Outer-Wrapper el código siguiente:
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Como podemos ver tenemos definido un ancho de 660 píxeles para el blog. Si nos fijamos un poco más abajo encontraremos el ancho de la zona donde se muestran las entradas (main-wrapper) que inicialmente está definido en 410 píxeles, que si lo sumamos a los 220 píxeles de ancho que tiene cada columna, comprobaremos el por qué no cabe en pantalla.
Pues como he dicho antes, modificaremos el ancho del blog, en vez de 660 píxeles lo vamos a establecer en 870 píxeles (sumamos los 410 px del blog más los 220 px de cada barra y dejamos un poco de margen para el espacio entre cada uno de estos elementos).
Si guardamos los cambios y visualizamos ahora el resultado, más o menos tendríamos esto:
Las medidas son orientativas, podéis jugar con ellas a vuestro gusto.Solo un apunte más, para modificar el espacio que hay entre la nueva barra y la parte central de nuestro blog, añadiremos en la creación de la barra nueva (newsidebar) el siguiente código:
De esta forma, nuestro blog tendría el siguiente aspecto:
Personalizar la plantilla de Blogger
Esta nueva entrada la dedicaremos a personalizar la plantilla que tenemos aplicada a nuestro blog de Blogger, es decir, modificar los colores y el tipo de letra de los diferentes elementos de la plantilla.
Texto "Undefined" en la fecha
En más de una ocasión al cambiar la plantilla de nuestro blog por otra os aparecerá, en el lugar donde se debe mostrar la fecha de la entrada, el texto "Undefined".
La solución a este problema es cambiar el formato de la hora que tenemos en nuestro blog.
Plantillas gratis para Blogger
Esta nueva entrada del blog está dedicada a cambiar el aspecto de nuestro blog de Blogger con plantillas gratuitas que podemos encontrar en muchas páginas de internet.
Suscribirse a:
Comentarios (Atom)