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:
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: ["« Anterior","Siguiente »"],
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.
También te podría interesar...
- 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: ["« Anterior","Siguiente »"],
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.
Sitio de referencia: http://blog.compunetsi.net/2012/05/nuevo-slide-muestra-entradas-de-tu-blog.html
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?
ResponderBorrarMno, 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 :)
Borrarhola 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 :
Borrar1ro 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
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
BorrarGabriela gracias estare esperandolo no me falles jejejeje
ResponderBorrarListo, acabo de publicarlo... ¡Espero que te guste! :)
Borrarthank nena! se te agradece estoi! demasiado! ^^ >u< besos y abrazos! >u<
ResponderBorrarYa tienes otro slide ^_^
BorrarPERO NO HAY FORMA DE CAMBIARLE EL TAMAÑO?
ResponderBorrarHasta 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 :)
Borrarhttp://elrincondegabriellayu.blogspot.com/2013/07/instalar-un-slideshow-para-blogger-con.html
muchas gracias te lo agradesco pero lo puse y no me salen las imagenes :( me podrias ayudar?
ResponderBorrar¿Las imágenes que tienes en tus entradas están alojadas en Picasa?
BorrarPORFIS AYUDAME LO INSTALE PERO ESTA MUY GRANDE OSEA, NO ME SALE LAS IMAGENES Y UN ESPACIO EN BLANCO .. AYUDA GRACAS
ResponderBorrarMe 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.
BorrarHola, 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!! :)
ResponderBorrarMi blog es "http://tusonmix.blogspot.com/"
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".
BorrarExcelente widget, felicidades!!!!!
ResponderBorrarHola, felicitaciones por el aporte,
ResponderBorrarLo ú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
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é.
Borrarhola 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
ResponderBorrar¡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
Borrarorale 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 ;)
BorrarUnos añitos más y vas a saber si vas a ser un otaku temporal o para toda la vida :)
BorrarTe 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)