Se trata de un script construido por dhteumeuleu en cuya web podreis ver un montón de ejemplos de diseños de alta calidad, hechos con sólo html y sobre todo, javascript.
La instalación es sencilla, porque es suficiente con añadir un gadget HTML/JavaScript y copiar allí el contenido de este fichero txt. Una vez grabado, el sitio más adecuado parece que es encima o debajo de las entradas y si os parece lo mismo, allí es dónde tendreis que mover el nuevo gadget después de creado.
El código resulta algo complicado para mis limitados conocimientos, pero algo he podido configurar.
En la primera parte (estilo, CSS) podeis definir en #frm, el alto, ancho y color de fondo del cuadro contenedor, así como el tipo de letra y su tamaño.
Para cambiar otras cosas, ya hay que bucear en la parte JavaScript, aunque casi todo lo interesante está prácticamente al final.
...
elapsedTime = new Date().getTime(); setTimeout(main, 32); } return { init : function (cont, t1, t2, c1, c2, c3) { frm = document.getElementById(cont); lineDelay = t1; charDelay = t2; colorText = c1; colorMatch = c2;
colorGhost = c3; loadLines(); main(); },
changeText : function () { document.getElementById("show").className = "";
document.getElementById("inputext").className = "hidden"; lineChar = []; animStack = []; colorStack = []; frm.innerHTML = ""; lineIndex = 0; elapsedTime = 0; loadLines(); frm.focus(); },show : function () {document.getElementById("show").className = "hidden"; document.getElementById("inputext").className = ""; document.getElementById("text").focus(); }}}(); onload = function () {
mtx.init("frm", 1500, 150, [255,255,255], [255,64,0], [44,44,44]);
...
elapsedTime = new Date().getTime(); setTimeout(main, 32); } return { init : function (cont, t1, t2, c1, c2, c3) { frm = document.getElementById(cont); lineDelay = t1; charDelay = t2; colorText = c1; colorMatch = c2;
colorGhost = c3; loadLines(); main(); },
changeText : function () { document.getElementById("show").className = "";
document.getElementById("inputext").className = "hidden"; lineChar = []; animStack = []; colorStack = []; frm.innerHTML = ""; lineIndex = 0; elapsedTime = 0; loadLines(); frm.focus(); },show : function () {document.getElementById("show").className = "hidden"; document.getElementById("inputext").className = ""; document.getElementById("text").focus(); }}}(); onload = function () {
mtx.init("frm", 1500, 150, [255,255,255], [255,64,0], [44,44,44]);
...
El valor que lleva el setTimeout (32 en el trozo reproducido), marca el ritmo general de la animación. A mayor valor, más despacio.
1500: pausa de transición entre líneas. A mayor valor, más despacio.
150: pausa de transición entre caracteres. A mayor valor, más despacio.
255,255,255: color final de los caracteres en RGB (blanco en el ejemplo)
255,64,0: color de los caracteres "móviles" en RGB (naranja en el ejemplo)
44,44,44: color de los caracteres de las líneas anteriores en RGB (gris oscuro en el ejemplo)
Por último, dentro del TEXTAREA es dónde tiene que ir el texto a mostrar. Cada línea aquí se corresponderá con una línea del rótulo. No se pueden hacer muy largas porque no serán visibles y además el script no traga muy bien con ellas.
El script funciona en todos los casos, pero en algunas pruebas que he hecho con ciertas plantillas muy modificadas, lo hacía regular, así que si en vuestro caso pasa esto, no os volvais locos... ya encontraremos otra cosa que haga algo parecido.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Excelente Entrada Felicidades Oloman
ResponderEliminarMuchas gracias Olomam.
ResponderEliminarMuy bueno, Oloman!! como siempre, excelentes post!
ResponderEliminarSaludos
Muy bueno ;)
ResponderEliminar¡Os adoro! :D
ResponderEliminarGracias amigo, como siempre tuenando nuestros blogs.
ResponderEliminarPero hoy vengo con una pregunta, ya hace tiempo que utilice el truco aquel que explicaste de de transformar el blog en entradas resumidas con el "leer mas" y la imagen reducida.
Ahora quiero hacer un blog solo de videos de youtube y me preguntaba si hay alguna manera de conseguir el mismo efecto pero en vez de una imagen que se vea la captura del video que se suele ver antes de darle al play. No se si me he explicado.
Gracias, un saludo.
La captura del vídeo que comentas, realmente es un frame congelado. Ese script no captura frames.
ResponderEliminarSin embargo, se me ocurre que para obtener el resultado que quieres, se podría hacer el post de manera que lo que se viera fuera una imagen que tu crearas y que fuera un enlace que abriera el vídeo.
En esta entrada tienes una forma de hacer esto. Sólo tienes que pinchar en el logo de YouTube que hay al final para ver el efecto.
La imagen de enlace sería la que se mostraría en los posts resumidos.
Hola Oloman quería saber como hacer para que en el inicio de mi blog las entradas sea vean como en el tuyo: Sólo el título y parte de la entrada, q se vean las más recientes y no todas... Gracias :D
ResponderEliminarPantostao, este es el sistema que yo uso
ResponderEliminarhttp://oloblogger.blogspot.com/2009/06/post-en-forma-de-sumarios-leer-mas-en.html
y este es otro distinto para un resultado parecido...
http://oloblogger.blogspot.com/2009/03/estilo-revista-magazine-simplificado.html
Hola!
ResponderEliminarGenial! me gustó! y lo incluí!
aunque me falta ponerlemi feeling!
Oye, como puedo chekar como se ve mi blog con otro navegadores? tengo que instalarlos todos? No existe algun truco para evitarme eso?
Saludos.
Todos no, pero sí los más habituales. Yo pruebo las modificaciones en IE, FF, Chrome y Safari.
ResponderEliminarDe todas formas sí que hay algunos servicios que te sirven hacer eso mismo de un golpe. Permíteme que lo deje para un post. Un saludo
Excelente post cientos de utilidades que se les puede dar....
ResponderEliminar