lunes, 17 de junio de 2013

Nuevo Slide que muestra las entradas de tu blog de manera automática

A partir de este lunes y cada lunes siguiente (si no me olvido) postearé un recurso para blogger que utilizo o utilicé para mi blog, aquellos recursos que fui encontrando en sitios maravillosos de diseño o trucos para Blogger. ¿Por qué? porque no quiero correr el riesgo de que se bloquée o se cierre la página que contiene el tutorial y se pierda para siempre semejante ayuda como en el caso del primer blog de Annyz.
Y bien, doy inicio a esta nueva sección con un gadget slide muy pero muy facil de poner en tu blog:


Hace mucho que se intentaba crear un Slideshow que muestre las imagenes de las Entradas de tu blog en Blogger sin actualización manual sino a través del Feed, hoy gracias a una adaptación de Abu ya es posible.
El demo lo puedes ver a continuación, como verán muestra en forma de Slide las 10 ultimas publicaciones de nuestro Blog, si sabes un poquito de css y html podrás adaptarlo a tu diseño de blog fácilmente...

- Primero crea un Widget HTML y ubicalo de preferencia en la parte superior de tu blog (debajo de la Cabecera) y pega ahi le siguiente código:

- Coloca el link de tu blog en donde dice: pon aquí la url de tu blog

- Si quieres cambiarle el color, sólo cambia el código HTML de color en donde dice  background-color:#FFFFFF (Puedes buscar el HTML de los colores en este página: http://html-color-codes.info/codigos-de-colores-hexadecimales/

<link type='text/css' rel='stylesheet' href='http://compunet.blogcindario.com/ficheros/slide-cpnt.css' />
  <script language="javascript"  type="text/javascript" src="http://compunet.blogcindario.com/ficheros/slide-cpnt.js"></script>
<div style="text-align: center; background-color:#FFFFFF;">
  <div id='featuredContent'>
  <div id='paginate-featured-slider'>
  <a class='prev' href='#prev'>Anterior</a>
  <a class='toc' href='#1' rel='1'>1</a>
  <a class='toc' href='#2' rel='2'>2</a>
  <a class='toc' href='#3' rel='3'>3</a>
  <a class='toc' href='#4' rel='4'>4</a>
  <a class='toc' href='#5' rel='5'>5</a>
  <a class='toc' href='#6' rel='6'>6</a>
  <a class='toc' href='#7' rel='7'>7</a>
  <a class='toc' href='#8' rel='8'>8</a>
  <a class='toc' href='#9' rel='9'>9</a>
  <a class='toc' href='#10' rel='10'>10</a>
  <a class='next' href='#next'>Siguiente</a>
  </div>
  <center>
  <div class='sliderwrapper' id='featured-slider'>
  <script>
  document.write("<script src=\"pon aquí la url de tu blog/feeds/posts/default?max-results="+numposts10+"&orderby=published&alt=json-in-script&callback=showrecentposts8\"><\/script>");
  </script>
  </div></center>
<script type='text/javascript'>
  featuredcontentslider.init({
  id: "featured-slider",       contentsource: ["inline", ""],
  toc: "#increment",
  nextprev: ["&#171; Anterior","Siguiente &#187;"],
  revealtype: "click",
  enablefade: [true, 0.4],
  autorotate: [true, 5000],
  onChange: function(previndex, curindex){ }
  })
  </script>
  </div>
<div id="slider">
  <script style="text/javascript">
  var numposts_gal = 10;
  var numchars_gal = 150;
  var random_posts = false; // random posts
  </script>
  <script src="pon aquí la url de tu blog/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
  </div></div></div>


¡Y ya está! Te quedará igual que en mi blog pero con tus propias entradas ^_^ Si tienes alguna duda o problema, escribime y veré si puedo ayudarte en algo.


23 comentarios :

  1. Eres una mostra sabes porque porque es la primera vez que veo un slider sin tenerque ir a la plantilla ni tocar nada en ella, asi que un millon 3 mil de veces gracias solo una cosa, el ancho donde se arregla?

    ResponderEliminar
    Respuestas
    1. Mno, lamentablemente no se puede cambiar la altura y la anchura (ya lo intenté), pero tengo otro slider tan fácil de instalar como este que sí se puede cambiar el tamaño. Lo publicaré mañana a ver si te gusta :)

      Eliminar
    2. hola que tal mira para todos los demás XD si se puede cambiar todo lo que sucede es que el autor de ese slider puso los css "estilos" con ipervinculo. es a si como si se fijan en la 1ra linea de codigo dice link http://compunet.blogcindario.com/ficheros/slide-cpnt.css. esta la url correspondiente con los estilos :D entonces lo que tedrian que hacer para modificar todo seria :
      1ro copiar los codigos que entrega el ipervinculo
      2do: eliminar el codigo
      3ro luego agregar los codigos arriba de un style donde van los estilos :D

      :D no se si me entendieron bn pero como resumen todo esta en el 1er codigo y si se puede editar :D

      Eliminar
    3. aqui un ejemple de como le ando editando XD http://templesnkv1.blogspot.com/ PD: es un temples que ando creando yo con notepadd++ ajajaj no le usare como blog y no añadire contenido ya que solo es un blog de pruebas :) para que no haya problemas con el spam

      Eliminar
  2. Gabriela gracias estare esperandolo no me falles jejejeje

    ResponderEliminar
    Respuestas
    1. Listo, acabo de publicarlo... ¡Espero que te guste! :)

      Eliminar
  3. thank nena! se te agradece estoi! demasiado! ^^ >u< besos y abrazos! >u<

    ResponderEliminar
  4. PERO NO HAY FORMA DE CAMBIARLE EL TAMAÑO?

    ResponderEliminar
    Respuestas
    1. Hasta el momento no puede encontrarle la forma de cambiarle el tamaño con todo lo que probé, pero fijate en este otro que sí se puede :)
      http://elrincondegabriellayu.blogspot.com/2013/07/instalar-un-slideshow-para-blogger-con.html

      Eliminar
  5. muchas gracias te lo agradesco pero lo puse y no me salen las imagenes :( me podrias ayudar?

    ResponderEliminar
    Respuestas
    1. ¿Las imágenes que tienes en tus entradas están alojadas en Picasa?

      Eliminar
  6. PORFIS AYUDAME LO INSTALE PERO ESTA MUY GRANDE OSEA, NO ME SALE LAS IMAGENES Y UN ESPACIO EN BLANCO .. AYUDA GRACAS

    ResponderEliminar
    Respuestas
    1. Me gustaría ayudarte, pero de momento estoy muy ocupada con la edición de doramas y me he olvidado bastante de los códigos html... Podrías preguntárselo al autor de este gadget haciendo clic en el enlace de referencia que está al final de la entrada.

      Eliminar
  7. Hola, hay alguna manera de que no me abra los enlaces en una nueva pestaña??? Ayudame porfavor, que está super el slide pero ese detalle me juega en contra! Un Abrazo!! :)

    Mi blog es "http://tusonmix.blogspot.com/"

    ResponderEliminar
    Respuestas
    1. Recuerdo que había un pequeño código que había que sacar o cambiar... pero como ahora estoy dedicada a la edición de doramas, me he olvidado bastante de los códigos html... Podrías consultarle al autor de este gadget. La dirección de su blog está al final de esta entrada, en donde dice "fuente".

      Eliminar
  8. Hola, felicitaciones por el aporte,
    Lo único que quisiera saber es como eliminar la parte del texto de cada entrada que aparece debajo de la imagen de cada post.
    Desde ya muchas gracias

    ResponderEliminar
    Respuestas
    1. Ojalá pudiera ayudarte... Hace mucho tiempo que ya no estoy con lo del código html y me he olvidado de muchas cosas... :( Trata de buscar información en el sitio de donde lo saqué.

      Eliminar
  9. hola gabriella yu como estas? oye enserio eres otaku? me gusta mucho que seas asi yo tambien lo soy e ido para convenciones y una vez hise un cosplay bien fino y tambien tengo un blog pero el mio es de paranormal misterios, tambien soy gamers y nerd no se tal vez o no lo se, la otra vez un chama me dijo imaduro por ser otaku aunque no me importo y no creo que tu tampoco lo sea te pareces mucho a mi :) saludos lindo blog tu amigo jesus

    ResponderEliminar
    Respuestas
    1. ¡Ja, ja, ja! Ya con mis 38 años recién cumplidos me importa muy poco el "qué dirán". Hace como más de 30 años que soy otaku, intenté dejarlo pero mi pasión fue más fuerte, je XD

      Eliminar
    2. orale 38 y te gusta el anime genial *.* ;) aa felicidades por tus 38 entonces :), esa es la actitud nunca se puede satisfacer a todo el mundo, si te entiendo en muy dificil jejeje es imposible dejarlos de verpara mi es asi, yo tengo 21 años recien cumplidos tambien en septiembre :) saludos y feliz navidad jeje ;)

      Eliminar
    3. Unos añitos más y vas a saber si vas a ser un otaku temporal o para toda la vida :)
      Te sorprenderías saber que hay otakus más grandes que yo, como el anime entró a la Argentina más o menos en los años 70's, hay otakus bastante más veteranos que nosotros XD Yo me inicié con Heidi, Mazinger, Robotech, etc y me titulé con Sailor Moon, Dragon Ball, Ranma 1/2, etc... je XD
      Este lunes iré a mi primera convención de anime a Salta y estoy muy emocionada :) Mi sueño sigue siendo eser una mangaka, pero en estos momentos estoy perfilando para los webtoons ;)
      ¡Feliz Navidad para vos también y no cambies si no quieres hacerlo! ¡Besos! (k)

      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...