Como insertar un slideshow en el sidebar de Blogger


El objetivo de los bloggers es mostrar los mejores temas de interés y así llegar a tener éxito con su blog, para tener más tráfico web hacia su blog, tienen que tener algunos trucos bajo la manga, uno de ellos es tener los mejores trucos de Widgets para Blogger, de entre ellos voy a explicar cómo insertar un slideshow en el sidebar de su blog de Blogger con un solo código y en un solo widget. La inserción del código es muy fácil de realizarlo, tendrán que copiar un código y ponerlo en un widget y luego ubicarlo en su sidebar de Blogger, no le causara ningún error en la estructura de su blog, tiene una carga ligera al momento de cargarse. Este nuevo slideshow para Blogger funciona perfectamente en todos los navegadores web.

Como insertar un slideshow en el sidebar de Blogger

Además, si necesitan ver algunos diseños de Slideshow, les dejo algunos post que publique


A continuación mire su demostración en mi blog de demos, el slideshow está ubicado al final del sidebar


Les gusto verdad!

Vamos a trabajar

1 Ira Blogger

2 Un clic en “Diseño

Como insertar un slideshow en el sidebar de Blogger

3 Abre un gadget “Añadir un gadget

Como insertar un slideshow en el sidebar de Blogger

4 Busca el widget que dice “HTML/Javascript” ábrelo

Como insertar un slideshow en el sidebar de Blogger

5 Inserta las siguientes líneas de código en su interior

<style scoped="" type="text/css">
#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}
.coin-slider{overflow:hidden;zoom:1;position:relative}
.coin-slider a{text-decoration:none;outline:none;border:none}
.cs-buttons{font-size:0;padding:10px;float:left}
.cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}
.cs-active{background-color:#B8C4CF;color:#FFFFFF}
.cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}
a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}
.cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}
.cs-title strong{display:block;font-size:120%}
.cs-title p{margin:0}
.cs-title cite{font-size:90%}
.cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}
.cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
var AutoCoinConfig = {
 url_blog: "http://plantilla-escritorio.blogspot.com/",
 MaxPost: 10,
 cmtext: "Comentarios",
 MonthNames :
["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"],
 pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
 NoCmtext : "comentarios",
 imageSize :300,
 SumChars : 0,
 tagName:false,
 width: 300,
 height: 170,
 spw: 5,
 sph: 5,
 delay: 3000,
 sDelay: 30,
 opacity: 0.7,
 titleSpeed: 300,
 effect: '',
 navigation: true,
 links : true,
 hoverPause: true,
 prevText: 'Anterior',
 nextText: 'Siguiente'
};
</script>
<script src="https://dl.dropboxusercontent.com/s/nx3y46w3wr3oovl/autocoin.js" type="text/javascript"></script>

Nota: si ya utilizas un script en tu blog, borra esta línea de código http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js, y si no utilizas ningún script inserta todo el código tal como está.

Realiza este cambio:

He marcado de color azul la URL en la cual ustedes tendrán que borrarlo http://plantilla-escritorio.blogspot.com/ y cambiarlo por la dirección URL de su blog de Blogger o página web.

Eso es todo, ahora dale un clic en “Guardar” y ubica tu nuevo Slideshow en el sidebar de tu blog de Blogger, en el cual les mostrara sus 10 últimas publicaciones.

Fácil verdad!

Recuerda suscribirte y así recibirás mis nuevas actualizaciones diarias directamente en tu correo electrónico

¿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. Luis, agradecido por los aportes y deseando consultarte. Las imagenes de los post tendrian q tener alguna medida en especial ya q el widget insertado no me muestra alguna de imagenes de los post. Saludos

    ResponderEliminar
    Respuestas
    1. Las imaganes se mostraran perfectamente si las adecuas a una dimension de 300x170 pixeles
      Saludos.

      Eliminar
  2. POR QUE CUANDO AGREGO LAS LINEAS DEL CODIGO ME DESCONFIGURA LA PLANTILLA, LA COLUMNA LATERAL LA ENVIA HASTA ABAJO, YA LE QUITE EL http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js Y NADA, QUE ESTA MAL...

    ResponderEliminar
    Respuestas
    1. Adicione "center" que a lateral volta.

      Ex.: < center >Início e Fim da Tag< /center > "sem os espaços"<center....

      Veja como ficou: www.vinnypublicidade.com.br

      Eliminar
  3. Buenas noches. Está excelente este slide. El único problema es que me muestra siempre una sola imagen, la de una de las entradas. Sí cambia los títulos y la descripción, pero la imagen es la misma, no aparece la imagen de la otra entrada.

    ResponderEliminar
  4. hola !muy bueno el unico inconveniente que tengo es que las imagenes se ven en mosaico y no expandidas. hay forma de arreglarlo?saludos

    ResponderEliminar
  5. amigo lo quiero colocar en mi plantilla http://que-buena-imagen.blogspot.com/ y no agarra bien no se cual sera el problema, mi plantilla ya tiene un ajax 1.5.1 y le quite el del wadgeet y igual no me sirve ayudame

    ResponderEliminar
  6. Hola Luis, haces un muy buen trabajo en estos turoriales. He hecho mucho gracias a tus concejos, pero quería ver como puedo mejorar la calidad de carga de mi pagina, si tu me puedes dar unos consejos te etaria muy agradecido, esta es mi pagina: http://naciongamerschile.blogspot.com/ saludos...

    ResponderEliminar