Cómo alojar scripts en la plantilla

|

El tema del alojamiento de los scripts es un tema recurrente debido a que no todos los servicios gratuitos de hosting admiten este tipo de archivos, o bien, porque pueden tardar mucho en cargar si el ancho de banda del hosting es reducido, lo que trae consigo que el blog tarde en cargar.
Si bien podemos alojarlos en Google Sites o Dropbox también podemos alojar los scripts en la propia plantilla, de este modo el tiempo de carga de la página será menor y dejaremos de estar dependiendo de un servicio externo a Blogger.

Alojar los scripts directo en la plantilla funciona para casi todos los casos, aunque es posible que haya uno u otro script que se resista y ese sí tendremos que alojarlo en un servicio independiente.

Para alojar los scripts en la plantilla hay dos formas, una es entrando a Diseño > Edición de HTML y antes de </head> pegamos lo siguiente:
<script type='text/javascript'>
//<![CDATA[
...contenido del script...
//]]>
</script>

Habremos de agregar donde se indica el contenido del script.
¿Cómo sacar el contenido del script?
Pega la URL del script en la barra de direcciones de tu navegador, si abre una página llena de códigos ese es el contenido del script; si en su lugar descarga un archivo con extensión .js entonces abre el archivo con WordPad y copia y contenido del script.

La otra opción es entrar en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y ahí pegar en un sólo elemento el contenido de todos los scripts que quieras. Se haría casi de la misma forma:
<script type='text/javascript'>
...contenido del script...
</script>


Con cualquiera de estas dos formas tendremos los scripts alojados en nuestra propia plantilla con lo que dejaremos de depender de otros servicios y nos ahorraremos algo de tiempo en la carga de la página al no depender del ancho de banda de los demás.

54 comentarios:

Graciela dijo...

Hola!
Es la única manera de no hacerce problemas :)

Buen fin de semana!

Eduardo Sanguino dijo...

Hola Potro, buen post, la verdad es que muy pocos lo saben lo del el ancho de banda, en mi caso yo no lo sabía, gracias por enseñarnos todo lo que sabes.

Un saludo!

El Potro dijo...

Graciela, definitivamente nos ahorramos muchos dolores de cabeza de esta forma. Buen finde :D

Eduardo Sanguino, no todos los hostings dicen cuánto tienen de ancho de banda, quizá por eso no estamos muy enterados pero nos damos cuenta cuando vemos que la página tarda horas en cargar :S

PpliciOus dijo...

OMG!!! que fuerte bueno yo tengo que ponerme a revisar mi blogg porque siguen los robots haciendo de las suyas mhhh que mal, bueno potro espero pronto me apoyes en esto!

El Potro dijo...

Conquistar a Google es como conquistar un amor, lleva su tiempo y requiere de muuuucha paciencia ;)

dajaroma dijo...

Gracias
Como puedo cambiar de dirección mi blog, ahorita es fotodajaroma.blogspot.com y quiero trasladarla a dajaroma.blogspot.com
Te agradezco de antemano

El Potro dijo...

Hola dajaroma,

Entra en Configuración > Publicación y ahí cambia la nueva dirección de tu blog.

Saludos.

enrique dijo...

Dos preguntas que no tienen nada que ver con este post, Potro: cómo puedo ampliar el espacio entre el título del post y el post mismo?
El título me queda muy sobre el texto, quisiera que hubiera más separación y no sé cómo modifico eso.
Y en el texto mismo, al contrario: las líneas me quedan muy separadas para mi gusto, quisiera reducir el espacio existente.
Te agradezco desde ya.

El Potro dijo...

Hola enrique,

No sé cuál sea tu blog por lo que no puedo darte indicaciones con exactitud, pero a grandes rasgos es así.
Busca en tu plantilla esta parte:

.post-body {
margin:0 0 .75em;
line-height:1.6em;
}

Quizá los valores de margin sean distintos pero bueno, lo que nos importa es el primer valor, en este caso 0 (cero), ese puedes cambiarlo por 20px u otro valor, eso le dará separación entre el título y el post.
En el caso de la separación entre cada renglón se manipula donde dice line-height, un valor más pequeño hará menos espacio entre cada línea.

Saludos.

José GDF dijo...

Una observación: no todos los scripts funcionan si los colocas en un gadget html. La razón es simple: algunos necesitan estar antes de </head> así que no queda más remedio que meterlos en la plantilla.

¿Cómo saberlo? Simplemente probando, como estoy haciendo yo, ¡je, je, je!

En cuanto a que si te ahorras algo de tiempo en la carga de la página... Te ahorras bastante tiempo. En la plantilla de pruebas tengo prácticamente los mismos scripts que en la actual, y la diferencia es de entre siete a diez segundos... Y eso los días en que las dependencias externas funcionan bien, porque hay días que ni termina de cargar...

De ahí mi casi obsesión de meterlo TODO si puede ser en la plantilla.

Si las imágenes se pudieran alojar bajo el propio Blogger, aún podríamos arañar uno o dos segundos más. De acuerdo que Picasa pertenece a Google también, pero me da la sensación de que aloja sus ficheros en otros servidores distintos.

Saludos a tod@s.

El Potro dijo...

Qué bueno que lo mencionas, algunos me preguntan -¿cuáles se pueden alojar en la plantilla y cuáles no?.

La respuesta es sencilla como tú lo has dicho: Probando.
Probar no cuesta nada, y en caso de tener buenos resultados tendremos una diferencia de carga bastante buena.

Pareciera que 7 segundos es poco pero la competitividad entre sitios web es cada vez mayor, así que 7 segundos son muy valiosos si no queremos que el lector se vaya porque simplemente la página no carga.

Con las imágenes no he sentido tanta demora como lo he sentido con los anuncios de Adsense que aunque también pertenecen a Google parece que usan un servidor bastante saturado y limitado.

Saludos!

enrique dijo...

Muy bien, Potro, asunto solucionado en un momentito. Muy agradecido, una vez más.
Saludo.

PepeX dijo...

Potro, el post me gusto, pero para serte sincero me gusto mas tu comentario n° 5 xD, jajajaja.

PepeX dijo...

hayyyyyyayayayay si el internet fuera materia, me casaria con ella. Bueno si fuera materia y sobre todo si fuera mujer :P

jonathan pucheta dijo...

potro te queria preguntar si se puede incorporar al blog un slide de fotos, pero con un titulo, descrpción y link a algun post en particular... tal como lo tienen muchas páginas como por ej: espndeportes.com, o hasta incluso uno de mis blogs (pero el cual ya venía con la plantilla) y yo no kiero cambiar la q tengo.
saludos.

jonathan pucheta dijo...

estaria muy bueno por ej: poder extraer el slide de esta plantilla http://myportfoliodezign.blogspot.com/ y poder ponerla en otra, Aunque me temo q debe ser imposible, bueno vos sos el experto y sabrás.
gracias desde ya.

cyberbloggero dijo...

Ajá! interesante!... una consulta Maestro... crees que si alojo todos los Scripts en mi plantilla lograré bajar el tiempo de carga?

Un abrazo!!!

El Potro dijo...

jonathan pucheta, más adelante haré un post para algo parecido.

bro, por supuesto que bajará el tiempo de carga, no es mucho pero son unos segundos que valen oro.

Vicky dijo...

Hola, Potro! Esta idea me parece estupenda, si es que así se aligera la carga del blog y quiero ponerla en práctica, ya que tengo muchos scripts de otros sitios. Pero hay algo que no entiendo:
Después de alojar el script en la plantilla, entonces no sé qué hacer con la url antigua (en donde estaba alojado antes ese script). No sé si hay que borrarla o qué hacer.
Por ejemplo, empecé con el script que nos enseñaste en
http://ciudadblogger.com/2009/07/mostrar-solo-los-titulos-de-las.html
Ese script tiene códigos en diversas partes de la plantilla, pero veo que hay una parte que dice:
src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/Expandibles.js"
Supongo que eso significa que una parte del script está alojado en esa dirección y que para ejecutarse tiene que acudir a ella. Ya saqué el texto del script alojado en esa url y lo puse en mi plantilla (de la forma como nos explicaste aquí en este post). Pero ¿qué debo hacer con esa url anterior, para que el script ya no acuda a ella para ejecutarse, sino solamente a la propia plantilla?
Es que ahora que puse el script en la plantilla, me arroja un error y no se guarda.
Porfa, te agradecería grandemente si me explicaras cómo debo hacer. Muchas gracias y saludos.

Vicky dijo...

Nota: El script siempre me ha funcionado bien. Es solo ahora, cuando trato de alojarlo en la plantilla, que no me resulta. Gracias.

Feroz dijo...

Oye, hablando de scripts y "peso"... Tantas cositas, ¿no hacen el blog incómodo de leer? ¿a la gente, qué le gusta más, los adornos, o que sea sencillito y fácil de ver?
¿tienes algún foro en ciudadblogger o algún sitio donde preguntar estas cosas?

Animo, maestro! Un saludo Toledano.

VRedondoF dijo...

Buenas tardes "Potro" :
te queria enviar este correo personal , pero no encuentro tu direccion.
Abusando de tu amabilidad , estoy desarrollando este blog
http://cinecienciaficcion.blogspot.com/
y quisiera que en vez de ponerme los html uno encima de otro ( en vertical ) me los pusiera uno despues de otro (en horizontal).
Te he querido pegar el codigo , pero el sistema no me lo permite.
yo , en la ventana , pongo uno detras de otro.
Sera posible hacer lo que pretendo ???

SALUDOS
Victorino Redondo Fidalgo
http://mapageneral.blogspot.com/

El Potro dijo...

Vicky, la línea anterior puedes eliminarla, teniendo el script en la plantilla no es necesario tener la anterior de lo contrario continuará leyéndola. Intenta de nuevo poner el script en la plantilla usando el primer método, si sigue marcando error me dices cuál es.

Feroz, en términos generales te diría que lo ideal es tener un blog sin tantos scripts y gadgets inservibles, pero también en gustos se rompen géneros, me parece que en esos casos lo ideal es hacer una encuesta en el blog para que tus lectores decidan qué les gusta y qué no. Saludos!

VRedondoF, para que los elementos queden horizontalmente pega los códigos uno seguido del otro sin dejar espacio.

Clan Russo dijo...

Enserio que aunque el tiempo es poco ya se pueden notar mejoras, para no andar confundido estoy poniendo todos los scripts antes de de la etiqueta head por que la verdad no es mucho el tiempo que tengo

Clan Russo dijo...

ahh y muchas gracias por lo del buscador la verdad es que ya se lo que hacia mal, se me olvidaba eliminar la ultima etiqueta que dice /div y por eso la plantilla no lo aceptaba

El Potro dijo...

Además del tiempo tendrás la ventaja de que no dependerás de nadie más, luego por no alojar los scripts en nuestro propio servidor o plantilla estamos a expensas de que el dueño del hosting elimine el script cuando quiera y nos afecte el blog, pero de esta forma no hay de qué preocuparse.

Saludos.

Vicky dijo...

Hola Potro! Bueno, ya eliminé el bloque que contenía la url anterior y ahora sí me funciona. Pero tuve que hacer bastantes intentos antes de lograrlo (¡uf!).
Lo que pasa es que no entendía cómo iba la apertura y el cierre de etiquetas del bloque del script viejo, para poder elimarlo bien. Es que a veces yo eliminaba más de la cuenta y otras veces, menos; razón por la cual las etiquetas no se cerraban correctamente. Pero parece que por ensayo y error y algo de observación, al fin me salió bien y está funcionando correctamente.
Muchísimas gracias por todo.
Saludos!

P.D.: Solo como sugerencia, me parece que sería muy útil si pudieras publicar un post (no sé si ya lo has hecho) especialmente dedicado a cómo abrir y cerrar correctamente los diversos tipos de etiquetas y a diferenciar la apertura y cierre de diversos bloques de códigos.
Por ejemplo, acerca de etiquetas de inicio y fin de cosas como scripts, bloques de secciones de las plantillas, estilos de letra (bold, tipo, tamaño); etiquetas en las especificaciones de colores, de alineación, de saltos de línea; cuándo hay que usar paréntesis, puntos, puntos y comas, guiones, guiones bajos, espacios, comillas, diagonales, etc., etc...
Sé que ya nos has explicado muchas de esas cosas, pero toda esa valiosa información está dispersa por todo el blog. Creo que sería muy útil y accesible si postearas un artículo que condense todo eso en uno solo.
Creo que esos temas, aunque para algunos son elementales y los dominan muy bien, para otros resultan problemátics y a veces se comenten muchos errores, que se originan por el simple cierre inadecuado de etiquetas y símbolos, ya sea por la presencia o ausencia de un simple caracter que lo cambia todo. Dominar esto le ahorraría muchos dolores de cabeza a muchos bloggeros (incluyéndome a mí, ja, ja).
Sé que tú podrías orientarnos muy bien en todo esto.
Gracias de nuevo.

El Potro dijo...

Hola Vicky,

Tienes toda la razón, tendré en cuenta tu sugerencia para una entrada más adelante.
Qué bueno que ya has podido solucionar lo del script :)

Saludos!

Eduardo Sanguino dijo...

Hola Potro, quería agradecerte por que en este post recién me entero de lo del ancho de banda que acupan los script, y en mi plantilla tenía script que quien sabe cuantas personas lo utilizaban también, lo que hacía que la carga sea más lenta, pero ahora ya los he subido todos a mi servidor y la verdad es que veo que mis 2 blog cargan más rápido.

Saludos y muchas gracias.

El Potro dijo...

Excelente Eduardo, tus lectores son los más beneficiados cuando se trata de rapidez.

Saludos!

cyberbloggero dijo...

Muchas gracias Bro... creo que cuando ande con un poco de tiempo, voy hacer otra copia de la plantilla, con todo los Scripts en ella, y voy a comparar el tiempo de carga.

Gracias!!!

Un abrazo!!!

Eduardo Sanguino dijo...

Hola potro, no me cansaré de agradecerte por este post, porque veo que mis páginas han bajado 5 segundos, del tiempo de carga que tenía antes, es algo que yo realmente quería, pues además de los script he alojado las imágenes de la plantilla en mi servidor y la verdad es una pasada.

Gracias amigo!

El Potro dijo...

Vaya 5 segundos es bastante, y eso prueba que alojar todo en la plantilla sí acelera el tiempo de carga de un blog.

Gracias a ti por tu visita :)

nEjO dijo...

HOLA GRACIAS POR TU BLOG.. AYUDAME PORFAVOR: CREE UN BLOG DE PRUEBA ES ESTE: http://chorizama.blogspot.com/ BUENA LA PLANTILLA QUE APLIQUE TRAE UN SLIDE DE IMAGENES... ESE SCRIPT LO QUIERO PARA PONERLO EN OTRO BLOG

COMO HAGO PARA SABER CUAL ES EL CODIGO DEL SCRIPT Y COMO LO INSTALO EN OTRO BLOG?

nEjO dijo...

http://chorizama.blogspot.com ESTE ES EL LINK DE EL BLOG DE PRUEBA

El Potro dijo...

No sabría decirte. Cada slide requiere de cosas distintas, no sólo es cuestión de un script y ya, son varios códigos que se necesitan y como te mencioné, cada uno es diferente.

Sinceraitor dijo...

Tengo un problema según me han dicho cuando visitan mi blog aparecen muchos pop ups como los puedo eliminar?
Gracias
Adriana

El Potro dijo...

Hola Adriana,

Generalmente los Pop ups no deseados los causan algunos gadgets, aunque yo he entrado a tu blog y no me abrió ninguna ventana Pop up.

✿Nuria Bertrana✿ dijo...

la muà de nuevo!!! puse el codigo en un gadget javasript; y por supuesto me sale el blog con todas las entradas! Puse el codigo enorrrrme en la plantilla y me diò error (al darme error lo que hice fue borrar los cambios y ya està); quiero poner para q salgan los titulos de las entradas y ahora ya he descargado los scripts y al abrir el sobre, me sale la pagina con explicaciones y los codigos; ¿son esos codigos los que tengo q poner en "contenido del sript" q tienes arriba en rojo??? Es que no me entero; soy completamente autodidacta y llevo tooooooooda la tarde intentandolo!!! Espero haberme sabido explicar!!! wowwwww!!!! Gracias anticipadas!!!

☻/
/▌
/ | *´¨)
...¸.•´¸.•*´¨) ¸.•*¨)
(¸.•´ (¸.Nyn•*♥

✿Nuria Bertrana✿ dijo...

Discupa de nuevo... o son esos codigos descargados los que al poner el codigo enorrrrrrrrrrrrrrrrrrme son los que tengo que poner en la barra del navegador????? Gracias de nuevo!!!
☻/
/▌
/ | *´¨)
...¸.•´¸.•*´¨) ¸.•*¨)
(¸.•´ (¸.Nyn•*♥

✿Nuria Bertrana✿ dijo...

Y como pongo lo de las "ultimas entradas"??? Los comentarios me han quedado de rechupete; igual que como tu los tienes!!! gracias de nuevo por tanta lata!!!
☻/
/▌
/ | *´¨)
...¸.•´¸.•*´¨) ¸.•*¨)
(¸.•´ (¸.Nyn•*♥

El Potro dijo...

Hola ✿Nuria Bertrana✿,

Efectivamente el contenido del script (todos esos códigos raros) van en lo que está marcado en color rojo, ahí debes colocarlos.
Aquí hay una forma de poner las últimas entradas.

Saludos.

✿Nuria Bertrana✿ dijo...

jajajaja!!!! wowwwww!!! Por fin ya tengo mi indice de entradas solo con los titulos!!! Tambièn con un click en la etiqueta salen las entradas ùnicamente de esa etiqueta!!! woiw wow wow!!! Fìjate la hora que es...me va a dar un infarto!!! Pero ha valido la pena!!!! Gracias!!!!
☻/
/▌
/ | *´¨)
...¸.•´¸.•*´¨) ¸.•*¨)
(¸.•´ (¸.Nyn•*♥

El Potro dijo...

Jajaja, a veces se requiere de mucho tiempo para personalizarlo pero al final nos quedamos con el buen sabor de la satisfacción :)

EcoCucharaditas dijo...

yo no entiendo nada!!!! alguien me ayuda? que es un script, que significa, pa que sirve? yo hasta ahorita empezando por si no se nota, jeje.

El Potro dijo...

Hola EcoCucharaditas,

Los scripts son códigos que se utilizan para conseguir determinados efectos o funciones, pero, si apenas estás empezando con esto de los blogs no tomes mucho en cuenta este post, no afectará la forma que se vea tu blog, más adelante que estés más familiarizado con el tema será más conveniente.

¡Saludos!

KatoGd dijo...

Potroo! Ya Parece Que Aprendi a Alojar Los Archivos Mira, Descargo el .JS, Lo Cargo a Google Sites y Copia El Enlace Cuando El Archivo cargue pero se hacen excepciones retirandole la ultima parte del enlace:

http://sites.google.com/site/archivosparablogger/archivosjs/jquery-1.2.6.min.js?attredirects=0&d=1

Queda asi:

http://sites.google.com/site/archivosparablogger/archivosjs/jquery-1.2.6.min.js

El Potro dijo...

Claro, eso será para alojarlo en un hosting pero para alojarlo directamente en la plantilla sería del modo que se explica en esta misma entrada ;)

Publicar un comentario en la entrada

Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.

 

Ciudad Blogger. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com

Ir arriba Ir abajo