Si entramos a Blogger desde Blogger in draft y hacemos click en Diseño, veremos que se ha agregado una pestaña llamada Diseñador de Plantillas. Esta nueva opción nos abre un editor visual donde podemos seleccionar algunas de las plantillas agregadas al servicio ... oh sí, luego de tres años, Blogger ha agregado nuevas plantillas.Hay cuatro modelos básicos (Simple, Picture Window, Aweasome Inc y Watermark y cada uno de ellos tiene sus propias variantes lo que hace un total de quince alternativas.
Dependiendo del modelo, desde la misma ventana, podemos cambiar los fondos, subiendo una imagen o seleccionando colores de modo individual o general.
A la izquierda, el enlace Diseño permite cambiar la distribución de los distintos elementos seleccionando algunos de los esquemas predefinidos o de modo tradicional, arrastrádolos en la parte inferior. Allí, no pueden agregarse, eliminarse o editarse los elementos, para eso, deberemos ir a Elementos de la página
.
El modo Avanzado funciona de manera similar a lo que ahora podemos hacer desde Fuentes y Coleres; cambiar las fuentes de los textos, los colores, los enlaces, etc pero, han agregado varias opciones extras que no existían, tales como definir los efectos hover para los enlaces, propeidades específicas para gadgets e imágenes e incluso, hay un sector especial que permite agregar definiciones de CSS directamente desde allí. Esos cambios, luego aparecerán en el código de la plantilla.
En todos los casos, podemos ir mirando los cambios con la Vista Previa aunque determinados gadgtes no se mostrarán de manera exacta. Una vez que hayamos terminado, hacemos click en el botón Aplicar al Blog para guardar los cambios.
Blogger sugiere que los diseñadores de plantillas difundan sus diseños via Twitter utilizando el hashtag #newbloggertemplate y prometen agregar más modelos en los próximos días. También advierten que a estas nuevas opciones no podrá accederse desde Internet Explorer 6.
Por lo que he visto, los cambios no sólo son estéticos; hay cambios en el código mismo de las plantillas y ahí es donde debemos tener cuidado.
El primero que se ve es un cambio en el DOCTYPE; hasta ahora, las plantillas tenían esta etiqueta:
Por lo que he visto, los cambios no sólo son estéticos; hay cambios en el código mismo de las plantillas y ahí es donde debemos tener cuidado.
El primero que se ve es un cambio en el DOCTYPE; hasta ahora, las plantillas tenían esta etiqueta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
y ahora, tienen esta otra:
<!DOCTYPE html PUBLIC "null" "null">
Las plantillas, eran estrictas, requerían que se utilzara cierta sintaxis; por ejemplo, debíamos evitar el uso de ciertos caracteres como < > & y reemplazarlos por sus equivalentes < > & lo que hacía bastante engorroso escribir ciertas cosas, sobre todo, si había comillas. Al dejar de ser definidas como estrictas, esas reglas ya no valen y podríamos escribir algo así, sin que se muestre un error:
<script> var cualquiera = "<p>HOLA</p>"; </script>
Pero, ese cambio también tiene consecuencias extras en la parte gráfica; ciertos márgenes y paddings establecidos por defecto ya no se aplicarán así que, si bien podemos cambiar el DOCTYPE de nuestro blog y la etiqueta HTML que define las nuevas funcionalidades en una plantilla "normal", habrá que hacerlo con prudencia y verificar si no son necesarios otras modificaciones. Sugiero que eso se haga siempre en un blog de pruebas para evitar dolores de cabeza o suicidios virtuales.
Dentro de <b:skin> tambien veremos cambios. Primero que nada, una etiqueta que parece un contenedor que agrupa las definiciones de estilo seleccionadas en el nuevo editor:
Dentro de <b:skin> tambien veremos cambios. Primero que nada, una etiqueta que parece un contenedor que agrupa las definiciones de estilo seleccionadas en el nuevo editor:
<Group description="Links" selector=".main-outer"> ....... </Group>
Por supuesto, al haber nuevas posibilidades, se agregan nuevos nombres de variables que podemos utilzar o no: $body.font, $widget.title.font, etc.
Luego, aparece una nueva etiqueta <b:template-skin> </b:template-skin> que aparenta agrupar las definiciones de estilo que controlan los anchos de los conenedores principales. Por ejemplo:
Luego, aparece una nueva etiqueta <b:template-skin> </b:template-skin> que aparenta agrupar las definiciones de estilo que controlan los anchos de los conenedores principales. Por ejemplo:
<b:variable default='930px' name='content.width' type='length'/>
body { min-width: $(content.width); }¿Por qué separado del resto? No lo sé.
El header de los blogs es igual que antes pero, ahora, está dentro de otra etiqueta especial: <header> </header>
Más etiquetas raras que habrá que investigar: aside, macro ... debe haber más pero ya me perdí.
El header de los blogs es igual que antes pero, ahora, está dentro de otra etiqueta especial: <header> </header>
Más etiquetas raras que habrá que investigar: aside, macro ... debe haber más pero ya me perdí.
REFERENCIAS:Blogger in draft
46 comentarios:
Lo que tiene de "interesante" las nuevas funciones en Draft, que en las plantillas que fueron armadas paso a paso; en todas las opciones tanto en "fondo" y "diseño", me da el mensaje: "esta plantilla no permite personalizar el diseño". :O
..a mano..
sigo participando :D
Muy interesante las nuevas funciones, habrá que testearlas en un blog de pruebas a ver que tal :D
Gracias por compartir la info, JMiur!
Saludos.
Argifauve: Eso depende del modelo; no todas admiten las mismas opciones; las que no lo hacen, deben deditarse a mano, desde el código mismo.
Mucho pero mucho cuidado con esto. Usar sólo en blogs de pruebas. Primero que nada, porque está en modo Draft y eso significa que podrá cambiar y segundo, porque hay declaraciones como el DOCTYPE que son muy pero muy dudosas.
Erwin, veremos de qué se trata y si es posible entenderlo; apparentemente, todos esos códigos sólo son de uso interno y no afectan nada más pero, habrá que ver. Así, a simple vista, las que vi, tienen códigos bastante confusos.
Son iteresantes, Pepiche; veremos como responden y lo que decis es cierto, siempre hay que probar en otro blog. Por las dudas :D
Con el dolor de cabeza que me hizo pasar, ni intento :D en el blog, quizás en uno de pruebas.
Buen viernes!
Que buenooooo, por lo que vi en el videito es maravilloso el resultado. Habrá que practicar... me parece que tengo que clonarme para abarcar todo esto.... es impresionante lo que cambia todo... y como abarcar todos los temas... y yo que todavia estoy tratando de poner una galería de Imágenes!!!!!!
JMiur, leo todos sus post o entradas, la verdad todavía la mayoria no las entiendo... pero las leo, algún día las entenderé, pero las leo.
Gracias
Coincidimos en la recomendación, mucha pero que mucha prudencia.
Estan usando HTML5 para las nuevas plantillas :O
Por eso los nuevos elementos como header, y el cambio en el DOCTYPE.
Hola Vagabundi xD, hay algun metodo que cuando haga algo en el editor de plantillas no me vuelva a poner un cabezera arriba..?
Ahh, sí, para jugar un rato en uno de pruebas está buenísimo: ¿cómo se vería mi blog si...? :P
Slds.
Yo insisto en que hay que tener mucho cuidado. Es cierto que hay HTML5 pero también es cierto que no todos los navegadores lo interpretan correctamente y que hay scripts que no funcionarán porque el DOCTYPE es inadecuado. Lo mismo ocurrirá con el CSS.
Sería bueno que Blogger explicara todo esto porque ya, a sólo unas horas de haber salido esto; hay preguntas sobre problemas generados al cambiar la plantilla.
Sean prudentes.
Miguel: No entiendo la pregunta ¿a qué te refieres?
Otra cosa interesante J.Miur..
en el blog de pruebas tengo la misma plantilla, por tanto el mismo mensaje...
a mano a mano...
tallarlo a mano... prefiero 100 veces equivocarme en un enlace :o o "algo" :O pero lo recupero... :D
intuyo que los cambios que se puedan producir en otras plantillas puedan ser irrecuperables (copia de plantilla, copia de seguridad a parte de hacerlo en un blog de pruebas)
Estoy leyendo los comentarios y no entiendo significa que no se va ver en todos los navegadores o que ???
Qué tal,
Después de haberle dedicado el día de hoy más de 8 horas contínuas a mi blog, parece que ha quedado liberado del código malicioso que estaba instalado. Ya no supe ni a qué widget de debió, pero lo más seguro, es que haya sido FEEDJIT. Aún así, te solicito de la manera más atenta, me puedas revisar el blog usando Internet Explorer 8 con Windows Vista.
http://joseluisavilaherrera.blogspot.com/
Gracias.
P.D. te acabo de agregar en mi sidebar en el apartado "AYUDA PARA TU BLOG" junto con Gem@.
Argifauve:
La verdad, no lo sé. Es mu ypronto para decir algo y además, si está en modo pruebas, es mejor tomarlo con cuidado.
La hormiguita:
No, lo que significa es que ... no sé; dependerá de muchas cosas y es seguro que hay scripts que no funcioanarán. Por ejemplo, IE no soporta bien HTML5 y el resto de los navegadores hace lo que puede con diferencias entre si. Todo es demasaido nuevo para dar opiniones, creo que lo razonable es ser muy pero muy prudentes.
Banco de Imágenes Gratuitas:
Me alegro que se solucionara; gracias por el agregado
No uso Vista pero, en realidad, el sistema operatico de Windows poco debería influir en el tema; más que nada, es un problema del navegador y de algún script o incompatibilidades entre scripts.
Para tu tranquilidad, ahora se ve perfecto , tanto en IE7 como en IE8.
Muy bueno todo esto. Creo que la recomendación final es esperar a que deje de estar en periodo de prueba e ir conociéndolo poco a poco. No hay apuros =)
Saludos
Tengo una Pregunta Vagabundi , ¿Como puedo hacer que los php de ByeHost sean publicos y no pidan contraseña?
Hola, estoy utilizando las nuevas plantillas para un nueo blog y de momento todo marcha bien. Pero me gustaria eliminar o al menos reducir la linea del footer:
Plantilla Simple de Josh Peterson. Con la tecnología de Blogger
Moises: No, no hay apuros :D
Miguel: Tal como te contesté por mail, eso lo controlas desde el panel del hosting estableciendo los permisos correspondientes. No es mucho más lo que puedo agregar.
Isaac Chavero: ¿A cuál línea te refieres? El footer parece tener varias cosas incluidas. Tambien veo que Blogger agrega propiedades que no se ven en la plantilla; por ejemplo:
.widget {
line-height:1.4;
margin:30px 0;
}
que crea márgenes en cada elemento aún cuando estos no tengan contendido .
Esta forma de montar el blog "a tu gusto" me recuerda al sistema que implantó Live spaces hace unos 4 años. Podíamos "personalizar" nuestros blogs, pero siempre basándonos en sus directrices. Claro que allí no teníamos acceso al código fuente y no había forma de cambiar nada que no fuese lo que ellos nos ofrecían.
Ya tengo con que jugar un ratito, jeje.
Saludos.
Me dio la misma impresión, Eulalia. Es interesante pero ... a mi no me convencen estas cosas :D
Hice una ..... me salió un cambalache, estuve horas y al final quedo horrible jajajajajaja, tanto fondo para nada, si lo hago transparente no se lee lo que escribo y si no lo hago transparente en un monitor de 1024x768 , se ven dos tiritas???? así que mucho no sirve... tanto fondo, después mire la plantilla a ver si se podía achicar(Esta es mucho mas ancha que la mínima) y no se entiende mucho esta todo en porcentaje, no en px, lo que más me gusto es la parte de diseño en donde puedo optar si una sidebar o dos y más gadget.Gracias
Sí, es verdad, tienen un código bastante confuso. No son simples de modificar, me da la impresión que están hechas para eso, para seleccionar dentro de las opciones y no tocarlas más.
Hola, instale la Picture Window y tengo problemas con el boton de ir arriba que tenía instalado, tienes idea de como solucionarlo?
Eso va a ocurrir. Habría que verlo online para saber si puede solucionarse o no.
Lo que me paso a mi fue al eliminar la navbar quedo un espacio en blanco en la parte superior
Quita tambien la propiedad position:absolute; de esta parte:
.body-fauxcolumns {
........
}
Yo tengo dos blogs y los he cambiado ya a las nuevas plantillas, en algunos ordenadores no se ven bien, les falta el fondo grisaceo que sale por detrás de las entradas, pero bueno no entiendo mucho, por lo demás bastante fácil y cómodo de manejar.
Podéis decirme como lo veis, un saludo y muchas gracias de antemano.
Se me ha olvidado las webs son www.miperro10.com y www.bordercolliesbs.com ambas tienen el mismo tipo de plantilla, un saludo
Buen día!!! Como le conté estoy estudiando Joomla y en clase para los que quieren hacer su propia plantilla se nombra un programa que se llama "Artisteer" es pago algo de dólares 70 y parece muy bueno , pero cual es la sorpresa!! " Que hace plantillas para todos, inclusive Blogger, Worspress, Drupal y joomla.... que maravilla." Lo que se descubre :)
No lo conocía. Miraré de que se trata :D
Hola de nuevo, tengo una nueva consulta, esta vez con las plantillas nuevas de blogger.
En el gadget de las pestañas, se puede agregar otro link que no sea de las paginas? Como?
Mi ejemplo: www.pipistrella.com.ar
en las pestañas aparecen asi:
Comics|Wallpapers|Autores|Galeria de amigos
Cada una dirige a una pagina y me gustaria, por ejemplo que diga
Comics|Wallpapers|Autores|Galeria de amigos|Contacto
Siendo "Contacto" un enlace a mailto:xxxxxxx@mimail.com (o sumar otros enlaces que no sean los creados por las paginas ---> /p/xxxxxx.html)
Intente con armar una lista de enlaces y reemplazar un gadget por otro, pero algunas propiedades y formas se pierden.
Tiene solucion?
Gracias, de nuevo!!!
Fijate en esta entrada de Rosa.
Hola!!! Mi duda es la siguiente: coloquè una de estas plantillas nuevas en mi blog, pero resulta, que el fondo de los post me quedan de color blanco y dado que son exclusivamente imàgenes lo que coloco en èl, el blanco u otro color no es apropiado. Quiero saber si se puede poner transparente, ya toquè todo y no obtengo resultado.
En el caso de que se pueda poner el fondo de los post transparente, me gustaria saber como se hace , si no es mucha molestia pedirles eso.
Un saludo y a mi me es muy ùtil la informaciòn que ponen aqui.
No sé cuñál es tu blog así que no puedo decirte qué hacer.
Te dejo aqui cual es mi blog
http://elbauldearrancaflores.blogspot.com/
Disculpa si no tenia que ponerlo asi, pero no se otra manera de hacerlo. Graciass!!!
Arrancaflores:
El fondo de los posts no lo veo blanco sino de un color rosa más claro que el resto del blog, es una imagen de fondo.
Lo único que veo blanco es el borde que hace de marco alrededor de las imágenes. Si es eso, deebrías eliminar esto que está acá:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
.....................
background: #FFFFFF;
}
Graciassss, sos un genio!!!
Borré eso que me dijiste y quedó como yo queria.
Un fuerte abrazo y gracias por tu ayuda.
Genial, Arrancaflores. Me alegra que se resolviera :-)
Hola, no sé si te lo habrán preguntado ya (si es así disculpa) pero me preguntaba si anteriores ediciones, como las entradas relacionadas en la página de cada entrada, en el footer, siguen siendo válidas para estas plantillas o habría que hacerlo de otro modo.
Lo digo porque intenté aplicar el proceso que explicabas sobre ello (las entradas relacionadas) con la nueva plantilla Simple y no hay manera (no localizo nada del código que mencionas, y sí lo hacía en Minima).
Un saludo.
Sí. Cualquiera de los trucos sigue funcionando pero, como pasa con cualquier plantilla, hay que localizar los lugares donde ubicar las cosas. Los códigos de Blogger no se han modificado pero, las plantillas pueden tener DIVs diferentes. Cada plantilla es diferente.
Hola, llevo tiempo usando una plantilla de las nuevas la cual he modificado pero tengo un problema, y es que no se como eliminar el margen izquierdo de la sidebar para ajustarla.
Mi url es enformacon.com
Un saludo y me encanta Vagabundia.
En esas nuevas plantillas todo se complica; tal vez cambiando el margen acá:
.main-inner .column-left-outer {
margin-left: -260px;
right: 100%;
width: 260px;
}
Además, tiene una serie de propiedades que agregan paddings diversos:
.section {
margin: 0 15px;
}
.main-inner .column-center-inner, .main-inner .column-left-inner, .main-inner .column-right-inner {
padding: 0 15px;
}
Hola! reduci el margen izquierdo de la columna como lo explicaste pero ahora me quedo mucho espacio entre el sidebar y el cuerpo del blog. como lo resuelvo?
No recuerdo de qué se trataba, Luli.
Para reducir el margen izquierdo de la sidebar cambié esto:
.main-inner .column-left-outer {
margin-left: -260px;
right: 100%;
width: 260px;
}
por esto:
.main-inner .column-left-outer {
margin-left: -260px;
right: 115%;
width: 260px;
}
Saludos
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...