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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (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 == "false"'>
<!-- (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:
Mensaje Informativo para Blogger con jQuery UIGracias a Jquery UI , en tan sólo unas cuántas líneas podemos crear increíbles animaciones para nuestra web, ya que viene precargado con inf...
Personalizar fechas de entradas en BloggerEn este artículo veremos 2 métodos para personalizar las fechas con CSS3 y Javascript, ya que hace algún tiempo atrás vimos una forma para h...
Iniciativa #EmpujonAiniciaBlog en los premios Bitácoras 2012iniciaBlog ha subido al puesto 6 según la Calificación parcial del 30 de Octubre de 2012 . Nuestro amigo Jesús González necesita mas que n...
Insertar música en el blog con la etiqueta </audio>Hace poco vimos la forma de insertar vídeos gracias a la etiqueta de HTML5 , en esta oportunidad veremos la etiqueta , la c...
¿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:
- Mensaje Informativo para Blogger con jQuery UIGracias a Jquery UI , en tan sólo unas cuántas líneas podemos crear increíbles animaciones para nuestra web, ya que viene precargado con inf...
- Personalizar fechas de entradas en BloggerEn este artículo veremos 2 métodos para personalizar las fechas con CSS3 y Javascript, ya que hace algún tiempo atrás vimos una forma para h...
- Iniciativa #EmpujonAiniciaBlog en los premios Bitácoras 2012iniciaBlog ha subido al puesto 6 según la Calificación parcial del 30 de Octubre de 2012 . Nuestro amigo Jesús González necesita mas que n...
- Insertar música en el blog con la etiqueta </audio>Hace poco vimos la forma de insertar vídeos gracias a la etiqueta de HTML5 , en esta oportunidad veremos la etiqueta , la c...
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.
No hay comentarios:
Publicar un comentario