¿DÓNDE VA EL ESTILO (CSS) Y DÓNDE EL HTML?En Blogger, cada vez que leais que algo lo teneis que poner en la parte CSS o que el código que intentais insertar es de este tipo, su ubicación correcta es entre las etiquetas <b:skin><![CDATA[/* y ]]></b:skin>
Aunque es indiferente, lo normal es insertarlo justo antes de la última citada, para así poder localizar rápidamente, aquellas modificaciones que hayamos introducido nosotros en el código original de la plantilla.
Mediante la etiqueta <style> podemos introducir CSS en la parte HTML, pero esto está desaconsejado y sólo deberíais utilizarlo esporádicamente.
<div style="width:100px;height:20px;border:1px solid #00000;padding:10px;text-align:center;font-weight:bold;">Hola ¿Qué tal?</div>
El HTML va entre <body> y </body>. En este caso sí es importante su ubicación, ya que HTML se interpreta en el mismo orden que se redacta. Esto quiere decir que lo que pongamos en primer lugar saldrá por encima de lo siguiente. Hay formas para que esto se pueda alterar, pero esa es otra historia.
Por último, los scripts que querais alojar en la propia plantilla, en un principio deberían ir entre <head> y </head>, aunque por supuesto, también hay excepciones.
OBTENER DIRECCION IMAGENES PICASA
Una vez que accedes a tus álbumes y pinchas en la miniatura que necesitas, verás la imagen completa. Ahora, con el botón derecho del ratón, escoges "Copiar la ruta de la imagen". Otra forma es buscando en la barra lateral de Picasa, el texto "Enlace a esta foto". Seleccionamos únicamente la opción "Sólo imagen (no enlace)" y en "Incrustar imagen", nos aparece la URL de la misma.
ESCONDER ELEMENTOS SIN ELIMINARLOSLa forma más fácil es agregar una clase especial a ese elemento y luego con CSS hacerlo no visible. En cualquier momento podemos cambiar las propiedades de la clase para hacerlos visible de nuevo.
Supongamos que tenemos dos DIV que muestran un texto y que sólo queremos mostrar uno u otro, intercambiándolos cada cierto tiempo. No queremos borrarlos pues ambos son largos y no queremos estar redactándolos de nuevo cada vez. En un principio, los colocamos así y saldrían los dos a la vez, uno tras otro.
<div>Este es un texto simple que sale allí dónde se coloque pero incompatible con el de abajo.</div><div>Este otro sale en la misma parte del blog, pero cuando no está el anterior.</div>
Este es un texto simple que sale allí dónde se coloque pero incompatible con el de abajo.
Este otro sale en la misma parte del blog, pero cuando no está el anterior.
Ahora creamos nuestra clase y la insertamos en nuestra parte CSS. Esto sólo hay que hacerlo una vez porque quedará como parte de nuestra plantilla. La llamaremos invisible (no soy nada original bautizando, no). Sus propiedades deberían ser las siguientes:
.invisible {
display:none;
height:0px;
width:0px;
}
display:none;
height:0px;
width:0px;
}
Ahora sólo tenemos que añadir dicha clase a la frase que no queremos que se vea. Más adelante, podremos quitarla y añadirla a la otra frase para sea esta la invisible.
<div class="invisible" >Este es un texto simple que sale allí dónde se coloque pero incompatible con el de abajo.</div><div>Este otro sale en la misma parte del blog, pero cuando no está el anterior.</div>
Este es un texto simple que sale allí dónde se coloque pero incompatible con el de abajo.
Este otro sale en la misma parte del blog, pero cuando no está el anterior.
El ejemplo es con una frase, pero vale igual para códigos más complejos, scripts, imágenes, vídeos, etc. Y ojo con lo que escondeis, que aunque accediendo a la página en forma normal, ese contenido no se verá, echando un vistazo al código fuente todo quedará al descubierto sin problemas.
ESCONDER ELEMENTOS PARA TODOS EXCEPTO PARA EL ADMINISTRADORAprovechando una clase controlada por el propio Blogger, podemos esconder cualquier cosa de manera que nadie la vea salvo nosotros, los administradores del blog. La clase es item-control blog-admin y sólo hay que añadirla a cualquier capa para que tenga dichas características.
<div class="item-control blog-admin">Hola. ¿Qué tal?</div>
Seleccionar el interior de este recuadro ► botón derecho ► Ver código fuente seleccionado, para ver que hay escondido en este recuadro que tiene esa clase y que por tanto, sólo puedo ver yo en modo normal.
EL DINERO NO HACE LA FELICIDAD, PERO ES MEJOR LLORAR EN UN FERRARI.
Al igual que antes, esta clase no sirve para guardar secretos. Tanto si la utilizais en la plantilla como en un post, viendo el código fuente saldrá a la luz sin problemas.
¿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.
Y muchos más artículos interesantes si nos sigues en...
Perfecto el FAQ. Útil como todo en tu blog. Un saludo.
ResponderEliminarVeo que te has montado una página faq, para mandar aquí a quien te pregunte cosas frecuentes, ¡je, je, je!
ResponderEliminarLa clase "item-control blog-admin", como oculté la navbar, la utilizo para tener un panel de control en el blog con acceso directo al editor de entradas, al panel de diseño y unas pocas cosas más. Así no tengo que abrir aposta otra pestaña en el navegador para entrar en Blogger. Tengo pendiente explicarlo algún día en una entrada.
Un saludo.
Hola Oloman. Primero te escribo para felicitarte por el blog que tienes es muy bueno, ya que de ahí saque la plantilla que pusiste para el Blogumus y su posterior reparación y me va 100%.
ResponderEliminarBueno, solo te escribo para hacerte una sugerencia de próxima entrada que es algo que encontré pero el que la escribió no lo hizo de forma tan clara como tú lo haces.
En concreto me refiero a que podrías escribir sobre como hacer nuestra propia "Página de Error 404" en Blogger. Ya se que no hay página de Error 404 en Blogger sino que sale "No se encuentra la página". Pero en este post encontré información que a lo mejor te puede ayudar a tí a poder escribir un artículo más diáfano:
http://www.pizcos.net/2010/04/simulando-una-pagina-404-en-blogger.html
Nada más, solo es una sugerencia y te reitero, que enhorabuena por tu blog. Un saludo.
¡Hola! Las vueltas que he dado para descubrir la dirección de una imagen en Picasa y era así de sencillo!!! Muchas gracias.
ResponderEliminarRaúl, José GDF, para ser un auténtico FAQ, aún le quedan muchísimas cosas. Las dos primeras son cuestiones que me preguntan mucho. La siguiente no tanto y la última es como un bonus. Y José GDF, yo también la uso para eso mismo y tampoco nunca lo he explicado, así que date prisa o te piso el post :D
ResponderEliminarSeñor X, supongo que el truco lo viste en Pizcos Blog. Por lo que pude comprobar, sólo funciona cuando se usa el buscador y además, este tiene que ser de los sencillos, del tipo http://blog.blogspot.com/search?q=xxxxxx No vale con los que llevan motor Google.
m.p.moreno, las cosas son muy misteriosas cuando no se conocen y muy sencillas cuando ocurre lo contrario :)
Hola Oloblogger.
ResponderEliminarQuiero poner en una página de blogger (no la principal sino otra pestaña donde el texto es fijo), quiero poner un feed de un servicio que se actualiza diariamente.
Lo que hice fue tratar primero de insertarlo desde las aplicaciones a un lado con la aplicación para incorporar feeds, luego fui a la edición en HTLM, copié el código y lo pegué en la página. Pero no me funcionó.
Quiero ponerlo en una página y no al lado...
¿Me podrías decir que feed exactamente quieres mostrar y cómo, Lorca León? Hay muchas formas de hacerlo, pero la que seguro que no funciona es la que has intentado.
ResponderEliminarComo mucho, podrías añadirlo en la barra lateral y luego moverlo a la parte superior o inferior de las entradas desde Elementos de Página, pero no te servirá copiar el código en una entrada, porque simplemente, este no es visible cuando se incorpora de esta manera. Se queda en una variable que se llama algo así como data:widget.content, y eso es lo único que se ve.
Hola Oloman,
ResponderEliminar1. No encuentro cómo seguir los comentarios de esta entrada
2. El tema. Al final pude agregarlo, pero, pero... si entro y trato de editar la página, (paso a htlm) para ver el código, ¡ha desaparecido el del feed!
La página estática es la siguiente: http://aotibas.blogspot.com/p/ofrecimiento-eucaristico.html
y el feed que intento poner es: http://feed.evangelizo.org/reader.php
Tengo seleccionado el evangelio en español.
Como verás, si está visible en el blog. Pero si intento entrar a editar la página, (quiero centrarlo y quitarle los espacios, antes y después de la caja), si entro a la edición, el código de la caja se borra automáticamente.
Opté por dejarlo quedito... porque al menos se ve, pero no me gusta como quedó... Entonces, supongo que como me dijiste, no es el método para hacerlo, al menos correctamente.
Te agradezco tu ayuda y tu dedicación a este blog, super bueno.
Hola Oloman,
ResponderEliminar1. No encuentro cómo seguir los comentarios de esta entrada
2. El tema. Al final pude agregarlo, pero, pero... si entro y trato de editar la página, (paso a htlm) para ver el código, ¡ha desaparecido el del feed!
La página estática es la siguiente: http://aotibas.blogspot.com/p/ofrecimiento-eucaristico.html
y el feed que intento poner es: http://feed.evangelizo.org/reader.php
Tengo seleccionado el evangelio en español.
Como verás, si está visible en el blog. Pero si intento entrar a editar la página, (quiero centrarlo y quitarle los espacios, antes y después de la caja), si entro a la edición, el código de la caja se borra automáticamente.
Opté por dejarlo quedito... porque al menos se ve, pero no me gusta como quedó... Entonces, supongo que como me dijiste, no es el método para hacerlo, al menos correctamente.
Te agradezco tu ayuda y tu dedicación a este blog, super bueno.
Supongo que aotibas y Lorca León sois la misma persona :D, así que contesto de una:
ResponderEliminar1. Debajo del formulario de comentarios, a la derecha del botón "Publicar un comentario", hay un enlace "Suscripción por correo electrónico". Si pinchas en él, cada vez que alguien escriba un comentario en el post correspondiente, te llegará un aviso por correo.
2. En el editor hay dos pestañas, HTML y Redactar. A veces, desde la segunda no se ven ciertas cosas. Dices que desaparece, pero lo cierto es que ahí está, por lo que sospecho que quizás lo estás viendo desde Redactar. Pincha en la otra pestaña y desde ahí seguro que puedes quitar lo que te estorba.
Si es eso lo que ya estás haciendo, entonces quizás el problema sea otro y es que cuando estás editando y pasas de la pestaña HTML a la de Redactar, a veces se pierde código por el camino. La solución es Publicar sin pasar por la pestaña Redactar. No me preguntes por qué, pero el caso es que pasa y que la única forma de evitarlo es esa. Yo al menos no conozco otra.
Este comentario ha sido eliminado por el autor.
ResponderEliminarSí, disculpame el cambio de usuarios. Es lo mismo, pero con este usuario, porque estoy editando el blog en este instante. Hace meses no lo trabajo, voy a intentar tu recomendación. De fijo, estaba pasando de redactar a HTLM como si nada. Voy a pelearme con la edición en HTLM entonces...
ResponderEliminarBendiciones muchas gracias por tu ayuda.