Crear un espacio debajo de la cabecera es sencillo dependiendo del código que tengamos en nuestra Plantilla o Template.
La zona inferior del header podemos colocarla para en el futuro poner imágenes, un menú, etiquetas o mil cosas más que se te ocurran.
Añado esta imagen para que se vea más claramente que se trata de "crear" un nuevo espacio, y no es aquel que podemos obtener en el cuerpo de las "Entradas del blog".
(Recuerda que se puede colocar otro espacio en la parte superior de la cabecera de forma sencilla)
El código que debiera estar en tu plantilla es el siguiente...
La zona inferior del header podemos colocarla para en el futuro poner imágenes, un menú, etiquetas o mil cosas más que se te ocurran.
Añado esta imagen para que se vea más claramente que se trata de "crear" un nuevo espacio, y no es aquel que podemos obtener en el cuerpo de las "Entradas del blog".
(Recuerda que se puede colocar otro espacio en la parte superior de la cabecera de forma sencilla)
El código que debiera estar en tu plantilla es el siguiente...
1. La clave está en encontar con Ctrl+F
<div id='content-wrapper'>
2. Justo debajo aparece (si la plantilla es de Blogger y dependiendo del Template)
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
En este caso el menú no está habilitado para añadir el espacio. Para hacer que esté accesible y funcione como un espacio más al que añadir gadgets, sólo hay que modificar
showaddelement='no' por showaddelement='yes'Quedará de esta forma:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>
► Atención:
En muchos Templates estas líneas no aparecen. En mi caso, me he encontrado con alguno y sólo he añadido el código anterior bajo la línea
(En los dos casos que he probado ha funcionado sin problemas la adición extra de los códigos).
En muchos Templates estas líneas no aparecen. En mi caso, me he encontrado con alguno y sólo he añadido el código anterior bajo la línea
<div id='crosscol-wrapper' style='text-align:center'>(En los dos casos que he probado ha funcionado sin problemas la adición extra de los códigos).
► La siguiente pregunta es:
Una vez añadido este elemento, ¿cómo lo puedo personalizar?
Ahí está la habilidad que cada uno tenga y el uso que se le vaya a dar en el futuro.
Se le pueden añadir bordes, fondos, textos, márgenes, imágenes.....Básicamente se suelen añadir cosas de estilo con CSS antes de
Una vez añadido este elemento, ¿cómo lo puedo personalizar?
Ahí está la habilidad que cada uno tenga y el uso que se le vaya a dar en el futuro.
Se le pueden añadir bordes, fondos, textos, márgenes, imágenes.....Básicamente se suelen añadir cosas de estilo con CSS antes de
]]></b:skin>En mi caso uso el siguiente:
#crosscol-wrapper{
background-color: #bfe6ff;
margin-top:5px;
border:6px dotted #66B5FF;
padding:2px;
}
Si hubiera que añadir una imagen al fondo, otra fórmula sería:
#crosscol-wrapper{
background:#FFF;url(url-de-la-imagen);
margin-top:5px;
border:2px solid #a6c4e1;
padding:2px;
}
■ "background-color" es el color de fondo de tu crosscol; "border" expresa el tamaño del borde, el tipo de líneas que usas y el color de éste.
■ Web para cosultar códigos de colores.
► Como anotación personal:
Otra fórmula para Personalizar el crosscol es darle los mismos estilos que tiene la sidebar /* Sidebar Content
----------------------------------------------- */
■ Se trata sólo de sustituir la palabra sidebar por crosscol para que tenga las mismas características que tu columna. Y añadirse como un elemento más antes de
Con la última parte de la personalización del crosscol, sólo muestro que hay varias formas de hacerlo:
1. Aplicando un código CSS donde se le indica el color de fondo, bordes...
2. Dándole las mismas características que tendría tu columna o sidebar (color, títulos, formato...)
Sólo es una guía para demostrar que se pueden hacer un montón de combinaciones.
■ Web para cosultar códigos de colores.
► Como anotación personal:
Otra fórmula para Personalizar el crosscol es darle los mismos estilos que tiene la sidebar /* Sidebar Content
----------------------------------------------- */
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
■ Se trata sólo de sustituir la palabra sidebar por crosscol para que tenga las mismas características que tu columna. Y añadirse como un elemento más antes de
]]></b:skin>
/* Crosscol----------------------------------------------- */
.crosscol {
color: $sidebartextcolor;
line-height: 1.5em;
}
.crosscol ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.crosscol li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.crosscol .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
Con la última parte de la personalización del crosscol, sólo muestro que hay varias formas de hacerlo:
1. Aplicando un código CSS donde se le indica el color de fondo, bordes...
2. Dándole las mismas características que tendría tu columna o sidebar (color, títulos, formato...)
Sólo es una guía para demostrar que se pueden hacer un montón de combinaciones.
(Un apunte más para no olvidar)
Publicar un comentario
(-^o^-) (＾＿－) (#^_^#) (ÖoÖ) (*^o^*) (>_<) （￣へ￣）（；_・） (ô_Ó) (O_O) (ˇ~ˇ) （ToT）(Q____Q) ಠ_ಠ (｡◕‿◕) ［(－－)］ZZzzz
- Si el comentario es anónimo hay muchas posibilidades que no se publique.