Generación OPin: Mini galería de Entradas Recientes con texto flotante

Un Widget para usuarios de Blogger con la idea de mostrar entradas recientes no es algo para nada nuevo. Por lo general, estos dispositivos se colocan en la barra lateral de modo que cuando se abre, los visitantes pueden ver qué nuevos artículos se han publicado en nuestro blog. A diferencia de esos widgets éste presenta los post como imágenes en miniatura y al pasar el cursor por sobre ellas aparecerá un marco de texto flotante que muestra una parte del post. A esto es a lo que se llama Tolltips. El Script fue creado por Taufik ~ DTE. y el archivo Java que lo desarrolla lo dejo en MEGA para que usted lo baje y lo guarde por las dudas. Claro que también puede subirlo a un servidor que soporte Java y así desligarse del archivo actual. Queda a su elección.

Este widget me agrada mucho. Es fácil de adaptar en tamaño y cantidad de entradas, colores y tipos de letras, así que supongo que todos pueden darle un buen destino y utilidad.

Tal vez la mayor contra es que tarda un poco en cargar las imágenes, dejándolas hasta que todo el resto del blog ha terminado su carga y que en algunos blogs no muestra el texto flotante (cosa que aún no sé cómo solucionar).

Si bien se puede integrar dentro de la plantilla, la manera más simple es incluir el código en un elemento HTML/JavaScript

#mini-gallery h2 {
  font:normal 14px Impact,Arial,Sans-Serif;
  color:#f47e00;
  text-shadow:0px 1px 0px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#292929;
}

#mini-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://lh3.googleusercontent.com/-6__ZnzHFTCw/Un03g9JWooI/AAAAAAAAF8Y/c4xxKsjWMss/s48/loading-white.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}

#mini-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}

#mini-gallery .rp-item .rp-child {
  position:absolute;
  top:95%;
  left:95%;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:4px solid #f47e00;
  -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
}

#mini-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#f47e00;
}

#mini-gallery .rp-item:hover .hidden {display:block;}
</style>
<script type="text/javascript">
var rpTitle     = "Articulos Recientes", // Especifique el título del widget
    numposts    = 20,                // Determinar el número de miniaturas / posts
    numchar     = 300,               // Especificar el número de caracteres en la descripción tooltip
    rcFadeSpeed = 600,               // Determinar la velocidad del efecto. FadeIn () descripción ahora aparece
    pBlank      = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg", // Miniatura de copia de seguridad si los mensajes no tienen imágenes
    blogURL     = "http://generacionopin.blogspot.com"; // Coloca la direccion de tu blog
</script>
<script src="https://dl.dropboxusercontent.com/u/14895124/Javascript/mini-gallery.js" type="text/javascript"></script>

No olvide reemplazar donde dice http://generacionopin.blogspot.com con la dirección de su blog. rpTitle por el título del widget, determinar el número de entradas que se muestran (thumbnails) en la variable numposts, especifique el número de caracteres / resumen del artículo que aparecerá en la variable numchar .

Si la plantilla ya está equipada con JQuery, retírelo del código del widget.

Haga clic en Guardar y vea los resultados.

Post original en http://www.dte.web.id/2012/02/recent-post-widget-with-mini-thumbnail.html

Suerte.

2 comentarios:

laura3/02/2013
hola, me gustaría saber como se pone el gadget que tienes en la columna lateral que pone Popular
Recent
Comments pero con etiquetas del blog, es para blogger
un saludo
ResponderEliminar
Respuestas