Transformar tu lista de blogs. Foto-blogroll

En esta entrada os mostraremos como funciona el gadget Lista de Blogs de Blogger, para que podais modificarlo y conseguir un blogroll adaptado a vuestras necesidades y/o diseño.

Lo primero que hay que hacer es agregar el artilugio desde Elementos de página, seleccionando el orden, la cantidad de blogs y los detalles que se quieren mostrar:

• Icono
• Título del elemento más reciente
• Fragmento del elemento más reciente
• Miniatura del elemento más reciente
• Fecha de la última actualización

Las modificaciones básicas de colores, fondos, tipo de letra, etc., son fáciles de realizar añadiendo nuevas clases antes de ]]></b:skin>. Habrá que usar los mismos nombres que Blogger le pone a los distintos elementos de los datos: contenedor, título, resumen, fecha actualización,...

Los nombres de dichos items así como la forma de redactarlos, ya se comentaron cuando la implementación del gadget. Si se colocan antes del <b:skin><![CDATA[/*, será necesario meter el código entre <style type='text/css'> y </style>, tal y como se indicó en su momento.

...

Pero puede que querais ir un poco más allá. En ese caso, en el siguiente enlace podreis ver el código completo comentado. Para modificar desde aquí, ya se requiere conocer algo de HTML, pero en el fondo sólo se trataría de cambiar el apartado que necesiteis, modificando o eliminando los bloques en que se configuran los datos de salida, o añadiendo etiquetas STYLE a las partes a formatear.

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>
<b:includable id='main'>
<!-- ROTULO DEL WIDGET -->

<b:if cond='data:title != &quot;&quot;'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>


<!-- PRINCIPIO BUCLE PARA MOSTRAR TODOS LOS ELEMENTOS -->
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>

<!-- LOGO PLATAFORMA -->
<div class='blog-icon'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>

<!-- PRINCIPIO BLOQUE NOMBRE, MINIATURA, POST, RESUMEN, FECHA ACT -->
<div class='blog-content'>

<!-- NOMBRE BLOG (CON ENLACE)-->
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>

<!-- PRINCIPIO BLOQUE PRINCIPAL -->
<div class='item-content'>

<!-- MINIATURA (CON ENLACE)-->
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>

<!-- TITULO DEL POST (CON ENLACE) -->
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>

<!-- RESUMEN DEL POST -->
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>

<!-- FECHA ULTIMA ACTUALIZACION -->
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>

<!-- FIN BLOQUE PRINCIPAL -->
</div>

<!-- FIN BLOQUE NOMBRE, MINIATURA, POST, RESUMEN, FECHA ACT -->
</div>

<div style='clear: both;'/>

</li>

<!-- FIN BUCLE PARA MOSTRAR TODOS LOS ELEMENTOS -->
</b:loop>
</ul>

<!-- ENLACE Mostrar todo PARA VER MAS BLOGS DE LOS PREDEFINIDOS -->
<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
<a href='javascript:void(0)'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
<a href='javascript:void(0)'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<!-- LAPIZ DE EDICION RAPIDA -->
<b:include name='quickedit'/>

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

Por ejemplo, podemos conseguir una especie de foto-blogroll, borrando toda la parte de código que incluye los datos distintos de la miniatura. Si hacemos esto sin más, el problema será que las imágenes saldrán en vertical en fila de a una. A continuación teneis el código completo del gadget, para que salgan todas las imágenes seguidas, adaptándose al ancho del espacio disponible y con la información básica del post correspondiente al pasar el puntero por encima de cada imagen.

Hay que añadir el artilugio Lista de Blogs, seleccionar al menos la Miniatura y Guardar. Después se entra en Edición de HTML con artilugios expandidos. Todo el apartado Lista de Blogs desde <b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'> hasta </b:widget>, hay que sustituirlo entero por este otro.

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>
<b:includable id='main'>
<div class='widget-content' style='margin:0 auto;text-align:left;width:95%;'>
<b:loop values='data:items' var='item'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:title='data:item.blogTitle + &quot; • &quot; + data:item.itemTitle + &quot; • &quot; + data:item.timePeriodSinceLastUpdate' expr:width='data:item.itemThumbnail.width' style='border: #cccccc ridge 4px;'/>
</a>
<b:else/>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' expr:height='72' expr:title='data:item.blogTitle + &quot; • &quot; + data:item.itemTitle + &quot; • &quot; + data:item.timePeriodSinceLastUpdate' expr:width='72' src='http://img209.imageshack.us/img209/4421/iconojojn4.jpg' style='border: #cccccc ridge 4px;'/>
</a>
</b:if>
</b:if>
</b:loop>
<div style='clear: both;'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

El resultado si se deja en la sidebar, será algo parecido a la imagen de la derecha. Si quereis, también se puede trasladar a un bloque horizontal, por ejemplo encima o debajo de las entradas. Esto último lo podeis ver funcionando en Sin Entradas.

Este código incluye una condición para que muestre un dibujo estándar en el caso de que no exista imagen en el post. Es el ojo que se puede ver en el puesto 7 del ejemplo gráfico. También se ha incorporado un marco con el atributo BORDER que puede ser modificado al gusto.

El truco está basado en una idea de Miguelemele para su blog de fotografía, donde también lo podeis ver aplicado al final del blog. ¡Ah!... y el dibujito del ojo también es suyo.

Miguel también descubrió que las miniaturas son de un tamaño fijo de 72x72 px, por lo que si quereis mostrar otro tamaño, hay que escalar la imagen sustituyendo dentro de la etiqueta IMG, la expresión expr:height='data:item.itemThumbnail.height' por expr:height='NUMPIXELS' . Además, en la imagen para post sin idem, hay que cambiar el valor 72 por la misma cifra que coloquemos como NUMPIXELS.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter