Poner posts o artículos más recientes con miniatura y efecto de acercamiento en blogger

Tomado gentilmente de AllBloggerTricks

 Aquí estamos actualizando un post que ha muerto por culpa de la caída de un script lo que antes teníamos era un slider que ahora no funciona, pero, este nuevo muestreo de entradas o posts recientes en blogger con miniatura será más genial. 

Mira este mismo truco pero para una etiqueta específica (Click aquí)

 Para ver el demo no hace falta ir a otro sitio aquí lo tienen funcionando:

Así que ¿Te gustó? veamos como se pone:

1. Lo primero será ir a nuestro escritorio blogger allí vamos a Diseño > añadir un gadget > HTML/Javascript.

2. Luego allí copiamos el siguiente código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOIcs7HeRlSG4dcKBiGbX7NjLIj1-fRdipE6rcoHWfkokFJ9ow9cX1tdMxZojEpdxnhBB89Rh6JCLvOSazkmxYKSe49s8InEW_ZVRsG4CQLMZtf45nn7ioovVdF5aaV-v9TJd8jGdOf2ai/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "Últimos artículos",       // Titulo del gadget
    numposts    = 14,      // Numero de posts a mostrar
    numchar     = 200,      // Numero de caracteres a mostrar
    rcFadeSpeed = 600,      // Velocidad
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // Defecto imagen si el post no tiene
    blogURL     = "http://tublogaqui.blogspot.com/";       // URL de tu blog
</script>
<script src="https://dl.dropboxusercontent.com/s/yr0uqt4qu2pdd52/posts-recientes.js" type="text/javascript"></script>

Ahora bien vamos a modificar por la dirección de nuestro blog lo que está en color azul, con eso ya podríamos guardar todo y salir sin tanto complique sin embargo dejamos aclaración de lo demás que está resaltado.

- En color naranja está el SCRIPT que lo controla todo, está alojado en un sitio de terceros este se satura más a medida que cada vez alguien implemente este mismo código por ende puedes descargarlo y alojarlo por tu cuenta en donde quieras. click aquí para descargar.

- En color rojo tenemos el link de la URL de la imagen que va por defecto cuando un post o entrada reciente no lleva imagen, puedes cambiarla por una de tu gusto. 

- Lo que tenemos en verde claro, especifica datos como velocidad, # de carácteres etc, modificando lo que está en verde lo podrás configurar a tu gusto.

Y listo hasta aquí todo está hecho, como ven muy es fácil de entender y todo comentado para modificar.

Hasta la próxima BloggeRs,