Slideshow de entradas Blogger con imágenes, sin librerías

Ver blog de ejemplo:

Probado en Internet Explorer 7, 8 y 9, Firefox y chrome.

Ir a Diseño, Elementos de la página y añadir un gadget HTML/Javascript en el lugar a mostrarlo.

Poner el siguiente código:

<style type="text/css">
/* PERSONALIZAMOS EL ESTILO -----------
--------  SLIDESHOW DE ENTRADAS */
             /*  FONDO  */
#menucontent {
  background:#111;              /*  COLOR DEL FONDO  */
  padding:8px;
  width:98%;
  margin:0
}
             /*  LÍNEA DE ABAJO (NÚMEROS, PLAY, STOP, INFO)  */
#menucontent .menuvku {
  margin-top:5px;
  border:0
}

#menucontent .menuvku-rig a{
  text-decoration:none;
}

#menucontent .menuvku ul {
  margin:0px;
  padding:0px;
  list-style:none;
  background:transparent;
  border:0
}

#menucontent .menuvku li {
  display:inline;
  line-height:25px;
  border:0;
  margin:0px;
  padding:0px;
}
             /*  NÚMEROS  */
#menucontent .menuvku li a {
  background:transparent;         /*  COLOR DEL FONDO DE LOS NÚMEROS  */
  color:#ececec;                       /*  COLOR DE LOS NÚMEROS  */
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;                      /*  TAMAÑO DE LOS NÚMEROS  */
  text-decoration:none;
  padding:2px 7px ;
  border:1px solid #ececec;     /*  COLOR DEL BORDE DE LOS NÚMEROS  */
  margin:0px;
  margin-right:2px;
}
              /*  NÚMERO ACTIVO  */
#menucontent .menuvku li a.tabactive{
  background:#ececec;           /*  COLOR DEL FONDO DEL NÚMERO ACTIVO  */
  font-weight:bold;
  position:relative;
  color:#000;                          /*  COLOR DEL NÚMERO ACTIVO  */
  border:1px solid #ececec;    /*  COLOR DEL BORDE DEL NÚMERO ACTIVO  */
}
             /*  IMAGEN  */
#menucontent .menuvku-rig img{
  float:right;
  padding:4px 5px 5px 0;
  border:0
}
             /*  CONTENIDO  */
#menucontent .menucontent1 {
  background:#123;                /*  COLOR DEL FONDO DEL CONTENIDO  */
  border:1px solid #ececec;    /*  COLOR DEL BORDE QUE RODEA EL CONTENIDO  */
  padding:4px 3px;
  margin:0px;
}

#menucontent .menucontent1:hover {
  background: #222;              /*  COLOR DEL FONDO AL PASAR EL CURSOR  */
}
</style>
<script language="JavaScript">
/* http://loseasi.blogspot.com/
 CREADO POR: Vku. NO BORRAR LOS CREDITOS
SLIDESHOW DE ENTRADAS */
imgr = new Array(); // <-- NO TOCAR

// IMAGEN QUE MUESTRA AL NO TENER UNA PROPIA LA ENTRADA
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfCZLHFsnSC_Yw0OSiiL2S-K4JsDqAEtQ9WjrAqGprKg88EGMfyWXEUrYBFnD6f5nQFcZSb3BcvIjIFFgtQoSL8Z0cT0yuSL0jJ2AbCXFisjo3qpgdp1mzTuZEED4TAK-v2RakUFtP3FjQ/s1600/sin-imagen.png";
   // IMAGEN BOTÓN PLAY 16x16 píxels
img_play = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT5GTTQf3eMatCXtDnlCNJ9ByLGvLf_nsv8f3cFBnZdWfPcBtLPso7mhakSu1nMNCaZHx7bMEodw1gR_hHLYFtcECHfFMKhTkhwOHlu8V2dcH_yRnhwYxIbLQRmIRdGZMbrdaaf1XDbmww/s1600/play.gif";
   // IMAGEN BOTÓN STOP 16x16 píxels
img_stop = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLnB7H4f9L44qcqW-tXwuec7KMN0jvGBBwTWE20RGeYQe-pYKt9KfyXn2iqpc-IT7EL70HnMJUJCI_zgkaHmIYahapKEBbS9aMGSPlKGwFn4dtEDsloE6-IfPVR27pPGLYhRx5KNlTxSPd/s1600/stop.gif";

// TAMAÑO DE LAS IMÁGENES
imgwidth = 125;   // ANCHO
imgheight = 125;  // ALTO

// TÍTULOS DE LAS ENTRADAS
fntsize = 14;       // TAMAÑO FUENTE
acolor = "#ffffff";   // COLOR FUENTE

// DESCRIPCIÓN DE LAS ENTRADAS
entradasPost = 400;            // CANTIDAD DE TEXTO
entradasFontsize = 12;        // TAMAÑO FUENTE
entradasColor = "#ececec"; // COLOR FUENTE

// COMENTARIOS
showPostComent = true;  // true para mostrar, false para ocultar
text = "comentarios";        // TEXTO
cfntsize = 12;                   // TAMAÑO FUENTE
ccolor = "#3399FF";       // COLOR FUENTE

// FECHA DE LAS ENTRADAS
showPostDate = true;  // true para mostrar, false para ocultar
bfntsize = 10;              // TAMAÑO FUENTE
bcolor = "#fff000";      // COLOR FUENTE

// CONTINUAR LEYENDO
showPostContinuar = true;               // true para mostrar, false para ocultar
clltext = "Continuar leyendo &#187;";   // TEXTO
clfntsize = 14;                         // TAMAÑO FUENTE
clcolor = "#ffffff";                    // COLOR FUENTE

var tabcount = new Array("7")    // NÚMERO TOTAL DE ENTRADAS, DE LA 1 A LA 10

var changespeed = 4;    // DEMORA EN SEGUNDOS

home_page = "http://loseasi.blogspot.com";   // LINK DEL BLOG SIN / AL FINAL
</script>
<script src='http://dl.dropbox.com/u/19457418/jsvku/slidepostvku.js' type='text/javascript'></script>

<div id='menucontent'>
<div class='menucontent1' onMouseOver ='javascript:stop_autochange(); return false;' onMouseOut ='javascript:restart_autochange(); return false;'>

      <!-- LINK ENTRADAS -->
<div id="tabcontent1"><script>
document.write('<script src="'+home_page+''+rss_page+'1'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent2"><script>
document.write('<script src="'+home_page+''+rss_page+'2'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent3"><script>
document.write('<script src="'+home_page+''+rss_page+'3'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent4"><script>
document.write('<script src="'+home_page+''+rss_page+'4'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent5"><script>
document.write('<script src="'+home_page+''+rss_page+'5'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent6"><script>
document.write('<script src="'+home_page+''+rss_page+'6'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent7"><script>
document.write('<script src="'+home_page+''+rss_page+'7'+rssb_page+'"></scr' + 'ipt>');</script></div>
<!-- Agregamos o quitamos las entradas hasta 10, cambiando los número en el ID y en el script. La cantidad tiene que ser igual a la de los números. -->

<!--  FIN LINK ENTRADAS -->
</div>
<script>
document.write(''+div_easytabs1+''); // NO TOCAR
document.write(''+home_info+'');     // NO TOCAR
document.write(''+div_easytabs2+''); // NO TOCAR

// LOS NUMEROS DEL 1 AL 10
document.write(''+li_easytabs1+'');
document.write(''+li_easytabs2+'');
document.write(''+li_easytabs3+'');
document.write(''+li_easytabs4+'');
document.write(''+li_easytabs5+'');
document.write(''+li_easytabs6+'');
document.write(''+li_easytabs7+'');
// Agregamos los números, tienen que ser igual cantidad a las entradas.

// FIN NUMEROS
document.write(''+div_easytabs3+''); // NO TOCAR
document.write(''+div_easytabs4+''); // NO TOCAR
</script>
</div>

Descargar código:

El código esta hecho para poder mostrar un máximo de 10 entradas.

El código en el ejemplo esta para mostrar 7 entradas.

Se puede personalizar totalmente.

Los detalles están a la vista en el código.

Puse un comentario arriba y junto para que identifiquen para que es cada código.

La imagen que muestra al no tener una propia la entrada es de 125x125 píxels.

Para las imágenes de Play y Stop es recomendable que sean de 16x16 píxels.

Para parar el slideshow hacer clic sobre la imagen de stop.

Para continuar sobre la imagen de play.

También pueden parar el slideshow al entrar con el cursor sobre el contenido, y se reanuda al sacarlo.

Pueden cambiar el tamaño y color de los textos, el color de los fondos, el tamaño de las imágenes a mostrar, etc...

entradasPost = 400; es la cantidad de texto mostrado en el contenido o descripción de las entradas.

Pueden no mostrar los comentarios, la fecha y el continuar leyendo, solo cambiar true por false en el código que no quieran mostrar.

Si quitan o agregan entradas tienen que cambiar el número a mostrar en: var tabcount = new Array("7"), teniendo que ser igual a la cantidad de link y números.

Si quieren cambiar la velocidad de pasar de entrada, lo hacen en: var changespeed = 4;

Hay que cambiar el link del blog a mostrar en: home_page = "http://loseasi.blogspot.com";

Tener en cuenta que el link no puede tener la barra al final (/).

Tiene que ser así: http://loseasi.blogspot.com y no así: http://loseasi.blogspot.com/


Los link y los números:

Los link son así:

<div id="tabcontent1"><script>
document.write('<script src="'+home_page+''+rss_page+'1'+rssb_page+'"></scr' + 'ipt>');</script></div>

Tener en cuenta que cada link tiene su propio ID, que no se puede repetir. (tabcontent1), varía según la entrada.

Si queremos podemos mostrar las entradas de otro blog o una etiqueta o label.

    EJEMPLO PARA MOSTRAR OTRO BLOG:

<div id="tabcontent1"><script>
document.write('<script src="http://OTROBLOG.blogspot.com'+rss_page+'1'+rssb_page+'"></scr' + 'ipt>');</script></div>

    EJEMPLO PARA MOSTRAR UNA ETIQUETA O LABEL:

<div id="tabcontent1"><script>
document.write('<script src="'+home_page+'/feeds/posts/default/-/ETIQUETA?start-index=1'+rssb_page+'"></scr' + 'ipt>');</script></div>

El 1 (rss_page+'1'+), (index=1'+) pertenece a la última entrada publicada, cambiar de número según la entrada que vayan a  mostrar.

Y los números así:

document.write(''+li_easytabs1+'');

El 1 pertenece al número mostrado, varía según las entradas mostradas.

Cómo dije antes, tiene que coincidir la cantidad de link y de números con el número en: var tabcount = new Array("7"),

Si tienen alguna duda, me dejan un comentario.