De manual #2: Personalizar cuadros de texto

¡Hola Viajantes! Hace bastante tiempo que no os traía un tutorial para blogger debido a la falta de tiempo para poder prepararlo bien y buscar todo lo que pudiera sobre ello.

Si habéis estado por el blog últimamente habréis visto que he añadido cuadros para enmarcar las sinopsis y datos del libro. Tenía bastantes ganas de ello pero nunca me había puesto con ello y puede que las primeras veces la liara un poco pero ahora lo controlo (creo). Así que el tutorial de hoy consistirá en explicaros diferentes códigos, ya que dependiendo del blog puede no valeros o que no os guste o cualquier cosa.

No voy a extenderme más y empiezo con el tutorial.

Paso 1 (y el más importante de todos). Lugar donde colocar el código

PASO 2. Insertar el código

El código que llevo utilizando desde hace meses lo cogí del blog Un blog bonito para ti. Es el más simple y sencillo de todos.

Código 1.

<div style=" border-style: solid; padding: 18px;"> EscribirTextoAquí </div>

EscribirTextoAquí

Código 2.

<div style="border: 2px solid #5D0202; padding: 5px;">Aquí dentro va el texto al que le aplicamos el estilo</div>

Se parece bastante al de antes pero ya haciendo algunos cambios que os explicare más abajo

Aquí dentro va el texto al que le aplicamos el estilo

Código 3.

<div style="background-color: #edfffa; text-align: center; border: 2px solid #b991af; padding:5px; ">Aquí va el texto que metemos en la cajita</div>

Aquí va el texto que metemos en la cajita

Código 4.

<textarea rows="3" cols="20">Escribo algo de prueba y observaremos el resultado</textarea>

Escribo algo de prueba y observaremos el resultado

Código 5.

<p style="border:1px solid black">Aquí va el texto</p>

Aquí va el texto

PASO 3. ¿Cuándo lo colocas?

Bueno, para gustos los colores pero yo prefiero hacerlo cuando ya tengo todo el texto pegado. Aun así os pongo ambas opción, sus pros y contras.  

OPCIÓN 1. Texto primero

En REDACTAR ponemos el texto que queramos.

Después le daremos a la opción de HTML, no os asustéis con lo que os salga ya que no será tu texto tal cual.

Colocaremos nuestro código después de: <br />

Ahora aquí tenemos que elegir entre: poner nuestro texto dentro del código desde el HTML o irnos a REDACTAR y cambiarlo.

OPCIÓN 1.1 Ponemos el texto directamente en el código desde HTML

Seleccionaremos el texto entre: <div class="MsoNormal">……y…… <o:p></o:p></span></div>. Le daremos a cortar el texto. 

Luego iremos al código y quitaremos la frase que está entre los símbolos >…< y pasaremos a pegar el texto cortado antes.

Puede que esto sea algo más complicado si has cambiado varias veces el tipo o tamaño de la letra por lo que tendrás que ir con más ojo buscando el principio y el fin de lo que quieres tener en el marco**. Posteriormente volvemos a REDACTAR. Y seguimos con la redacción de nuestra entrada pero puede que la letra os cambie. 

**Un ejemplo con una reseña real donde la había copiado entera.
Haremos lo mismo, colocamos nuestro texto en REDACTAR y nos vamos a HTML

Nos vamos a encontrar con el siguiente GRAN chorizo pero no problema, el truco esta en encontrar lo que antes os señale: (comienzo) <div class="MsoNormal">……y……(final) <o:p></o:p></span></div>. Le daremos a cortar el texto.

OPCIÓN 1.2. Ponemos el texto posteriormente desde REDACTAR

Aquí pondremos primero el código en el HTML.

Luego nos iremos a REDACTAR. Tendremos el cuadro y solo habrá que borrar lo de EscribirTextoAquí y ponemos nuestro texto.

Aquí es cuando a mí me surgieron los problemas, si el texto era muy grande me hacía de tope y no podía volver a escribir además de que salía con diferente letra. Por lo que esta opción la descarte. 

Ahora toca ir a por los términos que podemos cambiar y cómo podemos hacerlo.

Border hace referencia al ancho del borde, por ejemplo 3px o 16px. Cuántos más píxels, más ancho va a ser el borde. Además, hay muchas formas disponibles para el borde: "solid" "double" "dotted" "groove" "dashed" "ridge" "inset" "outset" (ya es ir probando cual te gusta más).

   

Para acabar tenemos el color del borde, ya sería el que queráis: podéis poner el código HTML del color (lo recomendado) o directamente el nombre del color en inglés, pero los colores pueden no tener el tono que queréis.

Pero no tenemos por qué tener todos los bordes del mismo color o al mismo tiempo: podemos usar el borde que queramos según nuestras necesidades. Para ello tenemos los siguientes códigos, depende del que queramos usar:

border-top: 1px solid #5D0202; → Borde de arriba

border-bottom: 1px solid #5D0202; → Borde de abajo

border-left: 1px solid #5D0202; → Borde de la izquierda

border-right: 1px solid #5D0202; → Borde de la derecha

Border-radius es el borde, puedes redondearlo más o menos ya sea poniendo más o menos px (ej: 20px).

Background es el color de fondo, podéis usar tanto los códigos de colores HTML como los nombres de los colores básicos en inglés. También se pueden poner imágenes de Internet (background-image).

Margin-left es el margen de espacio que dejas entre el lado izquierdo de la entrada y el cuadro de texto.

Margin-right es el margen de espacio que dejas entre el lado derecho de la entrada y el cuadro de texto.

Padding: es el espacio entre el marco y el texto, esto es esencial para que quede más estético ya que si no lo pones el borde del marco va a estar pegado al texto.

Estos son los blogs que use de referencia para informarme y tomar ideas: Mi medio limón verde, Un blog bonito para ti, My life, Patric Reads, Ayuda para blogs, All Lives are Books.

Creo que os lo he explicado todo y si tenéis alguna duda no dudéis en escribirme, os ayudare en todo lo que pueda y lo más rápido posible.