Mostrando entradas con la etiqueta cambiar color fondo sidebar. Mostrar todas las entradas
Mostrando entradas con la etiqueta cambiar color fondo sidebar. Mostrar todas las entradas

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