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.

Escribir código fuente en Blogger

Hoy voy a probar a escribir código fuente en este post, de manera que quede bonito y visible para los usuarios.
Hasta hoy lo hacía de manera manual y rudimentaria, eligiendo el tipo de letra, los estilos y el color de fuente, pero claro, eso frena mucho la manera de escribir entradas, así que antes de seguir me he propuesto conseguir este punto.

La información la he encontrado aquí

Bueno, allá voy, escribiré un simple "HelloWorld.php" para probarlo:

<?php

echo "Hello world!";

?>

Actualización: en resumen y como recuerdo para mi, lo que hay que hacer para escribir en formato de código fuente en este blog es:

<pre class="brush: html">

</pre>

Y meter el contenido codificado, que se puede hacer aquí:
http://www.string-functions.com/htmlencode.aspx


Las distintas "brush" disponibles son:

• CSS
• Java
• JavaFX
• JScript
• Php
• Plain
• Sql
• Xml

TODO: Related Posts

ACTUALIZACIÓN: ya está implementado, toda la info la he sacado de aquí

Una de las cosas que quiero incluir en los post del blog es un "Related posts" que incluya los posts más parecidos al actual basándose en los tags, en el contenido o en lo que yo le diga... pero ahora no tengo tiempo de hacerlo. Para que no se me olvide, aquí dejo un vínculo que parece interesante:

http://www.bloggingtips.com/2008/09/08/5-related-posts-techniques-for-blogger-blogs/

Eliminar barra superior de Blogger

Cuando se comienza con un blog de Blogger, siempre aparece en lo alto y ocupando todo el ancho una barra de navegación que tiene más bien poca o ninguna utilidad. Esta es la denominada NavBar y me dispongo a contar como se puede eliminar mediante un sencillo método que tan sólo emplea CSS:

1. Entrar en la página de diseño del blog
2. Pulsar sobre "edición de HTML"
3. Buscar la cadena "]]>" (para detectar el fin del CSS)
4. Insertar justo antes "#navbar { display: none; }" (sin las comillas claro ;)
5. Guardar la plantilla

Si pulsamos sobre "Ver blog" podremos observar que efectivamente, la barra de navegación de Blogger ha desaparecido.

Como nota final, pudiera ser (no lo he probado) que al cambiar la plantilla, se elimine esta línea de código y que hubiera que volver a añadirla, pero como veis, es bastante rápido.

Link: My Digital Life

Probando desde Android

Antes de irme de viaje y por si me entrara la vena de escribir desde tierras americanas, quería hacer una prueba desde el móvil para ver que todo funciona correctamente. La aplicación que estoy usando para ello es "Blogger-droid" que permite además la inclusión de imágenes y vídeo, que paso a probar a continuación:

En teoría he subido dos fotos, la pantalla de mi ordenador, tomada al momento y otra del aspa de un molino que tomé desde el coche el otro día.

Lástima que no se pueda escribir más rápido desde aquí.

Fron Android

Published with Blogger-droid v1.6.1

Importancia de Google webmasters tools para nuestro sitio de Blogger

Siguiendo con el tema de Blogger y con la inicialización de uno de ellos, hoy voy a contar otra herramienta muy poderosa en términos de estadísticas y de saber el funcionamiento de las búsquedas de google en relación a nuestro blog.

Se trata de google webmasters tools, una herramienta que nos permite añadir sitios de los que seamos administradores para realizar un seguimiento del indexamiento que google hace del mismo. 

¿Qué es el indexamiento? Google visita todos los sitios de internet (bien, si no todos, muchísimos) analizando su contenido para más tarde poder mostrarlo en los resultados de sus búsquedas. Si escribimos sobre quesos, nos gustaría que nuestra página apareciera de las primeras en los resultados de la gente que busca "queso" no? Bien, pues google webmasters tools nos permite saber en que posiciones de los resultados aparecemos para cada uno de los términos que la gente busca. Por ejemplo:

Termino de búsqueda "restaurante queso", posición en los resultados: cuarta página.

De esta manera nos podemos hacer una idea de si lo estamos haciendo bien o no: si resulta que la gente entra más a nuestra página con el término zapato que con queso... hay algo que no estamos haciendo muy bien.

Además de ver la posición en la que aparecemos en los resultados de búsqueda, también nos indica si la gente ha pinchado en nuestro enlace en los resultados de búsqueda.

Esto es sólo una parte, la más interesante quizá, pero hace otras muchas cosas:

• Nos indica los enlaces de otros sitios hacia el nuestro (nos indica los enlaces qué el conoce)
• Nos indica nuestros propios enlaces internos.
• Nos indica la frecuencia con la que los "bots" (así se llaman los ordenadores que recorren las páginas) recorren nuestra página.
• Nos indica los términos que más ha encontrado (queso, zapatos, internet...) en nuestras páginas. 
• Nos indica si se está produciendo algún tipo de error en el escaneo de la web (que impediría que saliéramos en los resultados)

 En resumen, que es una gran herramienta para entender y comprender el funcionamiento del mayor motor de búsqueda de hoy en día: google.
Por cierto, no hay que ponerse nervioso, el aparecer en los resultados de búsqueda es algo que no pasa de la noche a la mañana, es un proceso que tarda cierto tiempo y que requiere que nuestra página sea de interés para algunos de los términos que la gente busca. Lo importante es escribir con permanencia y sobre los temas que queremos que posicionen nuestra web.

¿Cómo abrir una cuenta? Hay muchos sitios que lo cuentan, no lo voy a contar yo aquí: en resumen es añadir la URL del sitio y verificar que el sitio es nuestro mediante alguno de los métodos que nos ofrece el sistema. Aquí podéis leer como abrir la cuenta:

• http://ilmaistro.com/registrando-nuestro-blog-con-las-herramientas-para-webmasters-de-google/

Espero sea de utilidad

Añadir una barra de google AdSense en lo alto de nuestro blog de Blogger

Continuando con la configuración del nuevo blog de Blogger, ahora vamos a poner una barra de publicidad en lo alto del blog.
Para la gente que tenga conocimientos avanzados de cómo modificar la plantilla del blog quizá esto sea una tontería, pero para otros muchos que (al menos de momento) no tenemos ni idea del código que ahí se encuentra, esto puede ser de bastante utilidad ya que de lo contrario Blogger no ofrece la posibilidad de situar publicidad (o cualquier otra cosa!) en ese lugar del blog.

Vamos allá: lo primero es entrar en la plantilla de diseño del blog y en la edición de HTML. Ahí dentro deberemos buscar "<b:section class='header' id='header'" a continuación aparecen dos campos maxwidgets y showaddelement. El primero indica el máximo número de widget que se mostrarán en la cabecera y supongo que en todos los casos aparece 1. Debemos cambiarlo por el número que deseemos (en mi caso he puesto 2). En segundo lugar debemos indicar un valor 'yes' en lugar de 'no' para que desde la edición de elementos podamos gestionar los nuevos widgets a añadir.

Por tanto debe quedar algo como
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>


Guardamos la plantilla y vamos  al diseño de elementos de la página. Deberíamos poder añadir un nuevo widget a la parte superior de nuestro blog, por encima o por debajo de la cabecera.
De esta manera podremos insertar cualquier tipo de contenido en forma de widget que queramos.

Para añadir una barra de anuncios de AdSense, tendremos que tener una cuenta previamente claro, creamos un nuevo anuncio (recomendado que sea de 90 de alto por 900 de ancho para que quede esteticamente bien) y copiamos el código que nos sale y lo pegamos en un nuevo widget en la parte superior de nuestro blog. El widget será de tipo HTML/JavaScript

Y voilá, hemos introducido un widget con nuestro propio contenido en lo alto de nuestro blog

Insertar código de seguimiento de Analytics en Blogger

Empiezo fuerte el blog, pero es que tenía que hacer otra cosa antes de dejar esto colgado de internet por sí mismo... y es controlar las visitas y estadísticas del sitio. Para ello empleo Google Analytics.

Así que el primer paso es crear una cuenta de analytics si es que no tenéis ya.

Una vez dentro, deberemos crear un nuevo perfil para un nuevo dominio e introducir "http://xxxxx.blogspot.com". Y ya casi está, en el siguiente paso se nos dará el código para insertar en nuestras páginas que deberemos copiar y pegar justo antes de la etiqueta </body> en nuestra plantilla HTML (edición HTML en diseño).

Fácil no? pues con eso, entramos un par de veces y en menos de una hora debería aparecer verificado y listo para recoger las estadísticas del sitio.

Quitar el "Attribution"de Blogger

Bueno, pues no he tardado mucho en apuntar la primera "receta", simplemente al ir a ver el diseño del blog he visto que era demasiado claro y que en la parte inferior aparece el autor del diseño.
No es por ser desagradecido pero no me gusta que esté ahí y menos cuando no te dan la opción de que cojas una plantilla normal y básica, tienes que coger obligatoriamente una de las disponibles o tocar directamente el código HTML (para lo cual no estoy preparado todavía).

Si vas al diseño del blog te darás cuenta de que no te permite quitar ese elemento, está bloqueado. Pero es posible quitarlo: vamos a edición de HTML, le damos a "Expandir plantillas de artilugios" y buscamos (CTRL+F) la palabra "Attribution". Veremos que al lado aparece locked="true". Pues bien, cambiamos el true por false y guardamos la plantilla.
Volvemos al diseño y ahora sí, podemos eliminar el widget de attribution.

Desde aquí gracias a Tina Chen por su diseño, aunque creo que queda pagado por Blogger y no hace falta que aparezca por aquí (además, esto es una chapucilla)

ACTUALIZACIÓN: aunque lo había hecho antes, esta vez me ha dado algún problema volviendose a poner el valor a true automáticamente. Lo que he tenido que hacer es quitar directamente el widget elimiando el <b:widget...>...</b:widget>

Y por cierto, de esta manera también se pueden quitar otros widgets como la cabecera por ejemplo