🎉 Feliz 2018 Amigos, lectores y comunidades de Steemit 🎉
Hemos empezado el año con buen pie, Steem está subiendo y eso es una buenísima noticia.
Desde que empezó el año y en pocos días he visto como el valor de mi cuenta ha ido aumentado notablemente debido a esto. Además, no ha sido lo único que ha subido. Para mi sorpresa el upvote también lo ha hecho, un poquito más.😃
Para comenzar el año, he preparado un post algo más educativo.
Steemit está teniendo un gran crecimiento y aceptación. Cada día se registran nuevos usuarios. Personas que llegan con miles de dudas. Y que menos que hacerles el camino más fácil.
Uno de los retos al cual nos enfrentamos al entrar en Steemit, es formatear o dar formato a nuestros contenidos. Para ello contamos con dos opciones: Crear la publicación en Markdown o usar el editor.
Desde el principio comencé con Markdown. No tenía ni idea de su funcionamiento, pero la guía me ayudó lo suficiente para avanzar un pasito más. También investigué como alinear imagen al texto y descubrí que Html era la solución.
Todo lo investigado y aprendido en este corto camino he intentado plasmarlo en las publicaciones. Y como el conocimiento hay que compartirlo he hecho una lista explicativa y detallada de los códigos que he usado hasta el momento.
Imagen centrada con texto debajo
Para ello abrimos < center > insertamos la imagen y cerramos con < / center >
Puedes copiar el código aquí 👇
<center>IMAGEN</center>
💡 Recuerda borrar la palabra IMAGEN. Ahí debe de ir tu foto.
📌Para centrar el texto que está debajo se hace del mismo modo. Solo que en vez de insertar una imagen, escribimos el texto entre las dos etiquetas.
Imagen a la derecha del texto
Este es un ejemplo de como quedaría una imagen alineada a la derecha de un texto.
Tenemos que escribir un código diferente al anterior.
En este caso abrimos con < div class="pull-right" >< img src= insertamos la imagen y cerramos con ></ div>
Copia el código aquí 👇
<div class="pull-right"><img src=IMAGEN></div> Presiona dos veces Enter y escribe el texto.
Imagen a la izquierda del texto
Para alinear la imagen a la izquierda del texto usamos el mismo código.
Lo único que tenemos que hacer es remplazar Right por Left.
Abrimos con la etiqueta < div class="pull-left">< img src= insertamos la imagen y cerramos con >< /div>
Copia el código 👇
<div class="pull-left"><img src=IMAGEN></div> Presiona dos veces Enter y escribe el TEXTO.
Lista vertical de imágenes y texto
|
|||
|---|---|
|imagen|texto|
|imagen|texto|
|imagen|texto|
|imagen|texto| Pulsar dos veces Enter para salir del cuadro.
📌Si por el contrario queremos la lista de imágenes a la derecha y el texto a la izquierda, solo tenemos que cambiar el orden imagen/texto.
|||
|---|---|
|texto|imagen|
|texto|imagen|
|texto|imagen|
|texto|imagen| Pulsar dos veces Enter para salir del cuadro.
💡 Es recomendable que todas las imágenes sean del mismo tamaño. De esta manera el cuadro quedará compensado.
Alineación horizontal de 2 imágenes y texto
Esto es un ejemplo de como queda dos imágenes horizontales | con texto a la derecha. |
Copia el código 👇
|||
|---|---|
|imagen|texto||imagen|texto|
Pulsar dos veces Enter para salir del cuadro.
📌 También podemos cambiar el orden como en la tabla anterior, quedando las imágenes a la derecha del texto.
|||
|---|---|
|texto|imagen||texto|imagen|
Pulsar dos veces Enter para salir del cuadro.
3 Imágenes horizontales
Este es un ejemplo de cómo quedaría tres imágenes alineadas en horizontal.
Para hacerlo, copia aquí el código 👇
||||
|---|---|---|
|imagen|imagen|imagen|
Fuentes
Todas las fotos han sido tomadas con Samsung S7 edge. Autoría @reimerlin.
Separador editado en Adobe Illustrator.
Original, de libre descarga y uso: https://www.vecteezy.com
Bueno amig@s espero que estos ejemplos sirvan de ayuda e inspiración para vuestras publicaciones. Respecto a las fotografía de estos mismos…he tomado como modelos al adorable Porg y valiente Rocket.
¿A que son simpáticos? 😄
🤗Feliz día de Reyes y gracias por pasarte por aquí 🤗
¿A que son simpáticos? 😄
¡Ay! De nuevo me salvas la vida con consejos... Qué alegría cuando he visto que el post era tuyo. Estás en mi barra de marcadores del navegador, que lo sepas, jejeje. Hasta que me aprenda todo esto, me muero!
¡Muchas gracias! Besos
muy buen post explicativo!!
buena labor para ayudar!!
Saludos de @pepiflowers
Muchas gracias @pepiflowers
Gracias por compartir esto @reimerlin esto lo usare mucho y muchos mas también lo compartiré
Muchas gracias @pits7 me alegro que te sirva y sea de tu agrado :)
:o @reimerlin te debo un trozo de torta por brindarnos esta información. Muchas gracias.
Gracias @crisangel espero que te sirva de mucha ayuda.
lo que más me gusta de este post...essss......
LA FOTO! JAJAJAJA
Gracias Rei! esta info nos ayuda a mejorar!
Jajajjjajaj gracias @industrialvarez :D
sencilla y buena guia!! que bueno que la compartas con nosotros!
Claro que si, es poco lo que sé pero seguro que de gran utilidad @juliolezama
Que genial, lo pondre en practica GRACIASSS!!
Claro que si! Hay que probar @mrdobleu :)
Un saludo.
Muy buen post para los que se inician en esto del Markdown que tantos dolores de cabeza nos dio a todos al comenzar... Gracias por compartir @reimerlin ;)
Ya te digo @wartrapa ! Espero que esta pequeña guía quite algunos dolores de cabeza :)
@reimerlin excelente explicación mi voto para ti felicidades
Gracias @carloshernandez :)
Saludos!
Gracias por compartir esta información, muy buen post. Por cierto cómo haces para colocar los separadores donde colocas el título de cada tema? . Saludos
Muchas gracias @genetf :)
Los separadores se insertan igual que las imágenes.
Para poner un título entre separadores, es así:
Separador
Texto
Separador
De esta forma quedará el titulo en medio de los dos. Saludos!
Ah okok, genial. Muchas gracias!! :)
Gracias muy útil este post. Si no te diste cuenta te votaron en vivo y a los curadores le dio mucha risa la foto y les encantó el Post!
No me digas!! Que lástima me lo perdí. Quería haber estado presente, pero al final por una cosa y por otra, no pude :(
Lo veré entonces cuando compartan el vídeo de curación. Muchas gracias por la información @david.delatierra y por pasarte por aquí.
Saludos!
Que buena información, gracias por compartir.
Muchas gracias a ti @galberto por tu visita y comentario.
Saludos!
excelente post, de mucha ayuda para mi, gracias!
Cuanto me alegro :D @sweetdesserts
Un saludo!
Excelente... Gracias por la explicación!
Nada, a ti por la visita @anaiscarolina03 :)
Felicidades amiga no sabes cuanto tiempo he estado averiguando como hacer esas cosas - me servirán de mucha ayuda tus consejos en mis futuras publicaciones.
Es una exelente noticia @jeadeg sacale provecho.
Un saludo!
Me encanta tu post! ha sido de mucha ayuda por lo menos a mi que soy nueva en todo esto. muchas gracias
Un empujocito más para seguir avanzando @graceleon
Gracias por la visita :)
exelente post
Muchas gracias @gmario935 :)
Es un gran aporte a la comunidad @reimerlin gracias, hace falta mas de estos post de vez en cuando.
Muchísimas gracias por tus palabras @henryn2020
Un saludo!
¡Qué bueno está este post. Nos es de gran ayuda a los novatos ;-) Muchas gracias!
Puse práctica tu guía. Te invito a ver mi post más reciente, comentarlo y votar si es de tu agrado. https://steemit.com/spanish/@yrmaleza/dulce-tiempo-con-mis-doncellas
De nada @yrmaleza :)
Ese peluchito estaba bien feo, pero mil gracias porque desconocia como colocar las imagenes a los lados con texto.
Feo pero adorable :D espero que te sirva @marynes5
acabo de usar tu técnica, me costo un poco pero gracias a esto lo hice!! aahahhaha
Me paso a verlo @juliolezama :)
Muy buen post.. gracias... Saludos y los espero por mi blog @maleudi +upvote +follow
Gracias @reimerlin. Ya puedo dar formato a mis escritos con esta guía.
Nada @interestelar me alegro mucho que se así :D
Saludos!
Que buen post, gracias, me podrías decir como colocar negritas?
Si @maleudi, solo tienes que poner dos al principio de la palabra o frase, y cerrarlo con otros dos.
Ejemplo; ** al principio de la palabra o frase, y cerrarlo con otros dos **
Saludos!
Este post me ha sido de gran ayuda. Muchas gracias por compartir
Nada, para eso estamos @juliomendoza :D
Súper útil! Lo voy a tener muy en cuenta porque estoy perdida todavía por aquí.
Muchas gracias @laucaba espero que te ayude mucho. ¿Estás ya en el servidor de Cervantes? Ahi aprenderás mucho y estaras al tanto de las iniciativas para los hispanohablantes.
Genial!!!
Muchas gracias por este tutorial me ayudo bastante!!!
Hola que tal! Me ha encantado tu peluche, he intentado realizar la lista vertical de imagen y texto, y siempre me dice que una de las imagenes no ha cargado bien, y es ese formato, me podrías ayudar?
Gracias por la explicación, soy usuaria nueva y está información se me hace muy útil para mejorar mis publicaciones.