Agregar un enlace que dirija al post en cada elemento de las entradas populares

Cuando elegimos la opción de mostrar las entradas populares con la imagen miniatura y el título, pudiera dar la impresión de que le falta algo, ¿no?,  mmm, tal vez lo veas y pienses -no sé no me convence-, esto puede deberse a que vemos un espacio muy grande vacío debajo del título, esa es la percepción visual, por otro lado, está la facilidad para ir al artículo, aunque de manera intuitiva sabemos que el título o la imagen miniatura nos dirigirá al post, esto no es muy evidente...

Pensando en eso, podemos agregar un enlace para que debajo de cada título aparezca un enlace al artículo o post. En la plantilla Cocinando con Adela, hice esto, de ese modo se puede acceder al artículo si hacemos click sobre dicho enlace, al igual  que con el título del artículo o post.



Pero, ¿cómo hacer eso?, bueno, hoy te diré paso a paso cómo hacerlo ;)



Paso 1. Necesitas configurar las entradas populares para que éstas muestren la imagen miniatura en adición al título que siempre se muestra:

Paso 2. Ve a la edición de HTML de la plantilla, marca la casilla de expandir plantillas de artilugios, y luego, identifica el siguiente código:



 <!-- (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/>



Luego, sustituyes la parte que resalté de rojo por esto:

  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a><a class='verpopu' expr:href='data:post.href'><span><br/>Ver Artículo&#187; </span></a></div>

Si quieres, puedes cambiar el texto del enlace "Ver Artículo" por el que quieras.



Paso 3. Verificas en vista previa y si todo luce bien guarda los cambios.



Paso 4. Ahora lo que falta es darle un poco de estilo al enlace y lo hacemos con CSS, entonces vamos a Plantilla > Personalizar > Avanzado > Añadir CSS y lo agregamos, editando los colores, poniendo otras propiedades, etc...

.item-title a.verpopu span {

color:#d5aa00;/*color del texto*/

}

.item-title a.verpopu span:hover {

color:#738931;/*color del texto hover*/

text-decoration:underline;/*subrayado*/

}

En color ponemos el color del texto, y con text-decoration:underline, hacemos que se subraye el texto al poner el puntero del ratón sobre el enlace.



Paso 5. Guarda los cambios en "Aplicar al blog" y listo, ahora tendrás un enlace visible en las entradas populares que te dirigirá a cada post respectivamente.