Imágenes de artículos destacados con thumbnail

Como era de esperarse, compartiré con todos ustedes un nuevo truco para blogger. El widget que les voy a presentar tiene como nombre imágenes de artículos destacados con thumbnail. Es un widget con el cual podrán publicar sus mejores artículos destacados para que los usuarios que visiten su blog los vean y puedan obtener fácilmente la información que contiene ese post o puesto destacado. Este nuevo widget para blogger, muestra una imagen pequeña y un titulo destacado de su blog, todo este proceso se lo realiza de forma manual, así que si quieren poner un post artículos destacado, tendrán que insertar la imagen en el código del widget al igual que la dirección URL que quieran dar a conocer, pero es fácil de hacer todos estos cambios, solo tendrán que seguir mis instrucciones y lo tendrán así de fácil, no es complicado, ya que todo el código se lo inserta en un solo widget y no es necesario dirigirse hacia el Editor HTML de nuestra plantilla. Podrán utilizar este nuevo widget de imágenes y artículos destacados debajo de la cabecera principal de su blog, arriba de sus entradas, en la parte inferior de sus entradas, o al final de su blog.

No se olviden de visitar algunos widgets que publique anteriormente

1. Mostrar un widget desplegable de categorías para blogger
2. Nuevo estilo de etiquetas con menu desplegable para blogger
3. Publicar un Widget por etiquetas con imágenes en blogger
4. Trucos para blogger Widget de imágenes para blogger
5. Widget Acordeón para blogger
6. Widget de Twitter
7. Widget de artículos recientes Sliding
8. Widget de comentarios en mi blog de blogger
9. Widget de post recientes con imágenes para mi blog deblogger
10. Widget de redes sociales para blogger
11. Widget de redes sociales para blogger con efectos
12. Widget de suscripciones para blogger
13. Widget para blogger Acordeón Portafolio
14. Widget para blogger Mega Widget
15. Widget para blogger Menú de Redes Sociales
16. Widgets para blogger Mega widget V2
17. Widgets para blogger nuevo marcador social para blogger

A continuación mire su demostración en mi blog de demos, el widget tiene como nombre “Imágenes de artículos destacados con thumbnail”

Les gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Da un clic en “Diseño”

3 Abre un gadget “Añadir un gadget”

4 Busca el widget que dice “HTML/Javascript”

5 Ábrelo e inserta las siguientes líneas de código en su interior

<div id="top-stories-home" class="mb-2" data-vr-zone="Photo Features">     <ul id="topstories" class="clearfix">     <li data-vr-contentbox="">     <div class="shadow">     <a class="frame" href="Aqui la URL del post 1">     <img class="attachment-top_stories_site wp-post-image" width="193" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQEaRAOkBULBhbAJDeSdRPks29yxKRreuJlCmxjF74sZZDW1bUh4Zt70IRhQldtWPKOKk4p5RRWsZrO7fIYla1KJ8YTd_xgRzYEa_6x-QoVM5nm-0uymK85UQCpzwiynAcXD8BD9OzMpg/s400/playstation+3.JPG " />     </a>     </div>     <div class="media-data">     <a class="title" href="Aqui la URL del post 1">Aqui el titulo del Post 1</a>     </div>     </li>     <li data-vr-contentbox="">     <div class="shadow">     <a class="frame" href="Aqui la URL del post 2">     <img class="attachment-top_stories_site wp-post-image" width="193" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWS9AbAjpZvOF6rZ1qbDDZu5NMRD80woKiw0CL0YSM9BwjEZMK18yUu34CLo2K65nZCipFgayTDTke2vwTuhHq2gR8wGgcsDytqpqqWdyMBXZeTs7tWGlg1R-Dr9htLvk6rlNn1T1Lxzn4/s400/playstation+2.JPG" />     </a>     </div>     <div class="media-data">     <a class="title"  href="Aqui la URL del post 2">Aqui el titulo del Post 2</a>     </div>     </li> <li data-vr-contentbox="">     <div class="shadow">     <a class="frame" href="Aqui la URL del post 3">     <img class="attachment-top_stories_site wp-post-image" width="193" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdV3IkjFUO3JiNk5OL3VjG2ya_I_1SxdOcRcD6eSmZb1wdQQBWPUyySU9jxMIy_O-2zWz-1EOK1LRmynn205KXLgiA_ipyJabEjdtBrADTONS7mfElg_vLTL-x0qMvyu-s06THsZr_M6RV/s400/playstation.JPG" />     </a>     </div>     <div class="media-data">     <a class="title"  href="Aqui la URL del post 3">Aqui el titulo del Post 3</a>     </div>     </li>     <li class="last-child" data-vr-contentbox="">     <div class="shadow">     <a class="frame" href="Aqui la URL del post 4">     <img class="attachment-top_stories_site wp-post-image" width="193" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEzSHTD82yvZkYqXzp3tfkr8X_BWpgkxBhmgN-neJv_AkRzGjpPMwhu1NJCqHGboQ8w-K7uE8s3n9j81sArAYGQ5sjP04lZfExCJUmvXwX20_dYTbuEcrxcmt0kPkzhZRH5fB-mLk-n5JO/s400/iphone+2.JPG" />     </a>        <span class="last-child" style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:180px;       "><a style="color:#D3D3D3;" href="http://www.ayudadeblogger.com">Widgets</a></span>          </div>     <div class="media-data">     <a class="title" href="Aqui la URL del post 4">Aqui el titulo del Post 4</a>           </div>     </li>     </ul>     </div>     <style>           #topstories {         margin: 0;         padding: 0;     }     #topstories li {         display: inline-block;         float: left;         margin: 0 22px 0 0;         position: relative;         width: 210px;     }     #topstories li.last-child {         border-left: medium none;         margin-right: 0;     }     #topstories .frame {         border-radius: 6px 6px 6px 6px;         box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.8);         padding: 4px;     }     #topstories .shadow {         background: none repeat scroll left bottom transparent;         padding-bottom: 7px;     }     #topstories .shadow img {         max-height: 103px;         max-width: 193px;     }     #topstories .media-data {         -moz-transition: background 0.3s ease-in 0s;         background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);         left: 5px;         position: absolute;         top: 5px;     }     #topstories .media-data:hover {         background: none repeat scroll 0 0 transparent;     }     #topstories .media-data .title {         color: #FFFFFF;         display: block;         font-size: 18px;         height: 85px;         overflow: hidden;         padding: 9px 14px;         text-shadow: 1px 0 2px black;         width: 165px;     }     #topstories .media-data .title:hover {         text-decoration: none;     }     #top-stories-article {         margin-bottom: 22px;     }     #top-stories-article #topstories {         padding-left: 15px;     }     #top-stories-article #topstories li {         border-right: 1px solid #EBEBEB;         font-size: 11px;         height: 80px;         overflow: hidden;         padding-right: 15px;         width: 290px;     }     #top-stories-article #topstories li:last-child {         border-right: 0 none;         padding-right: 0;     }     #top-stories-article #topstories li.last-child {         border-right: 0 none;         padding-right: 0;     }     #top-stories-article .shadow {         background-position: right bottom;         padding-bottom: 0;     }     #top-stories-article .shadow img {         border-radius: 6px 6px 6px 6px;         max-height: 122px;         max-width: 280px;     }     #top-stories-article .shadow .frame {         border: 0 none;         box-shadow: none;         height: 80px;         overflow: hidden;         padding: 0;         width: 280px;     }     #top-stories-article .media-data {         border-radius: 6px 6px 6px 6px;         left: 0;         top: 0;     }     #top-stories-article .media-data .title {         height: 62px;         width: 252px;     }             a {         text-decoration: none;     }       #topstories .frame {         border-radius: 6px 6px 6px 6px;         box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.8);         padding: 4px;     }       .frame, .post img {         background: none repeat scroll 0 0 #FFFFFF;         border: 1px solid #E0E0E0;         box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.8);         display: inline-block;         padding: 3px;     }     </style>

Realiza estos cambios:

He marcado de tres diferentes colores en los lugares que tendrán que borrarlos y hacer sus cambios.

Las palabras que están marcadas de color azul Aqui la URL del post, tendrán que borrarlas y poner la dirección URL del artículo que quieran mostrar en cada una de ellas

Las URLs que están marcadas de color rojo, pertenecen a las imágenes de los artículos destacados, tienen que cambiar todos esas 4 URls por las URLs correspondientes de sus imágenes.

Y por ultimo, borra las palabras que dicen Aqui el titulo del Post y pon ahí el titulo de su artículo destacado.

Eso es todo, ahora dale un clic en “Guardar” y ubica tu nuevo widget donde mejor te lo parezca, felicidades ahora tienes un nuevo y espectacular widget de imágenes destacadas de tu log de blogger.

Fácil verdad!

Nota: Si este nuevo widget lo quieren poner arriba de sus post o debajo de sus post, tendrán que borrar una parte del código, ya que si no lo hacen se saldrá de la línea marcada. Basta con borrar un solo puesto, lo voy a dejar marcado de color amarillo en el código, y solo ese código marcado de color amarillo tendrán que borrarlo.  

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Widgets para Blogger

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.