IMÁGENES DE ARTÍCULOS DESTACADOS CON THUMBANIL

By Blogs Famag - domingo, diciembre 30, 2018

IMÁGENES DE ARTÍCULOS DESTACADOS CON THUMBANIL .

Como era de esperarse, compartiré con todos vosotros un nuevo truco para blogger. El widget que os voy a presentar tiene como nombre imágenes de artículos destacados con thumbnail.

Es un widget con el cual podreis publicar vuestros mejores artículos destacados para que los usuarios que visiten tu blog los vean y puedan obtener fácilmente la información que contiene ese post.

Este nuevo widget para blogger, muestra una imagen pequeña y un titulo destacado de tu blog, todo este proceso se lo realiza de forma manual, así que si queréis poner en un post artículos destacado,

Pagina Demos:

tendréis que insertar la imagen en el código del widget al igual que la dirección URL que quieras dar a conocer, pero es fácil de hacer todos estos cambios,

solo tendrás que seguir mis instrucciones y lo tendrás así de fácil, no es complicado, ya que todo el código lo insertáis en un solo widget y no es necesario dirigirse hacia el Editor HTML de nuestra plantilla.

Podrás utilizar este nuevo widget de imágenes y artículos destacados debajo de la cabecera principal de tu bloc, encima de tus entradas, en la parte inferior de sus entradas, o al final de su bloc..

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/AVvXsEh3d8LC9f7ka-D75pIQ7mL9amiTQ-5yLXZn7BFAU_CVrviapQDR4mZknOr4YiVBezoioL-IYvCMq_3oQOqwz7w5XAsUHmdEjqE4_lxW0N3Wxypn9_g8YoUNby5VFSlseO8boxVE4w9RC28O/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/AVvXsEjvgOXetOozA11UbrBVwOnQwRyKXs86tMbS73M-hv2fnQfaYCZncBG-RCOS6Tz61A3wpAg2BnQ5531mhKveZ5a9q16Oiz1MmnjLSm56HF6mYjMSdgit8zBowUpg4dTG3F9KjvtrpGiODYoJ/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/AVvXsEi3FHx-n7NZcwrdxq5w7OcWzsrByW-IOALCD-_LYyHMD_pdmKLYXmcSWTLrwJN0Yzx7rKKpS88aBBTHPmSGlbacjBo1L3tJFVRjMHQC7JR8_HD2Ec2Co-REmwFjIjNKKzQYNw2deHmuHIhF/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/AVvXsEhuCHLoeV9GaQ7l7fcMsxiYDuP8loxw8GjPjYBKG_4rD8kqpyAbKjK4Y4KqZSFyklLzfiMFjmhoj3bZukblQpSx5oNWgm4BW9XxE-reF7YRMPy3i6i6kh6sByfvSEZi77_CJenoGTcO7j0H/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.