SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

23 abr. 2014

Cómo poner imágenes en los títulos de los Gadgets.

Hoy aprenderemos algo totalmente innecesario para la funcionalidad de un blog pero totalmente fundamental para su diseño.
Kicir, hoy explicaré un tuto que no vale pa na, solo pa poner bonito el blog.
Cómo poner imágenes en los títulos de los gadgets, oséase esto:

No es difícil hacerlo, simplemente no hay que tener miedo y ayuda mogollón que os hayáis leído y entendido el Curso 3: Sobrevive al código CSS de tu plantilla Blogger.
Si habéis leído el curso y lo habéis entendido y ya habéis hecho alguna que otra cosa, estará chupao hacer esto. Así que vamos al tema.
Vamos a nuestro administrador de Blogger, le damos a Plantilla y Editar HTML.
Desplegamos el artilugio del código CSS y buscamos lo siguiente:

.sidebar o #sidebar

Sabéis perfectamente que depende de la plantilla, el programador puede que a la barra lateral la haya llamado pepita, y entonces os saldrá .pepita o #pepita. Por eso yo en su día hice unas plantillas con el código listo para aplicarle cualquier tutorial. Por norma general los programadores siempre utilizan el mismo vocabulario, pero los hay que son unos cabroncetes y no quieren que su código se modifique fácilmente.

Así que si no lo encontráis no os estreséis, en el Curso 3 también os di trucos para encontrar lo que no encontrabais en el código.
Bien una vez encontrado el código veréis esto o algo parecido a esto:
.sidebar .widget h2 {   ---> Etiqueta que vamos a personalizar, el sidevar y los widgets h2 (subencabezado)
font-family: Delius;   --->Tipo de Fuente de los títulos de los gadgets
font-size: 18px;  --->Tamaño de fuente de título de los gadgets
text-align: center;  --->Alineación de los Títulos
background: url(http://2.bp.blogspot.com/-EBLzmxmOX_U/Uuvl8tOKifI/AAAAAAAABwk/ueWlz-rD3dw/s1600/separador-sidebar.png) no-repeat center bottom;  --->Imagen del Fondo de los Títulos
height: 30px; --->altura del espacio del Título
weight: 100px; --->ancho del espacio del Título
}
Bien ahora entendemos todo el código del aspecto de nuestra sidebar. La parte en la que nos vamos a centrar es en la Imagen de fondo de los Títulos, altura y ancho.
En la parte del Fondo pondremos la URL de la imagen que queramos ponerle, y en ancho y alto pondremos las medidas de la imagen.

Pensad que tendréis que poner una imagen que se adapte a la sidebar, es decir, con unas medidas específicas. Es el fondo, por lo tanto si ponéis una imagen como la mía, tendréis que hacerla pensando que encima del dibujo tenéis que dejar en transparente el espacio que ocupará el título. Así mirad...
Cuando tengamos la URL puesta, hacemos una vista previa y miramos si queda bien o si necesita retoques la imagen.
Ir jugando con las medidas y con la imagen.
Cuando lo tengáis como os gusta, guardáis y ya tenéis imagen en los Títulos de los Gadgets!
Muah!

Lireth's Notebook

17 comentarios:

  1. Hola! muchas gracias por el tutorial, es muy útil! una amiga está pensando abrirse un blog y esto la vendrá genial! la voy a pasar tu enlace para que lo vea! besis

    ResponderEliminar
  2. Muchas gracias por los tutos y los cursos. Te acabo de descubrir hace nada pero tengo que decir que me encanta tu blog y te sigo desde YA.

    ResponderEliminar
  3. Que cuco queda, Lireth!
    Muchas gracias por el tutorial ^^

    Por cierto, al final ya decidí el nombre de mi blog, y no tiene nada que ver con la temática, pero rimaba y se queda asi, jajajaja
    Besos!

    ResponderEliminar
    Respuestas
    1. dame la url así lo veo yo y lo vemos todas!!!

      Eliminar
    2. Es que está en periodo de gestación, jo :(
      Estoy preparando entradas, pero como no he tenido tiempo de ordenar un poco el taller, no puedo hacer fotos ni cosas guays :P
      A ver si termino con los encargos de comuniones y me pongo ^^
      Gracias mil!

      Eliminar
  4. Muchísimas gracias por el tutorial!!!! me encanta!!! y lo usare en el próximo diseño de mi blog :)
    Besines

    Alba, Niña Bonita Accesorios

    ResponderEliminar
  5. Gracias por el tutorial!! Lo voy a intentar seguro, a ver que sale!
    Un saludo

    ResponderEliminar
  6. Respuestas
    1. Todo lo que está entre < b:skin > y < /b:skin > (sin los espacios). En los cursos gratuitos que puedes descargar desde el apartado de CURSOS aprenderas cosas básicas para programar y personalizar tu blog.

      Eliminar
  7. Hola Lireth! Como siempre un magnifico y accesible tutorial! Yo quiero ir haciendo cositas en el blog, y a pesar de que me he leido el curso de CSS no consigo encontrar en el código lo referente al sidebar. Cuando he seguido los pasos, me pone la imagen cortada debajo del menu horizontal y de los títulos del gadget pero no consigo que me aparezca la imagen completa y solo en el sidebar :( Otra pregunta, donde puedo ver el ancho y el alto de los títulos del sidebar para poder darle el tamaño a la imagen?? siempre volviéndote loca con mis preguntas pero es que me puede el código!!
    Gracias como siempre por tu tiempo y paciencia
    Muacks

    ResponderEliminar
    Respuestas
    1. En el tutorial ya explico lo del tamaño. En el mismo sitio donde pones la url de la imagen debes indicar el ancho de la misma y el titulo se adaptará a ese ancho que tu le hayas dicho.

      Eliminar
  8. Donde podemos conseguir imagenes así? gracias!!

    ResponderEliminar
    Respuestas
    1. Pues supongo que habrá páginas como El perro de papel de mi queridísima Celia en la que os podéis bajar sets enteros de imágenes para decorar el blog, o pagando 1€ en su tienda de Etsy. En Google imágenes tb habrá mil, no lo sé yo me las suelo hacer en photoshop :)

      Eliminar
  9. Hola!! =) Mira estoy intetando poner una imagen en el titulo de mis entradas, no se si me entiendes.. te explico jeje

    En vez de poner Archivos de mi blog por ejemplo, poner una imagen.

    Ojala y me puedas ayudar!!! =S

    Saludosss gracias!!

    ResponderEliminar
    Respuestas
    1. Pues sigue el tutorial pero a la hora de hacerte la imagen háztela con el título que quieras ponerle a ese gadget, pero cuando añadas el gadget no le pongas título así saldrá solamente la imagen que hayas puesto. :k

      Eliminar
    2. OK! muchas gracias por tu contestación! :)

      Eliminar
  10. Me ha parecido muy útil muchas gracias!! Ahora falta que la gente se anime a darle al botón! jaja pásate por mi blog, espero que te guste! http://livelovetrend.blogspot.com.es/

    ResponderEliminar