WIDGET DE IMÁGENES DE ARTÍCULOS DESTACADOS

By Blogs Famag - viernes, diciembre 28, 2018

WIDGET DE IMÁGENES DE ARTÍCULOS DESTACADOS .

En esta ocasión compartiré con todos vosotros 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 podreis publicar vuestros 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 tu blog, todo este proceso se lo realiza de forma manual, así que si quieres poner un post artículos destacado, tendrás
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 insertas 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 su blog, arriba de sus entradas, en la parte inferior de sus entradas, o al final de su blog.

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.