Desmenuzando los gadgets de Blogger: Entradas Populares

A grandes rasgos vimos la forma de crear una plantilla para Blogger, pero para podernos internar en la personalización completa de nuestra plantilla comenzaré con una lista de tutoriales en los que se buscará editar cada sección del blog detalladamente. En esta oportunidad hablaremos de cómo personalizar el gadget de entradas populares para así suprimir el estilo original y manejarlo a nuestro antojo.


Si tienes habilidad y si lees la guía completa puedes incluso adaptar el gadget a un slider Javascript, ya que modificaremos toda la estructura del gadget.


Paso 1: Modificando el cuerpo del gadget "Entradas Populares":

Debemos saber que todo gadget tiene condicionales, la mayoría de éstas son de configuración, esto quiere decir que éstas afectan en cómo nosotros hayamos configurado el gadget desde la opción "Diseño", por lo que sirven únicamente si nosotros modificamos algo desde esta sección.

Lo que haremos será suprimir este código condicional y todas sus dependencias, convertiremos el gadget en un sólo resultado que nosotros mismos crearemos. El código original sin modificar del gadget de entradas populares es el siguiente:

 <b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Como lo puedes apreciar, contiene muchas condicionales que afectan el comportamiento del gadget y códigos que muchas veces al usuario promedio lo confunden. Lo que haremos será reemplazar todo el código anterior por el siguiente, una versión simplificada y funcional del gadget (Y si no tienes el código anterior o similar puedes añadirlo dentro de una etiqueta <b:section>):

<b:widget id='PopularPosts1' locked='true' title='Slider de imágenes' type='PopularPosts'>
<b:includable id='main'>
   <ul>
      <b:loop values='data:posts' var='post'>
      <li>
           <b:if cond='data:post.thumbnail'>
               <a expr:href='data:post.href' target='_blank'>
                    <img alt='' expr:src='data:post.thumbnail'/>
                </a>
            <b:else />

               <a expr:href='data:post.href' target='_blank'>
                    <img alt='' src='URL-IMAGEN-NO-DISPONIBLE'/>
                </a>
           </b:if>

             <a expr:href='data:post.href' class="titulo-entrada-gadget" ><data:post.title/></a>
             <div class="snippet"> <data:post.snippet/> </div>

      </li>
      </b:loop>
    <div class="clearfix" />
   </ul>


</b:includable>
</b:widget>

Previsualiza la plantilla y si consigues ver 10 entradas populares en el índice puedes guardar los cambios que has hecho.

Información importante:

El gadget debería devolver una estructura muy similar a esta, pero el código las etiquetas <li> y su contenido se repetirá por cada entrada:

<ul>
      <li>
              <a href="Url-de-la-entrada" target="_blank"><img alt="" src="Url-de-la-imagen-a-72px"></a>

              <a href="Url-de-la-entrada" class="titulo-entrada-gadget">Título de la entrada</a>

              <div class="snippet">
                     Resúmen de la entrada que aparecerá en la página principal.
              </div>
      </li>

<div class="clearfix" />
</ul>

Previsualicemos el resultado:



¿Lo ves poco estructurado? Veamos el siguiente paso.


Paso 2: Añadir atributos al gadget de entradas populares:

Si te preguntas por qué no usaremos las mismas clases e identificadores que vienen por defecto en el gadget, esto es debido a que en Blogger existe un código arbitrario que define los atributos por defecto en nuestra plantilla. Para poder obviar estas reglas, le asignamos otros nombres a cada elemento:

#PopularPosts1 ul {
/*Atributos del contenedor de las entradas populares*/
}

#PopularPosts1 li {
/*Cada elemento del contenedor, dentro de éste se encuentran otros más*/
}
 
#PopularPosts1 img {
/*Imágenes del gadget, anteriormente item-thumbnail*/
}

#PopularPosts1 div {
/*Resúmen del gadget, anteriormente item-snippet*/
}

.titulo-entrada-gadget {
/*Resúmen del gadget, anteriormente item-title*/
}

.clearfix {clear:both;} /*No tocar*/

Con algo de ingenio, puedes construir algo tan sencillo pero a la vez llamativo como esto:





Código CSS del ejemplo:

#PopularPosts1 ul {
width:90%;
margin:0 auto;
background:rgba(0,0,0,0.05);
padding:0 !important;
font-family:Open Sans; /*Requiere la fuente Open Sans de Google Web Fonts en 300*/
font-weight:300;
}

#PopularPosts1 li {
-moz-transition: 1s; /*Transición Firefox*/
-webkit-transition: 1s; /*Transición Chrome, Safari*/
-o-transition:1s; /*Transición Opera*/
transition: 1s; /*Transición Genérica*/
list-style:none !important;
padding:10px 5px;
float:left;
cursor:pointer;
width:48%;
border-bottom:1px solid rgba(0,0,0,0.1);
}

#PopularPosts1 li:hover {
background:rgba(255,255,255,0.4);
box-shadow: inset 0 0 120px rgba(0,0,0,0.3);
}


#PopularPosts1 img {
float:left;
padding:5px;
background:#EFF1F3;
border:1px solid white;
box-shadow:0 0 5px #CCCCCC;
margin: 0 10px 10px;
}

#PopularPosts1 div {
/*Sin atributos*/
}

#PopularPosts1 .titulo-entrada-gadget {
font-size:16px;
}

Extra: Imágenes mas grandes:

Oloman tiene un muy útil script que sirve para devolver la imagen por defecto del gadget en un tamaño mayor, si necesitas adaptar el widget a un slider puedes utilizar su tutorial.