Slideshow para blogger manual nuevo estilo

Estabas buscado un nuevo Slideshow y que sea fácil de instalar, Ayudadeblogger.com, te lo trae así de rápido. Es indispensable para un blog de blogger tener un Slideshow en su blog bien presentable, que se ajuste con todas las normas y especificaciones de Google, no todos los Slideshow cumplen con las reglas de un webmaster, ya que algunos Slideshow lo que hacen es demorar el tiempo de carga de cualquier blog. Por eso he sido muy cuidadoso en realizar un código que tenga las especificaciones correctas de un webmaster. Anteriormente publique varios Slideshow, de los cuales les voy a dejar los enlaces.


Slideshow para blogger manual nuevo estilo

¿Cómo funciona este nuevo Slideshow para Blogger?

La forma de insertar las imágenes es de forma manual, y no automático, ustedes mismos tendrán que insertar el link de cada imagen, como también un pequeño resumen de su post y un titulo del artículo que quieran mostrar en su nuevo Slideshow.

Vamos a utilizar 3 secuencias de código que es fácil de insertarlo en nuestro blog. Podrán cambiar el tamaño que ustedes quieran, al insertar el link de la imagen de forma automática se configura su anchura y altura. Además podrán aumentar en la última posición del código nuevas imágenes para mostrar en su Slideshow. Lo podrán utilizar en la cabecera principal, en un widget, en la parte final de plantilla, ya depende del uso que ustedes lo quieran dar.

Bueno a continuación mire su demostración en mi blog de demos, yo lo tengo puesto en un widget en la parte inferior de mi blog.


Ahora nos dirigimos a trabajar!

1 Ir a Blogger

2 Dale un clic en “Plantilla

Slideshow para blogger manual nuevo estilo

Luego un clic en “Editar HTML

Slideshow para blogger manual nuevo estilo


Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Slideshow para blogger manual nuevo estilo

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, 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 te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Busca este código ]]></b:skin> y encima de el inserta las siguientes líneas de código.

    /* SLIDESHOW start Ayudadeblogger*/  
    #slider-holder{width:900px;height:200px;overflow:hidden;margin-left:-20px; margin-right:10px; padding:0} #s3slider{width:900px;height:660px;position:relative;overflow:hidden}  
    #s3sliderContent{width:900px;position:absolute;top:0;margin-left:0} 
    .s3sliderImage{float:left;position:relative;display:none}  
    .s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:45px;width:900px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}  
    .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}  
    .s3sliderImage span a.featured-title:hover{color:#999}  
    .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}  
    .s3sliderImage span a:hover{color:#555} 

Si quieres cambiar la anchura del Slideshow y hacerlo mas pequeño, solo basta con cambiar los números que están marcados de color rojo, y si quieres cambiar la altura de tu Slideshow, tendrás que cambiar el número que esta marcado de color verde por el número que tú quieras.

También deberás buscar este código </head> y encima de el inserta la siguiente secuencia de código

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
(function($){
    $.fn.s3Slider = function(vars) {    
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current     = null;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
        items.each(function(i) {
            $(items[i]).mouseover(function() {
               mOver = true;
            });
            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });
        });
        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }
        var makeSlider = function() {
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }
        makeSlider();
    };
})(jQuery);
//--><!]]></script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

En este punto es muy importe que te enteres de lo siguiente, si ya utilizas en tu blog de blogger un script, tendrás que borrar solo el script que esta marcado de color rojo, si no lo haces no se vería bien este Slideshow en tu blog, y si no utilizas ningún script en tu blog inserta todo el código tal y cual lo explico, y si ya utilizas un script similar a este, borra solo el código que esta marcado de color rojo: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js

Ultimo paso en el que aparecerá el Slideshow

Ahora viene tu decisión, si quieres que se muestre el Slideshow en la cabecera principal de tu blog de blogger deberás buscar este código <div id='main-wrapper'> y debajo del código que encontraste deberás insertar el siguiente código.

<div id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='http://www.ayudadeblogger.com/2012/06/expandir-contraer-cuadro-de-comentarios.html'><img src='http://2.bp.blogspot.com/-6N3-yPXeuYY/UUiPO-jhDCI/AAAAAAAACk4/oyRfKYAh18k/s1600/hostgator+widget+para+blogger.JPG' style='width: 900px; height: 200px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/expandir-contraer-cuadro-de-comentarios.html'>Cuadro de Comentarios</a><br/>
Expandir Contraer cuadro de Comentarios en Blogger, metodo facil
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/como-compartir-todo-tipo-de-widget-de.html'><img src='http://1.bp.blogspot.com/-wEK2GkDSnko/UUiSLmugrjI/AAAAAAAACl4/Qh0vLSMWax0/s1600/hostgator+widget+para+blogger.JPG' style='width: 900px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/como-compartir-todo-tipo-de-widget-de.html'>Caja de Redes Sociales</a><br/>
Insertar caja de redes sociales en mi post de blogger, aplicarlo con facilidad
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/cuales-son-los-sitios-de-google-para.html'><img src='http://2.bp.blogspot.com/-ltwz_WGLaaw/T-p9Vq2STII/AAAAAAAAASU/KNiX2pUPAdg/s1600/Cu%C3%A1les+son+los+sitios+de+Google+para+empresas.jpg' style='width: 900px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/cuales-son-los-sitios-de-google-para.html'>Sitios de Google</a><br/>
Cuáles son los sitios de Google para empresas?.....
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/crear-una-pagina-de-negocios-en-google.html'><img src='http://2.bp.blogspot.com/-gja4ih5zDQc/T-abiWCvAFI/AAAAAAAAARA/W7-HUfjlb-8/s1600/Crear+una+p%25C3%25A1gina+de+negocios+en+Google+%252B+para+atraer+m%25C3%25A1s+clientes++%255BTutorial%255D.jpg' style='width: 900px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/crear-una-pagina-de-negocios-en-google.html'>NEGOCIOS EN GOOGLE</a><br/>
Crear una página de negocios en Google + para atraer más clientes
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/las-20-mejores-tacticas-de-seo-que-cada.html'><img src='http://4.bp.blogspot.com/-VpxPcM08qbU/T-aPPRAi7lI/AAAAAAAAAP8/81J67VSDVXw/s320/Las+20+mejores+t%25C3%25A1cticas+de+SEO+que+cada+blogger+debe+saber.jpg' style='width: 900px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/las-20-mejores-tacticas-de-seo-que-cada.html'>Tacticas para Blogger</a><br/>
Las 20 mejores tácticas de SEO que cada blogger debe saber....
</span>
</li>
<li class='clear s3sliderImage'/>
</li></ul>
</div>
</div>

Realiza estos cambios:

Los links que están marcados de color azul, deberás remplazarlos por los links correspondientes de tus post.

Los links que están marcados de color rojo, son los que sirven para mostrar las imágenes de tus post, deberás insertar cada uno de ellos en los diferentes links que están marcados de color rojo y remplazarlos por los tuyos.

Las letras que están marcadas de color verde, caberas cambiarlas por el titulo que tu quieras que se muestre en tu Slideshow

Y por último las palabras que se encuentran marcadas de color purpura, deberás cambiarlas por un pequeño resumen en cada una de ellas.

Si te decidiste en insertar el código debajo de la cabecera principal será el final de la inserción de tus códigos y podrás dar un clic en “Guardar plantilla” y mirar tus nuevos cambios en tu blog.

Y si quieres que tu Slideshow aparezca en un widget en la parte inferior de tu blog de blogger o en cualquier sección, omite la inserción del código en la parte que dice “Ultimo paso en el que aparecerá el Slideshow”, desde este punto, deberás dirigirte a “Diseño” y abrir “Añadir un gadget” y busca el widget que dice “HTML/Javascript” e inserta las siguientes líneas de código:

Slideshow para blogger manual nuevo estilo

<div id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='http://www.ayudadeblogger.com/2012/06/expandir-contraer-cuadro-de-comentarios.html'><img src='http://2.bp.blogspot.com/-6N3-yPXeuYY/UUiPO-jhDCI/AAAAAAAACk4/oyRfKYAh18k/s1600/hostgator+widget+para+blogger.JPG' style='width: 900px; height: 200px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/expandir-contraer-cuadro-de-comentarios.html'>Cuadro de Comentarios</a><br/>
Expandir Contraer cuadro de Comentarios en Blogger, metodo facil
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/como-compartir-todo-tipo-de-widget-de.html'><img src='http://1.bp.blogspot.com/-wEK2GkDSnko/UUiSLmugrjI/AAAAAAAACl4/Qh0vLSMWax0/s1600/hostgator+widget+para+blogger.JPG' style='width: 900px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/como-compartir-todo-tipo-de-widget-de.html'>Caja de Redes Sociales</a><br/>
Insertar caja de redes sociales en mi post de blogger, aplicarlo con facilidad
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/cuales-son-los-sitios-de-google-para.html'><img src='http://2.bp.blogspot.com/-ltwz_WGLaaw/T-p9Vq2STII/AAAAAAAAASU/KNiX2pUPAdg/s1600/Cu%C3%A1les+son+los+sitios+de+Google+para+empresas.jpg' style='width: 900px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/cuales-son-los-sitios-de-google-para.html'>Sitios de Google</a><br/>
Cuáles son los sitios de Google para empresas?.....
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/crear-una-pagina-de-negocios-en-google.html'><img src='http://2.bp.blogspot.com/-gja4ih5zDQc/T-abiWCvAFI/AAAAAAAAARA/W7-HUfjlb-8/s1600/Crear+una+p%25C3%25A1gina+de+negocios+en+Google+%252B+para+atraer+m%25C3%25A1s+clientes++%255BTutorial%255D.jpg' style='width: 900px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/crear-una-pagina-de-negocios-en-google.html'>NEGOCIOS EN GOOGLE</a><br/>
Crear una página de negocios en Google + para atraer más clientes
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/las-20-mejores-tacticas-de-seo-que-cada.html'><img src='http://4.bp.blogspot.com/-VpxPcM08qbU/T-aPPRAi7lI/AAAAAAAAAP8/81J67VSDVXw/s320/Las+20+mejores+t%25C3%25A1cticas+de+SEO+que+cada+blogger+debe+saber.jpg' style='width: 900px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/las-20-mejores-tacticas-de-seo-que-cada.html'>Tacticas para Blogger</a><br/>
Las 20 mejores tácticas de SEO que cada blogger debe saber....
</span>
</li>
<li class='clear s3sliderImage'/>
</li></ul>
</div>
</div>

Realiza estos cambios:

Los links que están marcados de color azul, deberás remplazarlos por los links correspondientes de tus post.

Los links que están marcados de color rojo, son los que sirven para mostrar las imágenes de tus post, deberás insertar cada uno de ellos en los diferentes links que están marcados de color rojo y remplazarlos por los tuyos.

Las letras que están marcadas de color verde, caberas cambiarlas por el titulo que tu quieras que se muestre en tu Slideshow

Y por último las palabras que se encuentran marcadas de color purpura, deberás cambiarlas por un pequeño resumen en cada una de ellas.

Eso es todo, dale un clic en “Guardar” y ubica tu widget donde quieras mostrar este nuevo Slideshow.

¿Necesitas ayuda?

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

Saludos.

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

8 comentarios:

  1. Hola Luis, ojalá no te formes una mala impresión sobre mi persona. Como sabes, me ayudas demasiado con el manejo de las plantillas que me regalas, como lo haces con los demás visitantes y usuarios de tus productos, de hecho, con varias de las que me has enviado los archivos xml, he aprendido algo en la edición HTML, sobre todo cuando hay que modificar o cutomizar una plantilla, y me siendo altamente agradecido. Como entiendo que soy el único, y tendrás que dedicarte a atender a cientos, tal vez miles, , agregado a tu profesión, con poco tiempo, voy a provocarte una posible última molestia. Te pido por favor que me envies los archivos de las siguientes plantillas, con las cuales yo adaptarla a las necesidades de mi tema NOTI-TEMASRD, que como sabes es un sitio de noticias, de actualización diaria, requiero de una plantilla que almacene datos sin deconfigurarse y que pueda manejar mis temas de publicidad. A ver, en la medida de lo posible, vuelve a gratificarme con los archivos siguientes: Espectáculos, Noticias, Deportes, Tiempos modernos, Negas y cuántica, si tienen entre 3 y 4 columnas, con eso puedo manejarme, y no te preocupes por la cantidad, que no vendo plantillas, ni tengo a quien, sólo busco un buen tema para acomodar la navegación y presentación de mi trabajo para mis seguidores. Espero entiendas y puedas complacerme. Saludos y gracias por todo

    ResponderEliminar
  2. Luis, magnifico aporte, me sirvió muchísimo. felicitaciones por tan buen slaider

    ResponderEliminar
  3. Hola! soy muy principiante en esto de los cambios en el blog, he intentado realizar el Slide show, me encontre con dos problemas, el primero es que nunca encontre "expandir plantillas de artilugios", sin embargo pude encontrar en donde insertar los codigos y cuando quiero hacer el ultimo paso no me muestra la sentencia "< id='main-wrapper'>", espero me puedas ayudar.
    De antemano muchas Gracias

    ResponderEliminar
    Respuestas
    1. Hola, si no lo encuentras, realiza lo siguiente en la parte que dice " si quieres que tu Slideshow aparezca en un widget en la parte inferior de tu blog de blogger o en cualquier sección" Insertalo en un widget
      Saludos.

      Eliminar
  4. Muy buena información. Tengo una duda. ¿Como hago para que el slider solo aparezca en la página principal del blog y no en las demas? Agradeceria tu respuesta

    ResponderEliminar
  5. saludos
    estoy intentando insertar este slide show en mi blog pero al buscar los codigos en html no aparecen , me puedes ayudar o sugerir como hacer ? mi correo es gesa747@gmail.com
    gracias

    german

    ResponderEliminar
    Respuestas
    1. Hola German, gracias por escribir, cual código no puede encontrar, ademas, remita la URL de su blog

      Saludos.

      Eliminar