mas-audaz: Entradas relacionadas con slider

Abusando de transiciones y otras modernidades, esta es una variante para mostrar entradas relacionadas en Blogger, creando una especie de slider y se basa en Posts relacionados con miniaturas usando Json a la que simplemente le haremos algunas modificaciones.

El script es igual al que se mostraba en la entrada entrada anterior aunque con los nombres diferentes; para no complicarse la vida puede descargarse desde acá

y lo agregamos a la plantilla antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  ... acá pegamos el contenido del archivo de texto ...
//]]>
</script>

Allí es necesario establecer algunos datos personales tal como en el otro:

var relmaxamostrarslider = 20; // cantidad de entradas a ser mostradas
var relmaxlen = 75; // la cantidad de caracteres de los resumenes
var relimagenpodefectoslider = "URL_imagen"; // la imagen por defecto

y otros nuevo que, en este ejemplo son estos:

var SRwidth = 144; // ancho de cada DIV
var SRmin = 0;
var SRmax = -2160; // longitud máxima

Otro cambio es el HTML que decía esto:

<div id='postsrelacionados'>
  <script type='text/javascript'>mostrarrelacionados();</script>
</div>

y que vamos a complicar un poco, cambiándolo así:

<div id="postsrelacionadosslider">
  <a onclick='desplazarrels(1);' class='sflecha' id='relleft' href='javascript:void(0);'>
    <img src='URL_FLECHA_IZQUIERDA'/>
  </a>
  <div id='postsrelacionadosinner'>
    <div id='postsrelacionadoscontenedor' style='left:0'>
      <script type='text/javascript'>mostrarrelacionadosslider();</script>
    </div>
  </div>
  <a onclick='desplazarrels(-1);' class='sflecha' id='relright' href='javascript:void(0);'>
    <img src='URL_FLECHA_DERECHA'/>
  </a>
</div>

¿Que es todo eso? Dentro de un DIV colocaremos una flecha que será un enlace para desplazarse hacia la izquierda, otra hacia la derecha y en el centro mostraremos una tira de entradas relacionadas.

Para que esto funcione lo fundamental es el CSS:

<style>

   /* al rectángulo contenedor lo centramos, le damos altura y eliminamos los saltos de línea indeseados */
  #postsrelacionadosslider {
    height: 180px;
    position: relative;
    width: 635px;
  }
  #postsrelacionadosslider br { display:none; }

  /* las imágenes que sirven para navegar las posiconamos una a cada extremo */
  #relleft { left: 0; }
  #relright { right: 0; }
  .sflecha { height: 180px; position: absolute; width: 25px; }
  .sflecha img { height: 180px; width: 25px; }

  /* al rectángulo central lo dimensionamos, lo posicionamos e impedimos que se deborde */
  #postsrelacionadosinner {
    height: 180px;
    left: 30px;
    overflow: hidden;
    position: absolute;
    width: 576px; /* es el ancho real de cada post resumido por la cantidad visible, en este caso 4 */
  }
  /* esta será la "tira" a desplazar */
  #postsrelacionadoscontenedor {
    height: 180px;
    position: absolute;
    width: 2800px; /* es el ancho real de cada post resumido por la cantidad a mostrar, en este caso 20 */
    /* el efecto */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }

  /* cada post resumido */
  .relspostsslider {
    background-image: -moz-linear-gradient(100% 100% 90deg, #303941, #101921);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#303941)), to(#101921));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF101921', EndColorStr='#FF303941');
    float: left;
    height: 180px;
    margin: 0 2px;
    overflow: hidden;
    padding: 0 5px;
    text-align: center;
    width: 130px;
  }

  /* los contenidos de esos posts resumidos */
  .relspostsslider a {
    color: #EEE;
    display: inline;
    font-size: 11px;
    line-height: 1;
  }
  .relspostsslider img {
    height: 72px;
    padding: 5px;
    width: 72px;
  }
  .relspostsslider h6 {
    display: table-cell;
    height: 5em;
    margin: 0;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
    width: 130px;
  }
  .relspostsslider p {
    color: #AAA;
    font-size: 10px;
    height: 4em;
    line-height: 1;
    margin: 0;
    overflow: hidden;
    padding: 0;
  }

</style>

Si nada falló, el resultado sería algo así: