Cómo añadir javascript en Blogger

Ya me he referido antes al método para insertar Javascript en un artículo de Blogger.

Sin embargo, en ocasiones es preferible alojar el código Javascript en otro lugar, de forma que pueda ser utilizado en diferentes artículos sin necesidad de repetir el código en cada uno de ellos.

La alternativa obvia, utilizar un servidor externo para cargar nuestros Javascript como archivos con terminación *.js, no es recomendable debido a que estos servidores son poco fiables y son filtrados con frecuencia por los administradores de red.

Dado que la extensión js no es obligatoria, puede sustituirse por la extensión *.txt y emplazar el archivo en cualquier servico de hospedaje de archivos, utilizar la API de librerías AJAX de Google, o colocar el código en la plantilla del blog, tal como se explica aquí. Ninguna de estas alternativas, sin embargo, está exenta de problemas.

Hoy os mostraré la mejor opción para colocar Javascript directamente en Blogger y acceder a él desde cualquier entrada.

En nuestra plantilla, creamos una nueva sección 'Añadir un gadget' copiando el siguiente código después de <body>:


<b:section class='scripts-container' id='scripts-container' />

Una vez hecho esto, en nuestro escritorio, en la página 'Añadir y organizar elementos de la página’ veremos la nueva sección. Hacemos clic en ella y seleccionamos 'HTML/Javascript'. Obtenemos la típica caja de edición donde podemos copiar nuestro código:

<script type='text/javascript'>CONTENIDO_DEL_JAVASCRIPT<script>

No pongamos título. Pero si vamos tener varios guiones Javascript en varias entradas, deberemos hacerlo añadiendo primero esta línea:

.scripts-container .widget h2 {display: none; visibility: hidden;}

Finalmente, hay que tener en cuenta que Blogger interpreta todos los signos de comparación “<” and “>” que aparecen dentro de los guiones de forma diferente a lo esperado.

Para evitarlo, podéis añadir un espacio antes y despúés del signo.

Cómo ejecutar Javascript en Blogger

Mucha gente se pregunta cómo ejecutar Javascripts en Blogger para una larga lista de utilidades, como la inclusión de anuncios.

Desde luego, utilizarlos en los elementos de la barra lateral es tan simple como seleccionar como nuevo elemento la caja de edición de código, y pegar en ella el código Javascript.

El problema puede surgir al tratar de hacer lo mismo en el cuerpo principal de Blogger. El mismo código Javascript, que funciona divinamente en la barra lateral, podría no hacerlo al insertarlo dentro del cuerpo de un mensaje.

Esto no es el resultado de la malicia ni de la desmedida obsesión por la seguridad de Google.

Es el resultado, quizá hasta cierto punto imprevisto, de una característica opcional destinada a hacerle la vida más fácil al usuario: La conversión en tiempo de presentación de los retornos forzados (antiguamente llamados retornos de carro o Carriage Returns, abreviadamente, CR) por el código HTML de rotura de linea <BR />.

Esto quiere decir que, aunque el usuario no los vea en los modos Edición de HTML o Redactar, Blogger sustituye los retornos forzados únicos LF o dobles CR por una o dos etiquetas <BR /> en el momento de cargar la página. Podéis ver el efecto solicitando a vuestro navegador que os muestre el código de la página. Veréis que está plagado de etiquetas <BR />.

Aunque su efecto sobre las áreas de texto es positivo, la inclusión indiscriminada de esta etiqueta entre las etiquetas <script type="text/javascript"></script> lo inutiliza.

Desgraciadamente, la solución obvia, eliminar los retornos forzados dobles, también elimina los retornos forzados únicos que son esenciales en Javascript, inutilizándolo nuevamente.

Las dos soluciones más fáciles consisten en:

Convertir el código Javascript en un archivo *.js mediante la eliminación de las etiquetas HTML, subirlo a un servicio de hosting de Javascripts, como por ejemplo JavaScript Host, y luego enlazarlo a nuestra etiqueta <script> añadiéndole la dirección URL del archivo.

Desactivar la conversión de saltos de línea a la etiqueta <BR />, ya sea de forma global en Configuración -> Formato -> Convertir saltos de línea -> No, o hacerlo sólo para artículos individuales, los que contengan Javascript.

Esta última posibilidad, la más interesante si no queremos renunciar a la comodidad de esta característica ni tener que editar todos los artículos que hayamos compuesto previamente, sólo está disponible por el momento si utilizas Blogger en borrador, una interfaz experimental que incluye características en prueba.

En ese caso, una vez hayas aceptado usar Blogger en borrador, deberás acceder a Editar desde el Escritorio de Blogger, y no desde el icono con forma de lápiz en la parte inferior del artículo.
Una vez allí, deberás seleccionar Ignorar saltos de línea.

Por el contrario, si accedes a editar haciendo clic en el icono en forma de lápiz de la parte inferior del artículo, no estás usando Blogger en borrador.
En ese caso, las opciones extendidas no estarán disponibles, y al guardar el artículo se reactivará la configuración global por defecto del blog en cuanto a la sustitución de retornos forzados, que podría implicar inhabilitar nuevamente el código Javascript. ¡Qué faena!
Si lo has hecho por error, no te preocupes.

Accede de nuevo por Blogger en borrador, asegúrate de haber desactivado la sustitución y comprueba que el código aparece correctamente dispuesto, no en una sóla línea. Guarda el mensaje, y verás que todo vuelve a funcionar.

Palabra de hacker.

Cómo eliminar la navbar o barra Blogger

Aunque esta barra puede tener algunos atajos para manejar nuestro blog, su valor es poco o nulo para el lector, ocupa espacio extra y es poco estética.

Eliminarla es sumamente sencillo, solo hay dirigirse a Diseño/Edición HTML y buscar el siguiente código:

]]></b:skin>

Y justo antes pegar lo siguiente:

#navbar-iframe { height:0px; display:none; visibility:hidden; }

Añadir pseudo categorías en Blogger

Como vengo utilizando Blogger desde tiempos inmemoriales, creo que ya ha llegado la hora de incluir algunos trucos específicamente para Blogger.

Si te pasa como a mí, que escribo sobre un montón de temas diferentes en el mismo blog, y la clasificación cronológica no te sirve, necesitas un menú de categorías.

El primer truco nos permitirá añadir un menú lateral con una lista de categorías. Al hacer clic sobre cualquiera de ellas, Blogger listará todas las entradas que contengan etiquetas coincidentes. Hay muchos métodos para conseguir resultados similares, pero éste que presento es quizá el más sencillo y rápido.

Sigue ahora conmigo estos tres simples pasos para crear tu propio menú lateral de categorías.

Por ejemplo, imagina que has escrito varios artículos y que los has ido etiquetando como 'Sociedad', 'Cultura' o 'Mi Animé'.

En tu Escritorio Blogger, ves a Diseño del blog al que quieras añadir el menú lateral con la lista de categorías. Haz clic en Elementos de la página, y haz clic en Añadir un gadget.

En la lista de gadgets básicos que te aparecerá, haz clic en el botón + para añadir Html/Javascript. Esta ventana se convertirá ahora en un formulario de entrada.

En la etiqueta rotulada Título, escribe "Categorias", o lo que quieras, y copia este codigo en la la caja grande llamada Contenido.

<ul>
<li><a href="/search/label/Sociedad">Sociedad</a></li>
<li><a href="/search/label/Cultura">Cultura</a></li>
<li><a href="/search/label/Manga y Animé">Mi Animé</a></li>
</ul>

Como ves, no es necesario incluir la dirección completa de tu blog porque estamos construyendo una dirección relativa "/search a la dirección de tu blog.

Click on Guardar Cambios.

Ahora, puedes colocar la caja del menú donde quieras.

Al hacer click sobre cualquiera de los enlaces, se abrirán en la pantalla principal todas las entradas que contengan entre sus etiquetas la categoría seleccionada.

Asegúrate de que en el menú de búsqueda has incluido todas las categorías de las que exista alguna etiqueta, y tenlo en cuenta cuando crees nuevas etiquetas para tus artículos. La búsqueda devolverá todos los artículos que contegan una etiqueta que coincida con el término buscado, independientemente de su fecha de creación.

Si, por ejemplo, existieran artículos con la etiqueta 'Política', no serían accesibles desde este menú a menos que añadas una nueva línea con:

<ul>
<li><a href="/search/label/Política">Política</a></li>
</ul>

Si lo que quieres es un menú lateral por categorías, pero visualmente más sofisticado (y lento...), emplearás el mismo truco, pero utilizando guiones en lenguaje Java, para añadir respuesta al paso del ratón, y demás.

Un buen ejemplo es Chrome CSS Drop Down Menu.

Su instalación es un poco más complicada, y se requiere albergar algunos gráficos en un servidor externo, aunque cualquier hosting gratuito como iespana o mi@ te pueden servir.

¡No pares hasta que el aspecto y la respuesta de tu blog sea completamente a tu gusto!