add

Como crear un Slideshow manual para mi blog de Blogger


He publicado varios Slideshow para ser utilizados en cualquier blog de Blogger, ahora nos toca el turno de publicar un nuevo Slideshow para su uso en Blogger. Los Slideshow son muy apetecidos por muchos bloggeros y es por esto que voy a compartir con ustedes un nuevo Slideshow para que muestren las fotos y un link dirigido hacia la página que quieran mostrar.  El Slideshow es manual, ustedes podrán cargar las fotos que quieran mostrar sin límite alguno.

Como crear un Slideshow manual para mi blog de Blogger
A continuación mire su demostración

Instrucciones de instalación:

1 Ir a Blogger

2 Un clic en “Plantilla

Como crear un Slideshow manual para mi blog de Blogger

Un clic en “Editar HTML

Como crear un Slideshow manual para mi blog de Blogger

Ahora se le abrirá el Editor HTML de su plantilla

Como crear un Slideshow manual para mi blog de Blogger

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

Como crear un Slideshow manual para mi blog de Blogger

3 Busque el siguiente código 

</head>

4 Inserta el siguiente código justo arriba del </head>

<a href="http://ayudadeblogger.com" target="_blank" title="Widgets para blogger"><img src="" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='https://dl.dropboxusercontent.com/s/q5xg9vc9qmhenkx/ayudadeblogger-jquery.js' type='text/javascript'></script>
<script src='https://dl.dropboxusercontent.com/s/ailbpndyse3u5ru/ayudadeblogger-jquery.jcarousel.js' type='text/javascript'></script>
<script src='https://dl.dropboxusercontent.com/s/trdnsrm5eu9vwie/ayudadeblogger-jquery-ui-1.6.2.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap:"both",
scroll:2,
animation:"slow"
});
function mycarousel_initCallback(carousel) {
jQuery('#featured-next-button').bind('click', function() {
carousel.next();
return false;
});

jQuery('#featured-prev-button').bind('click', function() {
carousel.prev();
return false;
});
jQuery('.button-nav span').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery('#feature-carousel').jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});

});
</script>

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

5 Ahora un clic en “Guardar plantilla


Como crear un Slideshow manual para mi blog de Blogger

6 Un clic en “Diseño” 


Como crear un Slideshow manual para mi blog de Blogger

- Un clic en “Añadir un gadget” 


Como crear un Slideshow manual para mi blog de Blogger

- Busca el widget que dice “HTML/javascript”, ábrelo 


Como crear un Slideshow manual para mi blog de Blogger

- Inserte el siguiente código en su interior.

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='LINK 1 del Articulo aqui'><img src='LINK de la imagen 1 aqui'/></a></li>
<li><a href='LINK 2 del Articulo aqui '><img src='LINK de la imagen 2 aqui '/></a></li>
<li><a href='LINK 3 del Articulo aqui '><img src='LINK de la imagen 3 aqui '/></a></li>
<li><a href='LINK 4 del Articulo aqui '><img src='LINK de la imagen 4 aqui '/></a></li>
<li><a href='LINK 5 del Articulo aqui '><img src='LINK de la imagen 5 aqui '/></a></li>
</ul>
</div>

Realiza estos cambios

Donde dice LINK 1 del Articulo aquí cámbialo por el link de cualquier articulo que quieras dar a conocer y donde dice LINK de la imagen 1 aqui bórralo e inserta el link de la imagen que quieras que se muestre en tu Slideshow y así realiza los cambios en todo el código.

Y si quieres aumentar mas imágenes en tu slideshow solo basta con insertar el siguiente código antes de </ul>

<li><a href='LINK 6 del Articulo aqui '><img src='LINK de la imagen 6 aqui '/></a></li>

Listo da un clic en guardar y ubica tu nuevo Slideshow en el centro de tu blog para que sea visible, con esto aumentara las visitas de los artículos de tu blog que pasaron desapercibidos por tus lectores.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé.

Saludos.
 

17 comentarios:

  1. Hola muchas gracias, esta info me ha servido montones para mi blog, nada mas una consulta, al aplicar todos los pasos, detrás del slide queda una especie de fondo blanco, ¿no hay manera de eliminarlo o cambiarle el color? graciasde nuevo.

    ResponderEliminar
  2. Respuestas
    1. Hola, no entiendo a tu pregunta "como le pongo el nombre de la entrada"
      Saludos.

      Eliminar
    2. Has lo siguiente para ponerle el nombre:
      en el codigo insertarle esto: <..><. ...='LINK 6 del Articulo aqui '><... ALT=¨NOMBRE DE LA ENTRADA¨ src='LINK de la imagen 6 aqui' TITLE=¨NOMBRE DE LA ENTRADA¨ /> espero te sirva de ayuda!

      pd: no me permite las etiquetas xD

      Eliminar
  3. puedo cambiar el ancho y largo del slideshow? dime como

    ResponderEliminar
  4. Cambia los tamaños en estas posicion: .jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;

    .jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;
    .jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;

    ResponderEliminar
  5. Este es el slideshow manual que llevaba buscando desde hace más de un año. Sin embargo, le veo un problema o un punto negativo, esta galería de imágenes no rota las fotografías de forma automática, sino que hay que pinchar en la flecha para ver todas las fotos. Yo busco un slideshow que vayan pasando las imágenes cada 3 segundos y que cuando pones el puntero encima de una de ellas se pare la imagen, y al hacer clic que te envíe a otro enlace.

    ResponderEliminar
  6. Consulta. Perdon si lo explicaste en otro lugar. Quiero evitar el Hosting de imagenes en uno sitio propio y subirlas al blog pero para USARLAS COMO REFERENCIA dentro de este slideshow o en otro IFRAME agregado a mano. Traté de subir las imagenes a DRIVE de google pero esas referencias no me las deja usar o no muestra nada. Gracias!.

    ResponderEliminar
  7. Buenos dias ...

    Luis todo lo que veo es para incluir en la pagina principal, pero hay algun slide o cuadricula de imagenes con enlace para incluir en una pagina determinada del blog blogger, y no en ele inicio?

    ResponderEliminar
  8. ESTA MUY BIEN TU APORTE PERO SOLO APARECE 1 IMAGEN, EL RESTO (4) NO APARECEN Y NO ROTAN!

    ResponderEliminar
  9. Hola! Yo he seguido todos los pasos y salen las imágenes unas al lado de otras...

    ResponderEliminar
  10. Hola Luis
    Busco crear un slide de este tipo (en el que yo elija las imágenes y enlaces) pero me gustaría crearlo en un gadget html independiente, es decir, sin tocar la plantilla. ¿Es posible?
    Saludos, besos y gracias por tu ayuda

    ResponderEliminar
  11. como hago el carrusel con imagenes que no estan en el blog?

    ResponderEliminar
    Respuestas
    1. Hola Andres, si las imágenes no se encuentran en su blog de Blogger, puede ingresar la URL de la imagen de otra pagina donde dice:

      LINK de la imagen 1 aqui

      Saludos.

      Eliminar
  12. Hola, muchas gracias por el aporte, estoy siguiendo los pasos como lo indicaste pero no me sale en forma de carrusel, sino que las imágenes se ponen una al lado de otra y cuando ya no caben en el espacio se bajan, me podrías ayudar?

    ResponderEliminar
    Respuestas
    1. Hola Hans, gracias por comentar, he actualizado este tutorial, por favor le recomiendo que vuelva a realizarlo, elimine el paso 4 que ingreso anteriormente y vuelva agregar nuevamente el código que se encuentra en el paso 4

      Cuénteme como le fue, cualquier pregunta no dude en escribir

      Saludos.

      Eliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios