Poner un Fondo a los Títulos de la Sidebar.

Poner un Fondo a los Títulos de la Sidebar, le dará a tu blog un toque mas personal, sin decir que puedes hacer volar a tu imaginación con un montón de colores y texturas con las cuales podemos experimentar.

Nunca debemos olvidar hacer una copia de la plantilla  antes de cada cambio que vayamos a hacer ya que un pequeño error puede significar un gran cambio a la  hora de guardar la plantilla y sobre todo si no tenemos pericia en el tema, sin embargo no debemos tener temor ya que con este simple paso podemos volver todo a la normalidad.

Lo primero que haremos es ir a la edición Html de la plantilla, presionar F3 y saldrá un buscador, allí ponemos .sidebar h2 una vez ubicado el código, lo reemplazamos por lo siguiente:
.sidebar h2{
background: url(URL-DE-TU-IMAGEN);
border: 1px solid #9CD2F6;
margin-bottom:15px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
Si lo quieres sin borde, quita: border: 1px solid #9CD2F6. Si quieres el borde de otro color cambia #9CD2F6 por el color de tu elección. Si en vez  de una imagen de fondo quieres un color, debes sacar url(URL-DE-TU-IMAGEN) y solo poner un color antecedido de un #.

Adicionalmente he puesto los textos centrados. Para ubicarlos a la derecha deberás cambiar en center por right, y a la izquierda por left.

Está probado en las plantillas del diseñador de blogger, aunque cada caso pudiese ser distinto.


Si te gustó compártelo en tu red social o recomiéndalo en Google!!!

18 comentarios:

  1. SALUDOS ESTIMADO AMIGO... COMO PUEDES AYUDARME A CREAR UN GADGET COMO EL QUE TIENE EN LA PARTE DE ARRIBA DE TU BLOG.... (LA PRESENTACION DE IMAGENES) MI CORREO ES: mixer_santy_dj@hotmail.com

    ResponderEliminar
    Respuestas
    1. Santy, ese rotador de imagenes lo saqué de este tutorial.
      http://coquitoblogger.blogspot.com/2011/06/bonito-rotador-de-imagenes-automatico.html
      También puedes encontrarlo por "Slider Sohtanaka".
      Saludos.

      Eliminar
  2. Hola!!!, esta muy buena la explicación y el codigo, pero me gustaría saber entre que etiquetas va y exactamente donde?, me puedes ayudar... Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Bienestar:
      En la explicación agregué lo que hay que hacer para poner los fondos
      Saludos.

      Eliminar
  3. Hay alguna forma de que la imagen que se le ponga como fondo se ajuste automáticamente al espacio que ocupa h2?

    ResponderEliminar
    Respuestas
    1. Mike, no sé a que te refieres. Saludos.

      Eliminar
    2. si te fijas en mi blog: latiendademike.blogspot.com
      la imagen que escogi para los titulos es mas grande que el espacio que comprende los titulos del sidebar. Y ahi surge mi pregunta si hay forma de ajustarlo?

      Eliminar
    3. Tendrías que probar en darle una posición al background. Te dejo un link.
      http://htmlhelp.com/es/reference/css/color-background/background-position.html

      Saludos

      Eliminar
  4. Hola mira, cuando busco el (.sidebar h2) me dice el buscador que no esta, no lo encuentra, que hago?

    ResponderEliminar
    Respuestas
    1. Déjame la dirección de tu blog para ver que pasa. Saludos.

      Eliminar
  5. Me pasa lo mismo que a Gabriela, no encuentro el cogifo [.sidebar h2) este es mi blog: http://un-gemelo-en-cada-mano.blogspot.com/

    ResponderEliminar
  6. Hola, me pasa lo mismo que a las chicas de arriba y si busco sólo h2 me salen como 5 diferentes... así que ¿cual sería?
    Gracias y saludos ^^

    ResponderEliminar
  7. Saludos Amigo No Me Aparece El Codigo de .sidebar h2 D:?

    Como le hago!

    ResponderEliminar
  8. busquen .main-inner .widget h2 me funciono de esa manera

    ResponderEliminar
  9. Buenas tardes,
    Magnifico blog. Mi pregunta es la siguiente: me gustaría poder tener el cuerpo principal del blog de un color y la columna lateral en otro. ¿Cómo?

    Gracias

    ResponderEliminar
  10. hola he buscando de todas las maneras que dicen y no consigo el código. Mi blog es: http://b-enemakio.blogspot.com/

    ResponderEliminar
  11. muy buenoo me funciono excelente graciasss

    ResponderEliminar

Tus comentarios ayudan a mejorar este Blog.