Ya vimos la estructura general (HTML, HEAD-BODY) y ahora seguimos por otras etiquetas que podemos incorporar en la parte de la cabecera. Hasta aquí teníamos...
<HTML>
<HEAD>
<TITLE>Título página</TITLE>
<b:skin><!--[CDATA[/*
Código CSS
]]--></b:skin>
</HEAD>
<BODY>
Contenido
</BODY>
</HTML>
Pero dentro de <head> todavía tienen cabida en esta plataforma algunas cosillas más. Por un lado, se podrían colocar etiquetas META que tienen distintas utilidades. No son en absoluto necesarias, pero sí convenientes mayormente para cuestiones de posicionamiento.
<meta name='title' content='Oloblogger'/>
Aquí es dónde van también los enlaces a hojas de estilo externas caso de que queramos usarlas.
<link href='URL_FICHERO_CSS' type='text/css' />
Y aquí metemos un inciso para en lo posible, rebajar la tensión a la hora de modificar la propia plantilla. La hoja de estilo en cascada es simplemente un documento de texto dónde se incluyen las instrucciones CSS para dar formato al blog y no gestiona en absoluto el contenido, por lo que su modificacion, por muy mal que lo hagamos, nunca podrá destruir nuestras entradas.Así pues, se puede experimentar y trastear el estilo sin problemas, especialmente si usamos Vista Previa antes de Guardar, porque podremos observar casi todos los cambios que hemos producido antes de que sean definitivos. En el peor de los casos, con cargar una nueva plantilla, el peor de los desastres se arregla.
Y repito: las entradas no se pierden por modificar la plantilla. La única manera de hacerlo es pinchando en Suprimir un post. Si aparte de todo lo explicado, tenemos la precaución de tener copias de seguridad de nuestra plantilla, con las dos o tres últimas versiones modificadas por nosotros, siempre podremos volver a la última versión operativa sin mayores problemas.
Como ya se dijo en el anterior post sobre este tema de la estructura, la hoja de estilo en Blogger, a diferencia de otros sitios, va insertada en el propio código, entre etiquetas SKIN. Este es el motivo principal por el que podreis leer en el anterior enlace sobre hojas externas, que no es muy buena idea usarlas en Blogger. Pero ahí queda la referencia para el que lo necesite.
A propósito del estilo, para nuestra propia memoria es bueno introducir comentarios en toda la plantilla pero mientras que en el resto de ella los comentarios van entre <!-- y -->, en la parte CSS los comentarios tienen que ir entre los símbolos /* y */ para que no se interpreten.
/* CABECERA */
#container {
width:817px;
margin:0 auto;
position:relative;
height:252px;
}
#container {
width:817px;
margin:0 auto;
position:relative;
height:252px;
}
Hay un caso especial de comentarios dentro de SKIN, que realmente no son tales. Son las variables de estilo que las plantillas Blogger utilizan y que se ajustan desde Fuentes y Colores, en la pestaña Diseño de nuestro panel de control. En el siguiente trozo podeis ver el aspecto que tienen y en concreto, las de nombre bgcolor (color de fondo principal) y textcolor (color de fuente principal). Para ajustarlas desde aquí, sería suficiente con cambiar el valor de value.
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#000" value="#000000">
<Variable name="textcolor" description="Text Color"
type="color" default="#ccc" value="#cccccc">
...
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#000" value="#000000">
<Variable name="textcolor" description="Text Color"
type="color" default="#ccc" value="#cccccc">
...
En este mismo sitio (head) podemos meter nuestro favicono, ya que a fin de cuentas, esto se logra con etiquetas LINK, igual que ocurre con las hojas de estilo y este es el lugar adecuado para insertar esas etiquetas.
También al principio de la plantilla y siempre dentro de <head>, se pueden poner los SCRIPTS que queramos utilizar en el blog, aunque también se pueden insertar después de dónde termina el CSS (]]--></b:skin>), o lo que el lo mismo, justo antes del cierre </head>. En ambos casos, el script funcionará bien, pero por seguir un poco de orden, lo mejor es que lo insertemos en el último lugar indicado.
<HTML>
<HEAD>
Etiquetas meta
Enlaces a hojas de estilo externas
Enlace favicono
Scripts
<TITLE>Título página</TITLE>
<b:skin><!--[CDATA[/*
Variables de estilo Blogger
Código CSS
]]--></b:skin>
Scripts
</HEAD>
<BODY>
Contenido
</BODY>
</HTML>
Sobre los scripts introducidos directamente en la plantilla, comentar que puede hacerse de dos maneras. Puesto que los scripts son también básicamente ficheros de texto con una serie de instrucciones, una de ellas será hacer una llamada a ese fichero con SRC. La segunda será introduciendo directamente el código en la plantilla. En ambos casos tendremos que utilizar etiquetas SCRIPT para que se interpreten adecuadamente y en el segundo, es conveniente poner unos códigos especiales para que Blogger no los rechace. Respectivamente, tendrían un formato como estos:
<script src='URL_FICHERO_JS' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
CODIGO DEL SCRIPT
//]]>
</script>
//<![CDATA[
CODIGO DEL SCRIPT
//]]>
</script>
Y nos queda el BODY...
¿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...
Y ya van dos, sigo atento
ResponderEliminarUn saludo
Estos posts que en conjunto son un manual resultan muy pero que muy útiles y además escasos.
ResponderEliminarNo se si lo habrás posteado ya pero no estaría mal una recopilación de las variables que usa blogger para el contenido dinámico, o como puñetas lo llamen, porque ¡no veas! para encontrar listado, de dichas variables y su funcionalidad. Me refiero a las variables que contiene el post, la fecha del post,la etiqueta, la cabecera...(las DATA:)
Así si sabemos modificar la estructura, y colocar en ella el contenido dinámico, pues...¡ya está!
Por cierto, no está de más, gracias por ayudarme en el pasado.
Hola Obdemurian
ResponderEliminarNo, no he publicado nada al respecto, pero es porque ya alguien se molestó en hacerlo de una manera, a mi parecer, excelente:
Lista de las etiquetas DATA
Hola, estoy confeccionando un blog y me esta costando un mundo, creo que un burro con tres patas lo haría mejor. Gracias por tu blog y en caso de cualquier consulta te aviso.
ResponderEliminarSimplemente es cuestión de que le dediques tiempo... Unas veces más y otras será menos ;)
ResponderEliminarante todo gracias por ofrecer ayuda,que siempre es necesaria,vereis lo que intento hacer y no me sale es que cuando se pinche en comentarios(en la entrada de la pagina principal)me lleve a la entrada del post donde estan los demas comentarios y no que salga la ventana de insertar comentarios.Osea que te lleve al mismo sitio que cuando se pincha en el titulo del post.¿es posible?
ResponderEliminarsi antes lo pregunto antes lo soluciono,esta es la solucion:en el codigo localizar
ResponderEliminara class='comment-link' expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
eliminarlo y poner esto:a class='comment-link' expr:href='data:post.url + "#comments"'>
ahora cuando se pincha en comentarios me lleva directo a la pagina individual del post y no al formulario de insertar comentarios.
Ok Apofis. Así es como se soluciona eso.
ResponderEliminarDe todas formas, la idea general del enlace a comentarios es que se acceda directamente a estos y por eso viene como viene. Si a otro le viene bien como dices, pues ahí queda.
Gracias por explicarlo para todos.
si es cierto,tengo dos enlaces en la entrada,uno que muestra el formulario y otro que muestra el post individual y los comentarios a la vez.
ResponderEliminarsi teneis curiosidad de ver el blog(es el primero que hago por lo que recomiendo entrar con firefox)esta es la direccion:http:www.manualteca.blogspot.com
Lo he visto más despacio y tienes una errata en el código del enlace que va al post y no a los comentarios del mismo. Debería ser...
ResponderEliminar<a class='comment-link' expr:href='data:post.url'>SIN COMENTARIOS</a>
En primer lugar gracias por ayudarme, que ya lo has hecho. Yo soy de los que copian y pegan porque no tengo mucha idea y ahora me ha surgido un problema que no se como solucionarlo. Te explico:
ResponderEliminarHice el cambio de plantilla por otro diseño que yo he modificado. Me ha costado la vida dejarlo mas o menos como yo quería. Pero hay un detalle que se me escapa de las manos, todas las imágenes agrupadas se pasan al siguiente salto de línea. Es decir, tanto la faviconera en la sidebar como el listado de iconos de directorios que tenia al final del blog se me transforman en una sola columna.
No se por donde meterle mano. He probado borrando parte de código que a mi no me resultaba familiar y no he conseguido nada, lo mismo se resuelve añadiendo en lugar de quitando.
Gracias por todo. Un saludo.
Tuniti, me cuesta adivinar sin poder ver tu blog (no tienes habilitado tu perfil ni pasas enlace).
ResponderEliminarPodría ser que no hubiera ancho suficiente en los bloques dónde tienes las imágenes, pero también podría ser cosa del display:block que a veces llevan y que provoca un salto de línea. Si cada imagen está dentro de un DIV, también se forzará un salto de línea... No sé. Tendría que verlo para intentar descubrir la razón concreta.
¡Fallo mio!
ResponderEliminarSuelo comentar con el nombre y la url de mi blog y en este ocasión no lo hice.
Pero da igual, has acertado sin verlo, era exactamente eso, lo del 'display:block'. Sustituí 'block' por 'inline':
img {
border : none;
display: inline;
Ahora todo está donde yo quería.
Muchísimas gracias por tu ayuda.
¡Sólo he tenido suerte! ;)
ResponderEliminarSaludos
Oloman, gracias por el tiempo que dedicas a explicar, y además de manera tan didáctica, a quienes no sabemos como hacer las cosas.
ResponderEliminarBesitos y Abrazos gordos
Genial explicado! Gracias
ResponderEliminarBuenas Olo
ResponderEliminarSe agradece los tutos que haces, ya que son de mucha ayuda, pero ahora necesito hacerte una pregunta con respecto a las entradas, te cuento, es que puse una plantilla en mi blog, cosa que me gustó esa apariencia, pero como podrás notar http://blogtanteo.blogspot.com/ las entradas aparecen como en un widget (donde dice "content") y yo quiero que aparezcan de forma normal (que se vean la entrada completa donde dice "biography"), ¿Cómo puedo hacer para cambiar de lugar las entradas?
Espero que me puedas ayudar, de antemano gracias
Chelo, la plantilla que elegiste es un poco especial. Lo cierto es que está muy chula, pero precisamente, su originalidad radica en el slide superior (el bloque principal que no utilizas) y en que aparece sólo el título de las entradas en el "content".
ResponderEliminarCambiar esas dos cosas, que parece que es lo que quieres, sería como reconstruir casi por completo la plantilla. Creo que sería mucho mejor en ese caso, que buscaras otra distinta y luego le pusieras esos colores, si eso es lo que te gusta de ella.
Hola, tengo una plantilla pero tiene algo que no me gusta y es que las entradas en la pagina pricipal salen completas, como podria hacer que las entradas fueran mas cortas y hubiera que darle click para ampliar mas la informacion, mi plantilla es esta http://sollelcuerpo.blogspot.com/
ResponderEliminary una con las entradas cortas es esta http://animetebayo.blogspot.com/
pero no me gustarian tan cortos como la ultima , gracias
Dreamare, en este enlace podrás encontrar una solución para eso, aunque hay más sistemas:
ResponderEliminarSumarios automáticos
muchas gracias de nuevo, y disculpa tanta preguntadera, me ha servido mucho la informacion
ResponderEliminarMuy buen tuto esperando mas... a ver si puedes comentar como situar los scripts en cualquier punto de la págin, muchas gracias :)
ResponderEliminarPor cierto felicidades por el blog, lo descubrí no hace mucho y esta genial, muy completo.
Fernando, los scripts deben ir antes de </head>. En otro sitio podrían también funcionar, pero no es lo habitual.
ResponderEliminarHola, quería hacer una pregunta, llevo quebrándome la cabeza para centrar el gadget de Lista de blogs y no se que pasa pero no hay manera. He conseguido centrar las imágenes de la barra lateral derecha, pero con los listados de blog no lo consigo. He localizado el gadget y donde ponía left lo he sustituido por center y nada de nada. No sé si servirá de algo enviar (aquí no se puede) el código html de gadget para ver que anda mal, pero no lo consigo de ninguna de las maneras. Un saludo y gracias.
ResponderEliminarNo entiendo cómo quieres centrar la lista de blogs Delikat Essences. Resulta que ese gadget es en el fondo una lista (li) y las listas son elementos que se adaptan a su contenedor. Se pueden centrar, pero eso hace que las viñetas o los puntos de inicio de cada elemento de la lista, aparezcan desalineados y eso no suele ser muy estético.
ResponderEliminarPerdona Oloman, quizás mi torpeza me hizo explicarme mal. Te pongo el enlace al blog y si te parece luego puedes eliminarlo. Si ves en el margen derecha he puesto provisionalmente una lista de blog. Se trata de otro blog que yo tengo "Fruslerías" y justo debajo de su logo quería que fuese apareciendo la última entrada, pero veo muy feo que el logo queda muy centrado como todas las imágenes que tengo en ese lado, pero luego la última entrada queda muy a la izquierda, no sé, no lo veo estético, seguro qeu es una tontería pero no encuentro donde centrarlo, he mirado el código html y no soy capaz de centrarlo.
ResponderEliminarESte es el link www.delikatessences.com
Muchas gracias por tu ayuda
Vale. Tienes que incluir en la parte CSS...
ResponderEliminar.blog-title {
text-align:center;
margin-bottom:10px;
}
...y con eso centras el título del gadget. Si quieres incluir otros efectos, ese sería el sitio.
Luego haces lo mismo con .item-thumbnail para la miniatura y .item-title para el título de cada post.
Si no va, pruebas añadiendo !important a cada propiedad:
.blog-title {
text-align:center !important;
margin-bottom:10px !important;
}
Suerte ;)
Buenas oloman estoy modificando una plantilla que me baje, me esta quedando bien pero tengo un problema que me trae de cabeza, es el poner disqus como sistema de comentarios, lo he agregado gracias a una entrada de vagabundia, se inserta pero el problema es que no queda del todo bien y me parece que es algo de la plantilla, miralo aqui http://locomosxcaworldenpruebas.blogspot.com/2011/04/bueno-esto-ya-esta.html?utm_source=BP_rand y me dices algo, tambien estoy pensando cambiar de plantilla y aprovechar lo del twitter y el css pero no se como.
ResponderEliminarLocomosxca, prueba añadiendo a #disqus_thread un width:490px; Si no tienes esa ID en tu CSS, la creas.
ResponderEliminarSobre lo de cambiar ahora de plantilla, sería como empezar de cero. Quizás es más fácil adaptar la que tienes cambiando colores y esas cosas.
Hola oloman, mira podrias hacerme un gran favor, tengo un problema con mi plantilla, la barra lateral me tapa una parte del resto del cuerpo y la letra en los post queda mocha, no se que hacer si disminuir el tama;o de la barra laetral o que igual no se como hacerlo mira una imagen donde muestro el error , gracias https://lh3.googleusercontent.com/-u7uUcbNKIhI/TeADMcTVb8I/AAAAAAAAAs0/53hV5HEvl4A/s720/error.jpg
ResponderEliminarPrueba a insertar esta línea en la parte CSS de tu plantilla:
ResponderEliminar.post-body entry-content {
width:620px;
}
El problema es que el ancho está ahora mismo fijado en 666px y eso supera el espacio disponible.
Si tienes forma de cambiar ese ancho desde el diseñador de plantillas, sería lo mejor.
he puesto ese codigo en la parte del css, lo puse en una parte al azar, supongo que no tiene nada que ver el orden, pero sigue igual no hay ningun cambio, el blog tiene una planilla modificada y el dise;ador de plantillas no aplica, por lo tanto sigo con el mismo problema no se donde se ha definido el ancho de 666px para editarlo tampoco.
ResponderEliminarProbé ese código desde la inspección de Chrome y funcionó bien. Prueba a ponerlo al final de todo el CSS por si hubiera otra clase después que lo "chafara". También puedes dejarlo dónde está, pero añadiéndole !important.
ResponderEliminarEspero que alguien pueda ayudarme sobre un asunto. Hará ya unos añitos estuve modificando una plantilla simple basándome en un tutorial de BloggerBuster en el que se hablaba de #outer-wrapper, #header-wrapper,... por lo que estoy viendo estos elementos estructurales no estan presentes en las nuevas plantillas de blogger...estoy en lo cierto? Deberia olvidarme de aquellos tutoriales en que se habla de este tipo de elementos estructurales?
ResponderEliminarObviamente, esto me ocurre porque quiero personalizar una plantilla para un blog nuevo, y claro al acudir a aquella documentación que guardé y buscar dichos elementos en la plantilla no los encuentro por ningun lado.
Si alguien me resolviera esta duda estaria agradecido, porque estamos dando los primeros pasos en el diseño del blog. Gracias!
Pues sí. Las nuevas plantillas usan una estructura bastante compleja y además han cambiado todos los nombres de clases.
EliminarSi quieres modificar mucho la plantilla y sobre todo a nivel estructural, te recomiendo que uses una de las anteriores.
Muchas gracias por contestar tan rapido. Ciertamente lo que quiero es tener un control mayor sobre la estructura del blog...ajustar margenes, paddings y esas historias y por lo que parece la solución que me das es la que estoy recibiendo de todos los sitios en los que he buceado buscando respuesta a esta cuestión. Gracias de nuevo y un abrazo...tienes un blog muy completo y poco a poco seguro que resuelve muchas dudas de las que irán surgiendo...que surgirán :-)
ResponderEliminarNo lo quise decir antes, pero... http://www.oloblogger.com/2010/07/nuevo-disenador-del-demonio.html
EliminarNo hay todavía capítulo 3?? Mira que estaba yo super concentrado y aprendiendo mogollón...
ResponderEliminar¡Ups! Pues la verdad es que no lo recuerdo, pero es posible que no siguiera con esto... lo siento :(
Eliminar