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.