Widgets para blogger Mega widget V2


Tener unos buenos trucos para blogger con espectaculares widgets para blogger y así poder mostrar nuestras publicaciones recientes en un solo widget que pueda mostrar con exactitud varias imágenes y que se desprenda de cada imagen una descripción pequeña de nuestras primeras entradas es lo que todo blogger esta buscando hoy en día, nuestro nuevo widget para blogger no va a ocupar mucho espacio en nuestro blog de blogger. Con este nuevo widget para blogger podrás incrementar las vistas de tus artículos que algunos usuarios tal vez lo pasaron por alto. Lo que va a mostrar nuestro nuevo widget es nuestras primeras 20 publicaciones, lo que hará que se cargue con un solo widget y un solo código en el cual tendrás que cambiar un solo paso. El código de implementación en muy fácil, solo tienes que seguir las instrucciones de configuración e insertar un solo código. Esto hará que se muestre tu nuevo widget. Podrás ubicarlo donde tu quieras. El mega widget V2 funciona en todos los navegadores como Firefox, Google Chrome, Internet Explorer etc.

Widgets para blogger

Anteriormente publique un mega widget del cual lo podrás ver en el siguiente enlace


Bueno a continuación mire su demostración en el siguiente blog, el widget esta ubicado en el sidebar de la derecha, se cencuentra casi al final y tiene el nombre de “ÚLTIMAS PUBLICACIONES

DEMO

Te gusto verdad!

Vamos a copiar el código

1 Ira blogger

2 Da un clic en “Diseño

Widgets para blogger

3 Abre el gadget que dice “Añadir un gadget

Widgets para blogger

4 Busca el widget que dice “HTML/Javascript” e inserta las siguientes líneas de código en su interior

Widgets para blogger

<style type="text/css">
#post-gallery {
  width:304px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:##000000
;
  padding:8px;
  background-color:#1BA1E2
;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#000000;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://img839.imageshack.us/img839/3042/88a.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top: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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Ultimas Publicaciones",       // Widget Title
    numposts    = 20,      // El numero que se muestra de imagenes thumbnails / posts to display
    numchar     = 200,      // Numero de caracteres en la descripcion
    rcFadeSpeed = 600,      // Efecto rapido. fadeIn () tooltip appears
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR_RY3ihEhcKH8onfK47xqBFeH1YlH92H_by2bW-hdxhmY9UkgP6hTddbcuuN6p2bychz8XnhRmdFFDDRhcZw99dcoNOB199UFgEAcV15KM4AYtlFLDX7wCnLClzBLNY_unP_WdoIrSwZn/s100/no-img.png",      // Imgen de muestra hacia arriba
    blogURL     = "http://www.ayudadeblogger.com/";       // La direccion de tu Blog
</script>
<script src="http://yourjavascript.com/32195451263/recent-post-thumbnail-ayudadeblogger.js" type="text/javascript"></script>

Realiza este cambio:

Borra el link que dice http://www.ayudadeblogger.com/  y pon ahí la dirección te tu blog, eso es todo.

Si quieres aumentar el numero de imágenes que se muestra en el widget, basta con cambiar el numero 20 por el numero que tu quieras mostrar.

Ahora dale un clic en “Guardar” y ubica tu nuevo widget donde tú quieras.

Fácil verdad?

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber 



Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

4 comentarios:

  1. Hola, la configuracion del codigo esta hecho para que solo se muestra las primeras entradas de tu blog y no para mostrarlo por etiquetas.
    Saludos.

    ResponderEliminar
  2. esto se puede poner como "inicio" del blog? he encontrado un blog muy bueno que me parece tiene un widget gigante también, este me ha gustado y lo puse como una página, sin embargo salió como una imagen solamente, hay algo como este widget que pueda poner que abarque la página completa?

    ResponderEliminar
    Respuestas
    1. Claro te recomiendo este nuevo widget: http://www.ayudadeblogger.com/2013/07/widget-para-blogger-acordeon-portafolio.html
      Saludos.

      Eliminar
  3. Yo lo modifique :) le puse un efecto de bordes redondeados,cuando le pasa el mouse la imagen se vuelve un circulo. Tambien le cambie la font y le cambie la imagen de "No image" y la de cargando. Y el ancho y le quite la sombra. Ok,si exagere.

    ResponderEliminar