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.

Imágenes de artículos destacados con thumbnail

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

Imágenes de artículos destacados con thumbnail

3 Abre un gadget “Añadir un gadget

Imágenes de artículos destacados con thumbnail

4 Busca el widget que dice “HTML/Javascript

Imágenes de artículos destacados con thumbnail

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="http://4.bp.blogspot.com/-uSdrcNKrXSE/UcXkqq4dpjI/AAAAAAAADwE/7TGZ0xl-BT4/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="http://3.bp.blogspot.com/-PXtGuHw9uLs/UcXkJc5DrQI/AAAAAAAADv8/OKQfMh0aVOE/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="http://2.bp.blogspot.com/-oTyZPs29OBU/UcXhin4bsiI/AAAAAAAADvk/JWKq50NDvGQ/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="http://3.bp.blogspot.com/-6IDYrHYVosw/UcXZOlWy_SI/AAAAAAAADvU/e9PaupT2r64/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



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.

Related post

Comentarios

8 comentarios:

  1. hola tienes el widget para articulos destacados como el que tienes en tu blog? con los mismos efectos de giro cuando pasas el mouse por encima?

    gracias

    ResponderEliminar
    Respuestas
    1. Hola, en el transcurso de la semana publico ese truco para blogger, mantente atento a las nuevas actualizaciones, suscribete..
      Saludos.

      Eliminar
  2. Hola Luis, si quisiera poner un lista como la tuya, de Articulos Destacados, ¿cómo lo puedo hacer?

    gracias!
    Mariona

    ResponderEliminar
    Respuestas
    1. Hola en el transcurso de la semana publicare el codigo en un post para poder realizar ese truco, recuerda suscribirte a mis actualizaciones.
      Saludos.

      Eliminar
  3. no me salen las imagenes de cada post

    ResponderEliminar
  4. luis yo quoero ponerlo en una entrada para me sale debajo una linea.. borre lo marcado de amarillo y se borro un articulo.. ayudame a eliminar esa linea si..

    ResponderEliminar