jueves, 25 de julio de 2013

Instalar un Slideshow para blogger con un solo widget (2)

Éste es otro slide muy fácil de instalar en un gadget html sin necesidad de modificar la plantilla. A diferencia del anterior, puedes modificar el ancho y el largo del slide.
Así comienza este artículo:

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.


Instalar un Slideshow para blogger con un solo widget

Vamos a trabajar

1 Ir a Blogger

2 Da un clic en Diseño


Instalar un Slideshow para blogger con un solo widget

3 Abre añadir un gadget “Añadir un gadget


Instalar un Slideshow para blogger con un solo widget

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:


Instalar un Slideshow para blogger con un solo widget
<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://elrincondegabriellayu.com.ar",
 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://ivyth.googlecode.com/svn/js/autocoin.min.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 scripthttp://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://elrincondegabriellayu.com.ar (no borres las comillas) 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.

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

Sayounara bye bye!

Fuente: http://www.ayudadeblogger.com/2013/06/instalar-un-slideshow-para-blogger-con-un-solo-widget.html






 Además de dejarme un comentario, no dejes de visitar mis mangas para convertirme en una verdadera mangaka
Dale clic a la imágen para conocer mis mangas,
es otra forma de agradecer además de dejarme 
un mensaje en el blog.
¡Se mi fan y ayudame a ser una mangaka de verdad!
Gabriella Yu

34 comentarios :

  1. Hola Grabiela esta genial ese slider pero sabes que me entro en conflicto con la sidebar las mando pa abajo a las dos, la izq y la der, sabes porque pasa eso? muchas gracias por tu esfuerzo

    ResponderEliminar
  2. ¿Éste es tu blog, José? http://la--opinion--deportiva.blogspot.com.ar/2013/07/inminente-la-sancion-para-rod.html
    Dale una miradita es estas soluciones a ver si se resuelve tu problema y luego me cuentas cómo te fue: http://afaltadedinero.blogspot.com.ar/2009/12/por-que-la-sidebar-se-va-hacia-abajo-se.html

    ResponderEliminar
  3. Gabriela. Esta buenisimo el Widget, pero tengo una duda.

    Estoy probando dos widgets que vi en tu blog, y tengo en cada uno una duda :)

    Referente a este widget, lo aplique en mi web, pero me muestra las imagenes cortadas. Es decir no la expande, si no que la corta y pega la misma al lado (aca el link http://teamdesert.blogspot.com/, es el slideshow inferior)

    Por otro lado, hace unos dias publicaste otro slide (que me gusta mas), pero no se como evitar que me salga la barra naranja en el titulo de la entrada (es el mismo blog, ya que estoy probando los dos).

    Ojala puedas ayudarme :)

    ResponderEliminar
    Respuestas
    1. Bien, creo que el primer problema que tienes con el widget es por el tamaño original de tus imágenes, o sea, como que son pequeñas para el gadget.
      En cuanto al segundo problema, es por el diseño de tu plantilla. Yo uso una plantilla original de Blogger y suelo tener menos problemas de conflicto con los widget :) Puedes dejarlo así nomás (me gusta cómo está) o cambiar de plantilla, como en el caso del chico de más abajo.

      Cualquier duda, avisame ^_^

      Eliminar
  4. Gabriela mira lo que hice fue cambiar la plantilla y san se acabo encontre una de BT Designer que lo soporta en esa posicion y listo de verdad te agradezco mucho tu trabajo y tu esfuerzo un abrazo Jose

    ResponderEliminar
    Respuestas
    1. Entonces sólo era un conflicto entre la plantilla y el gadget ^_^ Menos mal que se te arregló el problema con eso, porque encontrar el código en la plantilla que generaba el conflicto, iba a ser muy engorroso :(

      Eliminar
  5. Respuestas
    1. Debe haber un conflicto con los códigos de tu plantilla. Si es así, no podrás usar este gadget a menos que cambies de plantilla, una original de Blogger :)

      Eliminar
  6. Hola ! consulta y que imagenes me muestra el slide en mi blog ? ya que no veo en el codigo una linea para insertar las direcciones de las imagenes que quiero mostrar en el slide !

    Gracias !!!

    ResponderEliminar
    Respuestas
    1. El gadget muestra automáticamente las imágenes, generalmente muestra la primera que aparece en cada entrada.

      Eliminar
  7. Madre mía!, muchísimas gracias!!, llevaba unas semanas loquita por encontrar esto. Muchas gracias de verdad!!. Ahora estoy probando con distintas plantillas, a ver con cuál me queda mejor ;-)

    Gracias!!

    ResponderEliminar
    Respuestas
    1. Por cierto, una pregunta: ¿hay alguna forma de ponerlo para que las imágenes queden centradas y sin mosaico?

      ¡Muchas gracias!

      Eliminar
    2. Bueno, bueno, he intentado cambiar los códigos para encontrar la manera de hacer lo que me pides y no he logrado nada positivo :( el efecto mosaico sigue ahí y no he podido centrar la imagen.
      Supongo que al convertir éste código en un widget instalable, ya no se pueden modificar algunos códigos tan fácilmente como si estubiera insertado en la planilla.

      Sorry, parece que no puedo ayudarte en esto... :(

      PD: ¡Tu blog sigue genial! :)

      Eliminar
    3. No problem!, me gusta mucho como queda. Gracias por intentarlo ;-)

      Lo que haré será que a partir de ahora colocaré una primera imagen del tamaño del slideshow, a ver si así se va viendo homogéneo.

      Gracias!!

      Eliminar
    4. Pienso lo mismo que vos en cuanto a la imagen. Tal vez deba ser lo suficientemente grande como para que salga bien en el widget, ¿no? :)

      Besos!

      Eliminar
    5. Al final lo he puesto de 600x310 y en las 2 primeras, que corresponden con post que he hecho con imágenes en ese tamaño, se ve perfecto.

      Muchas gracias de nuevo! ;-)

      Eliminar
    6. Por el contrario, gracias a vos por compartir tus conocimientos :)

      Besos!

      Eliminar
    7. Hola Gabriella!; perdona que te moleste, pero hoy me ha pasado una cosa en el blog. Resulta de que me sale una ventana emergente que pone que necesita usuario y contraseña :S

      Le doy a cancelar y lo único que no se ve del blog es el slide :(
      Lo he quitado y ya no me sale el mensaje, ¿sabes de qué se puede tratar?

      Un beso y gracias!

      Eliminar
    8. Puede que sea un conflicto entre tu plantilla y el gadget... ¿Pusiste algo nuevo hace poco en tu blog antes de que ocurriera eso? Prueba con poner el otro slide automatico para ver lo que sucede con ese y luego me cuentas.

      Eliminar
    9. Vaya...desde que lo puse no he cambiado nada, de hecho esta mañana iba bien, y de repente me sale ese mensaje :(

      He probado con un código de otro slide y funciona bien, pero no me gusta!, me gusta el tuyo!

      En fin, muchas gracias por tu ayuda!

      Eliminar
    10. A mí me pasa lo mismo.. lo del mensaje de autentificación y tampoco me deja colocarlo :(

      Eliminar
    11. Puede que el creador de este slide le cambió algo en el código y por eso pide autentificación... No nos queda otra que usar otro slide :(

      Eliminar
    12. Jooor....qué lástima, con lo bonito que quedaba en mi blog...en fin, que vamos a hacer. Muchas gracias por todo!!

      Eliminar
    13. Sí, una verdadera lástima... Nos duró poco la alegría :(

      Eliminar
  8. Hola! Muchas gracias por tu ayuda al escribir este post. Me es de gran ayuda.

    Tengo una pregunta. ¿Existe la posibilidad de hacer un slideshow igual con misma estética como por ejemplo el de este blog: http://www.callejeandoporelplaneta.com/ pero para la cabecera? Que las imágenes que vayan pasando no sean las de las entradas sino unas imágenes propias que identifiquen al blog.

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Creería que sí. Creo haber visto algo así en una de las entradas de Ciudadblogger. Te recomiendo ese sitio, de allí aprendí un montón :>)

      Eliminar
  9. Hello! lo primero gracias por compartir tus conocimientos...y una pregunta...Hay alguna manera de que sólo salgan imágenes sin texto debajo? O por lo menos poder quitar donde pone num de comentarios? Gracias!

    ResponderEliminar
    Respuestas
    1. ¡Uf! He estado muy apartada de estas cosas y ya ni me acuerdo de este slide... Mejor visita el enlace del sitio de donde lo obtuve, es mejor que le preguntes directamente al que creo este slide :)

      Eliminar
  10. Hola, buenas noches :D
    Conseguí que se viera el cuadro del slider, pero no muestra las imágenes; funciona presentando el texto de las entradas (título y primeras líneas del contenido), pero nada de imágenes.
    He leído algo de conflicto entre la plantilla; aclaro que mi blog tiene plantilla original de blogger, la básica en color anaranjado (apenas lo estoy modificando). ¿Cuál será el problema de que las imágenes no se muestren? Probé a publicar una imagen pequeña en la última entrada de prueba, pero ni así.
    Mi blog es http://creciendoenvictoria.blogspot.mx
    Espero en Cristo que me puedas ayudar, ¡Dios te bendiga!

    ResponderEliminar
    Respuestas
    1. Los siento, no creo que pueda ayudarte en tu duda ahora, he estado muy alejada de esto y ya se me han olvidado muchas cosas :(
      Te sugiero que entres a la fuente de donde conseguí este slide, está al final de la entrada. Allí podrás preguntarle a la persona que creo este slide ^_^
      ¡Suerte! :>)

      Eliminar
  11. no sirve el widget solo perdi mi tiempo

    ResponderEliminar
    Respuestas
    1. Lo lamento, hace siglos que ya no estoy con esto del diseño, si pudiera te ayudaría :(

      Eliminar
  12. Quiero usar este slideshow, pero quiero que enseña solo imagenes, o imagenes con titulo sin descripcion. como lo debo cambiar?

    ResponderEliminar
    Respuestas
    1. mmm... No lo puedo visualizar en mi blog de pruebas... Tratá con poner en 0 el tamaño del texto (está al principio de la línea del código, dice 11px Verdana) a ver qué pasa.
      Sino tratá con este otro slide:
      http://elrincondegabriellayu.blogspot.com.ar/2013/06/nuevo-slide-que-muestra-las-entradas-de.html

      Eliminar

Deja tu comentario, siempre con respeto, si no lo haces, lo eliminaré.
Antes de preguntar sobre algo, busca primero la respuesta en los comentarios anteriores, tal vez ahí esté tu respuesta ^_^

Si quieres insertar una imagen usa este código:
[img]URL de la imagen[/img]

Si quieres insertar un video de YouTube o Vimeo usa este código:
[video]URL del video[/video]

No incluyas material para adultos, ni vulgar u ofensivo; tampoco contenido con odio, racismo o discriminación, de lo contrario tu comentario será eliminado.

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer
Related Posts Plugin for WordPress, Blogger...