MEGA WIDGET PARA BLOGGER MENÚ HORIZONTAL DESCOMUNAL

MEGA WIDGET PARA BLOGGER MENÚ HORIZONTAL DESCOMUNAL

Necesitabas un widget para blogger único y espectacular,de la mano de  Ayuda de blogger te lo trae así de fácil.

 Mi espacio digital 0 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.



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.


 Demo: Original de  Ayuda de Blogger para que podáis entenderlo mejor y ver que no he retocado nada: 

 Vamos a trabajar

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

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.

<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/AVvXsEghHQvNH-_w2DaoG6t_nHWItv-xnDYbYC9XrLbgFO4_-s2licJCy0AbP9EVv50Dc4XPpCINlmsjmbhRhiKe0PLEECE04uIIqor3aIo1ureRrefnt3GMsGIjBqez63vDh-ALKPUEPcdzccM/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 Azul MaxPost: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.

Fecha de la Publicación; 27-12-2018

 Fuente; ayudadeblogger

 Publicado por;