Widget para blogger Mega Widget


Necesitabas un widget para blogger único y espectacular, Ayuda de blogger te lo trae así de fácil. Ayudadeblogger.com siempre se basara en presentar temas muy interesantes gratuitos para todos los bloggers del mundo. Obtener un buen widget para blogger es algo que no te puedes perder. Este nuevo widget para blogger funciona perfectamente en todos los navegadores como Firefox, Google Chrome, Internet Explorer, etc. A este widget para blogger se lo conoce como Mega Widget, lo que va ha mostrar este widget es 4 imágenes separadas incluyendo el titulo de su post y la fecha de publicación, mostrara de forma automática la primera publicación y luego ira subiendo a la siguiente imagen y se pondrá en primera posición y así sucesivamente, además podrán configurarlo si quieren mostrar mas publicaciones en el widget, yo lo he dejado que muestre 8 posiciones de forma automática, pero ustedes podrán optar a incrementarlo.

Widget para blogger

La instalación de este nuevo widget para blogger es muy fácil, no necesitaran instalarlo en su editor HTML de su blog, solo tendrán que copiar el código e introducirlo en un solo widget y listo, funcionara de maravilla.

A continuación mire su demostración en mi blog de demos, el widget se encuentra en el sidebar de la derecha de mi blog de demos y tiene como nombre “Widget de Post Recientes


Te gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Da un clic en “Diseño

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

Widget para blogger

4 Una vez que hayas abierto un gadget tienes que buscar y abrir el widget que dice “HTML/Javascript” e inserta las siguientes líneas de código en su interior.

Widget para blogger

<style scoped="" type="text/css">
ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}
ul.abt-sidebar-slider{width:100%;height:500px}
ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}
ul.abt-sidebar-slider img{border:0;width:100%;height:100%}
ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider  .overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0zuM6rSxG-QTG3u7mOpNx4uBpt3JK5tbfS0lK6u_jrp7QKKw7j8QcPOSvWmxBwVtwDbBhHvz7frrxHV0b4NUTDgMhwS4_nrkQb2mSgTvxYyxNqxX6AhRGfLjWsx4_c2zUI1UlhRKbRRA/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}
ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}
ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/4005356011/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.ayudadeblogger.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>

Realiza este cambio:

Este punto es muy importante, tendrás que borrar el nombre que dice ayudadeblogger  y poner ahí solo el nombre de tu blog de blogger, por ejemplo: si tu blog se llama ejemplo.blogspot.com tendrás que solo poner la parte que dice ejemplo.blogspot  y nada más.

Si quieres aumentar el número de post que se muestren al momento de ir intercambiando las imágenes de tu nuevo widget solo debes cambiar el número que esta marcado de color rojo 8 por el número que tú quieras.

Eso es todo ahora dale un clic en “Guardar” y ubica tu Mega Widget donde tu quieras.

Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos


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

9 comentarios:

  1. Hola!. Me gustó! Está muy bueno!
    Lo instale en mi blog y funciona. Queda re lindo.
    Ahora: UNA CONSULTA
    Al momento de hacer click sobre alguna de las imagenes, SE ABRE LA NOTICIA EN OTRA PAGINA
    ¿cómo puedo hacer para que se abra en el mismo blog? no se si soy claro, es decir que el lector no salga del blog...
    ¿Hay algún código que se pueda agregar?
    Desde ya, muchas gracias por la guía que me puedas brindar.
    Saludos desde Argentina!
    El sitio web es: http://ucrviale.blogspot.com.ar

    ResponderEliminar
    Respuestas
    1. Hola, he visto tu blog y te quedo estupendo, no es posible realizar lo que tu dices ya que esta configurado para que se abra en una nueva pagina por medio del script
      Saludos.

      Eliminar
  2. Ahh... bueno, muchas gracias por responder. Saludos y a seguir creando nuevas plantillas jeje... Estoy pensando en colocar una de las tuyas pero no me decido.

    ResponderEliminar
  3. Que vacan hermano esta super que vacano te felicito!

    ResponderEliminar
  4. aqui me funciono pero de fondo se ve gris :S

    ResponderEliminar
  5. Muchas Gracias por el tutorial!! ;)

    ResponderEliminar
  6. oye amigo solo me aparece unas imagenes negras y el nombre del post
    http://todoanimeshd.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. El widget funciona perfectamente, tal vez algo estas haciendo mal o no estas copiando bien el codigo, ademas, tienes que verificar si tal vez no tengas otro script en el aplantilla de tu blog como este http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js si tienes uno igual tendras que borrarlo ya, que crea conflictos si tienes instalado dos scripts.
      Saludos.

      Eliminar
  7. Que tal hermano, podria hacerlo en vez de vertical horizontal? Saludos

    ResponderEliminar