Blogger: ocultar widgets en determinadas páginas

Siguiendo con la serie de Blogger que comencé ayer, hoy voy a explicar como quitar ciertos widgets en determinadas páginas.

Ayer expliqué como quitar las barras laterales en las que se muestran todos los widgets que hemos añadido en el diseño de nuestro blog, pero en ocasiones no queremos ocultar la barra, si no solamente uno de sus elementos, por ejemplo un bloque de publicidad, un elemento de navegación, o simplemente por estética no queremos que aparezca el contador de visitas que aparece en la página principal del blog.

Vimos que todo está basado en las condiciones que Blogger permite añadir en casi cualquier elemento:

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

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

<b:if cond='data:blog.url == "http://la-URL-de-tu-post-o-pagina"'>

Esas tres condiciones especifican si nos encontramos en una página de nuestro blog, si nos encontramos en una entrada de post o si nos encontramos en una determinada URL respectivamente.

Pues bien, para ocultar un widget de una de estas páginas de blogger, de nuevo utilizaremos estas condiciones. Sólo cambia el lugar donde hay que colocarlo.
Paso a paso:

1. Entrar en nuestro blog
   
   
2. Acceder a la sección Plantilla
   
   
3. Hacer una copia de seguridad de la plantilla actual por si algo saliera mal
   
   
4. Hacer click en Edición de HTML (nos saldrá una ventana de alerta, hacer click en continuar)
   
   
5. Hacer click en Expandir plantillas de artilugios (arriba a la izquierda)
   
   
6. Buscar el widget que queremos ocultar:
• Podemos buscarlo a través de la cadena "<b:widget>" pero habrá muchos y tendremos que saber identificarlo
• También podemos buscarlo por el título que le hemos dado en el diseño, aunque en muchas ocasiones es un campo opcional y no estará presente.
  
  
7. Una vez que lo tengamos localizado, tendremos que incluir las etiquetas de arriba, en función de dónde queramos ocultarlo:
   
   

   <b:widget id='ID_DEL_WIDGET' locked='false' title='TITULO_DEL_WIDGET' type='TIPO_DEL_WIDGET'>
     <b:includable id='main'>
       <!--OCULTAR ESTE WIDGET THE BLOGGER -->
       <b:if cond='data:blog.url == "http://la-URL-de-tu-post-o-pagina"'>
   
       <!--CODIGO DEL WIDGET -->
   
       <\b:if>
     </b:includable>
   </b:widget>
   

   
   
8. Guardar la plantilla y probar el resultado en las páginas que cumplan esa condición.

Como muestra de este ejemplo, he ocultado el widget de los "Post más visitados" solamente en esta página. Si acceder a la página principal del blog, o a cualquier otra página, verás que ese Widget aparece el segundo de la barra lateral, pero sin embargo aquí he conseguido ocultarlo.

¿No lo consigues? ¿Algo está incorrecto? No dudes en dejar un comentario

Ocultar la barra lateral de blogger

En ocasiones puede interesarnos ocultar la barra lateral del blog en ciertos lugares: por ejemplo en las páginas, o en algún post en concreto.

Para ello, tendremos que editar la plantilla de nuestro blog. Siempre que se hace esto, recomiendo hacer una copia de seguridad con anterioridad, por si acaso algo falla o por si queremos volver a la versión anterior y descartar los cambios de ocultar la barra lateral de blogger.

Después de hacer la copia de seguridad, vayamos a ver como ocultar la barra lateral de blogger:

• Entramos en Plantilla y hacemos click en Edición de HTML
• Buscamos la etiqueta </b:skin>
• A continuación introducimos el código siguiente:

<b:if cond='data:blog.url == "http://la-URL-de-tu-post-o-pagina"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

Si lo queremos aplicar para todas las páginas por ejemplo, cambiaremos la condición:

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

O si lo queremos aplicar para los posts, entonces la condición será:

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

Como ejemplo, podrás observar que esta página no tiene barra lateral: he ocultado la barra lateral de blogger en este post en concreto.

Acceder a unidad de red desde la consola con usuario y contraseña

Para acceder a una unidad de red desde la consola de windows usaremos el siguiente comando:

net use Z: \\computer\resource

De manera que la carpeta compartida "resource" quedará mapeada a la unidad Z: de nuestro ordenador (cambiar Z por la letra pertinente que queramos y computer y resource por el nombre del equipo remoto y el recurso compartido)

Si tenemos que acceder a dicho recurso con un usuario diferente, añadiremos el parametro user y la contraseña:

net use Z: \\computer\resource contrasenna /user:DOMAIN\username

Para acceder como usuario "username" del dominio DOMAIN con la contraseña "contrasenna". Importante! Notese que no se usa ningún nombre de parámetro para introducir la contraseña, se pone directamente a continuación del nombre del recurso compartido.

Refrescar o recargar el contenido del fichero en notepad ++

Notepad ++ es una aplicación excelente que nos permite la edición de archivos de texto, así como su visualización por supuesto mejorando infinitamente las características del visor de windows, el notepad o cuaderno de notas.

Sin embargo, hay una característica que siempre hecho de menos y es la capacidad de poder refrescar el contenido de los archivos: si estás mirando un log o un archivo que puede haber cambiado con el tiempo, tendrás que volver a abrirlo o quitar el foco de la aplicación y volver a ella para que te pregunte si deseas recargar el archivo, lo cual es bastante molesto.

Por suerte existe una opción más cómoda que es la recarga manual del fichero que tengamos abierto. Para ello, iremos a "Archivo" (o "File" si está en inglés) y elegiremos la opción, Recargar desde el disco. Y ya está! Esto hará que el fichero se recargue mostrando el contenido más reciente

Para mejorarlo todavía más, podemos ir a "Settings" y "Shortcut mapper" (en español será algo como "Ajustes" y "Atajos de teclado") y allí podemos definir una combinación de teclas para hacerlo todavía más cómodo: yo personalmente elijo CTRL+F5 para recargar el contenido del fichero en notepad++ puesto que se asemeja al recargar de los navegadores.

Cambiar el dominio al acceder a un ordenador remoto

En muchas ocasiones tenemos que acceder a ordenadores remotos, ya sea a través del escritorio remoto, a través de unidades de red o de carpetas compartidas entre ordenadores. Si el sistema y la red están configurados para solicitar nombre de usuario y contraseña, antes de poder controlar remotamente o ver los archivos tendremos que introducir las credenciales.

Windows por defecto asocio nuestro propio dominio a la ventana de login, de manera que no podremos elegir un dominio distinto para acceder. Para solucionar esto, en el nombre de usuario habrá que anteponer el nuevo dominio con el que queremos autenticarnos seguido de una barra invertida:

NUEVODOMINIO\usuario

De esta manera accederemos al otro ordenador en un dominio diferente al que aparece por defecto y no deberíamos tener problemas con la autenticación.

Centrar un DIV posicionado absolutamente

Para centrar un div, por muchos es conocido el método de aplicarle un margen como sigue:

margin: 0 auto;

Sin embargo este método no nos servirá si el div que queremos centrar está posicionado absolutamente. En el caso más básico, podemos tener lo siguiente:

<body>
   <div style="position:absolute"></div>
</body>

La solución para estos casos pasa por situarlos en el centro de la pantalla (50%) con un margen a la izquierda negativo de la mitad de su ancho. Digamos que nuestro DIV tiene 600px de ancho, para centrarlo:

<body>
   <div style="position:absolute;width:600px;top:0;left:50%;margin-left:-300px;"></div>
</body>

Pero podemos ir un poco más allá. Hasta aquí hemos supuesto que conocemos el ancho del DIV que queremos centrar, pero no siempre es así, en ocasiones, el contenido de un DIV es dinámico y cambiará constantemente. El método anterior no nos servirá. La solución aquí es meter nuestro div dentro de un contenedor que nos ayudará a centrarlo:

<body>
   <div style="position:absolute;left:50%;">
      <div style="position:relative;left:-50%;"></div>
   </div>
</body>

Y así quedará perfectamente centrado en la página

Medir elementos de la web con firefox

Existe un plugin para firefox que nos permite medir cualquier elemento en la web creando una regla sobre cualquier página y permitiéndonos saber sus dimensiones exactas.

Esta utilidad será de especial interés para los desarrolladores web interesados en inspirarse de otras páginas web donde el ancho de los elementos no siempre es conocido.

Sin embargo este plugin tiene limitaciones: la más importante que yo he encontrado es que no permite medir elementos flash. Este caso es especialmente importante pues no existen archivos CSS para los elementos flash, quedando dependientes totalmente de herramientas de este tipo. En este caso peculiar no tendremos mucha ayuda, quedando la regla oculta por el objeto flash y no pudiendo por tanto medir adecuadamente

Enlace al plugin: MeasureIt

Declarar variable en un batch script

Un básico de los script de windows o archivos batch: ¿Cómo declarar una variable?

set variable=value

Parece una tontería pero como no codifico generalmente en este tipo de lenguaje, se me olvida y tiendo a usar las comillas y los punto y coma de java y php que son mis dos lenguajes predilectos.

Estilos en wordpress

¿Nunca te has visto buscando entre el código de wordpress para conseguir que una parte apareciera en un color diferente? ¿Nunca has intentado toquetear para que cierta imágen apareciera un poco más arriba? Si estás leyendo esto, seguramente sea así. Yo también... y al final casi siempre he encontrado una solución más sencilla que mis intentos de cambiar el código fuente del blog.


Todos aquellos cambios que se refieran a estilos, generalmente pueden hacerse sin necesidad de tocar los archivos .php, para eso están las hojas de estilos. Y wordpress y sus themes aplican estilos a casi todo lo que se te ocurra.


Por ejemplo, una de las cosas que quería hacer el otro día es colorear de manera diferente el elemento del menú actual, es decir, aquel en el que me encontrar en cada momento. Mi primera reacción fue meterme en el código php y tratar de coger la categoría del post para luego poder identificarla en el menú.... patrañas!! Wordpress ya aplica una clase css específica a aquel elemento que sea el actual y dándole un estilo específico en el archivo .css conseguiremos nuestro objetivo.


¿Cómo saber esto? Bueno, pues lo mejor es navegar un poco por la web e ir inspeccionando el código que se genera en cada una de las páginas y secciones. Para ello el Firebug para firefox es una gran herramienta que te dirá las clases CSS que tiene cada elemento, pudiendo observar que efectivamente, el elemento de un menú que está seleccionado, tiene una clase especial o que cada uno de los elementos de una barra lateral tienen un estilo que se puede modificar igualmente para todos en el mismo sitio.


Si con esto no tienes suficiente, entonces posiblemente si que tengas que modificar algún archivo PHP y podrás hacerlo desde la propia administración del blog. A ser posible no modifiques más que los archivos que ahí se presentan, el resto ya forman parte del core de wordpress y si crees que necesitas cambiar algo de ahí... replantéatelo, seguramente estés haciendo algo mal o lo estés viendo desde la perspectiva complicada.

Si por último, tienes que hacer demasiados cambios, plantéate hacer tu propio theme (en inglés).

Altura de un DIV igual que la de sus hijos

Hoy vuelvo con un poco de CSS. Es una cuestión que se me ha planteado en muchas ocasiones: digamos que tienes un div contenedor de otros dos o tres divs con una altura no definida que varía en función del contenido que le vayamos a meter. Estos divs estarán colocados con un float para que tengan la forma de columnas y queden uno junto al otro. Un ejemplo de esta estructura sería:

<div id="contenedor">
    <div id="columna1">contenido de altura variable</div>
    <div id="columna2">
       <div id="sub1">mas contenido</div>
       <div id="sub2">mas contenido</div>
       ...
    </div>
<div>

Cómo he comentado, si a los divs internos (columna1 y columna2) les aplicamos un estilo para que "floten" quedarán en forma de columna: float:left;
Sin embargo tendremos un problema con el contenedor que no se adaptará a la altura de los hijos y se quedará con una altura de 0

Para solucionar esto, hay que añadir un último div a la estructura que no tenga la propiedad float y con un clear:both como se ve a continuación:

<div style="clear:both;"></div>

De esta manera quedará solucionado el problem y el div padre se quedará adaptado a la altura de la más alta de las dos columnas

Visto en muchos sitios, pero cogido de aquí