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
- Mostrar un widget desplegable de categorías para blogger
- Nuevo estilo de etiquetas con menu desplegable para blogger
- Publicar un Widget por etiquetas con imágenes en blogger
- Trucos para blogger Widget de imágenes para blogger
- Widget Acordeón para blogger
- Widget de Twitter
- Widget de artículos recientes Sliding
- Widget de comentarios en mi blog de blogger
- Widget de post recientes con imágenes para mi blog deblogger
- Widget de redes sociales para blogger
- Widget de redes sociales para blogger con efectos
- Widget de suscripciones para blogger
- Widget para blogger Acordeón Portafolio
- Widget para blogger Mega Widget
- Widget para blogger Menú de Redes Sociales
- Widgets para blogger Mega widget V2
- 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
8 comentarios: