Tutoriales para personalizar Blogger
  1. Básicos

Cómo Agregar código SCRIPT a Blogger ⇨ Guía Completa

guía definitiva agregar añadir script blogger 2020

Todos hemos pasado por la misma situación y pensado “¿Cómo puedo agregar un script en Blogger?”.

Ya sea instalar un script de Facebook o Twitter, de algún sistema de comentarios, Google Analytics o alguna funcionalidad que queramos agregar a nuestro blogger. Esta es una de las preguntas más recurrentes para los usuarios de blogger, y me incluyo.

¿Cómo es un Script?

Las herramientas de redes sociales, sistemas de comentarios o cualquier otra te dará un código script ya sea desde un archivo externo o directamente el código para que lo agregues a tu blog.

La primera opción con la que te puedes encontrar es la de cargar un archivo externo y puede tener una de las siguientes estructuras:

<script type="text/javascript" src="https://algunapaginaweb.com/javascript.js"></script>
<script src="https://algunapaginaweb.com/javascript.js"></script>
<script src="https://algunapaginaweb.com/javascript.js"/>

Pero hay casos en que la herramienta te pueda dar el código directamente, que es con lo que casi siempre te vas a encontrar. Así que en ese caso su estructura cambia un poco a diferencia de la anterior y puede ser similar a la siguiente:

<script type="text/javascript">
...contenido del script...
</script>

En estas dos diferentes formas de estructura el script funciona igual. La única diferencia es que en la primera, que es cargar el archivo externo, el funcionamiento del script depende al 100% que el archivo que se esta cargando permanezca alojado en la página de origen. En aso la página de origen borre el archivo, sufra una caída o la web desaparezca el script dejará de funcionar.

Cómo Agregar un Script a Blogger

Ahora que ya sabemos las diferentes formas de estructura que puede tener un script veamos cómo podemos agregar cualquier script a nuestro blog en Blogger.

Existen dos formas diferentes para poder agregar un script a nuestro blog. Te vamos a mostrar ambas para que puedas elegir cuál te sea más fácil.

Agregar Script desde el Editor HTML de Blogger

En este método vamos a usar el Editor HTML de Blogger para acceder al código fuente de nuestra plantilla. Para ello vamos a entrar a Tema, dentro vamos a dar click sobre la flecha del botón color anaranjado y luego en Editar HTML.

agregar script facebook twitter blogger

Una vez tengamos nuestro Editor HTML abierto podemos agregar nuestro script después de la etiqueta <head> o antes de </head>.

También es posible agregarlo dentro de la etiqueta body, después de <body> o antes de </body>. Esto va a depender mucho de que función tenga el script. Si agregamos nuestro script dentro de la etiqueta body este se activará una vez cargue por completo nuestro blog.

Agregar un Script desde un Gadget de Blogger

La segunda forma de agregar un script a nuestro blog es desde un gadget de HTML/Javascript. Esta es la forma más fácil y rápida ya que no necesitas saber nada de códigos, simplemente copias y pegas el script.

Para empezar, debemos de dirigirnos a Diseño. Dentro de esta sección daremos click en Añadir un gadget, puedes agregarlo en cualquiera de las secciones de tu blog desde este panel.

agregar script desde gadget blogger

Errores al Agregar un Script a Blogger

El error más común con el que nos vamos a encontrar al agregar un script en Blogger y que este no funcione es cuando tengamos un script con el código directamente, es decir cuando tenga esta estructura:

<script type="text/javascript">
  var scriptBlogger = document.getElementById("hoygeek");
  scriptBlogger.className += " blogger";
</script>

Esto sucede porque Blogger se basa en XML, que es más estricto que el HTML. Esto hace que no podamos usar algunos caracteres especiales directamente en el código fuente de la plantilla de nuestro blog.

Existen varias formas de solucionarlo pero la más sencilla es agregar todo el código del script dentro de //<![CDATA[ y //]]>. Veamos un ejemplo:

Vamos a tomar como ejemplo el código anterior, si queremos que funcione correctamente en Blogger debemos de envolver el código del script con las etiquetas anteriormente mencionadas, es decir //<![CDATA[ y //]]>. Entonces quedaría de la siguiente manera:

<script type="text/javascript">
  //<![CDATA[
  var scriptBlogger = document.getElementById("hoygeek");
  scriptBlogger.className += " blogger";
  //]]>
</script>

Con esto nuestro script funcionará sin problemas en nuestro blog y no tendremos problemas al guardarlo.

¿Tienes alguna duda?

  1. a mi no me aparece el comando head ni con las flechas y el slash (/) podrian ayudarme porfis ? :((

    ResponderBorrar