El Blog de Vku, Lo se así - de todo un poco - Blogger: Páginas Independientes

Continuando con el tema de la parte 1

Ya que me han realizado varias preguntas tanto en los comentarios como por correo voy a seguir con el tema.

Hay que usar un poco la imaginación y saber que es lo que queremos mostrar en nuestras páginas independientes, esto será según para que se utilicé.

Todas las modificaciones que queremos realizar las vamos a hacer mediante códigos condicionales.

Estos códigos los podemos colocar dentro de <head> y </head> o dentro del cuerpo de la plantilla entre <body> y </body>

El código condicional que se utiliza para las páginas independientes tiene el valor static_page

Ejemplo 1:

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

TODO LO QUE PONGAMOS ACÁ SOLO AFECTARÁ A LAS PÁGINAS INDEPENDIENTES

</b:if>

Si cambiamos == por != será lo contrario.

Ejemplo 2:

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

TODO LO QUE PONGAMOS ACÁ AFECTARÁ A TODO EL BLOG MENOS A LAS PÁGINAS INDEPENDIENTES

</b:if>

Si solo queremos modificar una sola página indepentiente y no todas, cambiamos el código condicional y el valor será el link de la página a modificar.

Ejemplo 3:

<b:if cond='data:blog.url == "http://loseasi.blogspot.com/p/contacto.html"'>

TODO LO QUE PONGAMOS ACÁ SOLO AFECTARÁ A LA PÁGINA INDEPENDIENTE
http://loseasi.blogspot.com/p/contacto.html

</b:if>

Al igual que antes, si cambiamos == por != será lo contrario.

Ejemplo 4:

<b:if cond='data:blog.url != "http://loseasi.blogspot.com/p/contacto.html"'>

TODO LO QUE PONGAMOS ACÁ AFECTARÁ A TODO EL BLOG MENOS A LA PÁGINA INDEPENDIENTE
http://loseasi.blogspot.com/p/contacto.html

</b:if>

Para hacer las modificaciones podemos utilizar estilos CSS.

Colocar el código condicional arriba de </head>, con los estilos dentro:

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
clase o id {propiedad: valor}
</style>
</b:if>

De esta forma se mostrará en las páginas independientes un fondo de color negro y ocultamos la cabezera.

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
body {background: #000000;}
#header {display: none;}
</style>
</b:if>

O podemos hacerlo desde el cuerpo de la plantilla:

Ejemplo si tenemos un menú y no lo queremos mostrar en las páginas independientes, lo buscamos y lo colocamos dentro del código condicional.

Algo así:

<b:if cond='data:blog.pageType != "static_page"'>
<ul>
<li><a href="http://URL=">INICIO</a></li>
<li><a href="http://URL=">PERFIL</a></li>
<li><a href="http://URL=">CONTACTO</a></li>
</ul>
</b:if>

De esta forma se mostrará en todo el blog menos en las páginas independientes.

Como dije antes: "Hay que usar un poco la imaginación y saber que es lo que queremos mostrar en nuestras páginas independientes, esto será según para que se utilicé." ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Mostrar las páginas independientes sin la sidebar ampliando los posts.

Ver ejemplo:

¿Cómo se hace...?

Vamos a: Diseño-Edición de HTML.

Justo arriba de </head> pegamos el siguiente código:

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#main-wrapper {width: 1000px}
#sidebar-wrapper {display: none}
</style>
</b:if>

Guardamos los cambios.

Los datos que están en rojo varían según la plantilla.

width: 1000px es el ancho de la plantilla (cambiar por el ancho de su plantilla o a su gusto)

#main-wrapper y #sidebar-wrapper en mi plantilla es solamente #main y #sidebar sin -wrapper

Se puede agregar otros códigos CSS entre <style type='text/css'> y </style> ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »