add

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://lh4.googleusercontent.com/-Q5TyyMqOEkk/UV4vn45zY4I/AAAAAAAAJCk/WXm15PWrULA/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 



5 comentarios:

  1. muy bueno master.. una pregunta como hago para que muestre entrada por etiquetas

    ResponderEliminar
    Respuestas
    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.

      Eliminar
  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

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios