Convertir blog en web

Convertir un blog en web, o darle apariencia de web, lo podemos lograr adecuando, en la página principal, una portada tipo magazine. La portada estará formada por dos columnas de rectángulos, cada uno de los cuales corresponderá a una entrada, y en ellos pondremos: Un resumen del contenido del post correspondiente. Una imagen. Tanto el resumen como la imagen los pondremos dentro de etiquetas <a href="#">, con la URL de la entrada correspondiente, para que sirvan de enlaces a la misma. Todo lo anterior lo pondremos dentro de un bloque <div> al que le asignaremos la clase resumenOculto para aislarlo, de manera que no se vea en el texto de la entrada, sino únicamente en la portada o página principal. El bloque descrito anteriormente lo ponemos en el editor de HTML, al comienzo de las entradas que van a aparecer en la portada, así: <div class="resumenOculto"> Código de la imagen<a href="URL de la entrada" title="Título de la entrada">Resumen de la entrada</a> </div> ...poniendo en las partes resaltadas lo indicado en las mismas. El atributo title hace que, al poner el cursor sobre el resumen, aparezca el título de la entrada.   La imagen La imagen que ponemos en cada rectángulo la subimos marcando en el diseño las opciones, en "Alineación de la imagen": "Ninguna", y en "Tamaño de la imagen": "Tamaño original". El tamaño se adaptará al indicado en el código que veremos más adelante (punto 4). El código de la imagen por defecto, subida con el diseño indicado, es como éste: <a href="#" imageanchor="1"> <img border="0" src="#" alt="Título de la entrada" title="Título de la entrada"/></a> El resaltado en amarillo lo agregamos. En los sitios en donde están los signos numeral (#) Blogger pone por defecto la URL de la imagen, en el primero (con el atributo a href) como enlace, y en el segundo (con el atributo src) como identificador del archivo de la imagen. Reemplazamos la primera URL con la correspondiente a la entrada para que la imagen sirva de enlace a la entrada y no a la misma imagen. Los atributos alt y title hacen que al poner el cursor sobre la imagen aparezca el título de la entrada. En las imágenes se utiliza, para este efecto, el atributo alt, pero ponemos también el atributo title ya que algunos navegadores no interpretan el primero.   Rectángulos que se verán e la portada Los rectángulos que se verán en la portada serán los correspondientes a las últimas entradas creadas, y cuyo número será aquél que le asignemos en Configuración. Para esto vamos a: Página principal ► Diseño ► Configuración ► Entadas y comentarios ► Mostrar un máximo de X entradas en la página principal ...y ponemos allí el número correspondiente. Este número deberá ser par, para que ambas columnas nos queden con igual número de rectángulos: Guardamos configuración. Obviamente el bloque <div>, indicado al comienzo del tutorial, tendremos que ponerlo en el editor de HTML al comienzo de cada entrada de las que van a aparecer en la portada.   Códigos que pondrán en funcionamiento la portada Una vez hayamos puesto el bloque <div> en todas las entradas que aparecerán el la portada, ponemos en la plantilla los códigos que pondrán a funcionar la portada: 1.- Vamos a Editar HTML: Diseño ► Editar HTML ► Click dentro del editor ► Ctrl+f ► 2.- Localizamos, en las plantillas nuevas, un código como éste, poniendo dentro del rectángulo de búsqueda (search) una línea del mismo: <b:if cond='data:blog.metaDescription == ""'>       <!-- Then use the post body as the schema.org description,           for good G+/FB snippeting. -->       <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>         <data:post.body/>         <div style='clear: both;'/> <!-- clear for photos floats -->       </div>     <b:else/>       <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>         <data:post.body/>         <div style='clear: both;'/> <!-- clear for photos floats -->       </div>     </b:if> Y en plantillas antiguas un código como éste: <div class='post-body entry-content'>    <data:post.body/>    <div style='clear: both;'/> <!-- clear for photos floats --> </div> ...o como éste:     <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>       <data:post.body/>       <div style='clear: both;'/> <!-- clear for photos floats -->     </div> 3.- En cualquier caso, el código que encontremos de los anteriores, lo eliminamos y lo reemplazamos con el siguiente: <b:if cond='data:blog.pageType == "item"'>   <div class='post-body entry-content'>     <data:post.body/>     <div style='clear: both;'/>   </div> <b:else/>   <div class='post-body entry-content'>     <div expr:id='"original-" + data:post.id' style='display:none;'>       <data:post.body/>     </div>     <div style='clear: both;'/>   </div>   <!-- ejecutar función JavaScript -->   <script type='text/javascript'>     // enviará el ID generado por Blogger (data:post.id)     ejecutarResumen('<data:post.id/>');   </script> </b:if> Con este código conseguiremos: Aislar el resumen para que no aparezca sino en la página principal o portada. Que el contenido original del post no sea visible en la página principal o portada. Que cada post, en particular, no sufra ningún cambio. 4.- Antes de la etiqueta </head> pegamos el siguiente código: <b:if cond='data:blog.pageType != "item"'>   <style> /*propiedades de los posts (resúmenes) en la portada*/     .post {       background-color: #E2EFFD;/*color del fondo*/       float: left;       width: 310px;/*ancho: mitad del cuerpo de las entradas*/       height: 190px;/*el alto es fijo*/       margin-right: 15px;       margin-top: 0px;       margin-bottom: 10px;       overflow: hidden;       padding-left: 5px;       padding-top: 5px;     } /*propiedades de las imágenes en la portada*/     .post img {       float: left;       margin: 0 5px 0 0;       width: 100px;/*ancho*/       height: 100px;/*alto*/     }   </style> <b:else/>   <style>     .resumenOculto {display:none;}   </style> </b:if> El /*color del fondo*/ es editable, ponemos el nuestro. El /*ancho: mitad del cuerpo de las entradas*/, es editable, pero, por estética, se recomienda que no sea menor de 300px, para lo cual es recomendable que el blog tenga un ancho no menor de 950px. Si es necesario deberíamos ensanchar el blog; el tutorial al respecto está aquí. El /*ancho*/ y el /*alto*/ de las imágenes son editables, pero se recomiendan los indicados en el código (100px). Debemos procurar que las imágenes sean lo más cuadradas posible, para que, al adaptarse a estas dimensiones, no se distorsionen. 5.- A continuación del anterior código pegamos el siguiente: <script type='text/javascript'> //<![CDATA[ // llega con el ID del post function ejecutarResumen(idPOST) {   var namePOST = "original-" + idPOST; // el DIV del post normal   var divPOST = document.getElementById(namePOST);   // buscamos los DIVS   var lista = divPOST.getElementsByTagName("div");   if(lista.length>0){     // buscamos un DIV con la clase resumenOculto     for(var i=0; i<lista.length; ++i) {         if(lista[i].className=="resumenOculto") {           // cambiamos el contenido del post por el de ese DIV           divPOST.innerHTML = lista[i].innerHTML;           // lo mostramos           divPOST.style.display = "block";           return;         }       }     } } //]]> </script> Antes de guardar plantilla debemos utilizar la Vista previa para verificar que la portada nos haya quedado correcta. Lo más probable es que nó. Se pueden presentar los siguientes casos: Que los rectángulos tuvieran un ancho superior al de la mitad del cuerpo de las entradas. En este caso todos los rectángulos quedarán en una sola columna, a la izquierda, y los enlaces pie de post se deaplazarán hacia arriba, a la derecha. Que los rectángulos tuvieran un ancho inferior al de la mitad del cuerpo de las entradas. En este caso los rectángulos quedarán en las dos columnas, pero sobrará un espacio a la derecha, y los enlaces pie de post se desplazarán hacia arriba en el mismo. Dependiendo del caso, aumentamos o disminuímos, en la línea correspondiente a /*ancho: mitad del cuerpo de las entradas*/ del código del punto cuatro, el número de pixeles, y vamos observando con la Vista previa hasta lograr que las dos columnas de rectángulos casen perfectamente. 5.- Guardamos plantilla. 6.- Eliminamos las fechas de las entradas, ya que éstas afectan la simetría de los rectángulos en la portada. En este tutorial se explica cómo eliminar las fechas. Nota: Esta portada no se adapta muy bien a las plantillas Fantástico S.A. Aewsome, Picture Window y Filigrana.

Twittear

Personalizar blog de Blogger

Este tutorial fue actualizado. Ver actualización. 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. Nota: Con la Nueva Interfaz de Blogger ya podemos configurar los saltos de línea en cada entrada, individualmente. Ver: Saltos de línea en Nueva Interfaz de Blogger. 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): ...en cada uno de ellos hacemos click en Editar, 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"). 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 */   } 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 ► Diseñador de plantillas ► Ajustar ancho, veremos que contamos únicamente con la opción para ajustar el ancho del blog completo: 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í: 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: Twittear

Personalizar blog eliminando sidebar

Este tutorial fue actualizado. Ver actualización. 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): ...en cada uno de ellos hacemos click en Editar, 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. 2.- Vamos a Editar 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 */   } 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 ► Diseñador de plantillas ► Ajustar ancho, veremos que contamos únicamente con la opción para ajustar el ancho del blog completo:   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í: 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: Twittear

Imagen de fondo para blogger, plantillas nuevas

Para poner imagen de fondo a blogs diseñados con plantillas nuevas: Vamos a Edición de HTML: Página principal ► Diseño ► Plantilla ► Editar HTML Sin expandir artilugios localizamos un código como el siguiente: <Variable name="body.background" description="Body Background" type="background"        color="$(body.background.color)" default="$(color) none repeat-x scroll top left" value="$(color) none repeat-x scroll top left"/> Lo eliminamos y en su lugar ponermos éste: <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. Ver: Poner imagen de fondo, plantillas antiguas Twittear Í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

Poner imagen de fondo en Blogger

Plantillas nuevas Vamos a Editar HTML: Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ► Localizamos un código como el siguiente: <Variable name="body.background" description="Body Background" type="background"        color="$(body.background.color)" default="$(color) none repeat-x scroll top left" value="$(color) none repeat-x scroll top left"/> Lo eliminamos y en su lugar ponermos éste: <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. Plantillas antiguas Vamos a Editar HTML: Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ► 2.- Localizamos el siguiente código, poniendo dentro del rectángulo de búsqueda (Search), una línea del mismo: body {   background:$bgcolor;   margin:0;   color:$textcolor;   font:x-small Georgia Serif;   font-size/* */:/**/small;   font-size: /**/small;   text-align: center;   } 3.- Agregamos lo que está resaltado, y el código deberá quedar así: body { background: url(Aquí la URL de la imagen) fixed repeat;   margin:0;   color:$textcolor;   font:x-small Georgia Serif;   font-size/* */:/**/small;   font-size: /**/small;   text-align: center;   } 4.- 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. En nuestro caso hemos utilizado fixed y repeat, para que la imagen ocupe todo el fondo del blog y permanezca fija. Un ejemplo: aquí