add

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

emailEnviar por correo

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

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 (33) 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 (11) 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