generar imagenes aleatorias con enlaces imagen aleatoria con link

Demo en Codepen

En esta ocasión les comparto un widget que he desarrollado capaz de generar imágenes aleatorias al recargar la página. Opcionalmente las imágenes también pueden contener enlaces si así se requiere, lo que puede ser útil para crear banners aleatorios.


Contenido


Instalar

Ve a tu panel de administración en Blogger Temas Editar HTML. Busca <b:section id='sidebar'> o cualquier etiqueta section. Debajo de eso pega el siguiente código:


<b:widget id='TextList51' title='Imagen Aleatoria' type='TextList'>
   <b:includable id='main'>
      <b:include expr:name='data:widgets ? "widget-title" : "title"'/>
      <b:include name='content'/>
      <b:include name='js'/>
   </b:includable>
   <b:includable id='title'>
      <b:tag name="h2" class='widget-title'>
         <span class='widget-name'><data:title/></span>
      </b:tag>
   </b:includable>
   <b:includable id='content'>
      <div class='widget-content'>
        <div expr:id='"randomImage-" + data:widget.instanceId'/>
      </div><!-- .widget-content -->
   </b:includable>
   <b:includable id='js'>
     <script>
     var randomImage = function() {
     var container = document.getElementById('randomImage-<data:widget.instanceId/>'),//<![CDATA[
         images = [];//]]><b:loop index='i' values='data:items' var='e'>
         <b:with expr:value='"{" + (data:e contains "src:" ? data:e : 0) + "}"' var='img'>
         <b:with value='data:img.src ?: data:e' var='imgSrc'>
           images[<data:i/>] = "<b:tag cond='data:img.url' name='a' expr:href='data:img.url'><img expr:src='data:imgSrc'/></b:tag>";
         </b:with></b:with></b:loop>//<![CDATA[
         container.innerHTML = images[Math.floor(Math.random() * images.length)];
     }();//]]></script>
   </b:includable>
</b:widget>

Guarda los cambios y listo. De momento el widget no será visible ya que necesitamos agregar imágenes.


Configurar

Imágenes

Ve a Diseño en tu panel de administración de Blogger y edita el widget "Imagenes aleatorias". Lo único que debes hacer es agregar enlaces de imágenes a la lista, puedes agregar todas las imágenes que quieras.


En este caso, los elementos de la lista deben tener el formato json, toma de ejemplo el siguiente código:


url: "enlace", src: "imagen.jpg"

Es muy importante que se respete la coma y el espacio. Reemplaza enlace y imagen.jpg por la url del sitio y de tu imagen, puedes agregar todos los elementos que quieras a la lista.


También puedes combinar ambos métodos para agregar imágenes con y sin enlaces. Eso ha sido todo, si te ha servido no olvides compartir este artiuclo, siempre lo agradezco. Si tienes alguna duda, déjala en los comentarios.