Widget de imágenes aleatorias

Widget de imágenes aleatorias Widget de imágenes aleatorias

Demo en Codepen

Hace tiempo compartí un código escrito en javascript que desarrollé para mi articulo Header aleatorio con vanilla javascript. Pues bien, se me ocurrió convertirlo en widget, con el fin de poder modificar imágenes desde el panel de administración de Blogger. La función del código es la misma, lo que cambia es la forma de implementarlo y editarlo.


Instalar

Vamos a ir nuestra administración en Blogger, nos dirigimos la ruta Temas > Personalizar > Opciones avanzadas > Agregar CSS. Probablemente ya tengamos código aquí, lo único que debemos hacer es agregar al final el siguiente código css:


/*!
* Widget: Imagen Aleatoria v1.0.2
* by zkreations
*/
/*Reset*/
header #TextList90,
header #TextList90 .widget-content{margin:0;padding:0;background:0 0}
header #TextList90>h2{display:none}
/*
=> Personalizacion
*/
.imageRandom {
    max-width: 100%; /* Ancho maximo */
}

Presiona el botón "Aplicar" para guardar los cambios y luego nos iremos a Temas > Editar HTML. Ya dentro del editor de código pulsamos CTRL + F y buscamos </b:section>. Nos saldrán varios, elegimos cualquiera y arriba de eso pegamos lo siguiente:


<b:widget id='TextList90' locked='false' title='Imagen aleatoria' type='TextList'>
   <b:includable id='main'>
      <b:if cond='data:title.length != 0'>
         <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
         <img class='imageRandom' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
         <script>
            var imageRandom = (function(){
            'use strict';
            var images = [<b:loop values='data:items' var='item'>"<data:item/>",</b:loop>],//<![CDATA[
                img = document.querySelector(".imageRandom");
                img.src = images[Math.floor(Math.random() * images.length)];
            })();
         //]]></script>
      </div>
   </b:includable>
</b:widget>

Guardamos los cambios y listo. Hemos finalizado con la instalación del widget de imágenes aleatorias.


Agregar imágenes

El widget solo será visible si tenemos al menos un elemento en la lista. Para agregar elementos iremos a la sección "Diseño" y editamos el widget "Imagen aleatoria", lo que nos mostrará lo siguiente:


widget imagen aleatoria

En el campo "Agregar elemento de la lista" pegaremos la url de nuestra imagen, posteriormente presionamos el botón "Agregar elemento". Esto lo repetimos para agregar todas las imágenes que queramos:


widget imagen aleatoria

Por último presionamos el botón "Guardar" y listo, el widget mostrará una imagen al azar, cada vez que se actualice la página.


Opciones

Header - Si posicionas el widget en la sección "Header" de tu plantilla, se integrará ocupando el espacio disponible, eliminando el título y los espacios del contenedor.


Muchos no le darán importancia a esta cualidad, pero si tienes creatividad, puedes ser capaz de modificar el aspecto de tu plantilla.


Eso ha sido todo. No olvides compartir este articulo, ya que ayudarás a más personas que estén buscando algo similar y además es algo que siempre agradezco mucho.

Quizás te interese