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
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> <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.
Usaremos éste: http://htmledit.squarefree.com/
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.
Pueden usar ésta: http://html-color-codes.info/codigos-de-colores-hexadecimales/
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
Write comentariosHAHAHAHA 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 ^^
Replyuna preguntita que dolls usaste para hacer las presentaciones osea en que dolls hiciste las tres presentaciones espero me respondas salu2
Replyendorfina18
ReplyGraciias de que forma te lo puedo agradecer? *-*
Replyy las otras dolls que usaste para las otras preses ke nos mostraste antes como se llaman
Replycual 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....
Replyes ke las otras estaban muy monas *-*
Replyok,,, 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.
Replygraaaciaaaas *o*
ReplyDisculpa, 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.
ReplyGracias, está muy linda =)
Muchas gracias! Lo pude hacer, hace un montón que lo buscaba y nunca lo encontraba. Gracias.
ReplyHola e visto dolls que tienen diferentes tablas y me gustaria cambiar la mia porque mi nombre es muy largo ¿que puedo hacer?:(
ReplyAhora mismo lo estoy haciendo en unrato lo tendre soy ROSA_ROSA1
ReplyNah... 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?
Replyeso me paso a mi... era k no me habia dado cuenta que me falta el cierre del codigo... esto >
Replyverifica 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?
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:
ReplyUna 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:
Reply;) ..gracias por responder... pues k lastima tenia una foto linda que poner :(
ReplyNo entendà nada :3 me pueden ayudar?
ReplyHice 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 ♥
Replyeso pasa cuando usas imagenes que no son de stardoll, tenes que usar solo fotos de las que tenes guardadas en tu camara..
ReplySi pones todo bien y aun te pasa eso, no sabria decirte que anda mal D:
Yo pongo imagen de la camara mia de stardoll . No importa si saves la respuesta o no , muchichichisimas gracias igualmente ♥
ReplyQue suerte que existe copiar y pegar!! digo por el codigoto!!jajajaja! Besos BuBu!♥:3
ReplyOla linda ske..a mi no me permite guardarla xk ya le puse mi texto y dise k segun tiene groserias!!!!!!!!!!!!!!!!!!!!!!!!!!!
Replyayudaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Replymil grx sos o mas buubuu
ReplyGraciass 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 =)
Replyno 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...
ReplyBuenisima! me encanto tu blog ♥ ;)
ReplyHola! 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?
Replyjenial gracias me re sirvio tu truco busquenme me llamo gaturrina10 !!!!!
ReplyNo 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!
Replyem 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
Replygracias!
ReplyAwww me salio! gracias!!
ReplyTe 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!!
ReplyHols yo cuando puse el texto en mi presentacion cuando guardava me ponia la barra para bajar pero no bajaba del todo. ¿que hago?
ReplyMe funciona pero es que todavÃa tengo que hacer unos arreglillos... :S¡Pero muxas gracias!
Replyme funciono muy bien! gracias :D
Replyme gustooooooo demasiado tu presentacion y tu fotooo asiq eu pooooorfavooor no te enfadeeess pero use tu fotoooo!!
ReplyGraciass me ha servido de muCHisimaa ayudaa
ReplySi e funcionoooo :BB asdjasjfsa graciassssss
ReplyMuchas gracias, me encantooo *.* xD
ReplyHola, 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 :)
ReplyGenial!! Ya la hice! Visitame pls
Replycharlene2001 ( En Stardoll) Para q veais mi presentacion
AAAY graciiias, me sirvio tanto me quedo bellako *--* ,visitenme soy cami4190
ReplyGrax me funciono re bien visitenme hippyCoverGirl
ReplyNo entendà :c
Replya mi no me funcionan
Replybubu puedo ser escritora? ^^se muchos trucos y como hacer precentasiones hermoshas y mas facil q nunca ^-^
Replyno se lo del codigo intento intento y no me sale per voy aseguir intentando
Replyhttp://www.stardoll.com/member/lisetsn
ReplyDa asco pelotuda es Mucho :P Concha pajeera
Replyno me funciona
ReplyQUE MALLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
Replyno me sirve no se porr que segui todos , los pasos me das listo todo ?????
ReplyHAY GRACIAS ME ENCANAT COMO QUEDO TOQUE CUALQUIER COSA PERO QUEDO HERMOZA MIRENLA ME LLAMO MORASOFIA5
ReplyTablas? de que hablas no te entindo si me expliicaras....
Replyme encanto este tutorial! :D esta genial, gracias (: de vdd!
ReplyPodrian pasarme la pagina de los codigos de los colores?
ReplyHola Como hago Para Cambiar El icono De la Flecha En Otro Icono Para Mi Presentacion? Contestame En Mi Libro De Visitas Me Llamo : ChicaGomi.
ReplyHOLA linda gracias ESTA BUENISIMO me encanto todo tu blog: 10000000000000000000000000000000000000000000/45
Replyyo tengo una mas facil ¡¡¡ solo mover lo k kieras a tu presentacion¡¡
Replypofavor ayuda
Replyhice 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 :(
ReplyMUY BUENO EL TUTORIAL
ReplyComenta con respeto por favor, y muchas gracias por visitar el blog (: