Tutorial: Presentaciones Con Foto De Fondo

martes, septiembre 25, 2012 68 Comments A+ a-

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

Write comentarios
xBuBUxD
AUTHOR
martes, septiembre 25, 2012 delete

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 ^^

Reply
avatar
Anónimo
AUTHOR
martes, septiembre 25, 2012 delete

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

Reply
avatar
Unknown
AUTHOR
martes, septiembre 25, 2012 delete Este comentario ha sido eliminado por el autor.
avatar
Anónimo
AUTHOR
martes, septiembre 25, 2012 delete

Graciias de que forma te lo puedo agradecer? *-*

Reply
avatar
Anónimo
AUTHOR
martes, septiembre 25, 2012 delete

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

Reply
avatar
xBuBUxD
AUTHOR
martes, septiembre 25, 2012 delete

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....

Reply
avatar
Anónimo
AUTHOR
miércoles, septiembre 26, 2012 delete

es ke las otras estaban muy monas *-*

Reply
avatar
xBuBUxD
AUTHOR
miércoles, septiembre 26, 2012 delete

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.

Reply
avatar
Anónimo
AUTHOR
miércoles, septiembre 26, 2012 delete

graaaciaaaas *o*

Reply
avatar
Anónimo
AUTHOR
miércoles, septiembre 26, 2012 delete

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 =)

Reply
avatar
Agustina
AUTHOR
lunes, octubre 01, 2012 delete

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

Reply
avatar
Ori Y Mafer
AUTHOR
martes, octubre 16, 2012 delete

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

Reply
avatar
Anónimo
AUTHOR
viernes, octubre 19, 2012 delete

Ahora mismo lo estoy haciendo en unrato lo tendre soy ROSA_ROSA1

Reply
avatar
Anónimo
AUTHOR
sábado, octubre 20, 2012 delete

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?

Reply
avatar
LaetitiaAnn
AUTHOR
sábado, octubre 20, 2012 delete

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?

Reply
avatar
xBuBUxD
AUTHOR
domingo, octubre 21, 2012 delete

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:

Reply
avatar
Anónimo
AUTHOR
lunes, octubre 22, 2012 delete

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:

Reply
avatar
LaetitiaAnn
AUTHOR
lunes, octubre 22, 2012 delete

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

Reply
avatar
Unknown
AUTHOR
domingo, noviembre 04, 2012 delete

No entendí nada :3 me pueden ayudar?

Reply
avatar
jueves, noviembre 08, 2012 delete

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 ♥

Reply
avatar
xBuBUxD
AUTHOR
jueves, noviembre 08, 2012 delete

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:

Reply
avatar
viernes, noviembre 09, 2012 delete

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

Reply
avatar
Unknown
AUTHOR
jueves, diciembre 13, 2012 delete Este comentario ha sido eliminado por el autor.
avatar
Fan De BuBu♥
AUTHOR
lunes, diciembre 17, 2012 delete

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

Reply
avatar
miércoles, diciembre 19, 2012 delete

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

Reply
avatar
miércoles, diciembre 19, 2012 delete

ayudaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Reply
avatar
fan de bubu y de petalo15 forever
AUTHOR
jueves, diciembre 20, 2012 delete

mil grx sos o mas buubuu

Reply
avatar
Anónimo
AUTHOR
viernes, diciembre 21, 2012 delete

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 =)

Reply
avatar
Anónimo
AUTHOR
viernes, diciembre 21, 2012 delete

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...

Reply
avatar
Aguus
AUTHOR
viernes, diciembre 21, 2012 delete

Buenisima! me encanto tu blog ♥ ;)

Reply
avatar
Andrea Mazon
AUTHOR
miércoles, enero 16, 2013 delete

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?

Reply
avatar
Anónimo
AUTHOR
jueves, enero 24, 2013 delete

jenial gracias me re sirvio tu truco busquenme me llamo gaturrina10 !!!!!

Reply
avatar
Anónimo
AUTHOR
domingo, febrero 03, 2013 delete

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!

Reply
avatar
Anónimo
AUTHOR
viernes, febrero 08, 2013 delete

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

Reply
avatar
Megui
AUTHOR
domingo, febrero 24, 2013 delete

Awww me salio! gracias!!

Reply
avatar
Anónimo
AUTHOR
domingo, junio 02, 2013 delete

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!!

Reply
avatar
Anónimo
AUTHOR
domingo, junio 09, 2013 delete

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

Reply
avatar
SusiPopStar
AUTHOR
jueves, junio 20, 2013 delete

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

Reply
avatar
Anónimo
AUTHOR
viernes, julio 05, 2013 delete

me funciono muy bien! gracias :D

Reply
avatar
Iñaki
AUTHOR
sábado, julio 13, 2013 delete

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

Reply
avatar
Anónimo
AUTHOR
sábado, agosto 03, 2013 delete

Graciass me ha servido de muCHisimaa ayudaa

Reply
avatar
Unknown
AUTHOR
lunes, agosto 12, 2013 delete

Si e funcionoooo :BB asdjasjfsa graciassssss

Reply
avatar
Unknown
AUTHOR
viernes, septiembre 06, 2013 delete

Muchas gracias, me encantooo *.* xD

Reply
avatar
MitchiTorrez
AUTHOR
lunes, septiembre 16, 2013 delete

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 :)

Reply
avatar
Loveeee megatips
AUTHOR
lunes, septiembre 16, 2013 delete

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

Reply
avatar
sophitas41
AUTHOR
miércoles, octubre 02, 2013 delete

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

Reply
avatar
Unknown
AUTHOR
sábado, noviembre 09, 2013 delete

Grax me funciono re bien visitenme hippyCoverGirl

Reply
avatar
Anónimo
AUTHOR
miércoles, diciembre 18, 2013 delete

No entendí :c

Reply
avatar
Anónimo
AUTHOR
lunes, enero 06, 2014 delete

a mi no me funcionan

Reply
avatar
VICKYBALDI
AUTHOR
miércoles, enero 15, 2014 delete

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

Reply
avatar
malena
AUTHOR
sábado, enero 18, 2014 delete

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

Reply
avatar
sábado, febrero 15, 2014 delete

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

Reply
avatar
Anónimo
AUTHOR
miércoles, marzo 19, 2014 delete

Da asco pelotuda es Mucho :P Concha pajeera

Reply
avatar
Anónimo
AUTHOR
sábado, marzo 22, 2014 delete

no me funciona

Reply
avatar
Anónimo
AUTHOR
lunes, abril 07, 2014 delete

QUE MALLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL

Reply
avatar
Anónimo
AUTHOR
viernes, mayo 02, 2014 delete

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

Reply
avatar
Anónimo
AUTHOR
martes, junio 17, 2014 delete

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

Reply
avatar
Anónimo
AUTHOR
martes, julio 08, 2014 delete

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

Reply
avatar
Jay Pen
AUTHOR
lunes, julio 14, 2014 delete

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

Reply
avatar
Unknown
AUTHOR
lunes, julio 28, 2014 delete

Podrian pasarme la pagina de los codigos de los colores?

Reply
avatar
Anónimo
AUTHOR
martes, julio 29, 2014 delete

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.

Reply
avatar
Cderemos
AUTHOR
domingo, septiembre 28, 2014 delete

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

Reply
avatar
Anónimo
AUTHOR
miércoles, octubre 15, 2014 delete

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

Reply
avatar
Unknown
AUTHOR
jueves, noviembre 20, 2014 delete

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 :(

Reply
avatar
Anónimo
AUTHOR
viernes, noviembre 06, 2015 delete

MUY BUENO EL TUTORIAL

Reply
avatar

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