¡Hola, hola!
Después de unos días de descanso, he vuelto con las pilas recargadas
y vengo con un tema súper interesante que sé que
a todas las chicas les interesará un montón.
Hoy aprenderemos a cambiar las imágenes
tanto en el código HTML como en Stardoll
y a redondear los bordes de éstas.
y a redondear los bordes de éstas.
Recuerda que ya hablamos de tamaños y fuentes
y de color y palabras
así que a esta presentación hoy le haremos un súper cambio.
Pueden verla en su blog de origen aquí.
y de color y palabras
así que a esta presentación hoy le haremos un súper cambio.
Pueden verla en su blog de origen aquí.
<br><p style="background-color: #fff; border: 5px #ff3399 solid; box-shadow: 0px 0px 10px #fff; width: 540px; margin: auto; text-align: center; color: #000; font-size: 12px; overflow: hidden;"title="© Skittle.Fashion © aniyah-xxxx"><br><br><span style="border: 1px solid white; box-shadow: 0px 0px 7px black; margin-left: 25px; color: #000000; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 15px; padding: 0px; text-align: center; width: 150px; height: 150px; overflow: hidden;" title="© Skittle.Fashion © aniyah-xxxx"><img src="http://www.sdcdn.com/camera/477/671/477671945.jpg" alt="" height="160"></span><span style="border: 1px solid white; box-shadow: 0px 0px 7px black; margin-left: 15px; color: #000000; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 15px; padding: 0px; text-align: center; width: 150px; height: 150px; overflow: hidden;" title="© Skittle.Fashion © aniyah-xxxx"><img src="http://www.sdcdn.com/camera/477/672/477672305.jpg" alt="" height="150"></span><span style="border: 1px solid white; box-shadow: 0px 0px 7px black; margin-left: 15px; color: #000000; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 15px; padding: 0px; text-align: center; width: 150px; height: 150px; overflow: hidden;" title="© Skittle.Fashion © aniyah-xxxx"><img src="http://www.sdcdn.com/camera/477/671/477671945.jpg" alt="" height="160"></span><br><br><span style="font-family: Bradley hand ITC;"><span style="font-size: 70px;color:#355573;><strong><span style="font-size:48px;"><span style="color:#1a000d;">K</span><span style="color:#aaa79b;"></span><span style="color:#4d0026;">I</span><span style="color:#b7ae8c;"></span><span style="color:#800040;">N</span><span style="color:#c4b57d;"></span><span style="color:#b30059;">G</span><span style="color:#d1bc6e;"> </span><span style="color:#e60073;">K</span><span style="color:#dec45f;"></span><span style="color:#ff1a8c;">Y</span><span style="color:#ebcb50;"></span><span style="color:#ff4da6;">L</span><span style="color:#ff69b4;">I</span><span style="color:#ff99cc;">E</span></span><br><span style="font-size: 16px;"><span style="font-family: lucida sans unicode,lucida grande,sans-serif;">Kylie Jenner • 19 • KUWTK On E! • #tyga</span><span style="font-size: 12px;"><span style="font-family: lucida sans unicode,lucida grande,sans-serif;"><br><br>Kylie Kristen Jenner is an American reality television personality, socialite, fashion designer and model. She is best known for appearing on the E! reality television series Keeping Up with the Kardashians.<br>Doll by LilJenner and design by KendalIJenner<br>Follow Kylie On Instagram @kyliejenner<br/>This was requested presentation. Please leave requests in my guestbook. I am doing more Kylie presentations as she is quiet popular<strong></strong><br> </span></span></p><br><br>
Bien, lo que deben saber es que Stardoll solo permite añadir imágenes
tomadas con la cámara de Stardoll, y deben tener este link:
http://www.sdcdn.com/camera/477/671/477671945.jpg
Y lo consiguen yendo a su
Suite > Fotos > Clic derecho sobre la foto > Copíar dirección de imagen
y un dato importante es que estos links son permanentes,
aunque borres las fotos de tu galería, el link te seguirá funcionando.
Pero bueno, empezando por lo bueno, detectemos en donde está el código de la imágen
en el HTML que les he dejado arriba.
Les he facilitado el trabajo dejándoselos en rojo.
También le redondearemos los bordes a las fotos pero ésta vez hay algo que nos puede confundir
y es que a veces las imágenes están dentro de "boxes"
por lo que el código que lo modifica no es el que añade la imágen
sino el de la box, que en este caso es lo que está antes de la imágen
y que en este caso, como pueden deducir, es lo que le da esa sombra al borde
se los he dejado en azul para que sepan distinguirlo.
Entonces para redondear los bordes pasaremos de esto
<span style="border: 1px solid white; box-shadow: 0px 0px 7px black; margin-left: 25px; color: #000000; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 15px; padding: 0px; text-align: center; width: 150px; height: 150px; overflow: hidden;" title="© Skittle.Fashion © aniyah-xxxx">
a esto
<span style="border: 1px solid white; box-shadow: 0px 0px 7px black; margin-left: 25px; color: #000000; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 15px; padding: 0px; text-align: center; width: 150px; height: 150px; overflow: hidden; border-radius: 100px;" title="© Skittle.Fashion © aniyah-xxxx">
como pueden ver, eso es lo único que tienen que añadir
justo entre el punto y coma (;) y las comillas (")
sabiendo que 100px es volverla redonda
y menos la hace una imagen cuadrada con bordes redondeados.
Hagámosle ahora unos súper cambios a ésta presentación
desde Stardoll, que les prometo, es muchísimo más fácil
y me permitirá enseñarles como cambiar los links de las imágenes desde allá
porque yo sé, que el HTML a veces es un tanto confuso.
Ahora, les comentaré algunos datos importantes:
Puedes copiar y pegar el código HTML en tu Suite
pero en clubes no funciona, debes copiar la presentación y arrastrarla.
Y la mejor manera de editar las imágenes
(justo como te lo estoy enseñando hoy)
es haciéndolo en el Real-time HTML Editor
y luego arrastrarla a la presentación de Stardoll (en modo edición, claro)
Ahora bien, pasando a lo que les comentaba
vamos a editar las imágenes de nuestra presentación.
Para eso haremos clic derecho sobre la imagenes y luego "Inspeccionar"
Como podrán ver aparecerá el código y dos enlaces,
es muy importante que el link que añadan lo cambien en ambos enlaces
porque sino, al guardar, volverá a ser el original.
Le haremos algunas modificaciones y...
¡Así quedamos!
¡Así quedamos!
Con éste código:
<p style="background-color: #fff; border: 5px #99ccff solid; box-shadow: 0px 0px 10px #fff; width: 540px; margin: auto; text-align: center; color: #000; font-size: 12px; overflow: hidden;" title="© Skittle.Fashion © aniyah-xxxx"><br /><br /><span style="border: 1px solid white; box-shadow: 0px 0px 7px black; margin-left: 25px; color: #000000; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 15px; padding: 0px; text-align: center; width: 150px; height: 150px; overflow: hidden; border-radius: 100px;" title="© Skittle.Fashion © aniyah-xxxx"><img src="http://www.sdcdn.com/camera/492/211/492211025.jpg" alt="" height="160" /></span><span style="border: 1px solid white; box-shadow: 0px 0px 7px black; margin-left: 15px; color: #000000; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 15px; padding: 0px; text-align: center; width: 150px; height: 150px; overflow: hidden; border-radius: 75px;" title="© Skittle.Fashion © aniyah-xxxx"><img src="http://www.sdcdn.com/camera/492/210/492210976.jpg" alt="" height="150" /></span><span style="border: 1px solid white; box-shadow: 0px 0px 7px black; margin-left: 15px; color: #000000; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 15px; padding: 0px; text-align: center; width: 150px; height: 150px; overflow: hidden; border-radius: 100px;" title="© Skittle.Fashion © aniyah-xxxx"><img src="http://www.sdcdn.com/camera/492/210/492210997.jpg" alt="" height="160" /></span><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><span style="font-family: showcard gothic;"><span><span style="font-size: 48px;"><span style="color: #000080;">CE</span><span style="color: #0000ff;">LE</span><span style="color: #3366ff;">BR</span><span style="color: #33cccc;">ID</span><span style="color: #99ccff;">AD</span><span style="color: #ccffff;">ES</span></span><strong><br /></strong><span style="font-size: 30px;"><span style="font-family: French Script MT, sans-serif; color: #808080;">Freends • 14/06/2012<br />Los mejores premios para las mejores fashionistas.</span><span style="font-size: 20px;"><span style="font-family: French Script MT,sans-serif;"><br /><br /><strong><span style="color: #999999;">+1.9K</span></strong><br /><strong><span style="color: #999999;">¡Creciendo sólo para traerte las mejores actividades!</span></strong><br /><strong><span style="color: #999999;">¿Ya viste a la ganadora de Freendstar?</span></strong><br /><strong><span style="color: #999999;">Felicitemos a mariaMostacho2</span></strong><br /><strong><span style="color: #999999;">Nuestra preciosa fashionista que nos representará por todo el 2018</span></strong><br /><span style="color: #999999;"><em><strong>She's amazing!</strong><br /><br /></em></span></span></span></span><span style="font-size: 30px;"><span style="font-size: 20px;"><span style="font-family: French Script MT,sans-serif;"><span style="color: #99ccff;">¡Gracias por visitarnos!</span></span></span></span><strong><span style="font-size: 30px;"><span style="font-size: 20px;"><span style="font-family: French Script MT,sans-serif;"><br /> </span></span></span></strong></span></span></p>
Que, si quieren ver cómo es el código HTML de una presentación
solo deben dar clic derecho y luego "Ver código fuente de la página"
luego, deben identificar cuál es el código de la presentación
ya que toda la página aparecerá en código HTML pero
la presentación siempre aparecerá muy amontonadita,
solo deberán leer un poco y hallar coincidencias.
¡Y eso es todo por esta entrada!
Súper informativa, aunque quizás algo complicada
pero les prometo que una vez que lo dominen
lo harán hasta con los ojitos cerrados.
Nos vemos en el próximo post con Sombras y bordes.
PD: ¡No se por qué las presentaciones se ven así!
Les prometo que en Stardoll no se muestran así.
PD: ¡No se por qué las presentaciones se ven así!
Les prometo que en Stardoll no se muestran así.
No hay comentarios:
Publicar un comentario