GUÍA DE STEEMIT // Códigos y ayuda en HTML

in #blog6 years ago (edited)

5.png

divisor.png

Últimamente me ha sorprendido la cantidad de personas que me han preguntado que códigos uso para hacer mis post tan lindos y ordenados, los dejo aquí para ayudar a la comunidad y apoyar a los nuevos Steemians que se nos unen. También estoy haciendo un documento de Google en INGLÉS y en ESPAÑOL para que todos puedan tenerlo en cualquier momento que lo necesiten y los dejaré al final de cada post que haga de manera que sea fácil y rápido de encontrar.

Como ya todos saben qué es HTML y Markdown, solo estoy dejando los códigos sin más párrafos que leer que les quiten tiempo. Si tiene alguna duda o pregunta no duden en comentar o contactarme si lo necesitan.

divisor.png

Espacio entre párrafos

Un simple numeral con espaciado arriba y abajo.

#

divisor.png

Para organizar el texto con diferentes puntos

Un guión con espacio luego de el.

Ejemplo: (guión espacio frase) -Lista de cosas para hacer en 2018

Se verá así:

  • Lista de cosas para hacer en 2018

divisor.png

Para justificar texto

<div class="text-justify">Párrafo Aquí</div>

Y se verá como mis textos al principio súper lindos y fáciles de leer, sin espacio en las terminaciones de cada línea que podrían hacer que el párrafo se vea un poco raro.

divisor.png

Para centrar

<p><center>Lo que quieres centrar</center></p>

Se verá así

divisor.png

Para crear citas

> El símbolo que ven de "mayor que" y la frase que deseen usar seguida de él.

Se verá asi de lindo y profesional

divisor.png

Para crear hipervinculos

Ejemplo: [El nombre del Vínculo](El link)

[Jokossita’s Blog](https://steemit.com/jokossita)

Jokossita’s Blog

divisor.png

Para escribir en negrita

Se colocan 2 guiones bajos o asteriscos al inicio y al final de la frase o palabra a resaltar.

Ejemplo: **Negrita** __Negrita__

Lo cual se vería: Negrita en ambos casos

divisor.png

Para escribir en cursiva

Igual que negrita pero se utilizaría solo un asterisco o guión bajo.

Ejemplo: *Cursiva* _Cursiva_

Sería: Cursiva en ambos casos

divisor.png

Para escribir en negrita cursiva

Igual que en negrita, pero en lugar de utilizar dos asteriscos o guiones bajos 3.

Ejemplo: ***negrita cursiva*** ___negrita cursiva___

El resultado: negrita cursiva

divisor.png

Escribir en tachado

Igual que los otros, pero solo dos cosas de estas: ~ serían usadas.

Ejemplo: ~~tachado~~

Sería asi: tachado

divisor.png

Para escribir en barras

Pude hacer todas esas barras grises usando simples tildes: ` 3 veces cada lado

Ejemplo: ```Hola a todos```

Se vería asi: Hola a todos

divisor.png

Para escribir en un bloque y hacer una lista

| Post | Día |
| --------|---------|
| Viaje | Enero 1 |
| Comida | Enero 5 |

Es bastante fácil y se ve realmente fantástico así:

PostDía
ViajeEnero 1
ComidaEnero 5

Puedes hacer más celdas y volverte loco con el código solo necesitas algo de imaginación.

divisor.png

El texto puede estructurarse con encabezados:

Colocas un numeral o varios, un espacio y luego tu texto.

H1 En cada uno puedes usar un # numeral

H2 o ## dos en este y de esta manera voy

H3 usando más numerales ###

H4 haciendo subtitulos####

H6 también puedes usar hasta 6 numerales para hacerlo aún más pequeño

divisor.png

Imágenes

Para colocar la imagen a la derecha

<div class="text-justify"><div class="pull-right">La imagen</div>

Para colocar la imagen a la izquierda

<div class="text-justify"><div class="pull-left">La imagen</div>

divisor.png

Para que tu texto sea aún más bonito

Para colocar su texto a la derecha:

Ejemplo: <div class="text-right">Tu texto aquí</div>

Y taraaan mi texto está a la derecha.

Si desea el texto a la izquierda simplemente cambie la palabra "right" a "left"

Para hacer dos columnas de texto:

<div class="pull-left">Texto de la primera columna</div>
<div class="pull-right">Texto de la segunda columna</div>

Texto de la primera columna Podemos poner imágenes aquí también si queremos, pero puedo decir que esta es una linda manera de escribir en dos idiomas al mismo tiempo.
El texto de la segunda columna iría aquí, para que podamos ver cómo se organiza fácilmente y ambas columnas hacen una linda publicación.

divisor.png

Si tienes más y quieres compartir códigos, avísame, de esta forma todos podemos ayudarnos a mejorar.

divisor.png

If you are new in steemit you can use my guides of HTML

AYUDAS EN HTML PARA STEEMIT

STEEMIT CODES HTML HELP

If you join Steem Follower Let me know in the comments to help each other.

You can read my lastest posts:

STEEMIT GUIDE // CODES HTML HELP

Happy New Year !!! Real life stories.

DAY 2 !! Almost crazy!! Seven day Dtube challenge

Sort:  
There are 2 pages
Pages

Gran trabajo! Quisiera aprender mucho mas para comenzar en esta comunidad. Un gran saludo y bendiciones!

Buenísimo, pero te falto esto:


Esa linea sirve bastante para dividir fotos :) y se hace así: pones tres o mas guiones y listo: --- pero dejando espacio, por ejemplo imaginemos que los puntos son guiones. (si no dejas el espacio se convierte en negrita el texto.)

...
Esto es algo que casi todo el mundo sabe, pero para la gente nueva le servirá :D un saludo y gracias por este post ya que hay algunos que no sabia, upvote follow y


Fuente

Gracias a ti por leerme y compartir dejando un código sencillo que seguro será util!! Yo personalmente prefiero usar divisores un poco más femeninos pero de verdad gracias por compartir ese que se me pasó haha Feliz año nuuevoo :D

Como realizas esos divisores personalizados?

En photoshop, casualidad otra chica me preguntó lo mismo. Estaré haciendo divisores y banners a quienes necesiten en un ratito haré el post :)

Muy bueno y completo @jokossita lo puse con una estrellita (destacado) para tenerlo a la mano. Muchas gracias, es de mucha ayuda.

Que bella, Siempre a la orden !! Me alegra haber ayudado :D

Buen post.! Me servira de mucho.. Te seguire.. Espero contar contigo.!

Cuentas conmigo! Espero ver tus post super lindos :D

¡Hola!, también lo guardé porque sé que lo voy a utilizar. Gracias, muy útil.

Hola!! Me contenta demasiado ver que es de utilidad :D

Excelente amiga, andaba buscando varios códigos. Gracias por el aporte. Tienes mi voto.

De nada! Siempre es bueno tener estos códigos a la mano

es de mucha ayuda esa informacion gracias por compartirla

Compartir los conocimientos nos hace crecer :D Siempre a la orden

Excelente, super completa. Tienes mi reesteem. Gracias por esta gran guia.

Gracias !! asi ayudaremos a más personas a mejorar en su blog :D

excelente post @jokossita , siempre quedan algunas dudas cuando hablamos de escribir en HTML y aclararlas de vez en cuando no está de mas! lástima no lo encontré antes jaja. tienes mi upvote!

Jajaja tranquilo, aun estás iniciando y nunca es demasiado tarde. Espero te sirvan tanto como a mi :)

Inteligencia = Perfección

Jaja gracias por pasar por mis post :)

@jokossita muchas gracias!

De naada :D

Muy bueno!! muchas gracias por compartirlo, es de gran ayuda

Gracias bella, ya sabes que cualquier cosa estoy por chat!

Hola excelente me gusto toda la información que publicaste , ten por seguro que los usare jaja abrazos

Jaja los comparti para esos para que los usaran, espero ver tus post ordenaditos !! abrazos

Buen post, interesante información.

De nada, úsala y compartela :)

Muy bueno...voy a tener en cuenta todo esto...gracias por compartir

De nadaa :D es súper util

Muy buen post , es de mucha ayuda. Cómo haces para colocar los separadores como en tu caso que colocas tu nombre para dividir cada punto del que hablas? , Saludos.

Que bueno ver que es de ayuda! :D me contenta eso!! Y bueno justo estoy por hacer un post para hacerle divisores y banners a todos aquellos que necesiten, yo los hago en photoshop pero hay diversos programas. Con gusto te creo uno :D

Mis post están todos desordenados, solo sabía centrar, negrita, cursiva. Gracias por compartir información tan necesaria para los que estamos iniciando, tengo una semana y todavía tengo mucho que aprender!!

Así es, hay mucho que aprender!! La constancia aquí es nuestra mejor amiga, sigue con el buen trabajo y ya sabes que cualquier cosa estoy para ayudar :)

Excelente! Gracias por tu aporte :D

De nada :D

¿Cómo le haces para que se publiquen los comandos?

Cuando simplemente los pego, no aparecen en la publicación. Gracias de antemano.

La idea es esa que no aparezcan en la publicación sino que cumplan su función.

Copias los códigos y ya

Excelente tu post y muy explicito. Gracias

La idea era que todos entendieran ! De nada :D

Mi estimada: GRACIAS TOTALES.. tengo una semana rompiéndome el coco con el tema de los códigos HTML, Markdown, editando por todos lados y nada que lograba que el artículo me quedara pulidito hasta que un amigo me pasó la referencia de tu blog.
Ai lof yu.. te invito a que curiosees mi publicación (casi hija tuya.. Jajaja). Guardo esta, ya le di mi voto :)

Jajaja, de verdad que no sabes cuánto me contenta leer que pude ayudarte. Claro que si iré a ver tu post, cuando quieras y necesites una ayuda estoy por acá o por discord :)

yo apredni con este post

Gracias esto me ayudo bastante

¡Que bueno! :D

un valioso articulo para quienes estamos comenzando, muchas gracias

Si, a mi me ayudaron muchisimo en mis inicios ! Me alegra que a ti también te ayuden :)

Muchas gracias, estaba neceitando estos codigos jeje, has salvado mis publicaciones.

Jajaja suele suceder, siempre a la orden :)

Hola! Muchísimas gracias por este post!!!

De nada y gracias por este comentario <3

Excelente post, muy buena informacion para personas nuevas en steemit

Gracias, para los no tan nuevos también es buena haha! Saludos :D

Me gusto mucho tu post, gracias por compartir tu conocimiento tienes mi upvote

wao super útil a la hora de escribir en esta plataforma

Sii, y mejoras muchísimo la estructura ! A la hora de leer es más cómodo!

Excelente guía. Muchas gracias.

De nada! :D

De gran ayuda :D

Que bueno :D

Me ayudó muchisimooooo, muchas graciaaaas <3 eres la mejor

Dee nadaaa, ya sabes cualquier duda me avisas!! Besos!

Super, esta genial, fácil de entender, gracias amiga

Buen día, excelente muy claro y preciso, gracias por ayudarnos a mejorar

Siempre a la orden :D me alegra mucho que siga siendo de utilidad!!

efectivamente muy claro y conciso. saludos cordiales

Muchísimas gracias, soy nueva en esto y lo necesitaba con urgencia!

GRACIAS! todo lo haces a mano o tambien utilizar algun editor?

Holaa, casi todo a mano pero steemit ahora tiene mas facilidades si te fijas.


Puedo decir que este blog es de mucha utilidad, ademas de que hay buenas explicaciones y buen ejemplo del codigo, muchas gracias y que lo pase bien.

Un Saludo!

Gracias a ti por usar mi post saludos y exito!

gracias por esos datos.

De nada :)

mil graaaacias * me sirvió de mucho* nunca cambies jeje

De nada :)

Excelente post. Me hacía falta, gracias.

Gracias, esto es de mucha ayuda para gente que esta empezando, yo le atinaba un poquito ahora probare a ver si me sale bonito

Me dices que tal :D

Hola, soy nueva en Steemit y me sirvió de mucho tus explicaciones. Gracias.

Me alegra que te sirvieran, espero en el futuro subir algo con tanta utilidad como este <3

¡¡¡MUCHAS GRACIAS, AMIGO!!!

Llegué a esta publicación por una amigo, y me ha resultado muy útil. Comenzaré a aplicar todo lo que he aprendido para mi presentación :). Gracias por todo. Lo votaría, pero me han dicho que como no monetizará no es buena opción. Lo que uno va aprendiendo XD.

Hola, muchas gracias por tu articulo, me sirvió de mucho la información.

That great god was already in a bad mood I could not find out how to edit well jejejeje thank you very much I cirbio I follow you hehehe.

I also posted this I English u know? Haha your welcome

Gracias .. muy útil y extenso .. lo leo con detenimiento

El tiempo ha pasado y aún es de mucha utilidad este post. Gracias por compartirlo :)

De verdad, este post es de absoluto valor, es genial para los que queremos dejar bonitos nuestros post. Muchas gracias por compartir todos los cósdigos y opciones. Ya mismo meteré en práctica lo aprendido aquí. Un abrazo muy grande.

There are 2 pages
Pages