JMiur [E]

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:
<!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 &lt; &gt; &amp; 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:
<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:
<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í.

REFERENCIAS:Blogger in draft

47 comentarios:

Argi  

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

Responder
Unknown  

Esperamos maestro que reveles para q sirven esas nuevas etiquetas! Saludos!

Responder
Esteban  

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.

Responder
JMiur  

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.

Responder
JMiur  

Son iteresantes, Pepiche; veremos como responden y lo que decis es cierto, siempre hay que probar en otro blog. Por las dudas :D

Responder
Unknown  

Con el dolor de cabeza que me hizo pasar, ni intento :D en el blog, quizás en uno de pruebas.
Buen viernes!

Responder
La hormiguita  

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

Responder
Gem@  

Coincidimos en la recomendación, mucha pero que mucha prudencia.

Responder
SebaContreras  

Estan usando HTML5 para las nuevas plantillas :O
Por eso los nuevos elementos como header, y el cambio en el DOCTYPE.

Responder
Unknown  

Hola Vagabundi xD, hay algun metodo que cuando haga algo en el editor de plantillas no me vuelva a poner un cabezera arriba..?

Responder
Anahí  

Ahh, sí, para jugar un rato en uno de pruebas está buenísimo: ¿cómo se vería mi blog si...? :P
Slds.

Responder
JMiur  

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?

Responder
Argi  

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)

Responder
La hormiguita  

Estoy leyendo los comentarios y no entiendo significa que no se va ver en todos los navegadores o que ???

Responder
José Luis Avila Herrera  

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@.

Responder
JMiur  

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.

Responder
Moises Vivas  

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

Responder
Unknown  

Tengo una Pregunta Vagabundi , ¿Como puedo hacer que los php de ByeHost sean publicos y no pidan contraseña?

Responder
Isaac Chavero  

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

Responder
JMiur  

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 .

Responder
laeulalia  

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.

Responder
JMiur  

Me dio la misma impresión, Eulalia. Es interesante pero ... a mi no me convencen estas cosas :D

Responder
La hormiguita  

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

Responder
JMiur  

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.

Responder
Nico Dipaolo  

Hola, instale la Picture Window y tengo problemas con el boton de ir arriba que tenía instalado, tienes idea de como solucionarlo?

Responder
JMiur  

Eso va a ocurrir. Habría que verlo online para saber si puede solucionarse o no.

Responder
Tekarin  

Lo que me paso a mi fue al eliminar la navbar quedo un espacio en blanco en la parte superior

Responder
JMiur  

Quita tambien la propiedad position:absolute; de esta parte:
.body-fauxcolumns {
........
}

Responder
Unknown  

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.

Responder
Unknown  

Se me ha olvidado las webs son www.miperro10.com y www.bordercolliesbs.com ambas tienen el mismo tipo de plantilla, un saludo

Responder
La hormiguita  

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 :)

Responder
JMiur  

No lo conocía. Miraré de que se trata :D

Responder
F!X  

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!!!

Responder
JMiur  

Fijate en esta entrada de Rosa.

Responder
Arrancaflores  

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.

Responder
JMiur  

No sé cuñál es tu blog así que no puedo decirte qué hacer.

Responder
Arrancaflores  

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!!!

Responder
JMiur  

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;
}

Responder
Arrancaflores  

Graciassss, sos un genio!!!
Borré eso que me dijiste y quedó como yo queria.
Un fuerte abrazo y gracias por tu ayuda.

Responder
JMiur  

Genial, Arrancaflores. Me alegra que se resolviera :-)

Responder
Javier  

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.

Responder
JMiur  

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.

Responder
Daniel  

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.

Responder
JMiur  

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;
}

Responder
Luli  

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?

Responder
JMiur  

No recuerdo de qué se trataba, Luli.

Responder
Maria Elena Garcia Guanaguanay  

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

Responder

¿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 ...

 
CERRAR