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/AVvXsEhOAE6JsQ5-jtxRWoMf02_lgAPho_dS5jHBNIcRuRkXfSpiRzCdNYWUO0YryAgBXfW1YzZ8CntY1b0hMe9xwB7k6m3hHjh9ebVHAAUSvZRx0ixR30oObRqwLSs5jOwofswpa4D0E6hSgZsy/s1600/sin-imagen.png";
   // IMAGEN BOTÓN PLAY 16x16 píxels
img_play = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFE3E4KCfLeGEr7IZGxEEFOx3-6q7Ssa8wz6eGxDpoC7GFkkqndau8YoENWYWJDPNLsGowmuZrymEGO1ZaFXCfxTbECc8GCYWOVpT3duW-q0JgpTQAJ6MPr0AkHJMdgijBAra-HeZy1Zoi/s1600/play.gif";
   // IMAGEN BOTÓN STOP 16x16 píxels
img_stop = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJxFzeOETSfIfUM0qGe5ki-LBMPHj3ov3EH53fUlSlg9Yj30Fu16g9DxWxd8kK7E37p9wVp9iKFMJTGL3PPmV_7AZVBUkz5C2N-x7ScoqkZ_ZGLvhWYKKLVPgnr3hVUnafoQ63YtIUlbB1/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.

Slideshow con efecto fade en Javascript

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

Poner el siguiente código:

<script src="http://dl.dropbox.com/u/19457418/jsvku/fadeslideshowvku.js" type="text/javascript">
</script><center><script type="text/javascript">
// http://loseasi.blogspot.com/
//<![CDATA[
var fadeimages=new Array()

//fadeimages[#]=['Imagen', 'Link URL', 'Link Target blank o self', 'Título Texto']

fadeimages[0]=['URL IMAGEN 1/como-se-hace-lo-se-asi-cabezera.png', 'http://loseasi.blogspot.com/', '_blank', '¿Cómo se hace?']

fadeimages[1]=['URL IMAGEN 2/meli.jpg', 'http://melmysweetworld.blogspot.com/', '_blank', 'Visite My Sweet World']

fadeimages[2]=['URL IMAGEN 3/vitua.png', 'http://vitua.blogspot.com/', '_blank', 'VituaRadio']

fadeimages[3]=['URL IMAGEN 4/1.jpg', 'http://susis-mysticriver.blogspot.com/', '_blank', 'Mystucriver']

var fadebgcolor='blue'

//new fadeshow(Ancho imagen, Alto imagen, borde, velocidad, pause on mouseover (0=no, 1=si))
new fadeshow(fadeimages, 550, 128, 0, 4000, 1)
//]]>
</script></center>

Si quieren pueden mostrar mas imágenes agregando la siguiente línea:

fadeimages[0]=['URL IMAGEN/como-se-hace-lo-se-asi-cabezera.png', 'http://loseasi.blogspot.com/', '_blank', '¿Cómo se hace?']

Tener en cuenta que cada imagen tiene su numero (ID) y no se puede repetir. [0], [1], [2], [3], [4], [5], etc..

En cada línea tiene que ir con el siguiente orden:

1. La URL de la imagen.
2. El link que se dirigirán al hacer clic sobre la imagen.
3. El target, que puede ser blank o self.
4. El título.

Mas abajo vemos la siguiente línea:

new fadeshow(fadeimages, 550, 128, 0, 4000, 1)

Donde:

1. 55o, Va el ancho de la imagen.
2. 128, Va el alto de la imagen.
3. 0, Es el borde. (En este caso no le puse borde)
4. 4000, Es la velocidad. (Mayor es mas lento)
5. 1, Elegir entre 1 o 0 para parar al pasar el mouse por encima de la imagen. (0=no, 1=si)

Colocar el gadget en el lugar que más les guste para mostrar las imágenes.

Slideshow sencillo en Javascript

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

Poner el siguiente código:

<div id="cambiaimg-vku" style="text-align: center;"></div>
<script type="text/javascript">
//<![CDATA[
var cont = 0;
var arr = [
["http://loseasi.blogspot.com/", "http://URL IMAGEN 1/como-se-hace-lo-se-asi-cabezera.png"],    
["http://melmysweetworld.blogspot.com/", "URL IMAGEN 2/meli.jpg"],      
["http://vitua.blogspot.com/", "URL IMAGEN 3/vitua.png"]

]
function cambiaimg_vku() {
var d = document.getElementById("cambiaimg-vku");
cont = cont % arr.length;
d.innerHTML = "<a href='"+arr[cont][0]+"' target='_blank'><img border=0 src='"+arr[cont][1]+"'></a>";
cont++;
}
function inicioimg_vku() {
cambiaimg_vku();
setInterval(cambiaimg_vku, 3000);
}
window.onload=inicioimg_vku;
//]]>
</script>

Cambiar los link que se dirigirán al hacer clic sobre la imagen. (color azul)

Cambiar los link de las imágenes. (color rojo)

Ajustar la velocidad (3000). (negrita) Mayor es mas lento.

Para mostrar mas imágenes agregar la siguiente línea: (la ultima línea colocada no tiene que llevar la coma al final)

["http://loseasi.blogspot.com/","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_Sft6SK8OLD4MHjfX2bE8SOEhTZ6G80P4w3nukp-9RjMVB7bIeRX-0DcK-vd2L-NN2ZMS7IHEtVpprXPvxd0W7VOWELwfCAtbQiFEdOQ_e7l3bZabb8inlCHoZt9drrL5niI1BQzFsQv/s570/como-se-hace-lo-se-asi-cabezera.png"],

Colocar el gadget en el lugar que más les guste para mostrar las imágenes.

JqFancy - slideshow con efectos de transiciones - jquery

Ver ejemplos:

Poner estos 2 códigos arriba de </head>:

Código 1, Jquery: (si ya lo tienen, no es necesario repetirlo)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"/>

Código 2:

<script src="http://workshop.rs/projects/jqfancytransitions/jqFancyTransitions.1.7.min.js" type="text/javascript"/>

Descargar archivo jqFancyTransitions.1.7.min.js y subirlo a su propio alojamiento.

En el lugar que quieran mostrar la galeria de imágenes poner el siguiente código, cambiando las imágenes, el link y el titulo de la imagen.

<div id='slideshowHolder'>
<img src='img1.jpg' alt='img1'/>
<a href ='http://link1'></a>
<img src='img2.jpg' alt='img2'/>
<a href ='http://link2'></a>
<img src='img3.jpg' alt='img3'/>
<a href ='http://link3'></a>

</div>

<script>

$('#slideshowHolder').jqFancyTransitions({ 'navigation' : true, effect : 'wave', 'links' : true, width: 400, height: 300, });

</script>

Donde slideshowHolder se cambia en los 2 lados si se quiere poner mas de 2 galerías.
Donde src='img1.jpg' va la imagen y  alt='img1', el titulo si se quiere poner.
Así para todas las imágenes.

Navigation: true o false. botones de navegación anterior y siguiente.
Effect: tenemos 3 distintos efectos para elegir: wave, zipper o curtain.
Links: true o false. Activa los link de las imágenes.
Width: ancho de la imagen.
Height: alto de la imagen.

 ver otros detalles acá:

Tiny Slideshow

Ver ejemplo:

Descargar código: