Widget afiliados con movimiento

Alternative For Marquee HTML Using CSS3 Marquee CSS3 - Alternative For Marquee HTML Using CSS3

Demo en Codepen

Muchos blogs utilizan la etiqueta Marquee para insertar un área de banners con movimiento, sin embargo, esta etiqueta está obsoleta y en muchos navegadores no funciona. Se espera que finalmente deje de funcionar para todos así que he desarrollado una alternativa en CSS3, como respuesta a un pedido.


Instalar

Nos vamos a dirigir a nuestro panel de administración, Temas > Personalizar > Opciones avanzadas > CSS Personalizado y una vez aquí, pegaremos el siguiente código:


/* Plugin: Marquee Banners v1.0.2 */
/* by zkreations */
@-webkit-keyframes marquee{0%{top:100%;-webkit-transform:translateY(0);transform:translateY(0)}100%{top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes marquee{0%{top:100%;-webkit-transform:translateY(0);transform:translateY(0)}100%{top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@-webkit-keyframes marquee-inset{0%,100%{-webkit-transform:translateY(0);transform:translateY(0);top:0}50%{-webkit-transform:translateY(-100%);transform:translateY(-100%);top:100%}}@keyframes marquee-inset{0%,100%{-webkit-transform:translateY(0);transform:translateY(0);top:0}50%{-webkit-transform:translateY(-100%);transform:translateY(-100%);top:100%}}.marque{overflow:hidden;position:relative}.marque-items{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;position:absolute;left:0;width:100%}.marque-items:hover{-webkit-animation-play-state:paused;animation-play-state:paused}.marque-items a{display:block;float:left}.marque-items img{max-width:100%}
/*
=> Personalizar
*/
/* Contenedor
--------------------------------------------*/
.marque {
  height:420px; /*Altura del contenedor*/
}
/* Animacion --------------------------------------------*/
.marque-items {
  -webkit-animation-duration: 10s;
          animation-duration: 10s; /* Duracion */
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;  /* Tipo de animación */
  -webkit-animation-name: marquee;
          animation-name: marquee; /* Animacion */
}

Presionamos el botón "Aplicar" para guardar los cambios y luego nos vamos a Temas > Editar HTML, buscamos </b:section> (está varias veces pero cualquiera sirve) y arriba de eso pegamos lo siguiente:


<b:widget id='LinkList61' locked='false' title='Afiliados' type='LinkList'>
   <b:includable id='main'>
      <b:if cond='data:title.length != 0'>
         <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
         <div class="marque">
            <div class="marque-items">
               <b:loop values='data:links' var='m'>
                  <a expr:href='data:m.target' target='_blank'><img expr:src='data:m.name'/></a>
               </b:loop>
            </div>
         </div>
      </div>
   </b:includable>
</b:widget>

Guardamos los cambios y listo. El widget ya estará instalado y lo podremos ver desde la pestaña Diseño pero en el blog no será visible hasta que agreguemos un banner como mínimo.


Agregar Banners

Vamos a la sección "Diseño" en el panel de administración de blogger y buscamos el widget "Afiliados". Pulsamos "Editar" y veremos lo siguiente:


captura afiliados marquee

En el campo "Nuevo nombre del sitio" pegamos la url del banner del afiliado mientras que en "URL del sitio nuevo" pegamos la url hacia su blog. Pulsamos el botón "Agregar vinculo" y guardamos los cambios. Podemos agregar todos los afiliados que queramos de esta forma.


Animación alternativa

Por defecto la animación desplaza los banners hacia arriba hasta desaparecer del contenedor, posterior a esto, la animación se reinicia. Si quieres un efecto distinto busca el siguiente código:


/* Animacion --------------------------------------------*/
.marque-items {
  -webkit-animation-duration: 10s;
          animation-duration: 10s; /*duracion*/
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-name: marquee;
          animation-name: marquee; /*animacion*/
}

Y cambia marquee por marquee-inset. La animación alternativa desplaza los banners de arriba hacia abajo hasta topar con los bordes.


Conclusión

Cuando una etiqueta está obsoleta es normal que las nuevas versiones de los navegadores la ignoren por completo o eliminen la función de ésta, por eso tener una alternativa para ese entonces resulta de gran ayuda.


Si te sirvio este aporte no olvides compartirlo, eso me ayuda un montón. Cualquier duda que tengas déjala en los comentarios, siempre trato de responder todos.

Quizás te interese