Portada tipo Magazine para Blogger

Podemos adecuar, en nuestro blog, una portada tipo Magazine, con dos columnas de rectángulos. Cada uno de esos rectángulos 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 la opción "Ninguno":

• El tamaño se adaptará al indicado en el código que veremos más adelante.
  
• El código de la imagen es como éste:
  

<a href="#" imageanchor="1" style=""><img border="0" height="xxx" width="xxx" src="#" alt="Título de la entrada" title="Título de la entrada"/></a>

• 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.

Twittear