En esta nueva presentación de
Ayudadeblogger.com les presentare un nuevo Slideshow para que lo utilicen en su
blog de blogger gratis. En este nuevo Slideshow para blogger no necesitaran
instalarlo en el Editor HTML de su plantilla de Blogger, solo copiaran un simple
código en su pagina de Diseño en un widget HTML/Javascript y solo cambiaran un
paso nada mas, y con esto funcionara su Slideshow para blogger. A este
Slideshow para blogger se lo ha hecho tan simple y sencillo para que no tengan ningún
problema al momento de instarlo en su blog de blogger. El Slideshow esta hecho
en jQuery con efectos de transición, los efectos de transición que les voy a
presentar en este Slideshow se mostrara en las imágenes las cuales realizan un
efecto único.
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
Te gusto
verdad!
Vamos a
trabajar
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='http://googledrive.com/host/0B4Z9VSqNHBcpOVlLSnN4c1R0alk' 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.
Fácil verdad, ahora ya tienes un nuevo Slideshow
con un solo widget.
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo saber y de
inmediato les responderé.
Saludos
Fuente
http://www.ayudadeblogger.com/2013/06/instalar-un-slideshow-para-blogger-con-un-solo-widget.html