maxhurbano

Posteado por Max Hurbano para Taringa.net Me decidí a hacer este megapost con algunos trucos en HTML y CSS, los cuales tuve que aprender mientras luchaba por hacer de mi Myspace, un lugar algo decente (según mi punto de vista); cosa nada sencilla..!! peor aún, con el nuevo Beta 3.0; una real porquería. Fueron horas y horas y HORAS de busqueda y experimentación; prueba/error, modificar, reinventar, redescubrir, recopilar, mezclar, desencriptar y desenterrar algunos obscuros secretos del HTML (HiperText Markup Language) y CSS (Cascade Style Sheets); claro que no inventé nada, pero créanlo: era poco menos que imposible encontrar algo decente en internet. Ojalá el tiempo en realizar este post, no sea tanto como fué aprenderlo Este post no contiene ni una gota de Javascript, pues además de que hay muchos sitios y hostings que no lo permiten, o no lo soportan, me he topado con decenas de posts, aquí en T! que contienen trucos HTML y CSS que en realidad es Javascript Y como se comentaba en uno de estos post sobre el tema: el JavaScript no tiene trucos, es Javascript y punto. Posteado por Max Hurbano para Taringa.net NECESITAREMOS: Bloc de notas. Navegador de Internet (IExplorer, Opera, Chrome, Firefox, Safari, Netscape, etc.) Mente despejada. Ojos bien abiertos (cualquier letra, punto o coma mal puestos, dará mal resultado.) Ir al baño antes de empezar Posteado por Max Hurbano para Taringa.net APRENDEREMOS: 1.- Cambiar texto por otro 2.- Cambiar imagen por otra 3.- Cambiar texto por imagen 4.- Cambiar imagen por texto 5.- Cambiar texto invisible (transparente) por texto visible 6.- Cambiar texto invisible (transparente) por imagen 7.- Imagen (invisible transparente) a texto/imagen 8.- Cuandro de texto o imagen emergente: 9.- 7 enlaces distintos con una sola imagen: 10.- Barra deslizante en imagen, texto, segmento, tabla etc.: 11.- Cambiar de tamaño videos de Youtube y Slideshow de fotos: 12.- Imagen de fondo a un Slideshow: 13.- Colocar varios videos de Youtube en un DIV con barra deslizante: 14.- Amigos y comentarios Myspace en div con barra deslizante (solo perfiles 1.0 y 2.0): 15.- Colocar reproductor (es) Myspace-Music completo (s): Posteado por Max Hurbano para Taringa.net NOTA: Como aquí en el foro no podemos insertar HTML, mucho menos CSS, no podremos ver las pruebas de los codigos aquí escritos, plasmados dentro de esta página; y crear ejemplos en páginas externas, es algo complejo y casi innecesario. Por eso será más agil, si queremos probar alguno, que los copiemos en el Bloc de notas, guardemos ese documento con extensión .html y lo abramos con nuestro navegador. ( No te preocupes mucho, pues además, al final del código, insertaré algunas imágenes pequeñas como ejemplo de como se verían en el navegador; las cuales creo, aunque son solo de ejemplo (son muy cortas en tiempo, y por la cuestión de Tamaño/Peso, se verán pixeladas), serán de mucha utilidad. Repito, la visualización que obtendrás si copias y pegas los codigos en tu Bloc de notas, son muy superiores a lo que ves en las imágenes GIF; son solo para que te des una idea. ) Posteado por Max Hurbano para Taringa.net EJEMPLO: ARCHIVO > GUARDAR > seleccionamos abajo, donde dice "Documento de texto (*.txt)": TODOS LOS ARCHIVOS (*.*) > ESCRIBIMOS: prueba-de-codigos.html o el nombre que decidan. > GUARDAMOS > ABRIMOS con doble click para que se abra con el navegador predeterminado, o click derecho y elegimos con cual lo queremos abrir. El proceso completo, COPIAR, PEGAR, GUARDAR Y ABRIR, en este video: Posteado por Max Hurbano para Taringa.net RE-NOTA: Todos los nombres que yo utilíce dentro de <style>.....</style> y en los elementos CLASS="" NAME="" etc. del HTML que no reconozcas, son solo de ejemplo; tú puedes colocar el nombre que quieras, de acuerdo a como quieras reconocerlo en tus hojas de estilos o codigos HTML. Solo las etiquetas HTML tienen su nombre real; el cual hay que respetar al pie de la letra.. Posteado por Max Hurbano para Taringa.net ANTES DE INICIAR: Cabe recordar que cuando se usa estilo en HTML, hay dos formas genericas de hacerlo (además de la que enlaza a una hoja externa): entre las etiquetas <style>...</style> que para fines practicos llamaremos CSS; las cuales se colocan de preferencia entre las etiquetas <head>.....</head> (aunque he llegado a colocarlas dentro del BODY ) EJEMPLO: <html> <head> <title>Título de la página</title> <style>.....</style> </head> La segunda, llamada "Estilo en linea" que llamaremos ESTILO(S) EN LINEA, es dentro de la misma etiqueta a la que queremos aplicarle el estilo, utilizando el elemento STYLE, el signo = y entre comillas, el estilo a insertar: ATRIBUTO : VALOR ;. Posteado por Max Hurbano para Taringa.net EJEMPLOS: 1.- <body style=text-align:center;> Centra el texto en todo el BODY. 2.- <table style=background-color:#000;border:2px;> Coloca fondo negro a la tabla, y la bordea a 2 pixeles. 3.- <span style=color:transparent;border:none;> Invisibiliza esa parte del texto, imagen, o segmento de algo. 4.- <a style=color:red;background-color:black;> Coloréa un enlace con rojo y fondo negro. 5.- <div style=width:800px;position:absolute;top:0px;left:50%;margin-left:-400px;> Centra de forma absoluta un DIV, y lo coloca al principio aunque haya algo más debajo. Posteado por Max Hurbano para Taringa.net INICIO: 1.- Cambiar texto por otro: En este ejemplo substituiremos un texto por otro, al pasar el mouse (efecto Hover). Hay que poner especial atención a esta explicación, pues es el metodo que utilizaremos en varios de los siguientes ejemplos. Para esto crearemos un DIV con 2 lineas de texto, solo que solo se verá una a la vez; y aunque estará una debajo de la otra, aplicaremos el valor de "none" al atributo "display", para que cuando una aparezca, la otra nó, y así estarán alternativamente en el mismo lugar; tambien aplicaremos estilo en linea al DIV, para centrar el texto, recuerdan..?? Para nuestro proposito, utilizaremos 2 etiquetas válidas en HTML: BIG y SPAN, y color rojo y azul respectivamente, para diferenciar el estilo entre una y otra linea. Tecnicamente serán 2 enlaces, así que como queremos que sea como texto plano, daremos estilo para que NO aparezcan SUBRAYADOS. Y como no queremos que nos envíe a otra página dejaremos vacío el espacio donde debiera ir la dirección del enlace, de esta forma, si se dá click por error, nos abrirá nuevamente la misma página (tambien podrían poner un link, aunque ahora la idea es solo cambiar texto) Tambien será de suma importancia colocar el atributo BACKGROUND-COLOR y el valor TRANSPARENT a ".cambiar a:hover span", para evitar que aparezca algún color de fondo al pasar el mouse, y DISPLAY:INLINE; para que el hover sea solo sobre la imagen o el texto; nó en bloque; es decir, que el link no ocupe todo el ancho del DIV o página, aunque hayamos especificado el ancho; detallitos, pero importantes en demasía. Y solo para fines de buena visibilidad, colocaremos al texto entre etiquetas de negrita <b>, para que lo veamos un poco mejor; aunque tambien se puede definir el tamaño; en caso de utilizar encabezados (h1,h2,h3, etc), por default el DISPLAY pasará a BLOCK (en bloque). Por último: recuerda que no es necesario que armes el documento HTML completo (aunque bien puedes hacerlo), solo copia y pega el codigo que ves (CSS y HTML juntos), tal como está completo al final de cada ejemplo; y guardalo como .html Primero en CSS (lo que iría entre <style>....</style>: .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;}  .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {color: #0000CC;display:block;text-decoration:none; background-color:transparent;}  .cambiar  a:hover big {display:none;text-decoration:none;} Después, en HTML (lo que vá dentro de <body>: <div class="cambiar" style=text-align:center;> <a href=""> <big> <b>Este será el primer texto que aparezca; sí, primero.</b> </big> <span> <b>Esta será la segunda linea de texto; sí, la segunda</b> </span> </a> </div> Listo: el codigo completo sería: <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a {color:#00CCCC; font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {color: #0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;}  .cambiar  a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style=text-align:center;> <a href=""> <big> <b>Este será el primer texto que aparezca; sí, primero.</b> </big> <span> <b>Esta será la segunda linea de texto; sí, la segunda.</b> </span> </a> </div> Copia y pega en tu Bloc de notas, guardalo con extensión .html abrelo, y pasa el mouse sobre la linea que ves, la primera; cambiará de texto y color. Posteado por Max Hurbano para Taringa.net Ejemplo en GIF: Todo bien...., sorprendente, nó..?? y es solo el principio. Seguimos... Pero antes, UNA NOTA IMPORTANTE: Si tienes algun sitio que sea visitado por Anglo e Hispanoparlantes, puedes insertar texto bilingüe, solo substituyendo una de las lineas por texto en Ingles; como traducción, por ejempo. Hagamos una prueba rápida: <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a {color:#00CCCC; font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {color: #0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;}  .cambiar  a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style=text-align:center;> <a href=""> <big> <b>Este será el texto que aparezca en idioma Español; sí, Español.</b> </big> <span> <b>This is the text will appear in English language; yes, in English.</b> </span> </a> </div> Posteado por Max Hurbano para Taringa.net Magnifico, nó..?? Ahora sí; continuemos... Posteado por Max Hurbano para Taringa.net 2.- Cambiar imagen por otra: Este ejemplo es tecnicamente identico al anterior; al CSS será más breve, pues requiere menos atributos/valores. El cambio sustancial será en el HTML; aunque solo substituiremos las lineas de texto por imágenes y aplicaremos estilos en la misma etiqueta; las cuales deberan ser alojarlas entre su respectiva etiqueta: <img src="IMAGEN"/> y a las que solo bordearemos y definiremos su tamaño (con WIDTH y HEIGHT) en caso de ser diferente, pues si el alto no es el mismo, nos empujará momentaneamente hacia abajo, lo que este "Abajo"; lo mismo con el ancho Esto lo haremos, repito: en la misma etiqueta (Estilos en linea); procedamos: <style> .cambiar big { text-decoration:none;display:inline;}  .cambiar a { text-decoration:none;display:inline;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {text-decoration:none;background-color:transparent;display:inline;}  .cambiar  a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style=text-align:center;> <a href=""> <big> <img src="http://i958.photobucket.com/albums/ae69/pablodj22/Web%20PABLODJ22/taringa_logo.jpg"  width="300px" border="3px"/> </big> <span> <img src="http://s1.***/imagen/1820816taringa-fc.png" width="300px" border="3px"/> </span> </a> </div> Posteado por Max Hurbano para Taringa.net Resultó..?? Muy bien; vamos con lo que sigue..!! Pero antes: Cabe mencionar que se puede utilizar el mismo CSS para imágenes y texto; solo es cosa de colocar los atributos y valores necesarios para los dos casos. Para aplicar estos 2 ejemplos juntos, solo sería cuestión de agregar el estilo especificado en el segundo, al CSS del primer ejemplo, en caso de distintos atributos/valores. En este caso no cambiamos practicamente nada, pues el estilo de las imágenes lo aplicamos en linea (aunque bien pudo ser en la zona de CSS), solo utilizamos el CSS indispensable, para darle a la imagen el comportamiento de enlace (s), como en el caso del texto así que solo unimos el HTML de los 2 con el mismo CSS de el primer ejemplo. Solo como prueba; sería así: <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {color: #0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;}  .cambiar  a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style=text-align:center;> <a href=""> <big> <b>Este será el primer texto que aparezca; sí, primero.</b> </big> <span> <b>Esta será la segunda linea de texto; sí, la segunda.</b> </span> </a> </div> <br /><!--eso es un salto de linea; o punto y aparte--> <div class="cambiar" style=text-align:center;> <a href=""> <big> <img src="http://i958.photobucket.com/albums/ae69/pablodj22/Web%20PABLODJ22/taringa_logo.jpg" width="300px" border="3px"/> </big> <span> <img src="http://s1.***/imagen/1820816taringa-fc.png" width="300px" border="3px"/> </span> </a> </div> Posteado por Max Hurbano para Taringa.net Prueba superada..?? Ahora sí; lo que sigue: 3.- Cambiar texto por imagen: Procedimiento: usemos el primer CSS, y armaremos un HTML "Mixto", por llamarlo así, con un texto con saltos de linea, e imagen sin borde; solo daremos ancho de 300px. El resultado sería este: <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;}  .cambiar  a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style=text-align:center;> <a href=""> <big> <b>Este es el texto que servirá<br /><br /> de referencia hacia la<br /><br /> imagen azul que<br /><br /> pondremos como<br /><br /> efecto HOVER</b> </big> <span> <img src="http://i958.photobucket.com/albums/ae69/pablodj22/Web%20PABLODJ22/taringa_logo.jpg" width="300px"/> </span> </a> </div> Posteado por Max Hurbano para Taringa.net Todo bien..?? Siguiente: 4.- Cambiar imagen por texto: Lo mismo, pero diferente Quise decir que es el mismo procedimiento, pero a la inversa; el mismo CSS y al HTML anterior le colocamos el texto donde ahora está la imagen´y la imagen donde ahora está el texto. Espero que no te estes haciendo muchas bolas; recuerda que es solo para fines practicos; si prefieres ir armando cada uno de los CSS y HTML, es muy bueno como ejercicio, aunque si aún se te complica memorizar todo, mejor copia y pega; eso sí, cuidando que sea solo lo que se va indicando, si nó, se revolverá. Ovbio si te parece, ve cambiando de imagen o texto (enunciados), como mejor te parezca.. Ahora quedaría así: <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;}  .cambiar  a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style=text-align:center;> <a href=""> <big> <img src="http://i958.photobucket.com/albums/ae69/pablodj22/Web%20PABLODJ22/taringa_logo.jpg" width="300px"/> </big> <span> <b>Este es el texto que ahora<br /><br /> substituye a la imagen<br /><br /> que ahora ya no<br /> <br /> ves; esa, la de el<br /><br /> cuadrito con la T!, que parece<br /><br /> la de algún foro, recuerdas..??<br /><br /> será.....T........??</b> </span> </a> </div> Posteado por Max Hurbano para Taringa.net Excelente..!! Ya diste click, solo para ver que pasa..?? Animo; confía en mí Bueno, allá tú; continuemos: 5.- Cambiar texto invisible (transparente) por texto visible: Ya sé que parezco perezoso por seguir utilizando el COPY/PASTE, pero créanme, es para fines practicos y de memorización; ya habrá tiempo y astucia para que empiecen a experimentar por su cuenta; hay que pensar en todos los visitantes por ahora. Ahora tomemos el primer ejemplo completo, y lo unico que haremos extra será darle estilo en linea, tambien posible en CSS, dentro de la etiqueta <b>, para que nuestra primera linea sea texto color transparente (vale, tambien cambiaremos algunas palabrillas). Recuerda que si quieres verificar que se encuentra ahí, solo arrastra el mouse desde arriba de la página y aparecerá tu texto invisible, ahora visible en color blanco. Esto sería a las de acá: <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;}  .cambiar  a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style=text-align:center;> <a href=""> <big> <b style=color:transparent>Este será el primer texto que aparezca;<br /> sí, primero. <br /> Peeero, ahora será invisible;<br /> puedes creérlo..??.</b> </big> <span> <b>Esta será la segunda linea de texto; sí, la segunda<br /> esta si podras verla.<br /> Peeeero, solo al pasar<br /> el mouse encima.</b> </span> </a> </div> Posteado por Max Hurbano para Taringa.net Lo encontraste..?? Jajaja. Listo; ahora veamos como se transparenta en CSS; será rapido; algo así: Adivinaste, solo se cambia el #CC0000 (Rojo), por el TRANSPARENT (transparente), en la primera linea; en ".cambiar big". <style> .cambiar big {color:transparent;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;}  .cambiar  a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style=text-align:center;> <a href=""> <big> <b>Este será el primer texto que aparezca;<br /> sí, primero. <br /> Peeero, ahora será invisible;<br /> puedes creérlo..??.</b> </big> <span> <b>Esta será la segunda linea de texto; sí, la segunda<br /> esta si podras verla.<br /> Peeeero, solo al pasar<br /> el mouse encima.</b> </span> </a> </div> Posteado por Max Hurbano para Taringa.net 6.- Cambiar texto invisible (transparente) por imagen: Lo siento; otra vez COPY/PASTE ahora al ANTERIOR (ya sea invisivilizado via "en linea", o el de ".cambiar big" ). Solo insertamos una imagen, con su etiqueta correspondiente, y digamos: 250 pixeles de ancho y un borde de 10px..!! en lugar de el segundo enunciado (texto). Veamos: <style> .cambiar big {color:transparent;font-family:trebuchet ms;font-size:14pt;font-weight:normal ;text-decoration:none;display:inline;}  .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;}  .cambiar  a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style=text-align:center;> <a href=""> <big> <b>Este será el primer texto que aparezca; sí, primero. <br /> Peeero, ahora será invisible;<br /> imagéname....</b> </big> <span> <img src="http://i76.photobucket.com/albums/j26/alixrose23/gwyneth-paltrow-iron-man-premieres.png" width="250px" border="10px" /> </span> </a> </div> Posteado por Max Hurbano para Taringa.net Te funcionó..?? Que tal con la imagen...., creiste que nunca la cambiaría..?? Jajaja. Un respiro......, y continuemos. 7.- Imagen (invisible transparente) a texto/imagen: Ahora haremos lo que en el ejemplo anterior, pero en lugar de texto invisible, utilizaremos imagen invisible. Ya se que parece que estamos haciendo como operaciones tipo A+B, C+D, A+D, C+B, D+B, etc, pero habrá quien no sepa o no imagine, que lo que se hace en el primer o segundo ejemplo, es posible hacerlo con otros elementos, o a la inversa, etc. Manos a la obra: Esta vez utilizaremos una imagen GIF transparente (sin borde, claro), de 16x21 pixeles la cual agrandaremos mediante WIDTH para que abarque algo así como 150x200 (nada difícil), alojada en un servidor mío; el cual es para uso publico, por cierto. Esta imagen y el proceso, será utilizado en el siguiente ejemplo; nó, no es a la inversa; será algo un poco más complejo; bueno, procedamos: Recuerda que para verificar que está ahí, puedes arrastrar el mouse desde arriba de la página, hacia abajo al centro de la página; la imagen estará ahí. <style> .cambiar big {color:transparent;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;}  .cambiar  a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style=text-align:center;> <a href=""> <big> <img src="http://i.imgur.com/Spf0g.gif" width="150px" /> </big> <span> <b>Este texto aparecerá<br /> al pasar el mouse sobre la<br /> imagen que no se vé; es decír,<br /> que es transparente.</b> </a> </div> Posteado por Max Hurbano para Taringa.net Ahora imagen transparente por imagen visible: <style> .cambiar big {color:transparent;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;}  .cambiar  a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style=text-align:center;> <a href=""> <big> <img src="http://i.imgur.com/Spf0g.gif" width="150px" /> </big> <span> <img src="http://www.lapastillaroja.net/archives/Firefox_T-Shirt.jpg" width="150px" /> </a> </div> Posteado por Max Hurbano para Taringa.net 8.- Cuadro de texto o imagen emergente: Esto será un poco más complejo, a pesar de que vamos a utilizar algunos de los codigos que ya tenemos arriba. Crearemos un DIV con una imagen como fondo, con 4 monitos a los que haremos que al pasar el mouse sobre cada uno de ellos, aparezca un texto emergente; de pronto haríamos una prueba para substituir el texto por alguna imagen, pero el punto medular será como hacer aparecer texto; por ejemplo: sus datos. Lo primero será crear un DIV, y colocarle via CSS, una imagen de fondo, a la cual, deberemos darle de antemano, las dimensiones requeridas, pues sabemos que las imágenes de fondo, no podemos redimensionarlas vía HTML o CSS; así que usaremos una que previamente dimensionamos; 800x600, vale..?? Y para que no nos quede desfasada, le daremos CSS, con BACKGROUND-POSITION:CENTER; así la centrará de forma absoluta en el DIV; y NO-REPEAT, por si las dudas, para que no la repita; y bueno, ya entrados, un borde de 5 pixeles en color rojo. Despues le insertaremos una imagen transparente, de 24x18 pixeles con su etiqueta, y las mismas medidas del DIV, y la imagen de fondo (la imagen insertada, si nos permite redimensionarla), esto es para que el DIV nos abra, (y a la vez, nos deje ver el fondo con los monitos), pues como no tiene contenido visible, solo el fondo, aparecería el puro borde cerrado; la insertamos así: <img src="IMAGEN" WIDTH="800" HEIGHT="600"/>. Al DIV podemos darle esas medidas, aunque por default, se extiende al tamaño de la imagen. Tambien le daremos la identificación que hemos usado; "CAMBIAR", para que nos invisibilice lo que le ordenemos. Luego, crearemos cuatro DIV, uno para cada monito, que es de donde emergerá el texto; para esto usaremos el ejemplo 7, "imagen invisible a texto", y les daremos estilo vía CSS, para moverlos hacia arriba del flujo HTML, y colocarlos sobre el torso de los monitos; esto con los ATRIBUTO/VALOR: POSITION:ABSOLUTE;. Al aplicar estos elementos, no tendremos el problema de que nos quede el espacio vacío que dejarían los DIV, pues los ubicaremos de forma absoluta; esto será algunos pixeles abajo del principio del DIV, que será el TOP; y claro, tambien a derecha o izquierda, con los elementos: LEFT,MARGIN-LEFT, etc. Ok; vayamos ubicandonos: al DIV principal, lo llamaremos: PRINCIPAL, que original, nó?; a los otros cuatro, les daremos el nombre de los monitos: BETO, MAX, ITZEL y LALO. Cada uno de los cuatro tendrá estilo propio, vía CSS. La imagen transparente que usaremos, será la misma que en los ejemplos 6 y 7. Casi lo olvido; como no queremos que el texto que emerga, aparezca justamente en la posición que dejaría la imagen (pues taparía la cara a los monitos), le colocaremos algunos saltos de linea antes del texto, para que lo empuje hacia abajo; así no daríamos estilo extra al texto; tambien, para que no se pierda el texto en la imagen de fondo, le colocaremos fondo negro, claro, con excepción de los saltos de linea, pues nos daría el mismo resultado que no queremos; tapar la cara de los monitos; esto será con el CLASS="FONDOTEXTO", color blanco con #FFFFFF, tamaño de 12pt, y centrado con CENTER, por si acaso. Esto quedaría así (un poco largo..): <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:12pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:12pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {color:#FFFFFF;display:block;text-decoration:none; background-color:transparent;display:inline;}  .cambiar  a:hover big {display:none;text-decoration:none;} .principal {width:800px;height:600px;position:absolute;top:0px;left:50%;margin-left:-400px; background-image:url(http://i.imgur.com/vjcgB.jpg); background-repeat:no-repeat;background-position:top center;border: 5px solid; color:red;} .beto {position:absolute;top:150px;left:50%;margin-left:-280px} .max {position:absolute;top:50px;left:50%;margin-left:-140px} .itzel {position:absolute;top:110px;left:50%;margin-left:65px} .lalo {position:absolute;top:50px;left:50%;margin-left:230px} .fondotexto {background-color:000000;} </style> <div class="principal"> <img src="http://i.imgur.com/45f8j.gif" width="800px" height="600px" /> <div class="beto"> <div class="cambiar"> <a href=""><big> <img src="http://i.imgur.com/Spf0g.gif" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Roberto Noriega L.<br /> (Beto Lira)<br /> Bajo.<br /> <br /> 5861-4076<br /> cel. 04455 1536-2287<br /> cel. 04455 3976-4346<br /> [email protected]</div></center></span></a> </div> </div> <div class="max"> <div class="cambiar"> <a href=""><big> <img src="http://i.imgur.com/Spf0g.gif" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Marcelino Pedraza V.<br /> (Max Hurbano)<br /> Batería y Voz.<br /> <br /> 5877-6215<br /> 2602-8375<br /> cel. 04455 2555-4485<br /> [email protected]</div></center></span></a> </div> </div> <div class="itzel"> <div class="cambiar"> <a href=""><big> <img src="http://i.imgur.com/Spf0g.gif" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Itzel Anaid<br /> (Chela)<br /> Guitarra.<br> <br /> [email protected]</div></center></span></a> </div> </div> <div class="lalo"> <div class="cambiar"> <a href=""><big> <img src="http://i.imgur.com/Spf0g.gif" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">E. Eduardo Carreón<br /> (Huevo)<br /> Guitarra leader.<br /> <br /> 5877-5410<br /> cel. 04455 2989-7393<br /> cel. 04455 3507-7908<br /> [email protected]</div></center></span></a> </div> </div>   Posteado por Max Hurbano para Taringa.net Funcionó..?? Vamos muy bien. Recuerden que centramos el PRINCIPAL de forma absoluta, para que no nos quede en la esquina superior, sino al centro, y para que los otros DIVs nos queden exactamente donde queremos, y para que no se extienda el borde en toda la página. Tambien cabe tener en cuenta que puede no quedar hasta arriba, pues si ya tenemos elementos colocados en el flujo HTML, desearemos bajarlo un poco, o mucho; depende de tí. Haremos esto, y cambiaremos el texto del primer monito, por una imagen, vale? es todo lo que cambiaremos; lo demás será igual; solo por ocio... bajaremos el DIV 100 pixeles con: TOP:100PX, y colocaremos la imagen como en el ejemplo 2; imagen por imagen, la segunda con saltos, recuerdas?. Quedaría así: <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:12pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:12pt;font-weight:normal; text-decoration:none;display:inline;}  .cambiar a span {display:none;text-decoration:none;}  .cambiar a:hover span {color:#FFFFFF;display:block;text-decoration:none; background-color:transparent;display:inline;}  .cambiar  a:hover big {display:none;text-decoration:none;} .principal {width:800px;height:600px;position:absolute;top:100px;left:50%;margin-left:-400px; background-image:url(http://i.imgur.com/vjcgB.jpg); background-repeat:no-repeat;background-position:top center;border: 5px solid; color:red;} .beto {position:absolute;top:150px;left:50%;margin-left:-280px} .max {position:absolute;top:50px;left:50%;margin-left:-140px} .itzel {position:absolute;top:110px;left:50%;margin-left:65px} .lalo {position:absolute;top:50px;left:50%;margin-left:230px} .fondotexto {background-color:000000;} </style> <div class="principal"> <img src="http://i.imgur.com/45f8j.gif" width="800px" height="600px" /> <div class="beto"> <div class="cambiar"> <a href=""><big> <img src="http://i.imgur.com/Spf0g.gif" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto"> <img src="http://i.imgur.com/QXHKK.jpg" width="150px" height"200px"/> </div></center></span></a> </div> </div> <div class="max"> <div class="cambiar"> <a href=""><big> <img src="http://i.imgur.com/Spf0g.gif" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Marcelino Pedraza V.<br /> (Max Hurbano)<br /> Batería y Voz.<br /> <br /> 5877-6215<br /> 2602-8375<br /> cel. 04455 2555-4485<br /> [email protected]</div></center></span></a> </div> </div> <div class="itzel"> <div class="cambiar"> <a href=""><big> <img src="http://i.imgur.com/Spf0g.gif" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Itzel Anaid<br /> (Chela)<br /> Guitarra.<br> <br /> [email protected]</div></center></span></a> </div> </div> <div class="lalo"> <div class="cambiar"> <a href=""><big> <img src="http://i.imgur.com/Spf0g.gif" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">E. Eduardo Carreón<br /> (Huevo)<br /> Guitarra leader.<br /> <br /> 5877-5410<br /> cel. 04455 2989-7393<br /> cel. 04455 3507-7908<br /> [email protected]</div></center></span></a> </div> </div> Posteado por Max Hurbano para Taringa.net Listo..!! Todo claro? Podemos seguir adelante. 9.- 7 enlaces distintos (o más, o menos, segun necesidad), con una sola imagen: Veamos: esto se puede hacer con imagen con transparencia (entre un ícono y otro), o con fondo de color. Lo haremos igual que en el ejemplo anterior, solo que en lugar de DIV, usaremos un TABLE (tabla), y le colocaremos de fondo la imagen GIF con los 7 íconos, a los cuales asignaremos un enlace a cada uno. Se usará una tabla, para que nos permita separar el espacio que dedicaremos a cada ícono en TDs (celdas) de igual tamaño, dentro de una misma TR (columna). Para esto no necesitaremos posicionar las TDs, pues la tabla se encarga de colocar las celdas en perfecta linea; en caso de ser una imagen con íconos no alineados, podemos usar DIVs, como anteriormente vimos; en lugar de usar el elemento CAMBIAR, solo se le asigna un enlace a la imagen "invisible" que estará (en lugar del texto del link) sobre cada uno de los íconos; recuerdas?. La tabla sí la posicionaremos, de forma absoluta, para que no nos quede en la esquina superior; usando: POSITION:ABSOLUTE TOP, LEFT, y MARGIN-LEFT; ahora lo haremos todo con "EN LINEA"; es decir, dentro de la misma etiqueta TABLE. Como decíamos, la imagen de fondo no se puede redimensionar; tambien usaremos una pre-dimensionada, y la centraremos tambien dentro de la tabla. Usaremos tambien, una imagen transparente, ahora de 16x16 pixeles, pues nuestros íconos serán regulares en sus lados; aunque dependiendo de tus íconos, podrías variar el tamaño. *si en tus ejercicios requieres alguna medida extra de imagen, escribeme y te la subo a mi servidor, y te mando el link.* Cabe mencionar que si bien esto no se usaría mucho, es util cuando quieres colocar varios íconos como enlaces, pero no quieres sobrecargar tu página con tantas imágenes, capicci? Atención especial a la etiqueta CENTER; es para asegurar que nada se nos mueva a su antojo... **En caso de tener ya un DIV o TABLE contenedor de todos nuestros elementos, como sucede en Myspace, y muchos sitios gratuitos, no es tan necesario posicionar absolutamente, pues todo el contenido de la página, estaría dentro de el contenedor; normalmente (o casi), con 800 pixeles de ancho** Menos bla bla bla; más accion; así estaría la cosa: <table style="background-image: url(http://i.imgur.com/7aH6M.gif); background-repeat: no-repeat; background-position: center center;position:absolute;top:300px;left:50%;margin-left:-260px;"> <center><tr><td width="74px" height="67px"> <a href="http://www.myspace.com/maxhurbano"> <img src="http://i.imgur.com/CoKOR.gif" width="74px"/></a>              </td>             <td width="74px" height="67px"> <a href="http://www.sonico.com/maxhurbano"> <img src="http://i.imgur.com/CoKOR.gif" width="74px"/></a>              </td>             <td width="74px" height="67px"> <a href="http://www.twitter.com/maxhurbano"> <img src="http://i.imgur.com/CoKOR.gif" width="74px"/></a>              </td>             <td width="74px" height="67px"> <a href="http://www.hi5.com/friend/p228519705--Max_Hurbano--html"> <img src="http://i.imgur.com/CoKOR.gif" width="74px"/></a>              </td>             <td width="74px" height="67px"> <a href="http://www.facebook.com/profile.php?id=100000705331834"> <img src="http://i.imgur.com/CoKOR.gif" width="74px"/></a>              </td>             <td width="74px" height="67px"> <a href="http://cid-25640446dc80d9c0.profile.live.com/"> <img src="http://i.imgur.com/CoKOR.gif" width="74px"/></a>               </td>             <td width="74px" height="67px"> <a href="http://www.youtube.com/user/maxhurbano"> <img src="http://i.imgur.com/CoKOR.gif" width="74px"/></a>             </td> </tr></center> </table> Posteado por Max Hurbano para Taringa.net Listo..!! Solo basta dar los clicks necesarios para ver si funcionan los enlaces..!! Y para que no se nos olvide que las imágenes "invisibles" están ahí, podemos arrastrar el mouse desde arriba a abajo de la página, y las veremos; azules (negras en la imagen GIF de abajo), pero estarán; esto es bueno para verificar que estén en su lugar exacto. 10.- Barra deslizante en imagen, texto, segmento, tabla etc.: Bueno, esto es un poco más sencillo; veamoslo en un texto amplio. Necesitaremos crear un DIV con las dimensiones que necesitamos; obviamente, mayores al espacio que ocupará el texto, de otra forma, no sería necesario; y mediante ESTILO EN LINEA, darle el atributo OVERFLOW, para que nos aparezca la barra deslizante, y así no nos ocupe tanto, y aún así, podamos leér todo de alguna forma; tambien centraremos el texto, colocaremos fondo amarillo, y borde de 3 pixeles, negro; todo esto, dentro de la misma etiqueta; verdad que es más practico? pero no siempre es lo mejor, jejeje. Cabe mencionar que la barra deslizante, podemos ponerla por default, abajo y a la derecha (OVERFLOW:VISIBLE; ), o de forma automatica; solo si fuera necesario: (OVERFLOW:AUTO; ), y tambien se puede especificar si quieres que no aparezca (OVERFLOW:HIDDEN; ), o especificar cual aparecerá (VISIBLE) y cual nó (HIDDEN), mediante los sub-atributos "X" e "Y". EJEMPLO: El DIV que haremos, solo tendrá barra a la izquierda, pues por default el texto hace sus propios saltos de linea, pero en caso de que fuera una imagen, daríamos la orden de que solo apareciera a la derecha: OVERFLOW-Y:VISIBLE; o AUTO y OVERFLOW-X:HIDDEN; aunque esto está condicionado a la versión de CSS; al parecer funciona bien solo en CSS3; bueno, para texto nos irá bien. El texto lo extraeremos de la página de una banda de rock en México, desconocidos, pero son amigos, que caray..!! La cosa sería de esta manera: <div style="overflow: auto; width: 400px; height: 150px; text-align:center; background-color:gold; border: 3px solid #000000;"> Tabacco Blues nace en el año 2002, formado, en aquel entonces, por: Ivan Martin Carreón (talivan)/bateria. Edgar Eduardo Carreón (huevo)/guitarra lider. y Alejandro Sanchez (chore) /voz y guitarra. De ahí hasta mediados de el 2005 se mantuvo esta base tocando principalmente covers, en fiestas y cotorreos particulares. A finales de ese año, tras la salida de El Chore, se integra Daniel Martín moreno (kukin). A principios de el 2006 se ausenta El Huevo, se integra Edgar Hernandez, y por ahi de abril llega Max Hurbano, integrando por primera vez, el Bajo al grupo. Solo unos meses despues, sale de la banda El Kukin, para formar su propio grupo, y con algunos dias de diferencia, Edgar hernandez. A partir de ahí, Max Hurbano pasa a ser voz y guitarra de el grupo,(y el que va por las chelas); regresa Edgar Eduardo, al requinto, y comienza la nueva era de Tabacco Blues, con musica original de el grupo, y temas propios y fusiles recreados por Max Hurbano, quien venia de ser bajista de Jendell, y baterista de La Falsa Sociedad, y La Dualidad. Despues de mucho tiempo esfuerzo y desvelos logran terminar lo que es su primera produccion discografica; algo totalmente sencillo y casero, pero con mucho empeño, cariño y respeto para toda la banda que le late no solo el buen Rock, sino tambien la letra con mensaje, con sentido, con "Feeling" La mala... es que al ser produccion casera, solo algunos podran tenerlo en su coleccion de discos, pues no hay distribucion. Pero en ésta pagina habrá actualizaciones periodicas, para alternar todas y cada una de las canciones de ésta singular y rara banda. Ahora con nuevos elementos a bordo: Beto Lira (ex-Jendell, y ex-La Dualidad) en el bajo, (la separación de el "Talivan" ), y la más reciente adicción de Itzel Anaíd (Chela) en la lira, y Azucena (Azúcar) en los coros, ahora Max Hurbano pasa a ser baterísta y voz(y el de las chelas), en espera de que algun Batako aparezca; y con la firme propuesta de mejorar lo yá hecho), y esperando lo que venga, Tabacco Blues es una banda de Rock-R&B, sin complejos de ningun tipo. </div> Posteado por Max Hurbano para Taringa.net Sí, ya se que nos quedó en la esquina, pero lo bueno que ya sabemos moverlo al centro; ok, lo haremos, pero tambien aprovecharemos para cambiar el texto por una imagen, vale; una enorme, una con 4 monitos, recuerdas? para que nos aparezcan las dos barras. Recuerda que si solo queremos una, sabemos ya como hacerlo. Esto sería así: <div style="position:absolute;top:200px;left:50%;margin-left:-200;overflow: auto; width: 400px; height: 150px; text-align:center;background-color:gold; border: 3px solid #000000;"> <img src="http://i.imgur.com/vjcgB.jpg"/> </div> Posteado por Max Hurbano para Taringa.net Listo; fué sencillo. Y bueno, para una página completa, se usa <BODY STYLE=OVERFLOW:AUTO;>, y para un segmento de HTML, solo arma tu DIV con OVERFLOW, y mete ahí todo lo que quieras, antes de la etiqueta correspondiente de cierre: </DIV>. Y luego...., vamos a lo que sigue; falta menos. 11.- Cambiar de tamaño videos de Youtube y Slideshow de fotos: Para este ejemplo, usaremos un video de Youtube, copiaremos el codigo que nos facilita, y modificaremos su tamaño; tambien lo centraremos, pues como sabemos, no hay contenedor y se nos irá a la esquina; lo haremos tambien "EN LINEA", dentro de <OBJECT STYLE=....>. No esta de más decir que será el mismo proceso con algun Slideshow de fotos, lo unico que hay que hacer, es buscarlos elementos WIDTH y HEIGHT dentro del codigo del video o el Slide, y modificarlos a como mejor nos parezca; cabe mencionar que estos elementos, aparecen 2 veces en los videos y hasta 4 veces en algunos Slides; así que habrá que buscar bien, y cambiar los valores, tambien toma en cuenta que no siempre el orden es WIDTH HEIGHT; a veces es contrario en el primer codigo, o en el segundo, OJO con eso, solo para que no pongamos valores cambiados; no es tan grave; a fin de cuentas, todo tiene remedio. El codigo del video original, será este; puedes pegarlo en tu documento para ver su tamaño original, y luego ya modificado, verás la diferencia; por cierto, el video es un post aparte; te podría servir. Veamos: <object width="425" height="344"><param name="movie"  value="http://www.youtube.com/v/C9j5vt4bFK4?fs=1& hl=es_ES&rel=0&color1=0x5d1719&color2=0xcd311b"> </param><param name="allowFullScreen" value="true"> </param><param name="allowscriptaccess" value="always"> </param><embed src="http://www.youtube.com/v/C9j5vt4bFK4?fs=1&hl=es_ES&rel=0& color1=0x5d1719&color2=0xcd311b"  type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> Bien; ahora a centrarlo (esto tal vez no lo necesites, recuerdas?), y darle un tamaño de, digamos..., 800x600 pixeles, manos a la obra: <object style=position:absolute;top:100px;left:50%;margin-left:-400px; width="800" height="600"><param name="movie"  value="http://www.youtube.com/v/C9j5vt4bFK4?fs=1&hl=es_ES&rel=0& color1=0x5d1719&color2=0xcd311b"> </param><param name="allowFullScreen" value="true"> </param><param name="allowscriptaccess" value="always"> </param><embed src="http://www.youtube.com/v/C9j5vt4bFK4?fs=1&hl=es_ES&rel=0& color1=0x5d1719&color2=0xcd311b"  type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="800" height="600"></embed></object> Posteado por Max Hurbano para Taringa.net Que tal.., lo ves casi igual..?? prueba con 1200x900..!! Verdad que se nota..?? Se me acabó el espacio; solo faltaban tres o cuatro; ok, haré la 2a parte sobre los puntos 12, 13, 14 y 15. Y lo que vaya saliendo...... Este es el link de la segunda parte: PARTE 2 Si aún con todos estos ejemplos, sigues teniendo alguna duda, no te preocupes; para que son los amigos..?? Puedes mandar un MP con tus dudas, o escribir a [email protected] o comentar abajo, y haremos hasta lo imposible por solucionarlas; no lo dúdes. Hablando de estilo; comentar habla bien de tí..!!

Así es gente. Tal vez muchos no lo sepan, pero Hotmail otorga a sus usuarios, la posibilidad de almacenar hasta 25GB en archivos y carpetas (comprimidas), de hasta 50MB por cada uno; ya sé que es menos que en RapidShare y mucho menor a otros Hostings publicos, pero tambien es cierto que a algunos les será muy util, pues no todos tenemos la costumbre de subír archivos a algún Hosting de forma cotidiana, para compartirlos en nuestros post; y tal vez solo necesiten almacenar alguna dato, sin la necesidad de entrar en complicaciones. Por otra parte, sería de mucha utilidad para quien (como yo), necesite guardar algunos archivos importantes (o MegaImportantes), que no podría restaurar en caso de algún fallo en su Ordenador o en su disco duro; o tal vez, no quiera tenerlos en su Ordenador, por X o Y razón ; o incluso, para evitar que sea eliminado, por afectar intereses de terceros (Sony, Adobe, Nero, Microsoft, Apple, 20th Century FOX, etc); como sucede en muchos Hostings (no es mi caso afortunadamente; trato de no postear cosas o links de terceros). *Cabe mencionar que SkyDrive nos ofrece la posibilidad de almacenar archivos tanto publicos como privados; las carpetas privadas, tienen un ícono de candado (nadie más podrá ver el contenido); mientras que las carpetas publicas (para compartir archivos), tienen un ícono de el mundo (globo terráqueo)* Aunado a esto, la posibilidad de almacenar sus datos durante el tiempo que decida (algunos hostings tienen limitación en este respecto) Vamos al grano. Con tu sesión abierta en Windows Live Hotmail (www.hotmail.com), coloca tu mouse sobre el icono de Windows Live; aparecerá un cuadro emergente. Damos click en "SkyDrive" Nos aparecerá una ventana con solo 3 o 4 carpetas (ya iremos creando más). A la derecha, vemos la barra indicadora de lo que vayamos almacenando (en mi caso, tengo libres 24.35 de 25GB disponibles, -importante no significa gran tamaño, jejeje.-) damos click sobre "Agregar archivos", que está encima de la zona de carpetas. Seleccionamos "Nueva carpeta" o alguna existente (publica para compartir o privada para almacenar) Colocamos un nombre para la nueva carpeta, y damos click en "Siguiénte" Para empezar a cargar nuestro archivo (o varios a la vez), damos click sobre las letras en verde "Selecciónalos de tu equipo" Selecciona el o los archivos a cargar, y dá click en "abrir" Empezará a cargarlos automaticamente. Al terminar, dá click en "Continuar" Ahora, para poder obtener el link (en caso de que queramos compartir nuestro -s archivo -s), damos click en "Compartir", y en "Obtener un Vínculo", en el cuadro emergente. Dar click sobre el link en cuestión, para que se convierta en texto copiable, y luego en "copiar" en el cuadro emergente. Lsto; ya podrás compartir el link de tu archivo publico sin ningún problema (si es privado, podrás copiarlo para que lo guardes en lugar seguro, y si lo compartes, tendrás que otorgar permisos especiales a esta persona) Ya que andas por acá, lgual podrías comentar algo; gracias de antemano.

Debido a que llevo más de año y medio y casi 20 posts en Taringa y aún soy novato, me decidí a hacer este post con algunos trucos en HTML y CSS (a ver si ahora sí lo logro ). Los cuales tuve que aprender mientras luchaba por hacer de mi Myspace, un lugar algo decente (según mi punto de vista); cosa nada sencilla..!! peor aún, con el nuevo Beta 3.0; una real porquería. Fueron horas y horas y HORAS de busqueda y experimentación; prueba/error, modificar, reinventar, redescubrir, recopilar, mezclar, desencriptar y desenterrar algunos obscuros secretos del HTML (HiperText Markup Language) y CSS (Cascade Style Sheets); claro que no inventé nada, pero créanlo: era poco menos que imposible encontrar algo decente en internet. Ojalá el tiempo en realizar este post, no sea tanto como fué aprenderlo Este post no contiene ni una gota de Javascript, pues además de que hay muchos sitios y hostings que no lo permiten, o no lo soportan, me he topado con decenas de posts, aquí en T! que contienen trucos HTML y CSS que en realidad es Javascript Y como se comentaba en uno de estos post sobre el tema: el JavaScript no tiene trucos, es Javascript y punto. NECESITAREMOS: Bloc de notas. Navegador de Internet (IExplorer, Opera, Chrome, Firefox, Safari, Netscape, etc.) Mente despejada. Ojos bien abiertos (cualquier letra, punto o coma mal puestos, dará mal resultado.) Ir al baño antes de empezar APRENDEREMOS: 1.- Cambiar texto por otro 2.- Cambiar imagen por otra 3.- Cambiar texto por imagen 4.- Cambiar imagen por texto 5.- Cambiar texto invisible (transparente) por texto visible 6.- Cambiar texto invisible (transparente) por imagen 7.- Imagen (invisible transparente) a texto/imagen 8.- Cuandro de texto o imagen emergente: 9.- 7 enlaces distintos con una sola imagen: 10.- Barra deslizante en imagen, texto, segmento, tabla etc.: 11.- Cambiar de tamaño videos de Youtube y Slideshow de fotos: 12.- Imagen de fondo a un Slideshow: 13.- Colocar varios videos de Youtube en un DIV con barra deslizante: 14.- Amigos y comentarios Myspace en div con barra deslizante (solo perfiles 1.0 y 2.0): 15.- Colocar reproductor (es) Myspace-Music completo (s): NOTA: Como aquí en el foro no podemos insertar HTML, mucho menos CSS, no podremos ver las pruebas de los codigos aquí escritos; y crear ejemplos en páginas externas, es algo complejo y casi innecesario (aunque si alguien lo pide, no me es imposible hacerlo). Por eso será más agil, si queremos probar alguno, que los copiemos en el Bloc de notas, guardemos ese documento con extensión .html y lo abramos con nuestro navegador. EJEMPLO: ARCHIVO > GUARDAR > seleccionamos abajo, donde dice "Documento de texto (*.txt)": TODOS LOS ARCHIVOS (*.*) > ESCRIBIMOS: prueba-de-codigos.html o el nombre que decidan. > GUARDAMOS > ABRIMOS con doble click para que se abra con el navegador predeterminado, o click derecho y elegimos con cual lo queremos abrir. RE-NOTA: Todos los nombres que yo utilíce dentro de <style>.....</style> y en los elementos CLASS="" NAME="" etc. del HTML que no reconozcas, son solo de ejemplo; tú puedes colocar el nombre que quieras, de acuerdo a como quieras reconocerlo en tus hojas de estilos o codigos HTML. Solo las etiquetas HTML tienen su nombre real; el cual hay que respetar al pie de la letra.. ANTES DE INICIAR: Cabe recordar que cuando se usa estilo en HTML, hay dos formas genericas de hacerlo (además de la que enlaza a una hoja externa): entre las etiquetas <style>...</style> que para fines practicos llamaremos CSS; las cuales se colocan de preferencia entre las etiquetas <head>.....</head> (aunque he llegado a colocarlas dentro del BODY ) EJEMPLO: <html> <head> <title>Título de la página</title> <style>.....</style> </head> La segunda, llamada "Estilo en linea" que llamaremos ESTILO(S) EN LINEA, es dentro de la misma etiqueta a la que queremos aplicarle el estilo, utilizando el elemento STYLE, el signo = y entre comillas, el estilo a insertar: ATRIBUTO : VALOR ;. EJEMPLOS: 1.- <body style="text-align:center;"> Centra el texto en todo el BODY. 2.- <table style="background-color:#000;border:2px;"> Coloca fondo negro a la tabla, y la bordea a 2 pixeles. 3.- <span style="color:transparent;border:none;"> Invisibiliza esa parte del texto, imagen, o segmento de algo. 4.- <a style="color:red;background-color:black;"> Coloréa un enlace con rojo y fondo negro. 5.- <div style="width:800px;position:absolute;top:0px;left:50%;margin-left:-400px;"> Centra de forma absoluta un DIV, y lo coloca al principio aunque haya algo más debajo. INICIO: 1.- Cambiar texto por otro: En este ejemplo substituiremos un texto por otro, al pasar el mouse (efecto Hover). Hay que poner especial atención a esta explicación, pues es el metodo que utilizaremos en varios de los siguientes ejemplos. Para esto crearemos un DIV con 2 lineas de texto, solo que solo se verá una a la vez; y aunque estará una debajo de la otra, aplicaremos el valor de "none" al atributo "display", para que cuando una aparezca, la otra nó, y así estarán alternativamente en el mismo lugar; tambien aplicaremos estilo en linea al DIV, para centrar el texto, recuerdan..?? Para nuestro proposito, utilizaremos 2 etiquetas válidas en HTML: BIG y SPAN, y color rojo y azul respectivamente, para diferenciar el estilo entre una y otra linea. Tecnicamente serán 2 enlaces, así que como queremos que sea como texto plano, daremos estilo para que NO aparezcan SUBRAYADOS. Y como no queremos que nos envíe a otra página dejaremos vacío el espacio donde debiera ir la dirección del enlace, de esta forma, si se dá click por error, nos abrirá nuevamente la misma página (tambien podrían poner un link, aunque ahora la idea es solo cambiar texto) Tambien será de suma importancia colocar el atributo BACKGROUND-COLOR y el valor TRANSPARENT a ".cambiar a:hover span", para evitar que aparezca algún color de fondo al pasar el mouse, y DISPLAY:INLINE; para que el hover sea solo sobre la imagen o el texto; nó en bloque; es decir, que el link no ocupe todo el ancho del DIV o página, aunque hayamos especificado el ancho; detallitos, pero importantes en demasía. Y solo para fines de buena visibilidad, colocaremos al texto entre etiquetas de negrita <b>, para que lo veamos un poco mejor; aunque tambien se puede definir el tamaño; en caso de utilizar encabezados (h1,h2,h3, etc), por default el DISPLAY pasará a BLOCK (en bloque). Por último: recuerda que no es necesario que armes el documento HTML completo (aunque bien puedes hacerlo), solo copia y pega el codigo que ves (CSS y HTML juntos), tal como está completo al final de cada ejemplo; y guardalo como .html Primero en CSS (lo que iría entre <style>....</style>: .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;} .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;} .cambiar a span {display:none;text-decoration:none;} .cambiar a:hover span {color: #0000CC;display:block;text-decoration:none; background-color:transparent;} .cambiar a:hover big {display:none;text-decoration:none;} Después, en HTML (lo que vá dentro de <body>: <div class="cambiar" style="text-align:center;"> <a href=""> <big> <b>Este será el primer texto que aparezca; sí, primero.</b> </big> <span> <b>Esta será la segunda linea de texto; sí, la segunda</b> </span> </a> </div> Listo: el codigo completo sería: <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a {color:#00CCCC; font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a span {display:none;text-decoration:none;} .cambiar a:hover span {color: #0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;} .cambiar a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style="text-align:center;"> <a href=""> <big> <b>Este será el primer texto que aparezca; sí, primero.</b> </big> <span> <b>Esta será la segunda linea de texto; sí, la segunda.</b> </span> </a> </div> Copia y pega en tu Bloc de notas, guardalo con extensión .html abrelo, y pasa el mouse sobre la linea que ves, la primera; cambiará de texto y color. Todo bien...., sorprendente, nó..?? y es solo el principio. Seguimos... 2.- Cambiar imagen por otra: Este ejemplo es tecnicamente identico al anterior; al CSS será más breve, pues requiere menos atributos/valores. El cambio sustancial será en el HTML; aunque solo substituiremos las lineas de texto por imágenes y aplicaremos estilos en la misma etiqueta; las cuales deberan ser alojarlas entre su respectiva etiqueta: <img src="IMAGEN"/> y a las que solo bordearemos y definiremos su tamaño (con WIDTH y HEIGHT) en caso de ser diferente, pues si el alto no es el mismo, nos empujará momentaneamente hacia abajo, lo que este "Abajo"; lo mismo con el ancho Esto lo haremos, repito: en la misma etiqueta (Estilos en linea); procedamos: <style> .cambiar big { text-decoration:none;display:inline;} .cambiar a { text-decoration:none;display:inline;} .cambiar a span {display:none;text-decoration:none;} .cambiar a:hover span {text-decoration:none;background-color:transparent;display:inline;} .cambiar a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style="text-align:center;"> <a href=""> <big> <img src="http://i958.photobucket.com/albums/ae69/pablodj22/Web%20PABLODJ22/taringa_logo.jpg" width="300px" border="3px"/> </big> <span> <img src="http://s1.***/imagen/1820816taringa-fc.png" width="300px" border="3px"/> </span> </a> </div> Resultó..?? Muy bien; vamos con lo que sigue..!! Pero antes: Cabe mencionar que se puede utilizar el mismo CSS para imágenes y texto; solo es cosa de colocar los atributos y valores necesarios para los dos casos. Para aplicar estos 2 ejemplos juntos, solo sería cuestión de agregar el estilo especificado en el segundo, al CSS del primer ejemplo, en caso de distintos atributos/valores. En este caso no cambiamos practicamente nada, pues el estilo de las imágenes lo aplicamos en linea (aunque bien pudo ser en la zona de CSS), solo utilizamos el CSS indispensable, para darle a la imagen el comportamiento de enlace (s), como en el caso del texto así que solo unimos el HTML de los 2 con el mismo CSS de el primer ejemplo. Solo como prueba; sería así: <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a span {display:none;text-decoration:none;} .cambiar a:hover span {color: #0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;} .cambiar a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style="text-align:center;"> <a href=""> <big> <b>Este será el primer texto que aparezca; sí, primero.</b> </big> <span> <b>Esta será la segunda linea de texto; sí, la segunda.</b> </span> </a> </div> <br /><!--eso es un salto de linea; o punto y aparte--> <div class="cambiar" style="text-align:center;"> <a href=""> <big> <img src="http://i958.photobucket.com/albums/ae69/pablodj22/Web%20PABLODJ22/taringa_logo.jpg" width="300px" border="3px"/> </big> <span> <img src="http://s1.***/imagen/1820816taringa-fc.png" width="300px" border="3px"/> </span> </a> </div> Prueba superada..?? Ahora sí; lo que sigue: 3.- Cambiar texto por imagen: Procedimiento: usemos el primer CSS, y armaremos un HTML "Mixto", por llamarlo así, con un texto con saltos de linea, e imagen sin borde; solo daremos ancho de 300px. El resultado sería este: <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a span {display:none;text-decoration:none;} .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;} .cambiar a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style="text-align:center;"> <a href=""> <big> <b>Este es el texto que servirá<br /><br /> de referencia hacia la<br /><br /> imagen azul que<br /><br /> pondremos como<br /><br /> efecto HOVER</b> </big> <span> <img src="http://i958.photobucket.com/albums/ae69/pablodj22/Web%20PABLODJ22/taringa_logo.jpg" width="300px"/> </span> </a> </div> Todo bien..?? Siguiente: 4.- Cambiar imagen por texto: Lo mismo, pero diferente Quise decir que es el mismo procedimiento, pero a la inversa; el mismo CSS y al HTML anterior le colocamos el texto donde ahora está la imagen´y la imagen donde ahora está el texto. Espero que no te estes haciendo muchas bolas; recuerda que es solo para fines practicos; si prefieres ir armando cada uno de los CSS y HTML, es muy bueno como ejercicio, aunque si aún se te complica memorizar todo, mejor copia y pega; eso sí, cuidando que sea solo lo que se va indicando, si nó, se revolverá. Ovbio si te parece, ve cambiando de imagen o texto (enunciados), como mejor te parezca.. Ahora quedaría así: <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a span {display:none;text-decoration:none;} .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;} .cambiar a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style="text-align:center;"> <a href=""> <big> <img src="http://i958.photobucket.com/albums/ae69/pablodj22/Web%20PABLODJ22/taringa_logo.jpg" width="300px"/> </big> <span> <b>Este es el texto que ahora<br /><br /> substituye a la imagen<br /><br /> que ahora ya no<br /> <br /> ves; esa, la de el<br /><br /> cuadrito con la T!, que parece<br /><br /> la de algún foro, recuerdas..??<br /><br /> será.....T........??</b> </span> </a> </div> Excelente..!! Ya diste click, solo para ver que pasa..?? Animo; confía en mí Bueno, allá tú; continuemos: 5.- Cambiar texto invisible (transparente) por texto visible: Ya sé que parezco perezoso por seguir utilizando el COPY/PASTE, pero créanme, es para fines practicos y de memorización; ya habrá tiempo y astucia para que empiecen a experimentar por su cuenta; hay que pensar en todos los visitantes por ahora. Ahora tomemos el primer ejemplo completo, y lo unico que haremos extra será darle estilo en linea, tambien posible en CSS, dentro de la etiqueta <b>, para que nuestra primera linea sea texto color transparente (vale, tambien cambiaremos algunas palabrillas). Recuerda que si quieres verificar que se encuentra ahí, solo arrastra el mouse desde arriba de la página y aparecerá tu texto invisible, ahora visible en color blanco. Esto sería a las de acá: <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a span {display:none;text-decoration:none;} .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;} .cambiar a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style="text-align:center;"> <a href=""> <big> <b style="color:transparent">Este será el primer texto que aparezca;<br /> sí, primero. <br /> Peeero, ahora será invisible;<br /> puedes creérlo..??.</b> </big> <span> <b>Esta será la segunda linea de texto; sí, la segunda<br /> esta si podras verla.<br /> Peeeero, solo al pasar<br /> el mouse encima.</b> </span> </a> </div> Lo encontraste..?? Jajaja. Listo; ahora veamos como se transparenta en CSS; será rapido; algo así: Adivinaste, solo se cambia el #CC0000 (Rojo), por el TRANSPARENT (transparente), en la primera linea; en ".cambiar big". <style> .cambiar big {color:transparent;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a span {display:none;text-decoration:none;} .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;} .cambiar a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style="text-align:center;"> <a href=""> <big> <b>Este será el primer texto que aparezca;<br /> sí, primero. <br /> Peeero, ahora será invisible;<br /> puedes creérlo..??.</b> </big> <span> <b>Esta será la segunda linea de texto; sí, la segunda<br /> esta si podras verla.<br /> Peeeero, solo al pasar<br /> el mouse encima.</b> </span> </a> </div> 6.- Cambiar texto invisible (transparente) por imagen: Lo siento; otra vez COPY/PASTE ahora al ANTERIOR (ya sea invisivilizado via "en linea", o el de ".cambiar big" ). Solo insertamos una imagen, con su etiqueta correspondiente, y digamos: 250 pixeles de ancho y un borde de 10px..!! en lugar de el segundo enunciado (texto). Veamos: <style> .cambiar big {color:transparent;font-family:trebuchet ms;font-size:14pt;font-weight:normal ;text-decoration:none;display:inline;} .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a span {display:none;text-decoration:none;} .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;} .cambiar a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style="text-align:center;"> <a href=""> <big> <b>Este será el primer texto que aparezca; sí, primero. <br /> Peeero, ahora será invisible;<br /> imagéname....</b> </big> <span> <img src="http://i76.photobucket.com/albums/j26/alixrose23/gwyneth-paltrow-iron-man-premieres.png" width="250px" border="10px" /> </span> </a> </div> Te funcionó..?? Que tal con la imagen...., creiste que nunca la cambiaría..?? Jajaja. Un respiro......, y continuemos. 7.- Imagen (invisible transparente) a texto/imagen: Ahora haremos lo que en el ejemplo anterior, pero en lugar de texto invisible, utilizaremos imagen invisible. Ya se que parece que estamos haciendo como operaciones tipo A+B, C+D, A+D, C+B, D+B, etc, pero habrá quien no sepa o no imagine, que lo que se hace en el primer o segundo ejemplo, es posible hacerlo con otros elementos, o a la inversa, etc. Manos a la obra: Esta vez utilizaremos una imagen GIF transparente (sin borde, claro), de 16x21 pixeles la cual agrandaremos mediante WIDTH para que abarque algo así como 150x200 (nada difícil), alojada en un servidor mío; el cual es para uso publico, por cierto. Esta imagen y el proceso, será utilizado en el siguiente ejemplo; nó, no es a la inversa; será algo un poco más complejo; bueno, procedamos: Recuerda que para verificar que está ahí, puedes arrastrar el mouse desde arriba de la página, hacia abajo al centro de la página; la imagen estará ahí. <style> .cambiar big {color:transparent;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a span {display:none;text-decoration:none;} .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;} .cambiar a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style="text-align:center;"> <a href=""> <big> <img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" /> </big> <span> <b>Este texto aparecerá<br /> al pasar el mouse sobre la<br /> imagen que no se vé; es decír,<br /> que es transparente.</b> </a> </div> Ahora imagen transparente por imagen visible: <style> .cambiar big {color:transparent;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:14pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a span {display:none;text-decoration:none;} .cambiar a:hover span {color:#0000CC;display:block;text-decoration:none; background-color:transparent;display:inline;} .cambiar a:hover big {display:none;text-decoration:none;} </style> <div class="cambiar" style="text-align:center;"> <a href=""> <big> <img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" /> </big> <span> <img src="http://www.lapastillaroja.net/archives/Firefox_T-Shirt.jpg" width="150px" /> </a> </div> 8.- Cuandro de texto o imagen emergente: Esto será un poco más complejo, a pesar de que vamos a utilizar algunos de los codigos que ya tenemos arriba. Crearemos un DIV con una imagen como fondo, con 4 monitos a los que haremos que al pasar el mouse sobre cada uno de ellos, aparezca un texto emergente; de pronto haríamos una prueba para substituir el texto por alguna imagen, pero el punto medular será como hacer aparecer texto; por ejemplo: sus datos. Lo primero será crear un DIV, y colocarle via CSS, una imagen de fondo, a la cual, deberemos darle de antemano, las dimensiones requeridas, pues sabemos que las imágenes de fondo, no podemos redimensionarlas vía HTML o CSS; así que usaremos una que previamente dimensionamos; 800x600, vale..?? Y para que no nos quede desfasada, le daremos CSS, con BACKGROUND-POSITION:CENTER; así la centrará de forma absoluta en el DIV; y NO-REPEAT, por si las dudas, para que no la repita; y bueno, ya entrados, un borde de 5 pixeles en color rojo. Despues le insertaremos una imagen transparente, de 24x18 pixeles con su etiqueta, y las mismas medidas del DIV, y la imagen de fondo (la imagen insertada, si nos permite redimensionarla), esto es para que el DIV nos abra, (y a la vez, nos deje ver el fondo con los monitos), pues como no tiene contenido visible, solo el fondo, aparecería el puro borde cerrado; la insertamos así: <img src="IMAGEN" WIDTH="800" HEIGHT="600"/>. Al DIV podemos darle esas medidas, aunque por default, se extiende al tamaño de la imagen. Tambien le daremos la identificación que hemos usado; "CAMBIAR", para que nos invisibilice lo que le ordenemos. Luego, crearemos cuatro DIV, uno para cada monito, que es de donde emergerá el texto; para esto usaremos el ejemplo 7, "imagen invisible a texto", y les daremos estilo vía CSS, para moverlos hacia arriba del flujo HTML, y colocarlos sobre el torso de los monitos; esto con los ATRIBUTO/VALOR: POSITION:ABSOLUTE;. Al aplicar estos elementos, no tendremos el problema de que nos quede el espacio vacío que dejarían los DIV, pues los ubicaremos de forma absoluta; esto será algunos pixeles abajo del principio del DIV, que será el TOP; y claro, tambien a derecha o izquierda, con los elementos: LEFT,MARGIN-LEFT, etc. Ok; vayamos ubicandonos: al DIV principal, lo llamaremos: PRINCIPAL, que original, nó?; a los otros cuatro, les daremos el nombre de los monitos: BETO, MAX, ITZEL y LALO. Cada uno de los cuatro tendrá estilo propio, vía CSS. La imagen transparente que usaremos, será la misma que en los ejemplos 6 y 7. Casi lo olvido; como no queremos que el texto que emerga, aparezca justamente en la posición que dejaría la imagen (pues taparía la cara a los monitos), le colocaremos algunos saltos de linea antes del texto, para que lo empuje hacia abajo; así no daríamos estilo extra al texto; tambien, para que no se pierda el texto en la imagen de fondo, le colocaremos fondo negro, claro, con excepción de los saltos de linea, pues nos daría el mismo resultado que no queremos; tapar la cara de los monitos; esto será con el CLASS="FONDOTEXTO", color blanco con #FFFFFF, tamaño de 12pt, y centrado con CENTER, por si acaso. Esto quedaría así (un poco largo..): <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:12pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:12pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a span {display:none;text-decoration:none;} .cambiar a:hover span {color:#FFFFFF;display:block;text-decoration:none; background-color:transparent;display:inline;} .cambiar a:hover big {display:none;text-decoration:none;} .principal {width:800px;height:600px;position:absolute;top:0px;left:50%;margin-left:-400px; background-image:url(http://maxhurbano.byethost7.com/?di=1112901246378); background-repeat:no-repeat;background-position:top center;border: 5px solid; color:red;} .beto {position:absolute;top:150px;left:50%;margin-left:-280px} .max {position:absolute;top:50px;left:50%;margin-left:-140px} .itzel {position:absolute;top:110px;left:50%;margin-left:65px} .lalo {position:absolute;top:50px;left:50%;margin-left:230px} .fondotexto {background-color:000000;} </style> <div class="principal"> <img src="http://maxhurbano.byethost7.com/?di=312905621531" width="800px" height="600px" /> <div class="beto"> <div class="cambiar"> <a href=""><big> <img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Roberto Noriega L.<br /> (Beto Lira)<br /> Bajo.<br /> <br /> 5861-4076<br /> cel. 04455 1536-2287<br /> cel. 04455 3976-4346<br /> [email protected]</div></center></span></a> </div> </div> <div class="max"> <div class="cambiar"> <a href=""><big> <img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Marcelino Pedraza V.<br /> (Max Hurbano)<br /> Batería y Voz.<br /> <br /> 5877-6215<br /> 2602-8375<br /> cel. 04455 2555-4485<br /> [email protected]</div></center></span></a> </div> </div> <div class="itzel"> <div class="cambiar"> <a href=""><big> <img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Itzel Anaid<br /> (Chela)<br /> Guitarra.<br> <br /> [email protected]</div></center></span></a> </div> </div> <div class="lalo"> <div class="cambiar"> <a href=""><big> <img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">E. Eduardo Carreón<br /> (Huevo)<br /> Guitarra leader.<br /> <br /> 5877-5410<br /> cel. 04455 2989-7393<br /> cel. 04455 3507-7908<br /> [email protected]</div></center></span></a> </div> </div> Funcionó..?? Vamos muy bien. Recuerden que centramos el PRINCIPAL de forma absoluta, para que no nos quede en la esquina superior, sino al centro, y para que los otros DIVs nos queden exactamente donde queremos, y para que no se extienda el borde en toda la página. Tambien cabe tener en cuenta que puede no quedar hasta arriba, pues si ya tenemos elementos colocados en el flujo HTML, desearemos bajarlo un poco, o mucho; depende de tí. Haremos esto, y cambiaremos el texto del primer monito, por una imagen, vale? es todo lo que cambiaremos; lo demás será igual; solo por ocio... bajaremos el DIV 100 pixeles con: TOP:100PX, y colocaremos la imagen como en el ejemplo 2; imagen por imagen, la segunda con saltos, recuerdas?. Quedaría así: <style> .cambiar big {color:#CC0000;font-family:trebuchet ms;font-size:12pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a {color:#00CCCC;font-family:trebuchet ms;font-size:12pt;font-weight:normal; text-decoration:none;display:inline;} .cambiar a span {display:none;text-decoration:none;} .cambiar a:hover span {color:#FFFFFF;display:block;text-decoration:none; background-color:transparent;display:inline;} .cambiar a:hover big {display:none;text-decoration:none;} .principal {width:800px;height:600px;position:absolute;top:100px;left:50%;margin-left:-400px; background-image:url(http://maxhurbano.byethost7.com/?di=1112901246378); background-repeat:no-repeat;background-position:top center;border: 5px solid; color:red;} .beto {position:absolute;top:150px;left:50%;margin-left:-280px} .max {position:absolute;top:50px;left:50%;margin-left:-140px} .itzel {position:absolute;top:110px;left:50%;margin-left:65px} .lalo {position:absolute;top:50px;left:50%;margin-left:230px} .fondotexto {background-color:000000;} </style> <div class="principal"> <img src="http://maxhurbano.byethost7.com/?di=312905621531" width="800px" height="600px" /> <div class="beto"> <div class="cambiar"> <a href=""><big> <img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto"> <img src="http://maxhurbano.byethost7.com/?di=1129253397116" width="150px" height"200px"/> </div></center></span></a> </div> </div> <div class="max"> <div class="cambiar"> <a href=""><big> <img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Marcelino Pedraza V.<br /> (Max Hurbano)<br /> Batería y Voz.<br /> <br /> 5877-6215<br /> 2602-8375<br /> cel. 04455 2555-4485<br /> [email protected]</div></center></span></a> </div> </div> <div class="itzel"> <div class="cambiar"> <a href=""><big> <img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">Itzel Anaid<br /> (Chela)<br /> Guitarra.<br> <br /> [email protected]</div></center></span></a> </div> </div> <div class="lalo"> <div class="cambiar"> <a href=""><big> <img src="http://maxhurbano.byethost7.com/?di=3129039702015" width="150px" height"200px"/> </big> <span> <center><br /><br /><br /><br /><br /><br /><div class="fondotexto">E. Eduardo Carreón<br /> (Huevo)<br /> Guitarra leader.<br /> <br /> 5877-5410<br /> cel. 04455 2989-7393<br /> cel. 04455 3507-7908<br /> [email protected]</div></center></span></a> </div> </div> Listo..!! Todo claro? Podemos seguir adelante. 9.- 7 enlaces distintos (o más, o menos, segun necesidad), con una sola imagen: Veamos: esto se puede hacer con imagen con transparencia (entre un ícono y otro), o con fondo de color. Lo haremos igual que en el ejemplo anterior, solo que en lugar de DIV, usaremos un TABLE (tabla), y le colocaremos de fondo la imagen GIF con los 7 íconos, a los cuales asignaremos un enlace a cada uno. Se usará una tabla, para que nos permita separar el espacio que dedicaremos a cada ícono en TDs (celdas) de igual tamaño, dentro de una misma TR (columna). Para esto no necesitaremos posicionar las TDs, pues la tabla se encarga de colocar las celdas en perfecta linea; en caso de ser una imagen con íconos no alineados, podemos usar DIVs, como anteriormente vimos; en lugar de usar el elemento CAMBIAR, solo se le asigna un enlace a la imagen "invisible" que estará (en lugar del texto del link) sobre cada uno de los íconos; recuerdas?. La tabla sí la posicionaremos, de forma absoluta, para que no nos quede en la esquina superior; usando: POSITION:ABSOLUTE TOP, LEFT, y MARGIN-LEFT; ahora lo haremos todo con "EN LINEA"; es decir, dentro de la misma etiqueta TABLE. Como decíamos, la imagen de fondo no se puede redimensionar; tambien usaremos una pre-dimensionada, y la centraremos tambien dentro de la tabla. Usaremos tambien, una imagen transparente, ahora de 16x16 pixeles, pues nuestros íconos serán regulares en sus lados; aunque dependiendo de tus íconos, podrías variar el tamaño. *si en tusejercicios requieres alguna medida extra de imagen, escribeme y te la subo a mi servidor, y te mando el link.* Cabe mencionar que si bien esto no se usaría mucho, es util cuando quieres colocar varios íconos como enlaces, pero no quieres sobrecargar tu página con tantas imágenes, capicci? Atención especial a la etiqueta CENTER; es para asegurar que nada se nos mueva a su antojo... **En caso de tener ya un DIV o TABLE contenedor de todos nuestros elementos, como sucede en Myspace, y muchos sitios gratuitos, no es tan necesario posicionar absolutamente, pues todo el contenido de la página, estaría dentro de el contenedor; normalmente (o casi), con 800 pixeles de ancho** Menos bla bla bla; más accion; así estaría la cosa: <table style="position:absolute;top:300px;left:50%;margin-left:-260px; background-image:url(http://maxhurbano.byethost7.com/?di=912905844974); background-repeat:no-repeat;background-position:center center;"> <center><tr><td width="74px" height="67px"> <a href="http://www.myspace.com/maxhurbano"> <img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a> </td> <td width="74px" height="67px"> <a href="http://www.sonico.com/maxhurbano"> <img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a> </td> <td width="74px" height="67px"> <a href="http://www.twitter.com/maxhurbano"> <img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a> </td> <td width="74px" height="67px"> <a href="http://www.hi5.com/friend/p228519705--Max_Hurbano--html"> <img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a> </td> <td width="74px" height="67px"> <a href="http://www.facebook.com/profile.php?id=100000705331834"> <img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a> </td> <td width="74px" height="67px"> <a href="http://cid-25640446dc80d9c0.profile.live.com/"> <img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a> </td> <td width="74px" height="67px"> <a href="http://www.youtube.com/user/maxhurbano"> <img src="http://maxhurbano.byethost7.com/?di=612908346332" width="74px"/></a> </td> </tr></center> </table> Listo..!! Solo basta dar los clicks necesarios para ver si funcionan los enlaces..!! Y para que no se nos olvide que las imágenes "invisibles" están ahí, podemos arrastrar el mouse desde arriba a abajo de la página, y las veremos; azules, pero estarán; esto es bueno para verificar que esten en su lugar exacto. 10.- Barra deslizante en imagen, texto, segmento, tabla etc.: Bueno, esto es un poco más sencillo; veamoslo en un texto amplio. Necesitaremos crear un DIV con las dimensiones que necesitamos; obviamente, mayores al espacio que ocupará el texto, de otra forma, no sería necesario; y mediante ESTILO EN LINEA, darle el atributo OVERFLOW, para que nos aparezca la barra deslizante, y así no nos ocupe tanto, y aún así, podamos leér todo de alguna forma; tambien centraremos el texto, colocaremos fondo amarillo, y borde de 3 pixeles, negro; todo esto, dentro de la misma etiqueta; verdad que es más practico? pero no siempre es lo mejor, jejeje. Cabe mencionar que la barra deslizante, podemos ponerla por default, abajo y a la derecha (OVERFLOW:VISIBLE; ), o de forma automatica; solo si fuera necesario: (OVERFLOW:AUTO; ), y tambien se puede especificar si quieres que no aparezca (OVERFLOW:HIDDEN; ), o especificar cual aparecerá (VISIBLE) y cual nó (HIDDEN), mediante los sub-atributos "X" e "Y". EJEMPLO: El DIV que haremos, solo tendrá barra a la izquierda, pues por default el texto hace sus propios saltos de linea, pero en caso de que fuera una imagen, daríamos la orden de que solo apareciera a la derecha: OVERFLOW-Y:VISIBLE; o AUTO y OVERFLOW-X:HIDDEN; aunque esto está condicionados a la versión de CSS; al parecer funciona bien solo en CSS3; bueno, para texto nos irá bien. El texto lo extraeremos de la página de una banda de rock en México, desconocidos, pero son amigos, que caray..!! La cosa sería de esta manera: <div style="overflow: auto; width: 400px; height: 150px; text-align:center; background-color:gold; border: 3px solid #000000;"> Tabacco Blues nace en el año 2002, formado, en aquel entonces, por: Ivan Martin Carreón (talivan)/bateria. Edgar Eduardo Carreón (huevo)/guitarra lider. y Alejandro Sanchez (chore)/voz y guitarra. De ahí hasta mediados de el 2005 se mantuvo esta base tocando principalmente covers, en fiestas y cotorreos particulares. A finales de ese año, tras la salida de El Chore, se integra Daniel Martín moreno (kukin). A principios de el 2006 se ausenta El Huevo, se integra Edgar Hernandez, y por ahi de abril llega Max Hurbano, integrando por primera vez, el Bajo al grupo. Solo unos meses despues, sale de la banda El Kukin, para formar su propio grupo, y con algunos dias de diferencia, Edgar hernandez. A partir de ahí, Max Hurbano pasa a ser voz y guitarra de el grupo,(y el que va por las chelas); regresa Edgar Eduardo, al requinto, y comienza la nueva era de Tabacco Blues, con musica original de el grupo, y temas propios y fusiles recreados por Max Hurbano, quien venia de ser bajista de Jendell, y baterista de La Falsa Sociedad, y La Dualidad. Despues de mucho tiempo esfuerzo y desvelos logran terminar lo que es su primera produccion discografica; algo totalmente sencillo y casero, pero con mucho empeño, cariño y respeto para toda la banda que le late no solo el buen Rock, sino tambien la letra con mensaje, con sentido, con "Feeling" La mala... es que al ser produccion casera, solo algunos podran tenerlo en su coleccion de discos, pues no hay distribucion. Pero en ésta pagina habrá actualizaciones periodicas, para alternar todas y cada una de las canciones de ésta singular y rara banda. Ahora con nuevos elementos a bordo: Beto Lira (ex-Jendell, y ex-La Dualidad) en el bajo, (la separación de el "Talivan" ), y la más reciente adicción de Itzel Anaíd (Chela) en la lira, y Azucena (Azúcar) en los coros, ahora Max Hurbano pasa a ser baterísta y voz(y el de las chelas), en espera de que algun Batako aparezca; y con la firme propuesta de mejorar lo yá hecho), y esperando lo que venga, Tabacco Blues es una banda de Rock-R&B, sin complejos de ningun tipo. </div> Sí, ya se que nos quedó en la esquina, pero lo bueno que ya sabemos moverlo al centro; ok, lo haremos, pero tambien aprovecharemos para cambiar el texto por una imagen, vale; una enorme, una con 4 monitos, recuerdas? para que nos aparezcan las dos barras. Recuerda que si solo queremos una, sabemos ya como hacerlo. Esto sería así: <div style="position:absolute;top:200px;left:50%;margin-left:-200;overflow: auto; width: 400px; height: 150px; text-align:center;background-color:gold; border: 3px solid #000000;"> <img src="http://maxhurbano.byethost7.com/?di=1112901246378"/> </div> Listo; fué sencillo. Y bueno, para una página completa, se usa <BODY STYLE="OVERFLOW:AUTO;">, y para un segmento de HTML, solo arma tu DIV con OVERFLOW, y mete ahí todo lo que quieras, antes de la etiqueta correspondiente de cierre: </DIV>. Y luego...., vamos a lo que sigue; falta menos. 11.- Cambiar de tamaño videos de Youtube y Slideshow de fotos: Para este ejemplo, usaremos un video de Youtube, copiaremos el codigo que nos facilita, y modificaremos su tamaño; tambien lo centraremos, pues como sabemos, no hay contenedor y se nos irá a la esquina; lo haremos tambien "EN LINEA", dentro de <OBJECT STYLE=". No esta de más decir que será el mismo proceso con algun Slideshow de fotos, lo unico que hay que hacer, es buscar los elementos WIDTH y HEIGHT dentro del codigo del video o el Slide, y modificarlos a como mejor nos parezca; cabe mencionar que estos elementos, aparecen 2 veces en los videos y hasta 4 veces en algunos Slides; así que habrá que buscar bien, y cambiar los valores, tambien toma en cuenta que no siempre el orden es WIDTH HEIGHT; a veces es contrario en el primer codigo, o en el segundo, OJO con eso, solo para que no pongamos valores cambiados; no es tan grave; a fin de cuentas, todo tiene remedio. El codigo del video original, será este; puedes pegarlo en tu documento para ver su tamaño original, y luego ya modificado, verás la diferencia; por cierto, el video es un post aparte; te podría servir. Veamos: <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/C9j5vt4bFK4?fs=1&amp; hl=es_ES&amp;rel=0&amp;color1=0x5d1719&amp;color2=0xcd311b"> </param><param name="allowFullScreen" value="true"> </param><param name="allowscriptaccess" value="always"> </param><embed src="http://www.youtube.com/v/C9j5vt4bFK4?fs=1&amp;hl=es_ES&amp;rel=0&amp; color1=0x5d1719&amp;color2=0xcd311b" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> Bien; ahora a centrarlo (esto tal vez no lo necesites, recuerdas?), y darle un tamaño de, digamos..., 800x600 pixeles, manos a la obra: <object style="position:absolute;top:100px;left:50%;margin-left:-400px;" width="800" height="600"><param name="movie" value="http://www.youtube.com/v/C9j5vt4bFK4?fs=1&amp;hl=es_ES&amp;rel=0&amp; color1=0x5d1719&amp;color2=0xcd311b"> </param><param name="allowFullScreen" value="true"> </param><param name="allowscriptaccess" value="always"> </param><embed src="http://www.youtube.com/v/C9j5vt4bFK4?fs=1&amp;hl=es_ES&amp;rel=0&amp; color1=0x5d1719&amp;color2=0xcd311b" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="800" height="600"></embed></object> Que tal.., lo ves casi igual..?? prueba con 1200x900..!! Verdad que se nota..?? 12.- Imagen de fondo a un Slideshow: Bueno, pues le llego su momento al SlideShow; como recordarán, no experimentamos con él en el anterior ejemplo; recuerdenme cambiar de tamaño el original que tomemos, para ver que tambien se rinde ante nuestro ESTILO. Vamos por el codigo. Ya lo tenemos; es este: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="290" width="395" style="width:395px;height:290px" align="middle"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://widget-be.slide.com/widgets/slideticker.swf" /> <param name="wmode" value="transparent" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="salign" value="l" /> <param name="flashvars" value="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://widget-be.slide.com/widgets/slideticker.swf" height="290" width="395" style="width:395px;height:290px" align="middle" wmode="transparent" quality="high" scale="noscale" salign="l" flashvars="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" /> </object> Ya lo viste? son los monitos otra vez..!! bueno; igual nos servirá; pues aunque hay millones de videos y Slides, prefiero hacerle publicidad a quien conozca... Lo primero que haremos, será centrarlo; odio que quede esquinado, aunque como ya dijimos, eso no pasaría en una página ya armada; otra vez lo haremos "EN LINEA" con STYLE=" en la etiqueta TABLE; despues, redimensionaremos a 800x700 pixeles, e insertaremos una imagen; como es para fondo, con el tamaño adecuado; en este caso utilizaremos una que tiene una imagen de base negra, y encima otra con pequeñas imágenes al centro; esto es para que no sobresalga cuando se visualice una foto que no llene horizontal o verticalmente el cuadro del Slide; no tiene fondo negro nuestro slide; sino transparente; eso lo definimos al momento de crearlo; en www.slide.com por ejemplo. Ahora quedaría así: <table background="http://maxhurbano.byethost7.com/?di=8129059237412" style="position:absolute;top:50px;left:50%;margin-left:-400px;"><tr><td width="800px" height="700"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="700" width="800" style="width:800px;height:700px" align="middle"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://widget-be.slide.com/widgets/slideticker.swf" /> <param name="wmode" value="transparent" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="salign" value="l" /> <param name="flashvars" value="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://widget-be.slide.com/widgets/slideticker.swf" height="700" width="800" style="width:800px;height:700px" align="middle" wmode="transparent" quality="high" scale="noscale" salign="l" flashvars="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" /> </object> </td></tr></table> Y bueno, como aquí no importa que se repita la imagen de fondo, pondremos una pequeña, y dejaremos que se repita; a ver que pasa: <table background="http://maxhurbano.byethost7.com/?di=512880683889" style="position:absolute;top:50px;left:50%;margin-left:-400px;"><tr><td width="800px" height="700"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="700" width="800" style="width:800px;height:700px" align="middle"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://widget-be.slide.com/widgets/slideticker.swf" /> <param name="wmode" value="transparent" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="salign" value="l" /> <param name="flashvars" value="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://widget-be.slide.com/widgets/slideticker.swf" height="700" width="800" style="width:800px;height:700px" align="middle" wmode="transparent" quality="high" scale="noscale" salign="l" flashvars="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" /> </object> </td></tr></table> Que tal..?? Ahora si sobresale; igual que si fuera una imagen grande sin base, camo la anterior. Pueden colocarla de la forma que más les guste. Vamos a lo que sigue. Se me acabó el espacio; solo faltaban tres; ok, haré la 2a parte sobre los puntos 13, 14 y 15. Y lo que vaya saliendo...... Este es el link de la segunda parte: PARTE 2 Si aún con todos estos ejemplos, sigues teniendo alguna duda, no te preocupes; para que son los amigos..?? Puedes mandar un MP con tus dudas, o escribir a [email protected] o comentar abajo, y haremos hasta lo imposible por solucionarlas; no lo dúdes. Y si además logro ser NFU: dormiré tranquilo al fin... Hablando de estilo; comentar habla bien de tí..!!

Continuamos con lo tres puntos que nos faltaban; dedicado casi especialmente a mis carnales de Myspace. Recuerda que venimos de terminar la primera parte, con los 12 puntos anteriores; acá: PARTE 1 13.- Colocar varios videos de Youtube en un DIV con barra deslizante: Así es, adivinaste, crear el DIV es el mismo proceso del ejemplo 10; lo haremos de 800x200 pixeles con OVERFLOW:AUTO, pues aunque solo queremos barra a la derecha, cuidaremos que los videos ocupen solo el ancho del DIV; no más, para que no nos ponga la barra debajo; además sería de mal gusto, pues para pasar de un video a otro, habría que deslizar en ciertos momento. Esto será bastante fácil, pero muy largo el codigo. Lo primero que hay que hacer, es buscar que videos queremos colocar, y redimensionarlos a 254x200 pixeles; como hicimos en el ejemplo 11. Ya que tengas todos los videos redimensionados (sí, todos; si pones solo 2 o 3, estamos perdiendo el tiempo...), armamos nuestro DIV con su estilo dentro de la etiqueta DIV, con OVERFLOW:AUTO, 800x200 de tamaño, fondo del color que decidas; yo usaré transparente, recuerdas? (TRANSPARENT), y un borde negro de 3 pixeles; ah, y centrar los videos con TEXT-ALIGN:CENTER; ya sabemos que no es texto, pero sirve.... Ya que el codigo será tan largo, hagamos corto el proceso; el resultado sería este: <div style="overflow:auto;width:800;height:200px;text-align:center; background-color:transparent;border:3px solid #000000;"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/eu3chtObYyg&hl=es_ES&fs=1&" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/eu3chtObYyg&hl=es_ES&fs=1&" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/ClvoSrxYIjo&hl=es_ES&fs=1&" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/ClvoSrxYIjo&hl=es_ES&fs=1&" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/1RFnCJza_ug&hl=es_ES&fs=1&rel=0" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/1RFnCJza_ug&hl=es_ES&fs=1&rel=0" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/mPl5m1Tm65A&hl=es_MX&fs=1&color1=0x5d1719&color2=0xcd311b&border=1" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/mPl5m1Tm65A&hl=es_MX&fs=1&color1=0x5d1719&color2=0xcd311b&border=1" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/hwHjT_yUJzU&hl=es&fs=1" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/hwHjT_yUJzU&hl=es&fs=1" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/ZckQuKMGwmE&hl=es_ES&fs=1&" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/ZckQuKMGwmE&hl=es_ES&fs=1&" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/AWcsiT_mj0c&hl=es_ES&fs=1&" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/AWcsiT_mj0c&hl=es_ES&fs=1&" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/0hOAwcgnlgc&hl=es_ES&fs=1&" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/0hOAwcgnlgc&hl=es_ES&fs=1&" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/J063HwWmgfQ&hl=es_ES&fs=1&" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/J063HwWmgfQ&hl=es_ES&fs=1&" height="200" width="254" wmode="transparent" /> </object> </div> Aqui termina...., este ejemplo; largo, eh? seguimos. 14.- Amigos y comentarios Myspace en div con barra deslizante (solo perfiles 1.0 y 2.0): A este ejemplo, le dedicaremos el menor tiempo posible, pues aunque a algunos les servirá (Sudamerica, Centro, Asia, y otros), los perfiles 1.0 y 2.0 estan al borde de la extinción; aunque fueron tantas noches de desvelos buscando la solución a esto que no quisiera dejar de publicarlo; por si hay alguno que esté en esa situación. Ya se que habrá quien diga que el codigo para hacerlo, estaba en todas las páginas de Myspace layouts, Joombly y similares; la cosa es que solo funcionaba para perfiles personales; no de musica. Y como a mí ya me actualizaron al perfil 3.0 a wevo, no me sirve ya. Recuerdo que solo Led Zeppelin y nosotros contabamos con un DIV así; hoy a los dos nos despelucaron. Bueno; al punto: copia y pega este codigo al final de BIOGRAFIA o ABOUT ME; recuerda: al final. Sin más, el motivo de mi ceguera: <style> .off {display:none;} table table td.text table.friendSpace, table table td.text table.friendSpace td.text table {display:block;background-color:transparent;padding:3px 7px 7px 7px;border-collapse:collapse;} table table td.text table.friendSpace td.text table div {border-collapse:collapse;} table table.friendsComments td.text table,table table.friendsComments {display:block;background-color:transparent;border-collapse:collapse;} div.myDclassFC {position:absolute;top:4075px;margin-left:-28.5px;width:800px;height:240px; border-collapse:collapse;background-color:000000;overflow-x hidden;overflow-y:auto;color:c0c0c0;} div.myDclassFC { overflow-x: hidden;overflow-y: auto;} table.friendsComments, table.friendsComments td, table.friendsComments table, table.friendsComments table td {width:100% !important; border:0px black solid; border-color:transparent;color:c0c0c0;} table.friendsComments table table td {width:auto !important; border-collapse:collapse;color:c0c0c0;} table.friendsComments img {width:10px !important;padding:2px;} table.friendsComments a img {width:70px !important; padding:2px;color:c2161a;} table.friendsComments .ImgOnlineNow {width:30px !important;} </style> </td></tr></table></td></tr></table></td></tr></table> <div class="myDclassFC" style="border:5px red solid;border-top:0px;"><table class="myTclassFC"><tr> <td class="text"><table class="off"><tr><td><table class="off"><tr><td> Realmente funciona; igual, si algo falla, escribeme y lo ponemos en su lugar. Por último, un pedido de: [Kavi Kidd | SounDasick]; un brother de Myspace; espero ser claro maestro. 15.- Colocar reproductor (es) Myspace-Music completo (s): Bueno; otra vez por partes: este a diferencia de un video, o Slide solo tiene un tamaño: el que a Myspace se le antoja; así que hay que comentar que debido a eso, el OBJECT que contiene el reproductor, cuenta con su propio OVERFLOW, porque solo se visualiza un tercio del reproductor completo; y hay que ir bajando con la barra. A muchos nos dá weva y solo vemos las primeras 3 o 4 rolas de la banda en cuestión. De esta forma, hay canciones debajo, que nadie se entera que existen, por el tedio de estar bajando la barra. Hoy, no solo redimensionaremos el reproductor para que se visualice completo, sino que además, aprenderemos a insertarlo ya entero, en nuestro malparido Myspace; aún en el 3.0; e iremos más lejos, tomaremos el de otro monito, y pondremos dos juntos dentro de una tabla; en un solo Myspace; nada menos. Ay nanita..!! Lo haríamos en DIV, pero nos quedaría uno sobre otro, y queremos que queden paralelos. *Hay forma de colocar DIVs uno al lado del otro, pero no se los recomiendo* Antes que nada, recordar que tambien esto se redimensiona siguiendo el proceso del ejemplo 11; buscando el WIDTH y HEIGHT, y poniendo las medidas que mejor nos parezcan (ando un poco rudo eh? es que tengo mi historia matrimonial con Myspace...); bueno, en realidad ahora pondremos las que yo diga, jejeje. Esto será un largo proceso, así que empecemos ya. Primero hay que localizar el codigo de nuestro reproductor. Esto será así: Abrimos nuestro perfil, en la barra de menú, click en VER y luego en VER CODIGO FUENTE (En Crome y algún otro navegador: click derecho en la página, y luego en VER CODIGO FUENTE). Ya que se abra la página con todo el codigo de nuestro perfil, y para no buscar una aguja en un pajar, presionamos "Ctrl" + "F", para que nos abra el formulario de busqueda; insertamos el inicio del codigo; escribimos esto: *<object id="shell"*, sin los asteriscos; y damos ENTER; cuando aparezca lo que buscamos, seleccionamos desde ahí hasta 24 a 39 lineas (varía); hasta el segundo "</OBJECT>"; listo; ese es el codigo completo de nuestro reproductor. NOTA: en algunos casos de 1.0 y 2.0 habrá que buscar *<object classid="*, pero cuidando de que no sea un video que hayamos insertado ya; atención. (Verifica que el final de tu codigo sea como este) Quedaría así: <object id="shell" name="shell" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="345" align="middle"> <param name="movie" value="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" width="450" height="345" align="middle"> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--<!--> <div id="flUgSwfChk"> <h5 id="flUgH1">Get Flash now!</h5> <p id="flUgP">In order to listen or view this content you will have to upgrade your version of Flash.</p> <a href="#" onclick="(function(srcEl){srcEl.href = FlashUpgrade.GetFlashUpgradeURL(true)})(this)"><img id="flUgImg" src="http://x.myspacecdn.com/modules/musicv2/static/img/flash_logo_player.jpg" /></a> </div> <!--[if !IE]>--> </object> <!--<!--> </object> Ahora lo redimensionaremos; recuerden: buscamos los WIDTH y HEIGHT que hay, y cambiamos por WIDTH="390" y HEIGHT="665"; hagamoslo..!! El resultado sería este: <object id="shell" name="shell" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="390" height="665" align="middle"> <param name="movie" value="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" width="390" height="665" align="middle" > <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--<!--> <div id="flUgSwfChk"> <h5 id="flUgH1">Get Flash now!</h5> <p id="flUgP">In order to listen or view this content you will have to upgrade your version of Flash.</p> <a href="#" onclick="(function(srcEl){srcEl.href = FlashUpgrade.GetFlashUpgradeURL(true)})(this)"><img id="flUgImg" src="http://x.myspacecdn.com/modules/musicv2/static/img/flash_logo_player.jpg" /></a> </div> <!--[if !IE]>--> </object> <!--<!--> </object> Listo; no se fijen mucho en el espacio que ahora queda entre la ultima canción y la zona de estadisticas; pues como algunos sabrán, cada navegador interpreta el tamaño de un pixel, como mejor entiende. Ahora algo que requiere mucha atención; insertar el reproductor en Myspace. Ya se preguntaron como insertar las medidas en el reproductor que ahora esta en nuestro perfil? Bueno, no llego a tanto...., en realidad no es posible; lo que haremos será insertar este, en otro lugar y hacer desaparecer el que hoy está; esto para perfiles 1.0 y 2.0; para el 3.0 el proceso es menos tedioso; solo se cierra el modulo del Music Player, y se abre uno nuevo de "Cuadro HTML", se inserta el codigo, se guardan los cambios, se publica y listo. Para insertarlo en 1.0 y 2.0, se inserta este codigo al principio de BIOGRAFIA o ACERCA DE MÍ: <style> table table div object{display:none;} </style> Esto hará desaparecer el player actual; si ahora insertamos nuestro flamante reproductor completo.., tampoco se verá..!! Lo que pasa es que ordenamos que todo OBJECT sea borrado de la faz de nuestro perfil. Solución? Meter ese OBJECT en dos DIV; se que suena raro, pero créanme; eso rompe la regla; quedaría así: <style> table table div object{display:none;} </style> <div> <div> <object id="shell" name="shell" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="390" height="665" align="middle"> <param name="movie" value="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" width="390" height="665" align="middle" > <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--<!--> <div id="flUgSwfChk"> <h5 id="flUgH1">Get Flash now!</h5> <p id="flUgP">In order to listen or view this content you will have to upgrade your version of Flash.</p> <a href="#" onclick="(function(srcEl){srcEl.href = FlashUpgrade.GetFlashUpgradeURL(true)})(this)"><img id="flUgImg" src="http://x.myspacecdn.com/modules/musicv2/static/img/flash_logo_player.jpg" /></a> </div> <!--[if !IE]>--> </object> <!--<!--> </object> </div> </div> Lo unico que resta será darle estilo al DIV (al primero), para colocarlo en el lugar que decidan; STYLE=" POSITION, TOP, LEFT, MARGIN-LEFT, y esas cosas. Eso es trabajo suyo; bueno, si me escriben con sus dudas, será nuestro trabajo.... Y por ultimo colocaremos este y otro reproductor en una tabla, uno del lado del otro, ya redimensionados. La tabla tendrá un TR y este dos TD, uno para cada reproductor. Tambien los centraremos en su celda, mediante TEXT-ALIGN:CENTER, como ya vimos. El codigo completo sería así: <table style="text-align:center;"> <tr> <td> <object id="shell" name="shell" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="390" height="665" align="middle"> <param name="movie" value="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" width="390" height="665" align="middle" > <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--<!--> <div id="flUgSwfChk"> <h5 id="flUgH1">Get Flash now!</h5> <p id="flUgP">In order to listen or view this content you will have to upgrade your version of Flash.</p> <a href="#" onclick="(function(srcEl){srcEl.href = FlashUpgrade.GetFlashUpgradeURL(true)})(this)"><img id="flUgImg" src="http://x.myspacecdn.com/modules/musicv2/static/img/flash_logo_player.jpg" /></a> </div> <!--[if !IE]>--> </object> <!--<!--> </object> </td> <td> <object id="shell" name="shell" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="390" height="665" align="middle"> <param name="movie" value="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=518499183&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2fmaxhurbano&pertid=ee2a5fb6642c85ed0000000000000000&pguid=162dc994bf0242019cb46c14e850dde4&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAjeNpzdPBztdgQQHMfaJ8eFNedVRgQiqckOdwRw%252fX%252bVmRtMAGmBSDU0wClPM4unVLRyf5dJ%252fuE8swDIrnenvLmeThte8nMDHt8lav0MleCyKanJ1gPqefi8ozpVEzPuoeSJG%252fP4Km1s2ncyo9srzmwXJBQxrMds3zLcVbsErODo9odqtIEVz3v3xXqPmQ%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&logerr=True&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x4E67D3&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=1674778&profid=518499183&ptype=4&artid=42135415&pmix=False&shuffle=True&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=-1331609303750071570&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&bacp=0" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" width="390" height="665" align="middle" > <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=518499183&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2fmaxhurbano&pertid=ee2a5fb6642c85ed0000000000000000&pguid=162dc994bf0242019cb46c14e850dde4&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAjeNpzdPBztdgQQHMfaJ8eFNedVRgQiqckOdwRw%252fX%252bVmRtMAGmBSDU0wClPM4unVLRyf5dJ%252fuE8swDIrnenvLmeThte8nMDHt8lav0MleCyKanJ1gPqefi8ozpVEzPuoeSJG%252fP4Km1s2ncyo9srzmwXJBQxrMds3zLcVbsErODo9odqtIEVz3v3xXqPmQ%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&logerr=True&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x4E67D3&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=1674778&profid=518499183&ptype=4&artid=42135415&pmix=False&shuffle=True&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=-1331609303750071570&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&bacp=0" /> <!--<!--> <div id="flUgSwfChk"> <h5 id="flUgH1">Get Flash now!</h5> <p id="flUgP">In order to listen or view this content you will have to upgrade your version of Flash.</p> <a href="#" onclick="(function(srcEl){srcEl.href = FlashUpgrade.GetFlashUpgradeURL(true)})(this)"><img id="flUgImg" src="http://x.myspacecdn.com/modules/musicv2/static/img/flash_logo_player.jpg" /></a> </div> <!--[if !IE]>--> </object> <!--<!--> </object> </td> </tr> </table> Quedó fabuloso, nó..?? Pero esquinado; bueno ahora no es problema; aparte de que ya sabemos como centrarlo, tiene las medidas necesarias para caber casi exactamente en el contenedor de Myspace; o sea que no sería necesario. Ahora que si deseas colocarlos en otro sitio, lo podemos hacer; sabes donde encontrarme. Con esto terminamos..., al fin..!! *Conforme vaya recordando o aprendiendo más, iré actualizando esta página* Si aún con todos estos ejemplos, sigues teniendo alguna duda, no te preocupes; para que son los amigos..?? Puedes mandar un MP con tus dudas, o escribir a [email protected] o comentar abajo, y haremos hasta lo imposible por solucionarlas; no lo dúdes. Y si además logro ser NFU: dormiré tranquilo al fin... Hablando de estilo; comentar habla bien de tí..!!

Tutorial sobre como configurar nuestro ordenador para permitir la conexión remota, abrir el puerto de entrada, registrar un dominio, instalar el actualizador de Dominio/IP y realizar una conexión hacia nuestro ordenador, desde una PC en otro lugar; sea para trabajar con tus archivos desde otro ordenador o recibir asistencia remota (Valido para Windows XP/Vista/7) Visualizar IP interno: "ipconfig" Visualizar IP publico: http://www.vermiip.es Registrar dominio: http://www.dyndns.com link: http://www.youtube.com/watch?v=C9j5vt4bFK4 Ya que andas por acá, igual y podrías comentar algo; es gratis..!!

Continuamos con lo cuatro puntos que nos faltaban; dedicado casi especialmente a mis carnales de Myspace. Recuerda que venimos de terminar la primera parte, con los 11 puntos anteriores; acá: PARTE 1 Posteado por Max Hurbano para Taringa.net 12.- Imagen de fondo a un Slideshow: Bueno, pues le llego su momento al SlideShow; como recordarán, no experimentamos con él en el anterior ejemplo; recuerdenme cambiar de tamaño el original que tomemos, para ver que tambien se rinde ante nuestro ESTILO. Vamos por el codigo. Ya lo tenemos; es este: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="290" width="395" style="width:395px;height:290px" align="middle"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://widget-be.slide.com/widgets/slideticker.swf" /> <param name="wmode" value="transparent" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="salign" value="l" /> <param name="flashvars" value="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://widget-be.slide.com/widgets/slideticker.swf" height="290" width="395" style="width:395px;height:290px" align="middle" wmode="transparent" quality="high" scale="noscale" salign="l" flashvars="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" /> </object> Posteado por Max Hurbano para Taringa.net Ya lo viste? son los monitos otra vez..!! bueno; igual nos servirá; pues aunque hay millones de videos y Slides, prefiero hacerle publicidad a quien conozca... Lo primero que haremos, será centrarlo; odio que quede esquinado, aunque como ya dijimos, eso no pasaría en una página ya armada; otra vez lo haremos "EN LINEA" con STYLE=" en la etiqueta TABLE; despues, redimensionaremos a 800x700 pixeles, e insertaremos una imagen; como es para fondo, con el tamaño adecuado; en este caso utilizaremos una que tiene una imagen de base negra, y encima otra con pequeñas imágenes al centro; esto es para que no sobresalga cuando se visualice una foto que no llene horizontal o verticalmente el cuadro del Slide; no tiene fondo negro nuestro slide; sino transparente; eso lo definimos al momento de crearlo; en www.slide.com por ejemplo. Ahora quedaría así: <table background="http://i.imgur.com/YehjU.jpg" style="position:absolute;top:50px;left:50%;margin-left:-400px;"><tr><td width="800px" height="700"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="700" width="800" style="width:800px;height:700px" align="middle"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://widget-be.slide.com/widgets/slideticker.swf" /> <param name="wmode" value="transparent" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="salign" value="l" /> <param name="flashvars" value="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://widget-be.slide.com/widgets/slideticker.swf" height="700" width="800" style="width:800px;height:700px" align="middle" wmode="transparent" quality="high" scale="noscale" salign="l" flashvars="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" /> </object> </td></tr></table> Posteado por Max Hurbano para Taringa.net Posteado por Max Hurbano para Taringa.net Y bueno, como aquí no importa que se repita la imagen de fondo, pondremos una pequeña, y dejaremos que se repita; a ver que pasa: <table background="http://i.imgur.com/aVG76.jpg" style="position:absolute;top:50px;left:50%;margin-left:-400px;"><tr><td width="800px" height="700"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="700" width="800" style="width:800px;height:700px" align="middle"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://widget-be.slide.com/widgets/slideticker.swf" /> <param name="wmode" value="transparent" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="salign" value="l" /> <param name="flashvars" value="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://widget-be.slide.com/widgets/slideticker.swf" height="700" width="800" style="width:800px;height:700px" align="middle" wmode="transparent" quality="high" scale="noscale" salign="l" flashvars="cy=h5&il=1&channel=3530822107877674942&site=widget-be.slide**.com" /> </object> </td></tr></table> Posteado por Max Hurbano para Taringa.net Posteado por Max Hurbano para Taringa.net Que tal..?? Ahora si sobresale; igual que si fuera una imagen grande sin base, camo la anterior. Pueden colocarla de la forma que más les guste. Vamos a lo que sigue. 13.- Colocar varios videos de Youtube en un DIV con barra deslizante: Posteado por Max Hurbano para Taringa.net Así es, adivinaste, crear el DIV es el mismo proceso del ejemplo 10; lo haremos de 800x200 pixeles con OVERFLOW:AUTO, pues aunque solo queremos barra a la derecha, cuidaremos que los videos ocupen solo el ancho del DIV; no más, para que no nos ponga la barra debajo; además sería de mal gusto, pues para pasar de un video a otro, habría que deslizar en ciertos momento. Esto será bastante fácil, pero muy largo el codigo. Lo primero que hay que hacer, es buscar que videos queremos colocar, y redimensionarlos a 254x200 pixeles; como hicimos en el ejemplo 11. Ya que tengas todos los videos redimensionados (sí, todos; si pones solo 2 o 3, estamos perdiendo el tiempo...), armamos nuestro DIV con su estilo dentro de la etiqueta DIV, con OVERFLOW:AUTO, 800x200 de tamaño, fondo del color que decidas; yo usaré transparente, recuerdas? (TRANSPARENT), y un borde negro de 3 pixeles; ah, y centrar los videos con TEXT-ALIGN:CENTER; ya sabemos que no es texto, pero sirve.... Ya que el codigo será tan largo, hagamos corto el proceso; el resultado sería este: Posteado por Max Hurbano para Taringa.net <div style="overflow:auto;width:800;height:200px;text-align:center; background-color:transparent;border:3px solid #000000;"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/eu3chtObYyg&hl=es_ES&fs=1&" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/eu3chtObYyg&hl=es_ES&fs=1&" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/ClvoSrxYIjo&hl=es_ES&fs=1&" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/ClvoSrxYIjo&hl=es_ES&fs=1&" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/1RFnCJza_ug&hl=es_ES&fs=1&rel=0" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/1RFnCJza_ug&hl=es_ES&fs=1&rel=0" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/mPl5m1Tm65A&hl=es_MX&fs=1&color1=0x5d1719&color2=0xcd311b&border=1" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/mPl5m1Tm65A&hl=es_MX&fs=1&color1=0x5d1719&color2=0xcd311b&border=1" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/hwHjT_yUJzU&hl=es&fs=1" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/hwHjT_yUJzU&hl=es&fs=1" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/ZckQuKMGwmE&hl=es_ES&fs=1&" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/ZckQuKMGwmE&hl=es_ES&fs=1&" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/AWcsiT_mj0c&hl=es_ES&fs=1&" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/AWcsiT_mj0c&hl=es_ES&fs=1&" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/0hOAwcgnlgc&hl=es_ES&fs=1&" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/0hOAwcgnlgc&hl=es_ES&fs=1&" height="200" width="254" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="200" width="254"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/J063HwWmgfQ&hl=es_ES&fs=1&" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/J063HwWmgfQ&hl=es_ES&fs=1&" height="200" width="254" wmode="transparent" /> </object> </div> Posteado por Max Hurbano para Taringa.net Aqui termina...., este ejemplo; largo, eh? seguimos. 14.- Amigos y comentarios Myspace en div con barra deslizante (solo perfiles 1.0 y 2.0): A este ejemplo, le dedicaremos el menor tiempo posible, pues aunque a algunos les servirá (Sudamerica, Centro, Asia, y otros), los perfiles 1.0 y 2.0 estan al borde de la extinción; aunque fueron tantas noches de desvelos buscando la solución a esto que no quisiera dejar de publicarlo; por si hay alguno que esté en esa situación. Ya se que habrá quien diga que el codigo para hacerlo, estaba en todas las páginas de Myspace layouts, Joombly y similares; la cosa es que solo funcionaba para perfiles personales; no de musica. Y como a mí ya me actualizaron al perfil 3.0 a wevo, no me sirve ya. Recuerdo que solo Led Zeppelin y nosotros contabamos con un DIV así; hoy a los dos nos despelucaron. Bueno; al punto: copia y pega este codigo al final de BIOGRAFIA o ABOUT ME; recuerda: al final. Sin más, el motivo de mi ceguera: Posteado por Max Hurbano para Taringa.net <style> .off {display:none;} table table td.text table.friendSpace, table table td.text table.friendSpace td.text table {display:block;background-color:transparent;padding:3px 7px 7px 7px;border-collapse:collapse;} table table td.text table.friendSpace td.text table div {border-collapse:collapse;} table table.friendsComments td.text table,table table.friendsComments {display:block;background-color:transparent;border-collapse:collapse;} div.myDclassFC {position:absolute;top:4075px;margin-left:-28.5px;width:800px;height:240px; border-collapse:collapse;background-color:000000;overflow-x hidden;overflow-y:auto;color:c0c0c0;} div.myDclassFC { overflow-x: hidden;overflow-y: auto;} table.friendsComments, table.friendsComments td, table.friendsComments table, table.friendsComments table td {width:100% !important; border:0px black solid; border-color:transparent;color:c0c0c0;} table.friendsComments table table td {width:auto !important; border-collapse:collapse;color:c0c0c0;} table.friendsComments img {width:10px !important;padding:2px;} table.friendsComments a img {width:70px !important; padding:2px;color:c2161a;} table.friendsComments .ImgOnlineNow {width:30px !important;} </style> </td></tr></table></td></tr></table></td></tr></table> <div class="myDclassFC" style="border:5px red solid;border-top:0px;"><table class="myTclassFC"><tr> <td class="text"><table class="off"><tr><td><table class="off"><tr><td> Realmente funciona; igual, si algo falla, escribeme y lo ponemos en su lugar. Por último, un pedido de: [Kavi Kidd | SounDasick]; un brother de Myspace; espero ser claro maestro. Posteado por Max Hurbano para Taringa.net 15.- Colocar reproductor (es) Myspace-Music completo (s): Bueno; otra vez por partes: este a diferencia de un video, o Slide solo tiene un tamaño: el que a Myspace se le antoja; así que hay que comentar que debido a eso, el OBJECT que contiene el reproductor, cuenta con su propio OVERFLOW, porque solo se visualiza un tercio del reproductor completo; y hay que ir bajando con la barra. A muchos nos dá weva y solo vemos las primeras 3 o 4 rolas de la banda en cuestión. De esta forma, hay canciones debajo, que nadie se entera que existen, por el tedio de estar bajando la barra. Hoy, no solo redimensionaremos el reproductor para que se visualice completo, sino que además, aprenderemos a insertarlo ya entero, en nuestro malparido Myspace; aún en el 3.0; e iremos más lejos, tomaremos el de otro monito, y pondremos dos juntos dentro de una tabla; en un solo Myspace; nada menos. Ay nanita..!! Lo haríamos en DIV, pero nos quedaría uno sobre otro, y queremos que queden paralelos. *Hay forma de colocar DIVs uno al lado del otro, pero no se los recomiendo* Antes que nada, recordar que tambien esto se redimensiona siguiendo el proceso del ejemplo 11; buscando el WIDTH y HEIGHT, y poniendo las medidas que mejor nos parezcan (ando un poco rudo eh? es que tengo mi historia matrimonial con Myspace...); bueno, en realidad ahora pondremos las que yo diga, jejeje. Esto será un largo proceso, así que empecemos ya. Primero hay que localizar el codigo de nuestro reproductor. Esto será así: Abrimos nuestro perfil, en la barra de menú, click en VER y luego en VER CODIGO FUENTE (En Crome y algún otro navegador: click derecho en la página, y luego en VER CODIGO FUENTE). Ya que se abra la página con todo el codigo de nuestro perfil, y para no buscar una aguja en un pajar, presionamos "Ctrl" + "F", para que nos abra el formulario de busqueda; insertamos el inicio del codigo; escribimos esto: *<object id="shell"*, sin los asteriscos; y damos ENTER; cuando aparezca lo que buscamos, seleccionamos desde ahí hasta 24 a 39 lineas (varía); hasta el segundo "</OBJECT>"; listo; ese es el codigo completo de nuestro reproductor. NOTA: en algunos casos de 1.0 y 2.0 habrá que buscar *<object classid="*, pero cuidando de que no sea un video que hayamos insertado ya; atención. (Verifica que el final de tu codigo sea como este) Quedaría así: Posteado por Max Hurbano para Taringa.net <object id="shell" name="shell" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="345" align="middle"> <param name="movie" value="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" width="450" height="345" align="middle"> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--<!--> <div id="flUgSwfChk"> <h5 id="flUgH1">Get Flash now!</h5> <p id="flUgP">In order to listen or view this content you will have to upgrade your version of Flash.</p> <a href="#" onclick="(function(srcEl){srcEl.href = FlashUpgrade.GetFlashUpgradeURL(true)})(this)"><img id="flUgImg" src="http://x.myspacecdn.com/modules/musicv2/static/img/flash_logo_player.jpg" /></a> </div> <!--[if !IE]>--> </object> <!--<!--> </object> Posteado por Max Hurbano para Taringa.net Ahora lo redimensionaremos; recuerden: buscamos los WIDTH y HEIGHT que hay, y cambiamos por WIDTH="390" y HEIGHT="665"; hagamoslo..!! El resultado sería este: <object id="shell" name="shell" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="390" height="665" align="middle"> <param name="movie" value="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" width="390" height="665" align="middle" > <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--<!--> <div id="flUgSwfChk"> <h5 id="flUgH1">Get Flash now!</h5> <p id="flUgP">In order to listen or view this content you will have to upgrade your version of Flash.</p> <a href="#" onclick="(function(srcEl){srcEl.href = FlashUpgrade.GetFlashUpgradeURL(true)})(this)"><img id="flUgImg" src="http://x.myspacecdn.com/modules/musicv2/static/img/flash_logo_player.jpg" /></a> </div> <!--[if !IE]>--> </object> <!--<!--> </object> Posteado por Max Hurbano para Taringa.net Listo; no se fijen mucho en el espacio que ahora queda entre la ultima canción y la zona de estadisticas; pues como algunos sabrán, cada navegador interpreta el tamaño de un pixel, como mejor entiende. Ahora algo que requiere mucha atención; insertar el reproductor en Myspace. Ya se preguntaron como insertar las medidas en el reproductor que ahora esta en nuestro perfil? Bueno, no llego a tanto...., en realidad no es posible; lo que haremos será insertar este, en otro lugar y hacer desaparecer el que hoy está; esto para perfiles 1.0 y 2.0; para el 3.0 el proceso es menos tedioso; solo se cierra el modulo del Music Player, y se abre uno nuevo de "Cuadro HTML", se inserta el codigo, se guardan los cambios, se publica y listo. Para insertarlo en 1.0 y 2.0, se inserta este codigo al principio de BIOGRAFIA o ACERCA DE MÍ: <style> table table div object{display:none;} </style> Esto hará desaparecer el player actual; si ahora insertamos nuestro flamante reproductor completo.., tampoco se verá..!! Lo que pasa es que ordenamos que todo OBJECT sea borrado de la faz de nuestro perfil. Solución? Meter ese OBJECT en dos DIV; se que suena raro, pero créanme; eso rompe la regla; quedaría así: <style> table table div object{display:none;} </style> <div> <div> <object id="shell" name="shell" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="390" height="665" align="middle"> <param name="movie" value="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" width="390" height="665" align="middle" > <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--<!--> <div id="flUgSwfChk"> <h5 id="flUgH1">Get Flash now!</h5> <p id="flUgP">In order to listen or view this content you will have to upgrade your version of Flash.</p> <a href="#" onclick="(function(srcEl){srcEl.href = FlashUpgrade.GetFlashUpgradeURL(true)})(this)"><img id="flUgImg" src="http://x.myspacecdn.com/modules/musicv2/static/img/flash_logo_player.jpg" /></a> </div> <!--[if !IE]>--> </object> <!--<!--> </object> </div> </div> Posteado por Max Hurbano para Taringa.net Lo unico que resta será darle estilo al DIV (al primero), para colocarlo en el lugar que decidan; STYLE=" POSITION, TOP, LEFT, MARGIN-LEFT, y esas cosas. Eso es trabajo suyo; bueno, si me escriben con sus dudas, será nuestro trabajo.... Y por ultimo colocaremos este y otro reproductor en una tabla, uno del lado del otro, ya redimensionados. La tabla tendrá un TR y este dos TD, uno para cada reproductor. Tambien los centraremos en su celda, mediante TEXT-ALIGN:CENTER, como ya vimos. El codigo completo sería así: <table style="text-align:center;"> <tr> <td> <object id="shell" name="shell" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="390" height="665" align="middle"> <param name="movie" value="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" width="390" height="665" align="middle" > <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=190514585&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2ftabaccoblues&pertid=a5cd43313478017c0000000000000000&pguid=970a9193fd8046e6918c959bd5f1eb92&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAgTFz3n8NNZmQQQNakV9Mj3MAsSX0xugRfLzARwe1mW9D%252fFWU34rihon39ZKHFl%252bL%252b7tghffIvgkycgWxJU5bwOHT43a7zHg5%252bQjJAyeS8T9FpsovuthrvfYCCQMRzGk%252boG5umV9VLSrAFdWuvT497klOGEOjqnmpAWOFoPVO1RvHLxvEK5vRdGeyMAKw%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x00ADEE&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=35896&profid=190514585&ptype=4&artid=6888421&pmix=False&shuffle=False&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=8935555301239934373&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&logerr=0&bacp=0" /> <!--<!--> <div id="flUgSwfChk"> <h5 id="flUgH1">Get Flash now!</h5> <p id="flUgP">In order to listen or view this content you will have to upgrade your version of Flash.</p> <a href="#" onclick="(function(srcEl){srcEl.href = FlashUpgrade.GetFlashUpgradeURL(true)})(this)"><img id="flUgImg" src="http://x.myspacecdn.com/modules/musicv2/static/img/flash_logo_player.jpg" /></a> </div> <!--[if !IE]>--> </object> <!--<!--> </object> </td> <td> <object id="shell" name="shell" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="390" height="665" align="middle"> <param name="movie" value="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=518499183&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2fmaxhurbano&pertid=ee2a5fb6642c85ed0000000000000000&pguid=162dc994bf0242019cb46c14e850dde4&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAjeNpzdPBztdgQQHMfaJ8eFNedVRgQiqckOdwRw%252fX%252bVmRtMAGmBSDU0wClPM4unVLRyf5dJ%252fuE8swDIrnenvLmeThte8nMDHt8lav0MleCyKanJ1gPqefi8ozpVEzPuoeSJG%252fP4Km1s2ncyo9srzmwXJBQxrMds3zLcVbsErODo9odqtIEVz3v3xXqPmQ%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&logerr=True&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x4E67D3&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=1674778&profid=518499183&ptype=4&artid=42135415&pmix=False&shuffle=True&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=-1331609303750071570&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&bacp=0" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://lads.myspacecdn.com/videos/MSMusicPlayer.swf" width="390" height="665" align="middle" > <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="uid=518499183&pcc=en-US&cc=es-MX&el=http%3a%2f%2fwww.myspace.com%2fmaxhurbano&pertid=ee2a5fb6642c85ed0000000000000000&pguid=162dc994bf0242019cb46c14e850dde4&hash=MIG%252bBgkrBgEEAYI3WAOggbAwga0GCisGAQQBgjdYAwGggZ4wgZsCAwIAAQICZgMCAgDABAjeNpzdPBztdgQQHMfaJ8eFNedVRgQiqckOdwRw%252fX%252bVmRtMAGmBSDU0wClPM4unVLRyf5dJ%252fuE8swDIrnenvLmeThte8nMDHt8lav0MleCyKanJ1gPqefi8ozpVEzPuoeSJG%252fP4Km1s2ncyo9srzmwXJBQxrMds3zLcVbsErODo9odqtIEVz3v3xXqPmQ%253d%253d&skinid=17&skin=http%3a%2f%2flads.myspacecdn.com%2fvideos%2fartistInternational.xml&isus=false&on=1&logerr=True&afsongs=4&ayt=15&c1=0xFFFFFF&c2=0x4E67D3&c3=0x363636&c4=0x00ADEE&cip=189.144.188.118&sip=172.16.0.2&ili=true&proftype=7&pfc=SitesProfile&plid=1674778&profid=518499183&ptype=4&artid=42135415&pmix=False&shuffle=True&ap=0&fast=2&fatt=0&fadd=5&fapf=False&rast=5&ratt=0&radd=0&rapf=False&bast=-1&batt=-1&badd=-1&bapf=False&aytast=-1&aytatt=-1&aytadd=-1&xad=1&yad=1&zad=-1&xadoff=1&yadoff=1&zadoff=-1&facp=1&racp=1&showaa=False&xnoad=-1&ynoad=-1&znoad=-1&xnoadcp=-1&ynoadcp=-1&znoadcp=-1&xnoadpf=False&ynoadpf=False&znoadpf=False&v=1.0.1.177&novidslider=0&fscd1=30&fscd2=60&enableembeds=0&enablemgl=1&ar=106&g=Female&isstusr=1&pertid64=-1331609303750071570&ptime=30&pcnt=1&showmm2=True&ctzinfo=-6&sabd=60&usefu=1&hostenv=www.&t=1&mt=audio&bacp=0" /> <!--<!--> <div id="flUgSwfChk"> <h5 id="flUgH1">Get Flash now!</h5> <p id="flUgP">In order to listen or view this content you will have to upgrade your version of Flash.</p> <a href="#" onclick="(function(srcEl){srcEl.href = FlashUpgrade.GetFlashUpgradeURL(true)})(this)"><img id="flUgImg" src="http://x.myspacecdn.com/modules/musicv2/static/img/flash_logo_player.jpg" /></a> </div> <!--[if !IE]>--> </object> <!--<!--> </object> </td> </tr> </table> Posteado por Max Hurbano para Taringa.net Quedó fabuloso, nó..?? Pero esquinado; bueno ahora no es problema; aparte de que ya sabemos como centrarlo, tiene las medidas necesarias para caber casi exactamente en el contenedor de Myspace; o sea que no sería necesario. Ahora que si deseas colocarlos en otro sitio, lo podemos hacer; sabes donde encontrarme. Con esto terminamos..., al fin..!! *Conforme vaya recordando o aprendiendo más, iré actualizando esta página* Posteado por Max Hurbano para Taringa.net Si aún con todos estos ejemplos, sigues teniendo alguna duda, no te preocupes; para que son los amigos..?? Puedes mandar un MP con tus dudas, o escribir a [email protected] o comentar abajo, y haremos hasta lo imposible por solucionarlas; no lo dúdes. Posteado por Max Hurbano para Taringa.net Hablando de estilo; comentar habla bien de tí..!!

Posteado por Max Hurbano para Taringa.net Posteado por Max Hurbano para Taringa.net Diseñado por: Max Hurbano. Videotutorial sobre como cambiar el nombre para mostrar ( el "Alias" ) en Myspace, con los 4 navegadores principales: Chrome, Opera, I-explorer y Firefox (excepto versión 4.0), utilizando la opción "Inspeccionar elemento" del menú contextual ( click derecho sobre "Alias" ). Cabe mencionar que en I-Explorer 9.0 no viene "Inspeccionar elemento" en el menú contextual; hay que ir a: herramientas>Herramientas de desarrollo F12 (si no aparece la barra de menú, presiona "Alt">herramientas>Herramientas de desarrollo F12), y hay que buscar el texto de tu nombre en el cuadro de busqueda; como aparece en el video . Tambien en Firefox, hay que hacer una adicción: instalar el complemento "Firebug"; solo escribe Firebug en la barra de direcciónes e instalalo; reinicia el Firefox, y es el mismo proceso que en Chrome y Opera. ACTUALIZACION: con Safari, vé al ícono de configuración > Preferencias > Avanzado > tilda la opción "Mostrar el menú Desarrollo en la barra de menús" > sigue el mismo proceso. Posteado por Max Hurbano para Taringa.net * * * R E - A C T U A L I Z A C I O N * * * Ahora ya casi no es posible cambiarlo; lo logré nuevamente yendo directamente a este link (escribiendo): www.myspace.com/*NOMBRE DE PERFIL*/about/admin En mi caso: www.myspace.com/tabaccoblues/about/admin o www.myspace.com/maxhurbano/about/admin *Habrá quien en lugar de nombre tenga números. Y seguir el mismo procedimiento. Posteado por Max Hurbano para Taringa.net By: Max Hurbano. Video tutorial contains: how to change the display name on Myspace with the 4 most popular browsers: Chrome, Opera, I-Explorer and Firefox (except 4.0 version), using the "Inspect element" context menu ( right click on "Display name" ). It is noteworthy that in I-Explorer 9.0 does not come "inspect element" on the shortcut menu; you should go to: Tools> Development Tools F12 (if not the menu bar, press "Alt"> Tools> Development Tools F12) and you have to search the text of your name in the search box, as shown in the video. Also in Firefox, an addiction to do: install the "Firebug" just type "Firebug" in the address bar and install it, restart Firefox, then must do the same process as in Chrome and Opera. UPDATE: on Safari go to Settings icon > Preferences > Advanced > Check the "Show Development menu on..." option > Proceed as other browsers. Posteado por Max Hurbano para Taringa.net * * * R E - U P D A T E * * * Now almost imposible to change it; I have did it so: Go directly to this link (writting): www,myspace.com/PROFILE NAME/about/admin In my profile: www.myspace.com/tabaccoblues/about/admin Or www.myspace.com/maxhurbano/about/admin *Would be who display numbers on profile name. Afterwards must proceed as is explained before. Posteado por Max Hurbano para Taringa.net Sin más, el video: Verlo en Youtube.com: (Recomendado a pantalla completa) link: http://www.youtube.com/watch?v=OwGpvi5tOmw Posteado por Max Hurbano para Taringa.net

Tutorial sobre como comprimir series de TV de 350MB a menos de 100MB con calidad aceptable, utilizando el programa: DVDfab 7.0.9.3 Link: http://www.dvdfab.com/es Tutoriales: http://www.dvdfab.com/es/tutoria

No estás harto de ver como son borradas las imágenes de tus posts de Taringa..?? Y tú, que buscas un post/tutorial explicativo y te topas con que las imágenes que estan para "explicar" el procedimiento, no existen más..?? Hay un par de posts de amigos Taringueros, que solucionan de golpe estos inconvenientes. (Es cierto.., esto es un repost..!!) . El primero de ellos, el mejor para mi gusto, es el de crear tu propio hosting de alojamiento de imágenes (100% probado y funcional; y gratis), mediante un script que te permite subir, etiquetar y administrar todas tus imágenes; además, puedes modificar la apariencia, las caracteristicas, y el funcionamiento de tu Hosting, ya que tambien podrías compartir tu sitio para que más gente pueda alojar sus imágenes; tu serías el Administrador, claro. Sin más, el link: http://new.taringa.net/posts/hazlo-tu-mismo/8483007/Crea-tu-Propio-Tinypic-_-Monta-tu-Servidor-de-imagenes.html El segundo, es sobre como acortar/convertir tus links (enlaces) de por ejempo: image shack.us o *** (menos recomendado), para poder insertarlos en tu post de Taringa sin que sea borrada tu imágen. El post es este: http://www.taringa.net/posts/taringa/6238225/Insertar-imagenes-de-Image-shack-en-Taringa_.html Los sitios para acortar/convertir tus links, son: http://tinyurl.com/ y http://bit.ly/ Un par de ejemplos: primero, una imágen .gif con transparencia, alojada en mi Hositng (creado gracias al primer post al que hago referencia arriba), y luego, otro de la misma imágen alojada en Image Shack, acortados/convertidos en TinyURL.com y Byt.ly (respectivamente): Gracias a estos dos carnales por sus aportes; mi intención solo es informativa y recopilatoria, aunque igual podrían comentar; si les sirve o si tienen alguna alternativa más (mejor, peor..?? eso es lo de menos). A fin de cuentas, lo importante es mejorar nuestros posts (ya son muchos que consulto y que no tienen ya sus imágenes, las cuales ayudan a mucho novatos como yo, y a los no Taringueros que buscan de nuestra ayuda. (Si te dá weva armar tu Hosting, usa el mío: http://maxhurbano.byethost7.com ya conoces las reglas generales, jejeje. P.D.T. Por cierto, ni siquiera me permite escribir Image Shack junto...!!! Que loco, nó..??

Video captura de el sitio oficial de la banda Tabacco Blues, recolilación de codigos HTML y CSS de la web, corregidos, aumentados, modificados, reinventados, desencriptados, etc.... Si crées que te sirve algún codigo, solo pregunta a: [email protected] Página: http://www.myspace.com/tabaccoblues (OJO: solo perfiles sin actualizar) link: http://www.youtube.com/watch?v=AKjyau4niEk