martes, septiembre 25, 2012

Tutorial: Presentaciones Con Foto De Fondo

Ya me imaginaba que a uds le interesaria ésto, sólo queria confirmarlo haha!! Necesito que lean detenidamente porque es algo un poco complicado de entender al principio, entonces pongan de su parte en aprender y tratar de entender.

Ya tienen la disposicion de aprender? Entonces empecemos!!
Hagan clic en las imágenes para verlas más grandes

Ésta es la presentación que haremos:



Lo que necesitarán:

1.* El codigo HTML del estilo de la presentacion, yo se lo facilitaré, por el momento solo pondré uno, luego pondré otros estilos al pasar los días. No se asusten con el código hahahahah!!

Código HTML: 

<p style="margin: auto; box-shadow: #DF01A5 3px 0px 20px; padding: auto; width: 550px; height: 450px; border: 8px groove #01A9DB; background-color: #cd1076; color: #0B0B3B ; font-family: Lucida Calligraphy,'Calibri',comic sans; overflow: hidden; display: block;""><span style="; margin-top: 10px; margin-left: -100px; padding: auto; width: 400px; background-color: #01A9DB; text-decoration; text-shadow: 0px 3px 6px #A901DB; color: #ffffff; font-family: Harrington; font-size: 50px; text-align: center; opacity: 0.9; transform; z-index: 2; overflow: hidden; display: block;""><em>NICK</em></span><span style="margin-top: -95px; margin-left: 225px; width: 300px; height: 16px; font-size: 15px; letter-spacing: 2px; text-align: center; ; z-index: 2; overflow: hidden; display: block;""><strong></strong><strong></strong><br /><br /><br /></span>&nbsp;<span style="margin-top: -12px; padding: 0px; width: 550px; ; z-index: 1; overflow: hidden; display: block;""><img src="http://www.sdcdn.com/camera/143/626/143626042.jpg" alt="" /> </span><span style="margin-left: 25px; margin-top: -360px; padding: 5px; width: 495px; height: 290px; font-size: 18px; opacity: 0.8; z-index: 2; text-align: left; overflow: auto; display: block; color: #000000;""><br />Holaa aqui pueden escribir lo que quieran para su presentacion <br /><br />Y aqui tambien hahahaha.....<br /><br /><br /><br />Espero que les haya gustado<br /> Chaufas!!!!!!!!<br /><br /><br /></span><strong></strong></strong></p>

2.* Un editor online de HTML, para editar a nuestro gusto el estilo de presentacion. 


3.* Una página que me muestre los codigos HTML de los colores, hay cientos de éstas páginas las pueden buscar en google, la que más se le haga facil su uso.


4.* Una foto hermosa se su doll, ésta será la que colocarán de fondo de la presentación y solo deben ir a stardoll y tomar una foto con su cámara, o bien elegir una foto de las que ya tengan antes.


Esas son las 4 cosas básicas que necesitamos, ahora procedo a explicar lo que deben hacer ^^.


A) Lo primero que vamos a hacer es ir al editor html (el link está mas arriba), luego copiamos el código que les di anteriormente y lo pegamos en la parte azul del editor html, así:


Automaticamente peguen el código en la parte azul, debajo les mostrara la presentación que corresponde a ese código.

B) Ahora procederemos a cambiar el fondo de la imagen, como ven tiene una foto mia, pues uds pondrán su foto, de éste modo:

1.- Van a la sección de sus fotos en stardoll, para eso solo hacen click en album y luego click en fotos. 
2.- Buscan la foto que les guste más o la que quieran usar como fondo y hacen click derecho encima de la imagen, luego en el menu que les aparece, seleccionan "Copiar Url de la imagen". De éste modo:


3.- Bien, ahora va lo fundamental, donde pegaremos éste url o link, pues vamos al editor html y buscamos en el código la parte que corresponde a la imagen y la vamos a reemplazar por el url o link que acabos de copiar de nuestra imagen en stardoll. 

Sólo seleccionamos esa parte del código, la borramos y pegamos el url que copiamos antes de la foto (El url debe quedar dentro de las dos comillas chicas).  Ésta es la ubicación en el código:



C) Ahora vamos a editar el nombre en la franja que dice "NICK", le puse nick para que fuera referencia de que ahí debe poner un nombre que quieran. No puede ser muy largo porque entonces no cabe o no se ve bien así, que recomiendo que no sea algo de mas de 6 ó 7 letras.

Para eso deben ir al código en el editor y buscar la parte del código donde diga NICK, borran la palabra nick y escriben el nombre que quieran, de este modo:



Nota: Algo importante, sólo editare el nombre principal, desde el editor html, el otro texto de la presentación no lo editen el editor, dejenlo tal cual, luego que pongan el codigo en stardoll, ahí se hará más facil cambiar el texto por lo que uds quieran escribir ^^.

D) Ya tenemos nuestra foto de fondo y el nombre principal, ahora vamos a editar los colores de nuestra presentacion. Ponga mucha atención que acá si que confunde hahaha.

En todo el codigo verán cosas como ésta por ejemplo #2A0A22, el signo de número seguido de letras y números,  eso nos indica que utiliza un color. Entonces lo que haremos es ir a la página que les proporcioné para los colores html, al hacer click en uno de los colores de la paleta de colores, debajo se les pondrá el código correspondiente a ese color. Deben seleccionar ese código y reemplazar por éste el color que desean cambiar de la presentacion.

Por ejemplo: si quieren cambiar el color de los puntitos del borde: el estilo de borde se llama "dotted", siempre que vean eso le seguirá el codigo del color, entonces sólo borran ese color que esta y ponen el que quieren, así: 



Nota: Ven en la imagen anterior del código, donde sombreo el color, dice ésto "4px dotted #FF0080;" delante de dotted dice 4px o sea 4 pixeles, ese es el grosor del borde, si lo quieren hacer mas grueeso o fino, solo disminuyan o aumenten el valor que está ahí.

Bueno, bueno hahaha! el tutorial se está haciend muy largo, por lo que tendre que simplicar explicaciones del codigo, sólo les puedo decir que prueben todos los códigos de colores que estén en el codigo de la presentacion, así se van dando cuenta que color es de cada cosa, para de éste modo cambiarlo al que uds quieran. Ya les explique como se cambiaba el color del borde, pues de éste modo pueden cambiar los colores de las demas cosas.



E) Una vez tengamos nuestro códdigo editado correctamente con los colores que elegimos y todo eso, procedemos a ponerlo en stardoll.

Entonces lo que haremos es seleccionar todo el código de la parte azul del editor html y lo vamos a pegar en el panel de nuestra presentación en stardoll, así: 




Luego hacemos click en "Guardar" y nos dará error la presentación. Al darnos error, nos convertirá el código que pegamos en la imagen de la presentacion, entonces ahi procedemos a editar todo el texto que está, por lo que queremos escribir en nuestra presentacion, los datos de nuestra doll, frases o lo que sea que quieran poner.

Nota: al escribir no presionen enter, porque es que se les crea otro panel debajo, tendrán que escribir seguido y cuando llene la linea entonces ella misma bajará a la siguiente. Si quieren hacerlo con espacios, tendran que editarlo en el codigo, mediante el editor html, ya eso es cuestión de cada quien, si quieren ponerse a probar, porque yo sólo les estoy dando lo básico.

Luego que cambien el texto que está por lo que uds quieran, guardan la presentación y listo!! tendrán una hermosa presentación como ésta:



Ésto fue todo, bastante largo el tutorial, quise explicar más cosas pero se hacia más y más largo y bueno, leanlo detenidamente y háganlo sin prisa, ojala que les ayude y si no entienden algo preguntan acá en la entrada o en nuestro chat de al lado. En un rato empezaré a crear en tutorial en video para que vean las cosas que edito y como lo hago yo. 

Saluditos y gracias por seguir nuestro blog *O*



68 comentarios:

  1. HAHAHAHA al ver el codigo desde aquí hasta yo me asuste!! chicas desde el post se ve mas grande el codigo en el editos es bien peque fijense en las imagenes, no se asusten intentenlo ^^

    ResponderEliminar
  2. una preguntita que dolls usaste para hacer las presentaciones osea en que dolls hiciste las tres presentaciones espero me respondas salu2

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  4. Graciias de que forma te lo puedo agradecer? *-*

    ResponderEliminar
  5. y las otras dolls que usaste para las otras preses ke nos mostraste antes como se llaman

    ResponderEliminar
    Respuestas
    1. cual es tu insistencia?,,,, disculpa pero mas arriba te dije que doll use, fue esa solo que borraba la presentacion y la volvia a hacer con fotos diferentes....

      Eliminar
    2. es ke las otras estaban muy monas *-*

      Eliminar
    3. ok,,, puedo poner los codigos de las demas, se hace igual editando los colores y la imagen, todo es el mismo procedimiento, solo que son diseños diferentes.

      Eliminar
  6. Disculpa, pero a mi me queda el fondo, ese que a vos te quedó rosadito, a mi me queda blanco, y lo puse en un color algo asi como verde agua. No sé que pasó, si puedes decirme como arreglarlo, me serviría mucho.
    Gracias, está muy linda =)

    ResponderEliminar
  7. Muchas gracias! Lo pude hacer, hace un montón que lo buscaba y nunca lo encontraba. Gracias.

    ResponderEliminar
  8. Hola e visto dolls que tienen diferentes tablas y me gustaria cambiar la mia porque mi nombre es muy largo ¿que puedo hacer?:(

    ResponderEliminar
    Respuestas
    1. Tablas? de que hablas no te entindo si me expliicaras....

      Eliminar
  9. Ahora mismo lo estoy haciendo en unrato lo tendre soy ROSA_ROSA1

    ResponderEliminar
  10. Nah... lo ise tal cual y me aparecio pero no se puede guardar dice k el texto tiene groserias y borro y borro y cada ves pone mas palabras y no puedo hacerlo :( como ago?

    ResponderEliminar
    Respuestas
    1. eso me paso a mi... era k no me habia dado cuenta que me falta el cierre del codigo... esto >

      verifica que no falte nada..

      gracias por tu tutorial Bubu... me sirvio de mucho!!! ;)

      p.d.: yo solo me quede con una duda...intente ponerlo una foto que subi a un hosting gratuito... y se borraba al ponerlo en el blog de stardoll, no se si me explico?..no es posible esto?

      Eliminar
    2. stardoll solo permite utilizar en tu presentacion fotos que guardas en tu camara de stardoll o las fotos de los looks que guardas en tu album... yo intente usando fotos de esas que suben en los clubs, como tambien tienen el link de que pertenecen a stardoll, pero tambien las borraban D:

      Eliminar
    3. ;) ..gracias por responder... pues k lastima tenia una foto linda que poner :(

      Eliminar
  11. Una cosita linda...Te agregue no se si me recuerdas (paulafer10) , a mi el código de esta ppresentacion me sale otro, no m esale el diseño que puesiste en la foto...Si no te mporta linda , me podries enviar mas links en stardoll ?¿ Graxx te lo agradezco muchísmas guapaaa C:

    ResponderEliminar
  12. No entendí nada :3 me pueden ayudar?

    ResponderEliminar
  13. Hice todo perfecto , en la pagina de Real-time me sale la foto , pero cuando pego el codigo en stardoll me aparece solo el fondo , osea , sin la imagen mia . Lei los comentarios y me fije que una chica dijo que no le tenain que faltar estas : > < , yo tengo TODO el codigo copiado pero al imagen no me aparece , por favor ayudenme . Gracias igualmente ♥

    ResponderEliminar
    Respuestas
    1. eso pasa cuando usas imagenes que no son de stardoll, tenes que usar solo fotos de las que tenes guardadas en tu camara..

      Si pones todo bien y aun te pasa eso, no sabria decirte que anda mal D:

      Eliminar
    2. Yo pongo imagen de la camara mia de stardoll . No importa si saves la respuesta o no , muchichichisimas gracias igualmente ♥

      Eliminar
  14. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  15. Que suerte que existe copiar y pegar!! digo por el codigoto!!jajajaja! Besos BuBu!♥:3

    ResponderEliminar
  16. Ola linda ske..a mi no me permite guardarla xk ya le puse mi texto y dise k segun tiene groserias!!!!!!!!!!!!!!!!!!!!!!!!!!!

    ResponderEliminar
    Respuestas
    1. no te preocupes,amí me pasaba eso todo el rato. Lo que hice fue pasar el código a Stardoll antes de escribir nada. Y luego, en Stardoll, ya escribí todo lo que quería poner, y cuando me siguio diciendo eso, copié todo el texto y lo pasé a Microsoft word. Copiaba una frase de word a stardoll, y guardaba, volvía a darle a modificar y copiaba otra frase más, así hasta que me volvía a decir lo de las groserias, y entonces eliminaba esa frase y no la volvia a poner. Y asi lo he conseguido. Es un poco lioso, pero a mi es lo qe me ha valido...

      Eliminar
  17. ayudaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    ResponderEliminar
  18. fan de bubu y de petalo15 foreverjueves, diciembre 20, 2012

    mil grx sos o mas buubuu

    ResponderEliminar
  19. Graciass me ha servido de muxisimaa ayudaa. Solo una cosa: la presentación que me ha salido con ese código HTML, no es la misma que has puesto en la imagen... Me gustaría mucho que pusierais el código para hacer la presentación que pone en la imagen, gracias =)

    ResponderEliminar
  20. Buenisima! me encanto tu blog ♥ ;)

    ResponderEliminar
  21. Hola! Mira, tengo un problema, al darle click derecho a la imagen de stardoll, no me sale la opción "Copiar url de la imagen" ¿Qué hago?

    ResponderEliminar
  22. jenial gracias me re sirvio tu truco busquenme me llamo gaturrina10 !!!!!

    ResponderEliminar
  23. No se como agradecerte, igual no me quedo tan igual. Mi cuenta es: Cande.lomas visitenla y diganme si les gusto como me quedo. muchas gracias chica!

    ResponderEliminar
  24. em ami cuando apreto la imagen con el mouse no me aparece "Copiar url de la imagen" ¿como puedo hacer para q me aparesca o para poner una foto de mi doll? igual grax

    ResponderEliminar
  25. Te agradezco mucho por el truco :) graciass :D para mi gusto me quedo muy bien pueden dejar sus opiniones en un comment en mi suite:D me llamo AngeHappyLove ;) Gracias!!

    ResponderEliminar
  26. Hols yo cuando puse el texto en mi presentacion cuando guardava me ponia la barra para bajar pero no bajaba del todo. ¿que hago?

    ResponderEliminar
  27. Me funciona pero es que todavía tengo que hacer unos arreglillos... :S¡Pero muxas gracias!

    ResponderEliminar
  28. me funciono muy bien! gracias :D

    ResponderEliminar
  29. me gustooooooo demasiado tu presentacion y tu fotooo asiq eu pooooorfavooor no te enfadeeess pero use tu fotoooo!!

    ResponderEliminar
  30. Graciass me ha servido de muCHisimaa ayudaa

    ResponderEliminar
  31. Si e funcionoooo :BB asdjasjfsa graciassssss

    ResponderEliminar
  32. Muchas gracias, me encantooo *.* xD

    ResponderEliminar
  33. Hola, me parece genial el tuto, pero a mi me gustaría poder usar la presentación que tú usaste, porque nos das un código diferente al del que tu usas. Me encantaría poder usar el otro code, que para mi parecer esta mas lindo :)

    ResponderEliminar
  34. Genial!! Ya la hice! Visitame pls
    charlene2001 ( En Stardoll) Para q veais mi presentacion

    ResponderEliminar
  35. AAAY graciiias, me sirvio tanto me quedo bellako *--* ,visitenme soy cami4190

    ResponderEliminar
  36. Grax me funciono re bien visitenme hippyCoverGirl

    ResponderEliminar
  37. a mi no me funcionan

    ResponderEliminar
  38. bubu puedo ser escritora? ^^se muchos trucos y como hacer precentasiones hermoshas y mas facil q nunca ^-^

    ResponderEliminar
  39. no se lo del codigo intento intento y no me sale per voy aseguir intentando

    ResponderEliminar
  40. http://www.stardoll.com/member/lisetsn

    ResponderEliminar
  41. Da asco pelotuda es Mucho :P Concha pajeera

    ResponderEliminar
  42. QUE MALLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL

    ResponderEliminar
  43. no me sirve no se porr que segui todos , los pasos me das listo todo ?????

    ResponderEliminar
  44. HAY GRACIAS ME ENCANAT COMO QUEDO TOQUE CUALQUIER COSA PERO QUEDO HERMOZA MIRENLA ME LLAMO MORASOFIA5

    ResponderEliminar
  45. me encanto este tutorial! :D esta genial, gracias (: de vdd!

    ResponderEliminar
  46. Podrian pasarme la pagina de los codigos de los colores?

    ResponderEliminar
  47. Hola Como hago Para Cambiar El icono De la Flecha En Otro Icono Para Mi Presentacion? Contestame En Mi Libro De Visitas Me Llamo : ChicaGomi.

    ResponderEliminar
  48. HOLA linda gracias ESTA BUENISIMO me encanto todo tu blog: 10000000000000000000000000000000000000000000/45

    ResponderEliminar
  49. yo tengo una mas facil ¡¡¡ solo mover lo k kieras a tu presentacion¡¡

    ResponderEliminar
  50. Respuestas
    1. hice todo perfectamente y me ha quedado bello el tema es otro me dice que no lo puedo guardar ya que contiene un texto grosero. pero no es así. la palabra que dice que es grosera es: (florchytta bienvenidos me llamo) que yo sepa no es grosero :( y cuando lo borro me dice que lo que sigue de esa frase es grosera -.- necesito ayuda urgentee pliss :(

      Eliminar

Comenta con respeto por favor, y muchas gracias por visitar el blog (: