Anteriormente publique algunos Slideshoe para blogger de los cuales les dejo los enlaces a continuación:
Como agregar a mi blog de blogger un Slideshow automatico
Como crear un Slideshow manual para mi blog de blogger
Como crear una galerÃa de imágenes para Blogger online Gratis – Como crear un Slideshow gratis para blogger
Como hacer un Slideshow Carrusel basado en etiquetas para blogger
Mostrar un Slideshow con mis entradas populares para blogger
Necesito un Slider para mi blog de blogger
SlideShow con control deslizante para blogger
Slider para blogger en 3D
Slideshow de Popular post o Entradas polulares para mi blog de blogger
Slideshow para blogger blogspot con etiquetas
Slideshow para blogger manual nuevo estilo
Slideshow para blogger nuevo estilo
Slideshow vertical para usarlo en blogger
Widget Slider galerÃa de imágenes acordeón para blogger
Widget para blogger, Slideshow con Entradas Populares
Slideshow para Blogger
Slideshow con entradas populares nuevo estilo
Video Tutorial Como insertar un Slideshow en mi blog de Blogger en un solo widget
A continuación mire su demostración en mi blog de demos
1 Ir a Blogger
2 Da un clic en Diseño
3 Abre añadir un gadget “Añadir un gadget”
4 Una vez que hayas abierto un nuevo gadget se te mostrara una ventana en la cual tienes que seleccionar el widget que dice “HTML/Javascript” ábrelo e 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://ayudadeblogger.com",
MaxPost: 7,
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 : "Puestos para comentarios",
imageSize :500,
SumChars : 100,
tagName:false,
width: 500,
height: 250,
spw: 7,
sph: 5,
delay: 3000,
sDelay: 30,
opacity: 0.7,
titleSpeed: 500,
effect: '',
navigation: true,
links : true,
hoverPause: true,
prevText: 'prev',
nextText: 'next'
};
</script>
<script src='https://cdn.rawgit.com/Luis-Chavez/slideshow-autocoin-js/651fe128/.js' type='text/javascript'></script>
Realiza estos cambios:
Si ya utilizas un jQuery en tu blog de blogger ya no tendrás que poner en este código el script http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js, y si no utilizas ningún jQuery entonces pon todo el código tal como lo presente.
Debes borrar el link http://ayudadeblogger.com y poner ahà el link de tu blog de blogger.
Si quieres hacer más grande el Slideshow, solo basta con cambiar el número 500 que es el ancho y el número 250 que es su altura:
width: 500,
height: 250,
Eso es todo ahora dale un clic en “Guardar” y ubÃcalo debajo de la cabecera principal de tu blog de blogger.
No hay comentarios:
Publicar un comentario