Widgets de imágenes de últimas entradas con efecto

 gadget entradas recientes
Vamos a implementar un widgets simple solo de imágenes de las últimas publicaciones con un efecto hover de bordes redondeados, la función es bastante simple, usando un script de JSON que leerá los feeds de nuestro sitio y hará el resumen del mismo, lo que haremos es modificar un poco los estilos para hacer una pequeña galería de solo la imágenes sin resumen de texto, para eso vamos a hacer los siguiente:

Vamos a diseño y agregamos un JavaScript HTML y pegamos el siguiente código:
<style>
#bp_recent {
width:300px;
padding: 5px;
color: #999;
font-size: 14px;
text-align:justify;
}
#bp_recent img {
width: 70px;
height: auto;
border: 3px solid #5b6569;
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
opacity: 1.0;
-webkit-box-shadow: 0px 0px 9px -1px rgba(3,142,222,1);
-moz-box-shadow: 0px 0px 9px -1px rgba(3,142,222,1);
box-shadow: 0px 0px 9px -1px rgba(3,142,222,1);
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
#bp_recent img:hover{
opacity: 0.5;
border-bottom-left-radius: 3px;
border-top-right-radius: 3px;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s
}
#bp_recent a{
color: #fff;
font-size: 15px;
text-transformation: uppercase;
margin-bottom: 5px!important;
}
#bp_recent a:hover {
text-decoration: underline;
}
</style> <div id='bp_recent'></div>
<script type="text/javascript" src="https://sites.google.com/site/escribiendotrazos/JsEntradasEscribiendoT.txt"></script>
<script style='text/javascript'>
var numberOfPosts = 9;
var showPostDate = false;
var showSummary = false;
var summaryLength = 0;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
var readMore = 'Leer más';
</script>
<script src=' http://lapizycafe.blogspot.com/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Modificaciones: reemplazar el nombre por el de su sitio, el numero 9 marcado en rojo es la cantidad de imágenes de post, todos los estilos se pueden modificar, el resultado sería algo como esto.

3 comentarios:

Añade un comentario