Formatting is the process of give a better look to our publication through codes. If you are a Hive user and you have already made some posts, surely you have already known most of the codes, or at least the most important ones.
El formateo es el proceso de “maquetar” nuestra publicación a través de códigos. Si eres usuario de Hive y ya has realizado algunos posts, seguramente ya habrás conocido gran parte de los códigos, o por lo menos los más importantes.
We use MARKDOWN or HTML code to communicate with the editor, telling him how we want the information to be displayed. I used an HTML code to make this paragraph look red.
Utilizamos el MARKDOWN o código HTML para comunicarnos con el editor del post, diciéndole cómo queremos que se muestre la información. He utilizado un código HTML para hacer que este párrafo se vea rojo.
Red letters, double columns, striketrough, right alignment, etc., maybe you already know all this, and it is already illustrated in many posts made by Hive users.
I always like to experiment with the available tools with the objetive to get something new. That's why you may not know some of the tips I show you below
These tips are based on the code used for the tables, both in MARKDOWN and in HTML. We will see how we can take advantage of the tables to give a unique aspect to your post.
Do you want to know these formatting tips? Here it is:
I always like to experiment with the available tools with the objetive to get something new. That's why you may not know some of the tips I show you below
These tips are based on the code used for the tables, both in MARKDOWN and in HTML. We will see how we can take advantage of the tables to give a unique aspect to your post.
Do you want to know these formatting tips? Here it is:
Letras rojas, dobles columnas, letras tachadas, alineación derecha, etc., quizás ya conoces todo esto, y está ya ilustrado en muchos posts hechos por los usuarios de Hive.
Siempre me ha gustado experimentar con las herramientas disponibles para ver si logro obtener algo nuevo. Por eso quizás no conozcas algunos de los tips que te muestro más adelante.
Estos tips se basan en el código utilizado para las tablas, tanto en MARKDOWN como en HTML. Veremos cómo podemos aprovechar las tablas para darle un aspecto único a tu post.
¿Quieres conocer estos tips de formateo? Aqui van:
Siempre me ha gustado experimentar con las herramientas disponibles para ver si logro obtener algo nuevo. Por eso quizás no conozcas algunos de los tips que te muestro más adelante.
Estos tips se basan en el código utilizado para las tablas, tanto en MARKDOWN como en HTML. Veremos cómo podemos aprovechar las tablas para darle un aspecto único a tu post.
¿Quieres conocer estos tips de formateo? Aqui van:
Easy bold font (gray background) [Letra negrita fácil (fondo gris)]
One day, I was reading a post by @tsoldovieri on Hive.blog (with white background or "light mode" ). I noticed that some of his paragraphs had a grey background and it wasn't an image. You could see this:
Un día, estaba leyendo un post de @tsoldovieri en Hive.blog (con fondo blanco o “light mode”). Noté que algunos de sus párrafos tenían un fondo gris y no se trataba de una imagen. Se veía esto:
I immediately reviewed his post on hiveblocks.com and found the following structure:
Inmediatamente revisé su post en hiveblocks.com y encontré la siguiente estructura:
To my surprise, all that was needed to achieve such an effect was a couple of separators "|" and a dash "-". This is definitely more comfortable than the usual way of entering bold letters.
This is because it is the MARKDOWN code for tables, and with such a structure we would be introducing a table of 1 row and 1 column. By default, the first row of the table will have bold letter (in MARKDOWN), so we save characters.
This, however, is not visible in PeakD in the dark mode.
You only need to introduce the next code:
This is because it is the MARKDOWN code for tables, and with such a structure we would be introducing a table of 1 row and 1 column. By default, the first row of the table will have bold letter (in MARKDOWN), so we save characters.
This, however, is not visible in PeakD in the dark mode.
You only need to introduce the next code:
Para mi sorpresa, lo único que se necesitaba para lograr dicho efecto era un par de separadores “|” y un guión “-“. Esto es definitivamente más cómodo que el modo usual de introducir letras en negrita.
Esto se debe a que se trata del código MARKDOWN para tablas, y con dicha estructura estaríamos introduciendo una tabla de 1 fila y 1 columna. Por defecto, la primera fila de la tabla tendrá letra negrita (en MARKDOWN), por lo que se ahorran caracteres.
Esto, sin embargo, no es visible en PeakD en el modo oscuro.
Este es el código necesario:
Esto se debe a que se trata del código MARKDOWN para tablas, y con dicha estructura estaríamos introduciendo una tabla de 1 fila y 1 columna. Por defecto, la primera fila de la tabla tendrá letra negrita (en MARKDOWN), por lo que se ahorran caracteres.
Esto, sin embargo, no es visible en PeakD en el modo oscuro.
Este es el código necesario:
Text/Texto |
|-
Gray background without bold [Fondo gris sin letra negrita]
The gray background is only visible when using Hive.blog or Peakd.com in light/day mode (white background), being even more noticeable in the first interface. In case of using the dark mode for both interfaces, the background is a darker gray, but you can detail that it is slightly darker than the normal background.
In case you want the gray background but not the bold letter, you must use table code in HTML.
I came up with this thanks to @hivebuzz. Detailing one of its notifications, I could see that the message had a gray background, so checking the background code through hiveblocks.com I could see what was behind it.
This is the necessary code:
In case you want the gray background but not the bold letter, you must use table code in HTML.
I came up with this thanks to @hivebuzz. Detailing one of its notifications, I could see that the message had a gray background, so checking the background code through hiveblocks.com I could see what was behind it.
This is the necessary code:
El fondo gris solo es visible cuando utilizamos Hive.blog o Peakd.com en modo claro (fondo blanco), siendo aún más notable en la primera interface. En caso de utilizar el modo oscuro para ambas interfaces, el fondo es un gris más oscuro, pero se puede detallar que es ligeramente más oscuro que el fondo normal.
En caso de que quieras el fondo gris pero no la letra negrita, debes recurrir al código de tablas en HTML.
Realizar esto se me ocurrió gracias a @hivebuzz. Detallando una de sus notificaciones, pude ver que el mensaje tenía un fondo gris, por lo que revisando el código de fondo mediante hiveblocks.com pude ver lo que había detrás.
Este es el código necesario:
En caso de que quieras el fondo gris pero no la letra negrita, debes recurrir al código de tablas en HTML.
Realizar esto se me ocurrió gracias a @hivebuzz. Detallando una de sus notificaciones, pude ver que el mensaje tenía un fondo gris, por lo que revisando el código de fondo mediante hiveblocks.com pude ver lo que había detrás.
Este es el código necesario:
<table> <td> Text/Texto </td> </table> Example:
Ejemplo:
If you want to enter several paragraphs, you must enter the HTML code "< br >" twice between them:
En caso de querer introducir varios párrafos, se debe introducir el código HTML “< br >” dos veces entre ellos:
Headers with gray background [Títulos con fondo gris]
Using the same structure as above, we introduce a title. This gives the title a different background from the one in the paragraph. It only works with HTML titles. The code is as follows:
Utilizando la misma estructura anterior, introducimos un título. Esto le da al título un fondo diferente al que posee el párrafo. Solo funciona con títulos HTML. El código es el siguiente:
<table> <td> <h1> Title/Título </h1> </td> </table>We can take advantage of a table property in HTML to create headers with "several columns".
Podemos aprovechar una propiedad de las tablas en HTML para realizar títulos con “varias columnas”.
<table> <td> <h1>ENGLISH</h1> </td> <td> <h1>SPANISH</h1> </td> </table> ENGLISH | SPANISH |
Simple divider, made by code [Separador simple, hecho con código]
This is a faint bar that may look like a simple separator. It's more visible on Hive.blog than on PeakD, especially in light mode. It gives a bigger spacing between paragraphs.
The code is an empty table in HTML:
The code is an empty table in HTML:
Se trata de una barra tenue que puede parecerse a un separador simple. Es más visible en Hive.blog que en PeakD, sobre todo en el modo claro. Otorga un espaciado mayor entre párrafos.
El código es el de una tabla vacía en HTML:
El código es el de una tabla vacía en HTML:
<table> <td></td> </table>It would look like this on both interfaces, both in light and dark mode:
Se vería así en ambas interfaces, tanto en modo claro como oscuro:
Too simple? You can add some text between the "< td >" codes:
¿Muy simple? Puedes agregar algo de texto entre los códigos "< td >":
| HIVE |
| | | | acont | | | |
| |
You can try visualizing this post from both interfaces and see the difference between them.
Puedes probar visualizando este post desde ambas interfaces y ver la diferencia entre ellas.
Thanks | Gracias |
Let me know what you think about this formatting tips leaving a comment.
Deja tu opinión acerca de estos consejos para el formateo en los comentarios.
 |
| 🚀 💯%PowerUp ✔️ #HPUD |
#POSH
Buen aporte @acont, estoy comenzando a usar las tablas y todo suma.
Gracias por compartir.
Buen aporte @acont, estoy comenzando a usar las tablas y todo suma.
Gracias por compartir.
Hola @argenvista, que bueno que te haya servido, gracias a ti por visitar. Las tablas tienen un uso creativo como puedes ver. Quizás con el MARKDOWN sea más sencillo para realizar una tabla normal.
Congratulations @acont! You received a personal badge!
Participate in the next Power Up Day and try to power-up more HIVE to get a bigger Power-Bee.
May the Hive Power be with you!
You can view your badges on your board and compare yourself to others in the Ranking
Do not miss the last post from @hivebuzz:
Excelente contenido amigo @acont me resulta muy útil gracias por compartirlo, socializaré la información es de gran ayuda para los usuarios !
Hasta luego, seguimos en comunicación !
Gracias compañero @amestyj, gracias por compartirlo, saludos.
Como siempre muy explicativas tus publicaciones, en este caso me gusto lo fácil de entender lo de los códigos aunque yo no soy mucho de maquetar con muchos código pero pronto con esto y otras guías empezaré a probar de todo jeje. Los fondos gris fue lo que más me interesó la verdad porque estéticamente se ve muy bien.
Saludos @memes777! Gracias a ti por pasar por acá. El fondo gris es bastante llamativo, suelo usarlo en las conclusiones de mis post de stemsocial.
Excelente contenido, muy útil para darle más formato a nuestros post.
Saludos mi estimado @acont.
Esto lo saqué de las tablas, a ver si no hay más códigos ocultos por ahí que puedan hacer ver más genial el post. Saludos!
tu contendio esta brutal, muchísimas gracias por compartirlo.
Gracias por el comentario, saludos.