Como optimizar el markdown en imágenes dentro de tus publicaciones
- Title: How to optimize the markdown in images within your publications
- Summary: This tutorial is about all the possibilities of the markdown in use of images within the publications.
- Language: Spanish
En este tutorial me enfocaré en las imágenes dentro de una publicación, voy a incluir todas las posibilidades del markdown para el uso de imágenes basándome en mi experiencia.
Posición de imagen
📝código para imagen centrada
< center >Aquí coloca la imagen< /center >
Resultado
Nota: si vas a copiar y pegar el código desde esta publicación no olvides quitar el espacio en blanco dejado antes y después de los signos < y >
📝código para imagen a la derecha
< div class="pull-right" >< img src="Aquí dentro coloca la imagen" >< /div >
Resultado
)
Nota: si vas a copiar y pegar el código desde esta publicación no olvides quitar el espacio en blanco dejado antes y después de los signos < y >
📝código para imagen a la izquierda
< div class="pull-left" >< img src="Aquí dentro coloca la imagen" >< /div >
Resultado
Nota: si vas a copiar y pegar el código desde esta publicación no olvides quitar el espacio en blanco dejado antes y después de los signos < y >
📝código para imagen y texto en 2 columnas
< div class="pull-right" >< img src="Aquí dentro coloca la imagen" >Aquí escribe el texto< /div >< div class="pull-left" >< img src="Aquí dentro coloca la imagen" >Aquí escribe el texto< /div >
Resultado
Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)
Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)Estoy haciendo esta guía para ti que eres usuario de steemit y espero que te sirva mucho ;)
Nota: si vas a copiar y pegar el código desde esta publicación no olvides quitar el espacio en blanco dejado antes y después de los signos < y >
Uso de imágenes en tablas
📝código para tabla con 2 imágenes en horizontal
|||
|---|---|
|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|
Resultado
 |  |
📝código para tabla con 3 imágenes en horizontal
||||
|---|---|---|
|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|
Resultado
| | |
📝código para tabla con 4 imágenes en horizontal
|||||
|---|---|---|---|
|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|
Resultado
| | | |
📝código para tabla con 2 imágenes en Vertical
|||
|---|---|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
Resultado
| |
|
📝código para tabla con 3 imágenes en Vertical
||||
|---|---|---|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
Resultado
| ||
| ||
|
📝código para tabla con 4 imágenes en Vertical
|||||
|---|---|---|---|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
Resultado
| |||
| |||
| |||
|
📝código para tabla con 2 imágenes en diagonal
|||||
|---|---|
|Aquí dentro coloca la imagen|
||Aquí dentro coloca la imagen|
Resultado
| |
|
📝código para tabla con 3 imágenes en diagonal
||||
|---|---|---|
|Aquí dentro coloca la imagen|
||Aquí dentro coloca la imagen|
|||Aquí dentro coloca la imagen|
Resultado
| ||
| ||
|
📝código para tabla con 4 imágenes en diagonal
|||||
|---|---|---|---|
|Aquí dentro coloca la imagen|
||Aquí dentro coloca la imagen|
|||Aquí dentro coloca la imagen|
||||Aquí dentro coloca la imagen|
Resultado
| |||
| |||
| |||
|
📝código para tabla con 2 imágenes y texto
|||
|---|---|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
Resultado
| Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees |
| Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees |
📝código para tabla con 3 imágenes y texto
||||
|---|---|---|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
Resultado
| Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees | |
| Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees | |
| Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees |
📝código para tabla con 4 imágenes y texto
||||
|---|---|---|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
Resultado
| Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees | ||
| Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees | ||
| Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees | ||
| Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees |
Posted on Utopian.io - Rewarding Open Source Contributors
Buenísimo!!! no pude evitar votar al 100% y le voy a dar resteem y tweet! :D
Excelente, amigo!!! con todo!!!
Yaaaaaay!!! :), Muchisimas gracias por ese enorme apoyo, vamos con todo!!! ;)
Muy agradecido y me da gusto que te haya gustado!!
@luming si señor. Soy desarollador de apps a tiempo completo, aunque hace poco me he puesto mas enserio con steemit.
Muy buen post la verdad, no tenia ni idea de que se podia poner mas de una imagen en la misma fila, incluso 4 y de formas muy diferentes!
Éste post me lo guardo, seguramente le eche mas de un vistazo.
Gracias bro!
Que alegría que te pueda ser de ayuda este contenido :)
Desarrollador de apps, super genial!!, también aplicaciones web?
Si, aplicaciones web practicamente, tengo pensado algun proyecto para steemit, quizás algo de gambling con sbd, o alguna interfaz para steemit.
Gracias por los vote ups y la charla que hemos tenido, un placer conocerte la verdad.
Nos vemos bro! : )
Genial, yo también tengo una idea para un proyecto web vinculado a steemit con uso de SMT, mis conocimientos como desarrollador son muy bajos aún pero ideas me sobran, es bueno saber que eres desarrollador, quizás podamos llevar esta conversación a otro nivel más adelante, un placer también conocerte @selected ;)
Saludos!!
Si @luming, seguramente volvamos a tener ésta conversación pronto. Echaré un vistazo a la API de STEEM, me gustaria ver como funciona el tema antes de preparar alguna app.
Nos vemos pronto bro, saludos y de verdad que ha sido un placer conocerte!
Igualmente, saludos!! ;)
Mejor no puede estar explicando! Muchas gracias @luming!
Muchas gracias a ti por el apoyo!! :)
Saludos!!
Gracias por hacérmelo tan facil. No soy muy hábil para editar post
Excelente!!, me da gusto escuchar eso, fue mi propósito a la hora de realizar el tutorial, poder ayudar a los demás de la manera más sencilla a mejorar la calidad de sus publicaciones ;)
Muchas gracias por el apoyo @yaleal, saludos!!
que buena tuto amigo @luming Saludos :)
Muchas gracias por tu apoyo amigo @darius86, que alegría ver que te haya gustado el tutorial ;)
Saludos!!
Amigo muchas gracias, no sabía esto, mi voto a favor para ti! Te ganaste un seguidor! muchas gracias.
Un placer @cracksnews ;)
Muchas gracias por tu apoyo, saludos!!
Muy buena la info gracias por compartir, me va a ayudar a ponerle mas vida a mis posts!
Me da gusto que te haya podido ayudar @conner320 ;)
Sin duda le dará ese toque especial a la estructura de tus publicaciones si comienzas a darle formato :)
Saludos y gracias por tu apoyo!!
Contenido sustantivo, relevante y claro. Upvote y resteem.
Muchas gracias por compartirlo, lo aprecio mucho :)
Saludos!!
Bro @luming this tabular work is a bit confusing. They all look the same. Lolx.Still trying to wrap my head around it. Hope I do coz I love the products. That diagonal stuff is so cool. Cheers man!
#Hug-Challenge!
Thank you very much for your support, that's why I made this tutorial to facilitate the use of markdown in images within the publications right here you can copy and paste the code and with practice then you can make it easier :)
Greetings!!
Congratulations @luming! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOP