Podemos crear en Blogger un blog personalizado 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.
Empezamos por crear la Portada o Página de inicio, que se verá siempre que se acceda al blog, y no como ocurre, por defecto en Blogger, que siempre se ve como página de inicio la última entrada creada. Debemos tener en cuenta que la portada 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.
Eliminar la sidebar
1.- Vamos a Diseño:
Página principal ► Diseño ► Diseño |
2.- 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).
En Editar de cada uno de los gadgets arriba indicados hacemos click, para acceder a los mismos, eliminarlos, y de esta manera dejar vacía la sidebar. Sin embargo estos gadgets seguirán disponibles para agregarlos, no ya en la sidebar, porque vamos a eliminarla.
En los blogs diseñados con plantillas nuevas el gadget Attribution aparece debajo de las entradas, y sin la opción para eliminarlo. Para activar esa opción localizamos en la plantillla esta línea:
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/> |
...y cambiamos true por false (ver: Eliminar "Con la tecnología de Blogger").
3.- Vamos a Editar HTML:
| Diseño | ► | Plantilla | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► | 
|
Localizamos para cada caso el código correspondiente, poniendo dentro del rectángulo de búsqueda (search) una línea del mismo:
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 */
} |
Cambiamos el ancho del main-wrapper (envoltura o contenedor de las entradas), aumentándolo de 410px a 660px, dejándolo así con un ancho igual al del outer wrapper (envoltura exterior del blog), que es 660px. Con esta modificación las entradas ocuparán todo el ancho del blog.
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'/> |
Con la anterior modificación hemos eliminado la sidebar y si vamos a Diseño ► Personalizar ►Diseñador de plantillas ► Ajustar ancho, veremos que contamos únicamente con la opción para ajustar el ancho del blog completo: 
Conclusiones
1.- La personalización de un blog con el método explicado 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.
2.- Para darle un formato diferente a cada entrada tendremos que utilizar tablas, lo que originará que las etiquetas de las mismas (las tablas) harán que se introduzcan líneas en blanco en el texto de la entrada. Para evitar esto tendremos que cambiar la opción Saltos de línea, de Pulsar Intro para saltos de línea a Utilizar etiqueta <br>, en cada entrada (ver: Saltos de línea en Nueva Interfaz). Con esta modificación tendremos que poner, en el texto de la entrada, en la Edición de HTML, una etiqueta <br> para cada salto de línea (punto y aparte), y dos etiquetas <br> para dos saltos de línea (punto y aparte, y un espacio entre párrafos). 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ó en el punto dos de las conclusiones.
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í:
A una, la principal, que contendrá a las otras dos, le damos el ancho del blog, que es de 660px. A la segunda le damos el ancho que tenía el cuerpo de las entradas, o sea 410px, y en ella pondremos el contenido de las entradas. Y a la tercera, la sidebar, le damos un ancho de 240px, y en ella pondremos, por ejemplo, menús, enlaces, imágenes, videos, etc. El siguiente es el código que debemos poner en las entradas que vamos a crear con este formato: <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: |
13 comentarios :
Perdón, te hago una pregunta. Tengo un problema con el pie de página de entrada de mi blog. Puse para que me aparezca: Publicado por; Comentarios, ese tipo de cosas. Pero por más que haya clikeado para que se vean, no puedo verlas. ¿Me podrías ayudar?
Macarena: Has hecho modificaciones en la plantilla que afectaron esas opciones. La única solución es cambiar la plantilla.
Saludos.
Hola, yo quiero modificar el ancho de una de las columnas de mi blog para poner el chat ese de Twitter a la derecha (a ser posible no en todo el blog para no liar mucho el trabajo), pero por más que busco <b:variable default= o me voy a Diseño ► Diseñador de plantillas ► Ajustar ancho no puedo modificar nada, en la primera opción no aparece ni con la plantilla extendida, y con la segunda opcion pone que no es aplicable a mi plantilla. Es una plantilla que me dieron hecha...
Blog en el que hago pruebas (que usa la misma plantilla que el blog en el que quiero colocarlo): http://wii-extrablog.blogspot.com.es/
Saludos y gracias!
Miniadri, este tutorial le puede servir:
http://bloguermast.blogspot.com/2010/08/ensanchar-blog-plantillas-nuevas.html
Saludos.
Hola!!! yo quiero cambiar el cuerpo de la entrada del blog que se ve un cuadrado blanco que desentona con mis gustos... intente desde diseño y opciones avanzadas pero nada!!... debo mencionar que soy super Novata??? jajaja gracias de antemano!!
Cajita de colores, vaya a Diseño ► Plantilla ► Editar HTML y, sin expandir plantillas de artilugios, busca en esta sección:
/* Posts
----------------------------------------------- */
este código:
.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}
y lo cambia por éste:
.main-inner .column-center-outer {
background: #261616;
}
cambiando el código del color (#261616) por el de uno que no desentone con sus gustos.
En esta página encuentra los códigos de todos os colres:
http://html-color-codes.info/codigos-de-colores-hexadecimales/
Saludos.
Hola!
El ancho de mi blog no se ve igual en todos los navegadores. Hice las modificación del ancho en la sección correspondiente de Blogger usando el Mozilla, y se ve igual en Opera y en Google Chrome, pero no en el Avant Browser ni el Internet Explorer (7, no puedo instalar una versión superior). En estos dos últimos el texto excede el ancho del fondo de la entrada y parte se queda "fuera". El texto se ve, pero sobre el fondo general que hay detrás. ¿Se puede solucionar de alguna manera para que se vea bien en todos los navegadores?
Gracias!
Marlai, si se refiere al método explicado en el tutorial para personalizar el blog, el de las tres tablas anidadas, pruebe poniéndoles el ancho (width) en términos porcentuales, así:
A la tabla principal, la que contiene a las otras dos, el 100% (width="100%")
A cada una de las dos tablas interiores (cuerpo de las entradas y sidebar), porcentajes cuya suma sea un poco menor que el 100%, Ej. 60% (width="60%") y 38% (width="38%").
Si interpreté erróneamente su pregunta me lo hace saber, por favor.
Saludos.
Hola Pedro, gracias por la respuesta. Creo que no se trata de lo mismo. Mi blog tiene un único cuerpo, no hay barras laterales, lo he reducido todo al mínimo, y he modificado el ancho con la barra de "Diseño ► Personalizar ►Diseñador de plantillas ► Ajustar ancho". Tengo una única entrada con una tabla (que hice en Word y guardé en formato html para copiarlo después en la entrada del blog) de cuatro columnas. Ajusté el ancho del blog para que esa tabla quedara más o menos centrada entre los límites. Tengo un fondo de color para la parte central del blog y una imagen de las disponibles en Blogger como fondo general, el que queda por detrás. Como ya mencioné en mi otro mensaje en algunos navegadores ese ancho se ve bien ajustado, pero en otros se queda "corto", la cuarta columna y un poco de la tercera se quedan fuera del "tronco central" del blog.
Hola Marlai, creo que sería más conveniente poner una tabla HTML y darle un ancho de 100%. Aquí hay un tutorial sobre tablas:
http://bloguermast.blogspot.com/2009/12/tablas-basicas.html
Aunque con Internet Explorer ocurren esta clase de errores porque no sigue todos los stándares de la W3C (World Wide Web Consortium), que es el consorcio internacional que produce recomendaciones para la World Wide Web. Estos stándares ayudan a interpretar correctamente lo que el diseñador o desarrollador quiso hacer en un sitio, con independencia del navegador, sistema o plataforma en uso. Algunos webmasters, al diseñar páginas web, elaboran dos diseños, uno para IE y otro para los demás navegadores
saludos.
HOla. Tengo una plantilla vieja de Blogger en la que oportunamente he cambiado anchos. Hoy -años después- quiero volver a modificarlos pero al ir al Personalización (y htlm) no encuentro casi ni un sólo valor numérico. Entonces, no sé cómo cambiar hoy los anchos. Mi blog es WWW.CORTOBAR.BLOGSPOT.COM Muchas gracias por la ayuda
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.