La última guía para ALINEACIÓN DE IMAGENES y LINKS en Markdown! Conviértete en un profesional ahora con estos sencillos consejos.steemCreated with Sketch.

in spanish •  7 years ago  (edited)

Hola nuevos steemians, aquí les dejo una guía detallada sobre cómo subir imágenes en sus publicaciones, alinearlas y agregar enlaces a ellas. Así que sigue leyendo si quieres saber más.

INTRODUCCIÓN 

Markdown puede ser nuevo y confuso para algunos de ustedes, y como la hada madrina, estoy aquí para prestar ayuda.

¿QUE ES EXACTAMENTE MARKDOWN?

Bueno, para ponerlo facil, Markdown es una herramienta de formato que ofrece Steemit que te permite utilizar para escribir tus artículos, revistas, lo que sea. La otra opción, además de Markdown que Steemit tiene disponible para escribir tus posts, es el Editor. En mi opinión, Markdown es más fácil de usar, porque usted tiene más opciones con la cual puede rejugar si desea tener articulos que parezcan profesionales e individualizados, para destacar del resto.

ARTUCULOS E IMÁGENES

Añadir imágenes a tus artículos es una manera segura de llamar la atención del lector. Personalizar el diseño utilizando fotos también puede agregar un poco de singularidad y profesionalismo a tu contenido. En este artículo se muestra cómo agregar imágenes y alinearlas como quieras.

Ten en cuenta que la primera imagen que subas a tus publicaciones será la miniatura que aparecerá en la página de inicio de alguien / new / hot / trending / promotion. Así quedará limpio y atractivo para atraer al lector a hacer clic en su articulo.

1. ALINEACIÓN DE IMAGEN POR DEFECTO

La manera más sencilla de agregar imágenes a tus publicaciones usando markdown es con este comando de codificación:

Para obtener LINK de la imagen, basta con hacer clic derecho con ratón en la imagen que vas a utilizar desde la Web y luego hacer clic en "Copiar dirección de imagen".

Tenga en cuenta: No hay espacios ni brechas entre los símbolos; El signo de exclamación y los corchetes, y no hay espacios entre los corchetes y la letra más cercana a él. Para "Título de imagen" puedes poner lo que quieras, nadie lo va a ver; Es sólo para completar el comando para que la imagen se muestre muy bien.

Un ejemplo de como debería verse:

Si lo haces correctamente, obtendrá este resultado:

(Observa cómo se ajusta automáticamente a la izquierda)

2. ALINEACIÓN CENTRAL

Si deseas que tu imagen se sitúe en el centro de la sección, utiliza este comando de codificación el cual es sencillo:

Una vez más, para obtener el enlace (Link) de imagen en Internet, simplemente has clic derecho sobre la imagen que estás visualizando en web y, a continuación, has clic en "Copiar dirección de imagen".

Nota: No hay espacios ni brechas entre el símbolo y la letra más cercana

Para demostrarlo, debe verse de esta forma:

Si lo haces correctamente, obtendrás esto:

(Observa cómo se sienta en el centro)

2. ALINEACIÓN CENTRAL CON UN ENLACE A LA FUENTE

Agregrando un enlace para dirigir a sus lectores a la fuente

Para añadir el nombre de la fuente y el enlace en la parte inferior de la imagen, siga este comando de codificación:

Para demostrarlo, se verá algo como esto:

Si lo haces correctamente, deberías obtener:

(Observe la fuente en el centro en la parte inferior de la imagen)

Tumblr

3. ALINEAR LA IMAGEN DERECHA CON TEXTO A LA IZQUIERDA

Para fines estéticos, si deseas alinear tu imagen a la derecha con un párrafo o frase a la izquierda de la misma; Como lo hacen en lo blogs y revistas, entonces escribe este comando:

Si en la parte inferior de la imagen desea poner un enlace a la fuente, utilice este comando:

Si deseas que el enlace de la fuente se sitúe en el centro inferior de la imagen, utiliza este comando:

Para que los párrafos u oraciones aparezcan a la izquierda de la imagen: continúa escribiendo normalmente, después de escribir cualquiera de los comandos anteriores, y el texto debería aparecer a la izquierda de la imagen que estará la derecha.

Observa el siguiente ejemplo:


IMAGEN A LA DERECHA, TEXTO A LA IZQUIERDA

Me gusta cómo se ve esto; Añade esa chispas de individualidad y profesionalismo a tus mensajes. También te hace ver tecnológico; Algunos te preguntaran "cómo es que haces para que tus artículos se vean tan bien?" Para lograr esto, simplemente sigue escribiendo normalment después de escribir el comando.

Para volver a la forma normal de escribir (para volver a escribir en la parte inferior de la imagen), simplemente coloca el comando
tantas veces sea posible hasta que vuelva a la parte inferior de la imagen. Para esta imagen, lo tuve poner 3 veces (con o sin espacios entre cada uno, no importa).

Escribiré aqui para mostrarte que el texto está de vuelta a la normalidad al final de esta imagen. ¿Ves lo que quiero decir?

4. ALINEAR IMAGEN A LA IZQUIERDA CON TEXTO A LA DERECHA

Para fines estéticos, si deseas alinear tu imagen a la izquierda y el texto a la derecha como lo hacen en blogs y revistas, escribe este comando:

Si en la parte inferior de la imagen deseas poner un enlace a la fuente, utiliza este comando

Si desea que el enlace de la fuente se sitúe en el centro inferior de la imagen, utiliza este comando:

Para que los párrafos u oraciones aparezcan a la derecha de la imagen: continúa escribiendo normalmente después de escribir cualquiera de los comandos anteriores y el texto debería aparecer a la derecha de la imagen situada a la izquierda.

Observa el ejemplo


Imagen a la izquierda, texto a la derecha

Una vez más, la individualidad y la profesionalidad se agregará a sus artículos. Parecerás un informático. La gente definitivamente te preguntará "¿cómo haces para que tus artículos se vean así?" Para lograr esto, simplemente sigue escribiendo normalment después de escribir el comando.

Para volver a la forma normal de escribir (para volver a escribir en la parte inferior de la imagen), simplemente coloca el comando
tantas veces sea posible hasta que vuelva a la parte inferior de la imagen. Para esta imagen, lo tuve que poner 2 veces (con o sin espacios entre cada uno, no importa).

Voy a escribir algo para mostrarte que el texto está de vuelta al final de esta imagen. ¿Ves lo que quiero decir?

5. IMAGENES QUE SON ENLACES

Si deses que tu imagen sea un "enlace" a algo, entonces escriba este comando:

BONUS TIPS: DIVISORES

En caso de que te preguntes cómo conseguí los "divisores de lujo" para separar las secciones; Utilicé el comando "Image Center" (Sugerencia # 2 de arriba: Alineación central) para los divisores. Es el mismo código de formato para centrar las imagenes. Busca en google "divisores" y elige uno que me guste.

Copia y pega la "dirección de imagen" (url de imagen) del divisor en el comando.

GRACIAS POR LEER!



ESTE POST FUE POSIBLE GRACIAS A MI COLEGA @TAJO QUIEN ES DUEÑO Y AUTOR DEL MISMO EN SU VERSIÓN EN INGLES Y ME OTORGÓ PERMISOS PARA TRADUCIRLO AL ESPAÑOL PARA USTEDES. MUCHAS GRACIAS! LINK DIRECTO A SU POST EN INGLES


SI TE GUSTÓ Y TE FUE DE GRAN AYUDA VOTA, COMENTA, RESTEEM Y SÍGUENOS @TAJO @LILTTLEJOEL


Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

¡Mil gracias! me sacó de un gran apuro.

Muchas gracias, me ayudó mucho.

Excelente, me fue de mucha ayuda.