3.3.10

Cambiar color de fondo de la Sidebar de Blogger




Planteamos a continuación dos métodos para cambiar el color del fondo de la barra lateral (Sidebar) de nuestro blog de Blogger:


Primer método

Vamos a Editar HTML:

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

Para plantillas antiguas.-

Localizamos un código como el siguiente, poniendo dentro del rectángulo de búsqueda (Search) una línea del mismo, y le agregamos la línea resaltada:

#sidebar-wrapper {
  background:#194155;
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#194155 es el código del color, lo cambiamos por el nuestro.

Para plantillas nuevas.-

Localizamos uno de los siguientes códigos y le agregamos la línea resaltada:

.main-inner .column-right-inner .section {
  background:#194155;
  margin-left: 0;
}

Haciendo la modificación en el anterior código quedará espacio entre los gadgets y margen a la derecha de la sidebar.

.main-inner .column-right-inner {
  background:#194155;
  padding: 0 20px 0 0;
}

Haciendo la modificación en el anterior código no quedará espacio entre los gadgets ni margen a la derecha de la sidebar.

#194155 es el código del color, lo cambiamos por el nuestro.


Segundo método (aplicable a las plantillas antiguas)

Con este método habilitaremos en el Diseñador de plantillas la opción para cambiar el color de fondo de la barra lateral (Sidebar):
  • Vamos a Editar HTML:

    Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

    Localizamos, al principio de la plantilla, la siguiente línea:

    /* Variable definitions
       ====================

    Inmediatamente debajo pegamos este código:

       <Variable name="bgcolorsidebar" description="Sidebar Background Color"
                 type="color" default="#000" value="#194155">


    De esta manera definimos una variable. (El resaltado es el código HTML del color; podemos poner cualquiera y lo cambiamos cuando tengamos habilitada la opción).

  • Luego, para llamar a la variable que hemos definido, localizamos estas líneas:

    /* Comments
    ----------------------------------------------- */

    ...e inmediatamente encima de las mismas pegamos este código:

    /* Sidebar
    ----------------------------------------------- */
    .sidebar {
      background:$bgcolorsidebar;

    #sidebar h4 {
      margin:1em 0;
      font-weight: bold;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color: $sidebarcolor;

    Guardados los cambios vamos a:

    Página principal ► Diseño ► Plantilla ► Personalizar ► Diseñador de plantillas ► Avanzado

    ...y podremos observar que ya contamos con la opción para cambiar el color del fondo de la sidebar: Color de fondo de la columna lateral :

    Diseñador de plantillas



  • Índice Edición HTML
    Poner imagen de fondo a un blog Cambiar enlaces pie de página
    Eliminar enlaces pie de página Eliminar 'Publicado por'
    Eliminar fechas Eliminar la hora
    Efecto subrayar links Eliminar barra superior
    Evitar copias de blogs Ocultar o eliminar sidebar
    Eliminar y reemplazar cabecera Ícono para barra de direcciones
    Centrar títulos posts Ensanchar blog
    Cambiar color fondo posts Color fondo sidebar
    Agregar una sidebar Color fondo de comentarios
    Personalizar firma pie de posts Personalizar fechas de los posts
    Diseñador de plantillas de Blogger Crear página de inicio o Portada
    Eliminar enlaces a autores de plantillas Cambiar de sitio la sidebar
    Centrar imagen de la cebecera

    19 comentarios :

    ▼▲ Ocultar / Mostrar comentarios
    Comentario escrito por Anónimo #

    Hola, yo tengo un problema, y es que al acceder a fuentes y colores para modificarlas en mi blog, directamente aparece todo en blanco, no tengo la opción.
    Encontré unos códigos HTML, pero no comsigo insertarlos correctamente para que aparezcan, me sale un mensaje de error.
    Me podrías ayudar?
    Gracias.

    Comentario escrito por Pedro Pablo Pachón : #

    Hola Zahira: Si aplicaste el segundo método (cuyas modificaciones debes hacerlas en EDICIÓN HTML)explicado en el tutorial, en FUENTES Y COLORES deberá aparecerte la opción COLOR DE FONDO DE LA COLUMNA LATERAL. Lo que pasa es que Blogger modificó el diseño de las plantillas, y ahora no aparece la opción FUENTES Y COLORES, sino DISEÑADOR DE PLANTILLAS. Entras allí y en el menú de la izquierda entras a AVANZADO y allí encontrarás las opciones para modificar las fuentes y los colores, incluyendo la del color de fondo de la columna lateral que creaste si aplicaste correctamente el tutorial.
    Obviamente que las modificaciones explicadas debes hacerlas en EDICIÓN HTML, en la plantilla de tu blog.
    Saludos.

    Comentario escrito por duque71 : #

    ¡Hola! Soy Antonio , magnífico blog. Si eres tan amable queria comentarte que, yo no tengo la opción de FUENTES Y COLORES. ¿A que se deberá eso?
    Gracias.
    Un cordial saludo.

    Comentario escrito por Pedro Pablo Pachón : #

    Hola Antonio: Lo que pasa es que este tutorial ya está caduco porque fue hecho para las plantillas antiguas.
    En las plantillas nuevas tú encuentras la opción FUENTES Y COLORES si vas a DISEÑO Y de allí a DISEÑADOR DE PLANTILLAS, aquí, en AVANZADO, encontrarás todas las opciones para fuentes y colores.
    Saludos.

    Comentario escrito por duque71 : #

    Hola de nuevo. Me di cuenta del detalle después perdona. Pero aún así no puedo poner imagen o color a la sidebar completa.
    ¿sabes si hay otra forma de hacerlo?
    Gracias por tu atención.

    Comentario escrito por Pedro Pablo Pachón : #

    Antonio: No le puedes poner un color diferenta a la sidebar porque ésta forma parte integral del cuerpo del blog junto con el cuerpo de las entradas. Este efecto se puede lograr con blogs cuyas plantillas permitan una sidebar independiente, como éste por ejemplo.

    Comentario escrito por duque71 : #

    ¡Ah! Entiendo. Pues nada miraré a ver que hago. Te agradezco el interés mostrado y seguiré pasando por aquí con alguna que otra preguntilla. Espero no haber sido muy pesado. Gracias por todo.
    Cuídate y un saludo.

    Comentario escrito por PerfilAntropometrico : #

    Gracias por la info!!

    Comentario escrito por Mauricio Montaño : #

    Pedro. Me podrias decir porque al intentar hacer esto en mi plantilla, me aparece el mensaje:

    "internet explorer modificó esta pagina para ayudar a evitar unposible ataque de scripts de sitio".

    Gracias..

    Este es mi sitio.

    http://mbexcel.blogspot.com/

    Comentario escrito por Pedro Pablo Pachón : #

    Mauricio: Puede ser que diseñaste tu sitio con una versión de Internet Explorer anterior a la que utilizas ahora. Si utilizas IE8 en la barra de navegación, junto al botón "Actualizar", está el botón "Vista de compatibilidad", haces click sobre él.

    Si utilizas IE9 pulsa sobre la tecla "Alt" para que aparezca el menú principal y haces click sobre "Herramientas". Selecciona "Configuración de Vista de Compatibilidad" y pones "blogger.com" en el formulario que aparece.

    Saludos.

    Comentario escrito por Mauricio Montaño : #

    Pedro: te cuento que tengo IE 8, hago lo que me dices pero nada. Sigue apareciendo el mensaje:

    "internet explorer modificó esta pagina para ayudar a evitar unposible ataque de scripts de sitio".

    Y como es de esperarse, no me deja modificar la plantilla.

    Gracias por tu ayuda..

    http://mbexcel.blogspot.com/

    Comentario escrito por PinWii27 : #

    Me dice que no existe el dicho código, intenté con todas las maneras y no me sirve, ¡AYUDA!

    Comentario escrito por Manualidadesconmishijas : #

    Estoy intentando aplicar el segundo método y me dice que hay un error en el código.
    ¿podrías mirarlo? Gracias

    Comentario escrito por Unknown : #

    Naikari, me dices, por favor, qué plantilla utilizas?
    Saludos.

    Comentario escrito por Manualidadesconmishijas : #

    Sí, filigrana creo que es.
    Este es mi blog: http://manualidadesconmishijas.blogspot.com.es/

    Comentario escrito por Unknown : #

    Naikari, Filigrana es plantilla nueva. Debes aplicar, en el primer método, la parte correspondiente a las plantilla nuevas.
    Saludos.

    Comentario escrito por Manualidadesconmishijas : #

    No lo habia entendido, gracias

    Comentario escrito por Aia Rodríguez : #

    Hola! Tengo un blog con la plantilla picture window, y quería cambiar el color transparente que aparece en la plantilla detrás de la cabecera y el cuerpo del blog, y delante de la imagen de fondo, por otro color que facilitase que se viese mejor lo que está escrito, pues al estar en color transparente, se transparenta la imagen de fondo, y no se ve tan bien. Como podría hacerlo modificando el código html? Porque en las opciones avanzadas de la plantilla no aparece. Gracias.

    Comentario escrito por Unknown : #

    Aia, va a Editar HTML y, para cambiar el color de fondo del blog cambia este código:

    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    }

    por este:

    body {
    background: #XXXXXX;
    }

    y para cambiar el color de fondo de las entradas cambia este código:

    .main-outer {
    background: $(main.background);

    -moz-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
    -webkit-border-top-left-radius: $(main.border.radius.top);
    -webkit-border-top-right-radius: $(main.border.radius.top);
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -goog-ms-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
    border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;

    -moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
    -goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
    box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
    }

    por este:

    .main-outer {
    background: #XXXXXX;
    }

    reemplaza las XXXXXX por el número correspondiente al código del color que quiera poner. Aquí encuentra una buena herramienta para buscar códigos de colores:

    http://html-color-codes.info/codigos-de-colores-hexadecimales/

    Si tiene algún problema me lo hace saber, por favor, y disculpe la demora en contestarle.

    Saludos.

    Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

    El autor.