Páginas estáticas más anchas en blogger - Diseño

Las entradas independientes o páginas estáticas pueden tener una anchura mayor al de las entradas nomales haciendo que la sidebar se oculte.

1. Diseño>Edición de HTML>expandimos artilugios

2. Control+F y buscamos la etiqueta
</head>

3. Encima colocamos:

<b:if cond='data:blog.pageType == "static_page"'>

<style type='text/css'>

#main-wrapper {float: center; width: 860px;}

#sidebar-wrapper {visibility: hidden; display: none; width: 0px;}

</style>

</b:if>


- El main-wrapper (la zona de las entradas) tendrá un ancho de 860 píxeles, aunque el valor es variable en función de lo que mida la totalidad del main y la sidebar.

- La barra lateral (sidebar-wrapper) estará oculta (visibility: hidden; display: none;) y con un ancho de 0 píxeles (width: 0px;)

4. Guardar plantilla.

---------------------------------------------

► Alcanzar que el aspecto de una página estática sea distinto al del resto del blog es una de las cosas atractivas que se buscan.

(Los datos indicados son los de una plantilla mínima de blogger, es la más simple. Los datos de las medidas cambian en cada blog.)


Para lograr cambios de diseño es necesario usar la condicional que Blogger otorga para las Páginas Estáticas:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Repito el inicio pero explicado distinto:

Ocultar la sidebar y ampliar las entradas al espacio disponible (ancho del blog)

1. Miramos la medida del outer-wrapper de nuestra plantilla.
Vamos a Diseño - Edición de HTML y comprobamos que (en este caso la plantilla Mínima original) tiene un ancho de 660 pixeles en su outer-wrapper, que vemos en la parte correspondiente en su código CSS:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

2. Control+F y buscamos </head> en nuestra plantilla. Encima se coloca el código haciendo uso del condicional de Blogger.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
#main-wrapper {
width: 660px;
}
</style>
</b:if>

En este caso no se mostrará la sidebar en las páginas estáticas ocupando la totalidad.
Cuidado: la sidebar se carga igual, pero no la vemos y se hace trampas colocando una anchura de 0px.

Ocultar la sidebar y ensanchar entradas en plantillas de tres columnas.

Si el blog tuviese dos sidebars los pasos a seguir serían los mismos que con anterioridad. Se modifica la medida del outer-wrapper y hasta el nombre del código que se encarga de cada columna; se añade otra orden para la segunda sidebar.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
#main-wrapper {
width: 850px;
}
#newsidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
</style>
</b:if>

Cambiar el diseño a las entradas de Páginas Estáticas

Supongamos que buscamos que las Páginas Estáticas tengan un diseño diferente al resto del blog. Se usa también el mismo condicional.

Se coloca antes del </head>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
.post {
color: #000000; /* Color del texto de las entradas */
background: #ffffff; /* Color de fondo de las entradas */
border: 2px solid #FF9900; /* Borde que bordea las entradas */
font-size: 15px; /* Tamaño de la fuente (texto) de las entradas */
margin:.5em 0 1.5em;
padding: 10px; /* Distancia del texto al borde de la entrada */
}
.post h3 a, .post h3 a:visited {
display:block;
color: #FF9900; /* Color del título de las entradas */
font-size: 25px; /* Tamaño de la fuente (texto) de las entradas */
border-bottom: 1px solid #FF9900; /* Línea debajo del título de las entradas */
}
.post h3 a:hover {
color:#0000CC ; /* Color del título de entradas al paso del cursor */
}
</style>
</b:if>

Usar las dos opciones anteriores al mismo tiempo (diseño y amplitud cuando hay una columna)

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
#main-wrapper {
width: 660px;
}
.post {
color: #000000; /* Color del texto de las entradas */
background: #ffffff; /* Color de fondo de las entradas */
border: 2px solid #FF9900; /* Borde que bordea las entradas */
font-size: 15px; /* Tamaño de la fuente (texto) de las entradas */
margin:.5em 0 1.5em;
padding: 10px; /* Distancia del texto al borde de la entrada */
}
.post h3 a, .post h3 a:visited {
display:block;
color: #FF9900; /* Color del título de las entradas */
font-size: 25px; /* Tamaño de la fuente (texto) de las entradas */
border-bottom: 1px solid #FF9900; /* Línea debajo del título de las entradas */
}
.post h3 a:hover {
color:#0000CC ; /* Color del título de entradas al paso del cursor */
}
</style>
</b:if>



Nota:
Dependiendo de cada plantilla se hará necesario camuflar padding o border o margin...
Simplemente se trataría de añadir nuevas líneas de instrucción como por ejemplo:

#sidebar-wrapper {
border: 0px;
padding: 0px;
width: 0px;
}

Otras plantillas podrían:

div#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
div#main-wrapper {
width: 90%;
}

o

#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
#main-wrapper {
width: 90%;
}

De hecho se puede ocultar cualquier cosa, sólo necesitas saber la id del gadget y colocar la instrucción en el CSS:

#Image1{
width: 0px;
visibility:hidden;
display:none;
}

Personalizar el menú que da por defecto para las Páginas Estáticas el sr. Blogger

- Antes de ]]></b:skin>

#PageList1 {
background: #FFF;
width: 100%;
border: 2px solid #FF9900;
}
#PageList1 ul li a {
color: #FF9900;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size:15px;
padding-right: 20px;
background: transparent url(url de la flechita) center right no-repeat;
}
#PageList1 ul li a:hover {
color: #000;
position: relative;
left: 1px;
top: 1px;
background: transparent url(url de la flechita) center right no-repeat;
}

Supongamos que tenemos la barra horizontal con los títulos de las páginas estáticas pero no queremos que aparezca el título en esas páginas estáticas sobre el texto...como una entrada normal.

<b:if cond='data:blog.pageType == "static_page"'>
.post h3{height:0px; visibility:hidden; display:none;}
<b:if>

Si sólo quiero modificar el diseño de una página estática específica

<b:if cond='data:blog.pageType == "URL_DE_LA_PAGINA"'>

Ocultar fecha y titulo

<b:if cond='data:blog.pageType == "static_page"'>
.post h3{height:0px; visibility:hidden; display:none;}
h2.date-header{height:0px; visibility:hidden; display:none;}
<b:if>