| 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 : |
|
19 comentarios :
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.
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.
¡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.
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.
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.
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.
¡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.
Gracias por la info!!
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/
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.
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/
Me dice que no existe el dicho código, intenté con todas las maneras y no me sirve, ¡AYUDA!
Estoy intentando aplicar el segundo método y me dice que hay un error en el código.
¿podrías mirarlo? Gracias
Naikari, me dices, por favor, qué plantilla utilizas?
Saludos.
Sí, filigrana creo que es.
Este es mi blog: http://manualidadesconmishijas.blogspot.com.es/
Naikari, Filigrana es plantilla nueva. Debes aplicar, en el primer método, la parte correspondiente a las plantilla nuevas.
Saludos.
No lo habia entendido, gracias
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.
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.