TUTORIAL
Sin ir mas lejos mi menda que me costo lo suyo aprénderlo,tener en cuenta que tengo 64 tacos que aprender Informatica ya es un rato difícil para un yayo como yo pero he salido adelante y os aseguro que no es tan difícil si te fijas y aprendes de los mejores como el autor de este post que para mi entender es uno de los mejores.
En este post os daremos unas pinceladas sobre la ubicación correcta para que este tipo de códigos funcionen como deben.
El código se puede insertar en principio en todas partes (plantilla, gadgets y entradas-páginas estáticas), pero cada cual en su sitio y, en ocasiones, incluyendo algunas etiquetas especiales para el caso.
Aunque luego lo iré repitiendo, en la plantilla Blogger se pueden distinguir varias partes en cuanto a estructura. Son estas:
Cabecera: Delimitada por las tags <head> y </head>
Primera zona cabecera: Lo que hay entre las etiquetas <head> y <b:skin><![CDATA[/*
CSS: Delimitada por las tags <b:skin><![CDATA[/* y ]]></b:skin>
Segunda zona cabecera: Deliminada por ]]></b:skin> y </head>
Cuerpo: Delimitado por las tags <body> y </body>
En este esquema os anticipo dónde puede incluirse cada tipo de código y más adelante ya lo desarrollo.
CSS
El CSS es lo que da formato a una página web, es decir, lo que configura su aspecto en cuanto a colores, fuentes, alineación, márgenes, etc.
Aunque se puede añadir inline en las entradas, su inclusión en la plantilla ofrece la gran ventaja de que si en el futuro cambiamos algo (la tipografía, por ejemplo), no necesitaremos ir entrada por entrada para cambiar eso mismo en todas y cada una de las ya publicadas. Simplemente cambiaríamos las propiedades CSS pertinentes en la plantilla y automáticamente se cambiará el estilo para todas las entradas.
Los sitios dónde podemos incluir este tipo de código son los siguientes.
1
El lugar natural para el código CSS en Blogger lo encontramos en la plantilla, entre las etiquetas <b:skin><![CDATA[/* y la de cierre ]]></b:skin>.
Si editáis la plantilla (Plantilla >> Edición HTML) y miráis las tripas, comprobaréis que hay muchas cosas entre ambas. Todo eso es el CSS, lo que marca el aspecto de vuestro blog. En esa zona no puede ir otro tipo de código.
2
También se puede añadir CSS desde Plantilla >> Personalizar >> Avanzado >> Añadir CSS. Esta opción pudiera no funcionar en plantillas personalizadas si sus autores no previeron su uso mediante la aplicación de variables.
3
Si se quiere añadir CSS en otra sección de la plantilla que no sea entre las etiquetas SKIN antes mencionadas, entonces será necesario insertarlo entre los tags <style> y </style>. Ejemplo:
<style>
.caja {
width: 100px;
background-color: black;
border: 1px solid red;
}
</style>
Con los tags STYLE se podría añadir CSS tanto en la primera zona de la cabecera, como en la segunda. También en el BODY y finalmente en un gadget HTML/JavaScript
4
Otra opción sería crear un fichero .css en texto plano con todas las reglas CSS (sin necesidad de las tags STYLE), alojarlo en algún hosting bajo vuestro control y luego añadirlo a la plantilla cargándolo mediante el tag LINK y la URL correspondiente al fichero. Ejemplo:
<link href="http://loquesea.com/estilo.css" rel="stylesheet" type="text/css"/>
Si se hace de esta manera, el lugar de la plantilla correcto sería en la primera zona de la cabecera, es decir, entre <head> y <b:skin><![CDATA[/*.
5
En las entradas se puede usar CSS, pero siempre incorporándolo entre etiquetas <style>. Este CSS sólo se aplicará a la entrada concreta dónde lo grabemos.
HTML
Cualquier instrucción HTML debe ir necesariamente en el BODY de la página. Para ello hay varias opciones.
1
Plantilla >> Edición HTML
Entre las etiquetas <body> y </body>, cualquier código HTML funcionará sin problemas.
2
Diseño >> Añadir gadget >> Tipo HTML/JavaScript
En este tipo de gadgets se puede añadir HTML sin ninguna restricción, ya que al incorporarse a la plantilla Blogger esta lo situará dentro de las antes mendionadas etiquetas BODY.
3
Igual ocurre con las entradas. Se puede teclear directamente HTML en las entradas y funcionará correctamente, ya que el cuerpo de las entradas (.post) forma parte del BODY. Como ocurría con el CSS, el HTML que incorporemos a una entrada será sólo visible para esa entrada concreta.
Hay algunas tags HTML que se añaden a la primera zona de la cabecera, pero son contenidos que no forman parte de la estructura de la página, sino simplemente informativas. Por ejemplo, entre <head> y <b:skin><![CDATA[/* es dónde se añaden las META, LINK, TITLE y otras de similar utilidad.
JavaScript
El código JavaScript funciona en gadgets tipo HTML/JavaScript y en cualquier parte de la plantilla excepto en la natural reservada para el CSS. Es decir, NO funcionará si lo insertamos entre las tags <b:skin><![CDATA[/* y ]]></b:skin>. En cualquier otra parte, sin problemas.
Sin embargo siempre es necesario teclearlo (o pegarlo) entre etiquetas <script> y </script>. Bueno, casi siempre porque también se puede cargar externamente. Las opciones por tanto son:
1
Se puede añadir JavaScript tanto en la primera zona del HEAD como en la segunda. Es decir, lo podemos añadir o bien entre <head> y <b:skin><![CDATA[/* o bien entre ]]></b:skin> y </head>, aunque lo recomendable es hacerlo en la segunda zona.
2
El BODY admite JavaScript sin restricciones (entre <body> y </body>)
3
También se puede añadir justo tras el BODY, o sea, entre </body> y </html>. Esto será necesario siempre que el JS tenga que actuar una vez se haya cargado toda la página, por ejemplo para modificar algo de lo "pintado" por el HTML.
4
Dentro de un gadget HTML/JavaScript (evidente ¿no?). Estos gadgets forman parte del BODY y por eso no hay tampoco problemas.
5
Las entradas también admiten JavaScript, aunque se debe teclear desde la pestaña HTML del editor sin pasar a la de Redactar.
Si se hace desde Redactar, en ocasiones se generan saltos de línea que rompen parte del código e impiden su buen funcionamiento. Para evitar problemas se debe publicar el post sin pasar ni una sola vez por Redactar. Si no tienes más remedio, antes de publicar revisa que el JS no se ha alterado. Para ver cómo quedará el post usa Vista Previa, aunque según el tipo de código que utilices, podrías no ver sus resultados en ese tipo de Vista.
Como con el HTML y el CSS, el JavaScript incorporado directamente a una entrada, sólo actuará para esa entrada.
6
Al igual que el CSS, el JavaScript se puede cargar desde un fichero externo. En ese caso habría que utilizar una de las siguientes estructuras. La podréis insertar en cualquiera de las zonas del blog antes mencionadas (1 a 5):
<script src='http://loquesea.com/codigo.js'></script>
<script src='http://loquesea.com/codigo.js'/>
Si en alguna parte de la plantilla no os funciona la primera opción, probad con la segunda. Es que Blogger a veces es muy sensible :)
Salvo en el caso de ficheros externos, para los que no hace falta, si queréis que el código JavaScript os funcione SIEMPRE sin problemas en Blogger, tendréis que añadir unos caracteres especiales. Eso os permitirá usar JS de manera cómoda, sin tener que preocuparos por cosas como el uso de comillas dobles o simples o por los caracteres que se podrían confundir con otros de HTML como < y >.
Dichos caracteres son los marcados en negrita y deben quedar anidados dentro de las tags SCRIPT
<script>
//<![CDATA[
CODIGO JAVASCRIPT
//]]>
</script>
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Fuente: oloblogger
Publicado por
0 comentarios: