¡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>
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.
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.
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.