Tutorial: cómo personalizar la lista de blogs

Mi blog es un blog literario que tiene una característica muy especial: también es un blog de cuanta pendejada se me atraviese enfrente. Imagínense que un día me voy a mochilera (not gonna happen) y me dan ganas de documentarlo: pues para eso tengo un blog, ¿no? Me dirán que podría abrir otro, pero la verdad es que la pereza gana y este ya tiene público, seguro me siguen aunque les cuente mis viajes imaginarios como mochilera. En este caso no les voy a contar mis viajes, les voy a acomodar un tutorial que me pidieron hace tiempo (quien lo haya pedido, lo siento por la tardanza, lo mío es ir a mi paso y lo demás tonterías). Les voy a enseñar a personalizar la lista de blogs parecida a cómo tengo la mía (por que eso me pidieron, que les enseñara a hacerla así). 

Ejemplo

¿Qué necesitan para este tutorial? Un blog en blogger (no, no tengo para otras plataformas) y un widget para desplegar una lista de blogs (no de links, de blogs) que sólo muestre el título del blog y de la última entrada. Nada de imágenes ni de fragmentos.

Lo ideal es que el CSS que les voy a dar lo pongan directamente en el HTML del blog, no en la sección del editor de plantillas que permite agregar CSS, pero pueden hacerlo donde sea, por si acaso, voy a enseñarles en donde añadir el CSS en el código del blog con unas cómodas imágenes.

Ahora vamos con el CSS que van a agregar. Primero, vamos a ocultar los iconos para que no nos estorben. Esto es opcional, pero a mí por cuestión estética no me gusta tenerlos allí. 

#BlogList1_container .blog-icon{
   display:none!important;
}

Con ese display:none; lo único que le estamos diciendo es que no tiene por qué salir ni desplegarse. El important se le pone para sobreescribir el CSS que tiene (mientras los estándares de diseño lloran en un rincón). Ahora, le vamos a quitar los efectos a los links para que no se subrayen cuando el cursor les pasa encima; también por cuestión estética, así que si lo desean pueden no hacerlo.

#BlogList1_container a:hover{
  text-decoration:none;
}

El hover indica que eso sólo ocurrirá cuando el cursor esté encima del link (a) y el text-decoration:none; indica que el texto no se decorará de ninguna manera. Hasta el momento no hemos hecho casi nada para cambiar el aspecto del widget, pero ahora sí, empecemos: primero con el título de los blogs. Deben agregar este CSS:

#BlogList1_container .blog-title{
  text-align:center;
  font-variant:small-caps;
  font-size:14pt;
  padding:3px 0px;
  border-bottom:1px solid  rgba(106,168,66,0.7);
  margin:3px;
}

Explicaré paso por paso, para que no se pierdan y porque mi intención es que el tutorial sea for dummies. Ya saben que cualquier duda la pueden poner abajo.

• El text-align:center; indica que queremos el texto al centro. También se puede poner right, left y justify, pero en este caso el que nos sirve es el centro.
• El font-variant:small-caps; indica que queremos que nuestro texto salga en versales (mayúsculas chiquitas, para los perdidos). También se puede usar normal, que es la opción por default. Esa propiedad no sirve para hacerlas todas mayúsculas, para hacer eso tienen que sustituir esa línea por text-transform:uppercase; y para que sean todas minúsculas, deben poner text-transform:lowercase;
• El font-size es el tamaño de la fuente, ajústenlo a su conveniencia.
• El padding es el margen interno de la caja que contiene al texto, para que no se junte con todo. En este caso, está como 3px 0px, pues 3px es el valor que tendrá arriba y abajo y 0px en la izquierda y en la derecha. Ajústenlo a su conveniencia, también.
• El border-bottom:1px solid  rgba(106,168,66,0.7); es el borde de abajo. Se pone border-bottom para indicar que sólo se dibujará abajo. El primer valor, 1px, es el ancho del borde, recuerden ajustarlo como a ustedes les guste. El siguiente es cómo aparecerá el borde, pero no se preocupen, aquí abajo les pondré una imagen con todas las opciones que tienen, además de solid. Finalmente rgba(106,168,66,0.7); es el color, las tres primeras cifras son el rgb del color (se puede consultar en internet) y la siguiente es la opacidad, siendo el 0.0 el transparente y el 1 el tono más fuerte.

Tipos de bordes

• El margin es el margen que tendrá la caja del texto hacia los cuatro lados, ajusten el valor a su conveniencia.

Ahora vamos a centrar el resto del contenido con este código. No lo explicaré a profundidad porque allí arriba puse la explicación de su propiedad.

#BlogList1_container .item-content{
  text-align:center!important;
}

Y eso es todo. ¡Lo sé, así se simple es personalizar la lista de blogs como la tengo yo! Cualquier duda que tengan, pueden preguntarme aquí abajo (mejor si lo hacen); también se admiten quedas y sugerencias. Si quieren pedir un tutorial, también aquí debajo y prometo hacerlo, siempre y cuando sea algo que yo sepa hacer. Si se animan a hacerlo, compartan sus resultados, me gustaría verlos. 

Tutorial: cómo poner el menú fijo arriba de la página

Pues me dio la gana hacer otro tutorial. Uno que, por si fuera poco, estoy segura que ya existe allí afuera, pero yo lo traigo hecho por dummies, con las explicaciones más tontas posibles para que nadie se pierda y todos lo puedan hacer en su blog. Ya saben que, una vez terminado el tutorial, las dudas van aquí abajo (y las sugerencias y los tomatazos, también...).

Este tutorial es para que su menú quede en esa posición

Primero, tienen que abrir el código HTML de su blog o la sección para agregar CSS. Yo, personalmente, prefiero que todo se haga en el código, porque ayuda a que quede todo más ordenado. Blogger les va advertir que no lo modifiquen mucho si no saben, pero ustedes hagan caso omiso, aquí aprenden. Y si de plano no confían, vayan a la parte en el editor de plantillas que dice "Agregar CSS" y san se acabó.

Algunas cosas previas:

• Este tutorial es sólo para blogger. Lo siento a los que tengan otro tipo de blog.
• Deben tener la sección de páginas en su blog. Nada un widget de links, tienen que ser las páginas. Pueden adaptarlo a un widget de links, pero deben conocer el id (identificador) del widget.

Por si no saben qué hacer, aquí van las instrucciones en imagen (si no se ve bien, click en la imagen): 

Ahora, el CSS que van a agregar:

#PageList1{
  position:fixed;
  z-index:+3!important;
  top:0px;
  left:0px;
  right:0px;
}

La explicación rápida: #PageList1 es el id del elemento, así que por eso lo hacemos el identificador. No se cambia nunca, a menos de que pretendan adaptar este código a otro tipo de widget. 

El position:fixed; es también necesario para que el menú se quede fijo y cuando scrolleemos hacia arriba o hacia abajo no se mueva. Existe una variante position:absolute; que pondrá también a menú arriba, pero no lo dejará fijo. Sin embargo, por los márgenes de blogger, no siempre funciona. Siempre que ponemos un position fixed o absolute, siempre, tenemos que poner la posición del elemento con los parámetros top, left y right, en este caso, también se puede agregar bottom, por ejemplo, cuando quieren poner algo abajo o en una esquina inferior, pero en este caso, si no saben de CSS, no lo recomiendo. En teoría, las tres se ponen en 0px, porque las queremos pegadas a los bordes de la página; sin embargo, a veces no quedan del todo centradas y tendremos que mover el right o el left (por ejemplo, mi CSS tiene left:20px;). Si ese es su caso, vallan probando distintas cantidades.

El z-index se pone para que el menú siempre esté por encima de los demás elementos. Si al scrollear notan que, por ejemplo, se va abajo de las imágenes, sólo aumenten el número en uno o dos. Siempre tiene que ser un número positivo, en este caso. 

¡Pero el texto no salió centrado! No. Salió pegado a la derecha. Para que quede centrado y queden en una sola línea, agregan lo que sigue:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

Los !important son... importantes y no los deben quitar porque el CSS de blogger predeterminado lo maneja de otra forma y nosotros lo estamos sobreescribiendo. Los estándares de HTML y CSS están llorando justo ahora, pero podemos echarle la culpa a google, totalmente. Ahí no hay necesidad de cambiar nada, pero si tienen curiosidad pueden preguntarme en los comentarios aquí debajo. 

Ahora, ¡los colores! ¡Todavía no le hemos puesto colores! Yo personalmente los pongo en la definición de variables, pero si les digo se me van a perder. Si ya los pusieron antes, en el diseñador de plantilla, y quedan bien con estos arreglos, no le hagan nada más. Si no, sólo agregen esto: 

.tabs-inner .widget ul{
   background-color:#000000;
}

Y cambian #0000 por el color que quieran. De preferencia en hexadecimal, pero si no saben buscar el código hexadecimal del color que quieren, les dejo un link para hacerlo. Si quieren cambiar el color de cómo se ve seleccionado, agregan lo siguiente y repiten las instrucciones que acabo de dar: 

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color:#000000;
}

Ahora, como bonus, les voy a decir como hacer que parezca un efecto cuando pasan el mouse y se cambia de color. ¿Han visto como, en vez de cambiar de color de repente, en mi blog, lo hace de una manera gradual? Bueno, sólo tienen que agregar los códigos de transition, que son los siguientes. 

.tabs-inner .widget li a {
  transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}

Sí, se repite lo mismo cuatro veces para que sea compatible en navegadores viejos y navegadores no compatibles. El all se refiere a los atributos que vamos a animar. En este caso en especial, se puede cambiar por background, pero yo siempre pongo all para no fallar. Después, va la cantidad en segundos que va a durar la transición, en mi caso, 0.6s, pero siempre pueden cambiarlo. No recomiendo que sea más de un segundo.

Y al final, el tipo de transición. Yo uso el ease-in-out, pero hay varios por los que pueden cambiar: 

• linear: la transición será lineal en el tiempo. Siempre a la misma velocidad. 
• ease-in: irá un poco más lenta al principio.
• ease-out: irá un poco más lenta el final. 
• ease-in-out: irá un poco más lenta al principio y luego otra vez al final. 

Y bueno, ¡eso fue todo! Si lo hacen, compartan sus resultados y si les gustó el tutorial, por favor, por favor, compártanlo. Si no les gustó, siempre pueden compartírselo a sus enemigos, por cierto. Las dudas y las sugerencias van aquí debajo, y si quieren otro tutorial, también digánme en los comentarios. Estoy planeando hacer uno para personalizar los tipos de encabezado y subencabezado en las entradas, pero me quedará más largo, así que me llevará tiempo.