Hoy me preguntó Andrés si tenía idea de cómo eliminar los estilos y scripts automáticos de blogger.

Como muchos sabréis, blogger inserta muchísimos archivos innecesarios en las plantillas, pero nunca me había puesto a investigar sobre la posibilidad de eliminarlos.

Son códigos que no aparecen en la plantilla, pero que son insertados automáticamente por blogger cerca de ciertas etiquetas clave de ella. Así que me puse a jugar con las entidades HTML, y se consiguió:

Eliminar los estilos automáticos de blogger

Blogger añade a todos sus blogs un archivo css con estilos automáticos y bastante específicos que muchos quieren sobreescribir. Esto hace mucho más difícil la personalización de plantillas, además de ser un archivo enorme.

Este archivo es insertado justo antes de <b:skin>, y es el primer archivo que deberías eliminar si aspiras a crear una plantilla desde cero.

Para eliminarlo bastaría con cambiar la línea:

<b:skin><![CDATA[/*

Por:

&lt;style id='page-skin-1'&gt;/*
<b:skin><![CDATA[*/

Consiguiendo como resultado:

Links al CSS de blogger comentados
Links al CSS de blogger comentados

Eliminar scripts de redirección móvil y scripts de control del tiempo

El script de redirección móvil no se inserta si no se tienen activadas las plantillas para móviles. El único script ineludible que se inserta encima del </head> es uno de control del tiempo, pero no añade datos a la página. De todas maneras, si aún así quieres eliminarlo, te doy la opción:

Sólo tienes que cambiar </head> por &lt;!-- </head> --&gt;&lt;/head&gt;.

Eliminar los scripts del fondo de la web

Es posible que este javascript afecte a algún widget muy concreto (aunque no es probable). De ser así, sólo tienes que revertir el proceso.

Blogger inserta un gran pedazo de Javascript encima de </body>. Si queremos evitar su ejecución, sólo tendremos que seguir un procedimiento parecido, cambiando </body> por &lt;!-- </body> --&gt;&lt;/body&gt;.

Truco: Hacer que reaparezcan las imágenes de los comentarios

Uno de los problemas de comentar el </body> es que las imágenes de los comentarios desaparecen. Para solucionarlo basta con poner el siguiente script encima de &lt;!-- </body> --&gt;:
<script>/* <![CDATA[ */
	(function reparar() {
		var imagenes,
			imagen,
			len,
			i;
		if( ! document.querySelectorAll ) {
			return;
		}

		// Si no han cargado los comentarios
		if( ! document.querySelector('.delayLoad') ) {
			// Ejecutar la función en una décima de segundo y no ejecutar más
			setTimeout(reparar, 100);
			return;
		}

		imagenes = document.querySelectorAll('.delayLoad');
		len = imagenes.length;
		i = 0;

		for( ; i < len; i++ ) {
			imagen = imagenes[i];
			imagen.src = imagen.getAttribute('longdesc');
			imagen.style.display = "";
		}
	}())
// ]]>
</script>

Final: Eliminar los otros scripts de blogger:

El resto de los scripts pesados que inserta blogger en sus páginas se encuentran en <b:include data='blog' name='all-head-content'/>. No os puedo proporcionar una suplantación infalible de este includable, pero aquí tenéis una que, a día de hoy, lo consigue.

24 pensamientos en “Eliminar los estilos y scripts por defecto de blogger

  1. Bitacoras.com
  2. Imagen de agamezcm el dijo:

    Tan interesante como siempre. Lo probaré en el blog de prueba. Supongo que ésto servirá para eliminar carga y que el blog cargue más rápido.

    Si yo supiera lo que tú montaría un curso: conocer a fondo la plantilla de blogger, los que necesitas saber.
    Lo impartirías online y offline en el verano y tendrías dinero fresco para tu vida de estudiante.
    Saludos y como siempre gracias por aportar.

  3. Imagen de Wallpaper HD el dijo:

    Hola Emilio.
    Muy interesante esto de elimnar esos scripts para reducir carga, aunque no se que tanto mejore en tiempo. En terminos generales considero muy buena toda la informacion en tu pagina, pienso que de repente deberias compartirnos algo mas sobre SEO, siento que es un tema que muchos bloggers y webmaster no tienden a tocar por no compartir sus conocimientos, quiza TU nos puedas ayudar con el SEO, que dices?, te animas ha hablarnos acerca de SEO.

    Bueno, felicidades por tu blog, pasa buen dia.

  4. Imagen de Juvinao el dijo:

    Emilio tu que eres un sabio en este de Blogger, te tengo una pregunta?

    Bueno aqui va….

    Hace poco estaba revisando la edicion html de Mil Trucos Blogger y encontre la siguiente linea:

    Y segun he podido comprobar esa etiqueta la ha añadido Blogger para mejorar la compatibilidad del blog con versiones anteriores de Internet Explorer como IE7 pero esto tambien hace que en versiones mas moderna como IE9 se vea como en versiones anteriores.

    Quisiera que le des un vistazo a esto y que me recomiendas, elimino esa linea o no?

    Saludos

    • Imagen de Emilio Cobos Álvarez el dijo:

      Yo sinceramente la eliminaría, o incluso mejor (si no te preocupas por la validación):

      <meta content='IE=Edge,chrome=1' http-equiv='X-UA-Compatible'/>

      Que haría que las versiones antiguas de IE pudieran usar chromeframe si lo tienen instalado.

      Eso sí, he visto problemas con dominios de blogspot al quitarla (IE9 lo tiene en su lista de compatibilidad), pero siendo el dominio personalizado, no tendría ningún problema.

  5. Imagen de Víctor CalderónVíctor Calderón el dijo:

    Saludos Emilio, te comento que para suprimir definitivamente yo usé una condicional de PageType y que ésta no fuera válida, así no cargaría en ninguna instancia:

    <b:if cond='data:blog.pageType == &quot;NOEXISTE&quot;'><b:skin><![CDATA[]]></b:skin>
    </b:if>

    Te comento también que al comentar el </body> los avatares en los comentarios no cargan, y el src de la imagen da un blank.gif. Para arreglarlo observé el código y me fijé que en caso de que no usen javascript, Blogger añade en el enlace del avatar un <noscript> y dentro la imagen, lo que se me ocurrió fué convertir la etiqueta a un <span> mediante JS y problema resuelto.

    Gracias por el aporte Emilio, con Andrés sabíamos que teníamos que comentar las líneas, pero nunca pensamos que la solución era tan fácil como la pintas :)

    • Imagen de Emilio Cobos Álvarez el dijo:

      Sí, en cierto modo tiene lógica. En los scripts del </body> se encuentra la carga retardada de imágenes. Por eso hice ese aviso en amarillo. Buena solución la de reemplazar el noscript ;) Aunque en el noscript la etiqueta es como si fuera texto. Casi mejor usar algo así (uso jquery para simplificar, pero):

      $('.avatar-image-container img').each(function(){
         // No uso $() porque no es necesario para algo tan sencillo
         this.src = this.getAttribute('longdesc');
         this.style.display = "";
      });

      PD: Lo del condicional es genial, nunca se me habría ocurrido :)

  6. Lienzo – Una plantilla básica para blogger | Emilio Cobos-CMC
  7. Imagen de Félix el dijo:

    Amigo Emilio. ¡Felicitarte como bloguero antes de nada!

    Quiero preguntarte sobre los beneficios de eliminar estos scripts, que aparecen en las plantilla blogger actuales:

    – 1) Navbar: <script type="text/javascript"> ( y todo lo que sigue)

    – 2) Showtars: empieza tras este condicional “b:if cond=’data:top.showStars'”. Y sigue con “script src=’//www.google.com/jsapi’ type=’text/javascript’/” (bla, bla, bla…)

    – 3) Cometarios: “data:post.friendConnectJs/”
    “data:post.cmtfpIframe”
    “script type=’text/javascript’
    BLOG_CMT_createIframe('', '');
    script”

    – 4) Script desconocido (aparece al final de la plantillas): “script type=’text/javascript’>
    window.setTimeout(function() {
    document.body.className = document.body.className.replace('loading', '');
    }, 10);
    script”

    De lo 4 scripts, en particular, me interesa tener información sobre el 4º que aparece al final de las plantillas de Blogger y no hay nada sobre él en Internet. ¿Si lo eliminas ganas algo de velocidad o de menos peso?

    Un saludo

    • Imagen de Emilio Cobos Álvarez el dijo:

      El de la navbar sólo se muestra si tienes la navbar habilitada (se puede eliminar desde la pestaña “diseño”). Si te interesa quitar cosas de la plantilla puedes dejar el widget vacío, pero si tienes la navbar deshabilitada ni te va ni te viene.

      El showstars ahora no se debería mostrar en ninguno de los blogs: Esta ahí de cuando podías dejar que votaran usando las estrellitas de google al post. Puedes eliminarlo sin problemas para hacer algo más legible la plantilla.

      El de los comentarios es simplemente eso, para mostrar los comentarios: Este script no aparece si los deshabilitas, así que no veo el interés en eliminarlo.

      El cuarto es simplemente un script que te permitía ver cúando se había cargado la página. Me refiero: en las plantillas por defecto de blogger el body aparecía con la clase “loading”, este script al encontrarse al fondo se ejecuta cuando la página ha cargado (no exactamente, pero para entendernos…), y lo que hace es eliminarla, de tal manera que podías usar la clase loading en el css para alterar cosas mientras la página cargaba. El único beneficio que da eliminarlo es el del tamaño de la web, y puedes utilizarlo todavía si te interesa.

  8. Imagen de Jorge Verón Schenone el dijo:

    ¡ Hola Emilio !
    Este artículo se destaca por lo práctico y sencillo de implementar. Cuando lo apliqué a mi vieja plantilla personalizada, pude entender cómo afectaban los estilos de blogger a los creados. Un especial agradecimiento por ello. También debo realizar una consulta: Ha dejado de funcionar el contrar/expandir la lista de archivos (BlogArchive). ¿Existe alguna rutina javascript para aplicar y solucionar este inconveniente?
    ¡ Un cordial abrazo!
    Jorge

    • Imagen de Emilio Cobos Álvarez el dijo:

      Humm… Supongo que se podría hacer algo, pero no sería algo consistente porque dependería de dónde estuviera en la plantilla. Sería algo sólo para esa plantilla en concreto creo… Tengo que mirar algo más de todas maneras, ahora no puedo tener tanto tiempo como desearía para ello, pero intentaré arreglar algo ;)

  9. Imagen de MarceloMarcelo el dijo:

    Hola Emilio! Muy bueno el artículo! Estoy con un ´problema´. Como puedo hacer para eliminar todo el script de Blogger, pero a la misma vez no perder las ediciones rápidas de post y widgets. Mi idea era rescatar el CSS y la parte del script que corresponde a estas opciones (el lapicito y el icone de edición widget) y agregarlos al cuerpo del blog. El problema es que no se donde están esas opciones. El CSS del lápiz para edición de los post y del x de herramientas para edición rápido de los widgets, y la función script. Tenes alguna idea? Porque el resto no me interesa nada, pero las ediciones rápidas es algo que me facilita las ediciones. Ok, si alguna hora podes responder, desde ya te agradezco. Marcelo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.