Recursos para personalizar (parte II)

Hola!!! Tengo otra entrada con cosas para que sus layouts y blog estén como ustedes quieran de bonitos. Aqui ya estoy contando casi todos mis secretos, asi que si se preguntan como hice algo, lo mas probable es que sea algo parecido a lo que está acá :) 

Para la mayoría de esas cosas nos vamos a adentrar en editar el CSS de nuestro blog, así que recomiendo totalmente que antes de hacer cualquier cambio hagan una COPIA DE SEGURIDAD, así que en caso de que no les guste algo o se rompa algo, pueden volver a su layout antiguo (sirve harto por si también les gusta cambiar varias veces su layout o diseño).

Para hacer una copia de seguridad tienen que ir a temas > "crear copia de seguridad"

Los siguientes códigos puedes ponerlos en la parte de añadir css o en el html, solo ten cuidado que ponerlo en la parte de "style" :) y siempre siempre siempre hacer una copia de seguridad~

Cambiar las negritas (b), las itálicas (i), subrayar (u) y tachar (strike).

En este caso, podemos cambiar los estilos de distintas formas, podemos agregarle color, podemos ponerles "adornos" o podemos hacer que sean de otro tipo de letra incluso. Si queremos agregarles color podemos hacer esto:

b{ color: #D552A3; }
i{ color: rgb(138, 203, 208); }

s{ color: orange; }

u{ color: #9AD872; }

entonces nuestras letras se verían así! Si se dan cuenta, se pueden escribir los colores en inglés o poner códigos, cualquier de ellos funciona, solo deben respetar las reglas de cada forma. Un listado acá de como escribir ciertos colores https://www.w3schools.com/colors/colors_names.asp y mi sitio favorito de colores: color hunt!

Pero esto no es todo! Nuestro amigo w3school nos dice que hay otras decoraciones para el texto! entre ellas están los subrayados: solid - que es el valor default, double (doble linea), dotted (linea depuntos), dashed (linea de pequeñas lineas) y mi favorita: wavy (linea curva). y entonces para poder combinar estas decoraciones con los otros códigos vamos a usar de ejemplo el subrayado, si es que quisiera que fuera más funky le vamos a agregar el wavy y quedaría asi;

 
u{ color: #9AD872; text-decoration: underline wavy; }  

Y ahora nuestro texto se ve de esta forma! Y así podemos hacer otras combinaciones de colores y decoraciones. Podemos poner a cualquiera de nuestras etiquetas (b,i,u y s) los colores y decoraciones que queramos, por ejemplo si ponemos en negrita tambien podemos ponerles algunos puntitos abajo si es que a ustedes les gusta eso. Para hacer esto el codigo seria mas o menos esto:

 
b{ color: #D552A3; text-decoration: underline dotted; }

Cambiar el "blockquote"

El Blockquote o las citas es parte de los post que uno hace normalmente en el editor de blogger. Está señalado con ese simbolo ". Obviamente esta etiqueta tambien se puede cambiar para que cada vez que utilices el blockquote se vea de una forma particular. Si saben mas de CSS y HTML, el blockquote sirve de la misma manera que un "div", asi que podemos editarlo y cambiar a nuestro gusto de la misma manera. 

Hagamos algunos cambios básicos. Veamos un borde, color de la letra y...quizás un fondo?. El código quedaría así

blockquote{ text-transform: lowercase; font-size: 9pt; background:url('tuimagenaca'); padding:10px; color: #FF653F; border: 1px dotted #FFC85C; }

entonces, nuestra cita nos quedaría así! ohhh pero no se el fondo dani :(

ahora si! cambie el color de la letra porque si no, no se iba a leer nada. Se ve mas ancha no? es el padding que aumente a 30px! Puedes cambiar muchas cosas acá, asi que partiste a aprender en w3school!

Marquee

Este efecto es demasiado entretenido y pueden usarlo en sus entradas, en widgets u otras partes de su blog. Y es de los más fáciles, para esto solo tienen que usar esta etiqueta en su código:

<marquee>reemplaza acá tu texto o imagen</marquee>

Ejemplo: holita soy un marquee (●'◡'●)

Imagenes en los titulos / widgets

Este es un código que averiguo el precioso blog de rinmero. Yo solo lo traduje!, todos los créditos a ella, porque ahora mi blog tiene cositas más lindas uwu

Paso #1: Ir a "Diseño" en blogger y agregar un gadget de html con los siguientes códigos. (no importante donde esté, porque como es código, no i mporta donde esté. En esta parte es mucho mas facil editar los codigos, asi que es lo mejor este tip.

Paso #2: Añade este codigo 

  <style type="text/css"> .post-title:before, .post-title:after { content: url(INSERTA LA URL DE TU PIXEL); } </style>

Si quieres que se vea solo en la izquierda, borra .post-title:after. Si quieres que se muestre solo a la derecha, borra .post-title:before. Recuerda que la URL es la dirección de tu imagen, recuerda subirlo a tu propio host para asegurarte que tus imagenes se vean.

Este codigo es solo para los titulos de tus post, pero hay más para diferentes partes del blog, ejemplos:

para los gadgets

.widget .title:before, .widget .title:after f

para las fechas de tus post

.date-header:before, .date-header:after 

La autora original nos dice que hay muchas más, asi que solo hay que buscar...

uffff, esta entrada se lleva cocinando un montón. ojalá le sirva a más de algunx o(*￣▽￣*)ブ