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. 

Tutorial: fondo para los comentarios en blogger

Este es uno de los pocos tutoriales que nunca encontré. Fondo para los comentarios de blogger. Encontré paraface ponerle bordes, separaciones, para distinguir los del autor de los demás, pero nada, nada, sobre fondos de imagen en los comentarios. De todo, total, menos para ponerle fondo a los comentarios

En este caso les daré un ejemplo para que le pongan un fondo de imagen al comentario. Como recomendacion busquen que la imagen sea, una de dos, o un mosaico, para que se pueda repetir y no se note la separación o lo que últimamente conocen como render (mal ocupado, por cierto) o sea, una imagen PNG sin fondo. Les enseño como poder una imagen sin fondo (ya que para poner una en mosaico se sigue casi el mismo procedimiento)

Para empezar, seleccionamos una imagen.

Para explicarles está se me acomoda a varios ejemplos (como dato, es la que uso para la lista de blogs). Por otro lado esta imagen esta editada, para hacerla un poco más "transparente". Si quieren, puedo hacer un tutorial para que puedan realizar ese efecto ;) Sólo diganme en comentarios.

Segunda indicación: pierdanle miedo al código, no es tan marciano como parece. El CSS en realidad es MUY, muy sencillo. Es cosa de lógica. Claro, que en blogger hay que conoces las clases que usa. Por ejemplo, para los comentarios se utilizan diversas clases (obtenidas en Oloblogger gracias a una gran busqueda en Google; si saben un poco de CSS les puede ser de mucha ayuda ese post).

Para este tutorial solo vamos a usar una clase de esa gran lista: .comments .comments-content .comment-content {}

Supongo que todos conocen el diseñador de plantillas. Muy bien, podemos agregar los fondos desde allí, sin necesidad de entrar a la versión HTML de su blog (que en realidad es un XML... larga historia) y a muchos que no saben nada de esto les resultará más fácil, espero. Ya una vez en el diseñador de plantillas se van a Avanzado y de allí hasta abajo, a donde dice "Agregar CSS"

¿Ya están allí?, perfecto, ahora va la parte más "difícil": el código.

.comments .comments-content .comment-content {

background-image: url('http://i.imgur.com/E62Mh.png'); /* Allí colocan el link de su imagen, previamente alojada en un host de internet (personalmente, recomiendo imgur). */

background-color: white; /* En este caso que usamos una imagen PNG (sin fondo) de fondo, debemos definir un color de fondo también */

background-position: right top; /* Define la posición de la imagen */

background-repeat: no-repeat; /* Pueden cambiarlo por repeat-y si quieren que su imagen se repita horizontalmente */

padding: 10px; /* esto eso para que el texto no quede justo sobre los bordes y se vea más ponito */

}

Entonces, nuestro comentario quedaría así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum placerat sollicitudin. Proin tempor, leo id pulvinar auctor, ante sapien scelerisque mauris, ut dapibus urna urna nec metus. Suspendisse aliquet tempor arcu, eget ullamcorper mauris ultrices consequat. Nam fringilla lobortis leo id congue. Praesent sit amet vulputate velit. Vivamus feugiat condimentum sapien et bibendum. Suspendisse potenti.

Otro ejemplo es como quedaría si le dan que se repita en la coordenada y (vertical) que es como los tengo yo (pero la C.C. es muy larga así que rara vez se repite). El código es el mismo, sólo cambian levemente la última línea.

.comments .comments-content .comment-content {

background-image: url('http://i.imgur.com/E62Mh.png'); /* Allí colocan el link de su imagen, previamente alojada en un host de internet (personalmente, recomiendo imgur). */

background-color: white; /* En este caso que usamos una imagen PNG (sin fondo) de fondo, debemos definir un color de fondo también */

background-position: right top; /* Define la posición de la imagen, puede ser bottom (abajo), o top (arriba) */

background-align: right; /* El valor puede ser right, left o center */

background-repeat: repeat-y; /* Pueden cambiarlo por repeat-y si quieren que su imagen se repita horizontalmente */

padding: 10px; /* esto eso para que el texto no quede justo sobre los bordes y se vea más ponito */

}

Entonces, el comentario queda así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum placerat sollicitudin. Proin tempor, leo id pulvinar auctor, ante sapien scelerisque mauris, ut dapibus urna urna nec metus. Suspendisse aliquet tempor arcu, eget ullamcorper mauris ultrices consequat. Nam fringilla lobortis leo id congue. Praesent sit amet vulputate velit. Vivamus feugiat condimentum sapien et bibendum. Suspendisse potenti.

Sólo les expliqué como hacerlo con una imagen sin fondo, pero si van a usar una con fondo lo único que tienen que hacer es quitar dos línea de ese codigo: background-color:white; y background-repeat: no-repeat; o en su defecto, dejar el repeat-x. Recomiendo imagenes en mosaico, o que ustedes crean que no se van a ver mar. Por otro lado, si la imagen es oscura siempre pueden poner el texto blanco con un simple color:white; en el código que les di.

Realmente, es muy fácil modificar ese CSS, les puse todas las opciones y ya sólo sería cuestión de que se atrevan a experimentar con él, como siempre, cualquier duda la respondo en comentarios y si quieren algún tutorial de algo en específico pueden pedirlo también. ¡No muerdo!, y estoy dispuesta a hacer de todo para ayudar. Si les gusto el tutorial (y le entendieron) recomiendenlo...

Nea