Hola Steemians!👋🏼👋🏼
Bueno el día de hoy me decidí a hacer un blog para ayudarlos a hacer un poco mas hermoso sus blogs, quizás existan ya blogs como este pero quiero hacer de este un blog un poco mas fácil y entendible a otros. Dicho esto ¡Comencemos!
✨📜Haz tu blog mas estético📜✨
Has llegado a ver esos blogs que contienen imágenes a un costado y texto en su otro lado? Se ven increíbles no crees? Pues hoy vengo a enseñarte una manera de hacerlo, bastante facil y sin tanto lio, para que en cuestion de minutos arregles todos esos detalles, para hacerte el trabajo mas fácil te recomiendo sigas estos pasos:
🌀 Escribe tu blog en el editor normal de Steemit
🌀 Añade las imágenes como normalmente lo haces
🌀 Al finar de hacer tu post dirígete a la parte superior izq. de tu editor y da clic en "Raw HTML"
Centrar el texto
Como primera instancia tenemos algo que me parece importantisimo, centrar tu texto, lo cual nos ayudara bastante para alguna que otra cosa. Únicamente tienes que localizar en tu editor HTML el texto a centrar, lo que tienes que hacer es añadir estas etiquetas <center> </center> a la linea que quieres centrar, pero tienes que hacerlo después de la etiqueta de apertura <p> o <h1> y cerrarla antes de las etiquetas de cierre de estas </p> </h1> (estas etiquetas h1, h2, son los titulos, o encabezados) quedando de esta manera
<p><center>Tu texto aqui</center></p><h1><center>Tu titulo aqui</center></h1>Alinea las imágenes a la derecha, texto a la izquierda.
Después de haber añadido tus imágenes y texto de la forma que acostumbras, abre el editor HTML y a continuación busca la imagen o imágenes que quieres editar a la derecha.
Encontraras algo como esto:
<p><img src="LINK DE LA IMAGEN" width="560" height="420"/></p> <p><a href="LINK DE LA IMAGEN">Créditos</a></p>Como ves no tiene ninguna alineación, la segunda linea va debajo de la imagen y representa la fuente de donde salio la imagen. Una vez localizado estas dos lineas, procederás a hacer lo siguiente, tendrás que encerrar todo entre dos etiquetas <div> </div> pero la primera de ella tiene que contener un atributo especial quedando de esta manera <div class="pull-right"> </div>, así que básicamente tu código debería quedar así
<div class="pull-right"><p><img src="LINK DE LA IMAGEN" width="560" height="420"/></p> <p><a href="LINK DE LA IMAGEN">Créditos</a></p></div>Dandote como resultado esto!
Y si quieres añadir el texto "Créditos" o "Fuente" debajo de la imagen pero centrada lo único que tienes que hacer es añadir las etiquetas de "Center" en tu linea de código respectiva al texto "Créditos", de esta manera:
<p><center><a href="LINK DE LA IMAGEN">Créditos</a><center></p></div>Y listo El texto se acomodara automáticamente a la izquierda de la imagen sin que tu hagas nada!
Imagen a la Izquierda, texto a la derecha
Para realizar este procedimiento es básicamente lo mismo! solo que en vez de ser <div class="pull-right></div> lo unico que tendremos que hacer es cambiar la palabra "right" por "left".
Quedando tu código de esta manera:
<div class="pull-left"><p><img src="LINK DE LA IMAGEN" width="560" height="420"/></p> <p><a href="LINK DE LA IMAGEN">Créditos</a></p></div>
Y les quedara algo como esto!
Como ven aplique de nuevo la etiqueta <center> para poder centrar la palabra "Créditos" debajo de la imagen.
Una cosa que hay que aclarar es que el beneficio de alinear las imágenes a los costados es que a la hora de hacerlo, no importa cuan grande sea tu imagen, esta a la hora de ser alineada se hará un poco pequeña para darle esa estética y que puedes escribir a su lado, lo cual en mi parecer le añade ese toque profesional a tu blog.
Justifica tu post entero
En una ocasión el usuario @tex73110 me recomendó y dio el tip que al menos para el, el que un usuario justifique su post le hace ver que por lo menos se tomo el tiempo para embellecer su publicación, a continuación te presentare el código que me proporciono para realizar esto, que la verdad es bastante sencillo y solo requiere unos segundos.
Para realizar esto, básicamente hay que añadir la etiqueta <div> con su etiqueta de cierre correspondiente </div> pero le añadiremos un atributo diferente quedando de esta manera: <div class="text-justify"> </div>
Estas etiquetas debemos añadirlas despues y antes de nuestras etiquetas <html> de apertura y cierre respectivamente, quedando de esta manera.
<html><div class="text-justify">Tu publicacion aqui</div></html>De esta manera todo tu texto quedara justificado, y la verdad esta etiqueta es muy fácil pues las etiquetas html son la primer y ultima linea de tu código así que seria fácil ubicarlas para poder poner tus etiquetas "div" con justificado
Lineas de separacion
Hz notado que en algunos post incluso en este estan unas pequeñas lineas que le dan un toque mas profesional o bonito? como quieran llamarle XD pues se hace gracias a una etiqueta, lo uno que debes hacer es ubicar en tu editor de HTML entre que lineas quieres que aparesca y pones la siguiente etiqueta
<hr>¡Y listo tendras esa pequeña linea!
⚠️ ⚠️ DATO IMPORTANTE ⚠️ ⚠️
Estas modificaciones se hacen al final de haber escrito tu post en el editor de Steemit, pues si estas en el editor HTML y después pasas al normal para editar algo, notaras que se ve raro y si modificas algo en el editor normal, cuando regreses al editor HTML notaras que las etiquetas añadidas habrán desaparecido.
Y bueno Steemians espero les haya gustado y les haya servido el post de hoy. ¡Los espero mañana con otro post!
¡Sígueme para mas contenido!
¡Sígueme para mas contenido!
¡Y Upvote!
¡Y Upvote!
This post has received a 11.36 % upvote from @sleeplesswhale thanks to: @blackben.
Muy bien, justo lo que estaba buscando y se entiende perfectamente, ya empiezo a practicar. voto te sigo y me gustaría tu visita ,saludos
me alegra te haya ayudado mucho! ya me doy una vuelta por tu blog :D
Genial! Buenos datos, la de la línea no me la sabia jaja
jejeje pues ahora la sabes! ;D
Muy útil, tu post :)
Gracias!
Buen post, nos ayuda a mejorar cada día más.
Por eso mismo lo hice para ayudarlos a mejorar la calidad de sus post!
Graicas!
Buen post BLack, no había pasado por aqui...ya apunte unas cositas en mi agenda de steemit. Gracias
De nada :D y gracias a ti !
Me alegra que te haya servido para puntar unos detalles ;D