[Tutoriales] Poner iconos en los títulos de los gadgets

Holiii!!! Hoy voy a subir un tutorial en vez de una reseña, ¿por qué? Pues porque mi querido amigo blogger no publicó ayer el tutorial que dejé programado antes de ir al médico... THANKS. Pero bueno, como ya tengo hecha la entrada, pues no la voy a desperdiciar, os la dejo aquí en vez de la que toca hoy, dado que no se que reseñar (aunque seguro que tengo cosas pendientes -_-). Por cierto, perdonen si no contesto a todos los comentarios, pero es que se me van acumulando y los contesto poco a poco, aunque la mayoría, no creo que vuelva a ver mis respuestas dado que los comentarios suelen ser más de que os ha gustado la entrada y etc xD Pero a los que me hayan preguntado algo y no les he contestado, perdonen xC (No se si hay casos así).

Bueeno, hoy les voy a enseñar a poner en los títulos de los gadgets iconitos como las manzanitas que tengo yo a petición de Tris (Petición, bueno, me hago ilusiones, me preguntó como se hacía, pero yo me lo tomo como un "haz un tutorial de..." xD).



Bien, pues es muy fácil (en realidad no, pero con mi tutorial sí :3), primero tienen que ir a Plantilla, Editar HTML, y buscar ]]></b:skin>, y justo encima, pegamos el siguiente código:

.sidebar .widget h2::before {
content: " ";
position: absolute;
display: block;
width: 20px;
height: 20px;
top: 5px;
left: 40px;
background: url(URL_DE_TU_IMAGEN) no-repeat right center;
background-size: 80%;
}
.sidebar .widget h2::after {
content: " ";
position: absolute;
display: block;
width: 20px;
height: 20px;
top: 5px;
right: 40px;
background: url(URL_DE_TU_IMAGEN) no-repeat right center;
background-size: 80%;
}

Después solo tienen que poner la url de vuestra imagen, y cambiar a su gusto el resto, les explico cómo:

El rojo: son el ancho y el alto del espacio en el que irá la imagen. Si ven que la imagen se ve cortada, es porque el espacio que tiene es muy pequeña y tienen que aumentar estos números (o hacer más pequeña la imagen).

El azul: con estos numeritos en azul, podemos determinar la posición de la imagen, solo tenemos que ir aumentándolos o disminuyéndolos según donde queramos la imagen.

El rosa: Este es el tamaño de la imagen, cuando más lo aumentes, más grande la imagen.

Y eso es todo!! Espero que les haya gustado el tutorial, les dejo una página muy útil para encontrar iconitos: Pixel Soup. Si tienen problemas con el tutorial mándenme un correito desde la página de Contacta del blog.

Beshus y hasta mañana!!