Blogger Fenix: el formulario de comentarios |
Sin más trámite, vamos con el formulario de comentarios.
Para esto, lo primero que debemos hacer es habilitar la opción correspondiente ingresando a nuestro blog a través de Blogger Draft. Allí, en Configuración | Comentarios, podemos ver esto:
Para esto, lo primero que debemos hacer es habilitar la opción correspondiente ingresando a nuestro blog a través de Blogger Draft. Allí, en Configuración | Comentarios, podemos ver esto:
Marcamos entonces Entrada incrustada y guardamos.
De ahora en adelante, podemos seguir trabajando en Blogger Draft o en Blogger "normal", es indistinto.
Con cualquier plantilla nueva, el resultado será instantáneo; el problema surge con las plantillas que ya tenemos. En ese caso, necesitamos agregar los códigos correspondientes y, en principio, no hay que deshabilitar ningún otro hack realizado.
Vamos a Diseño de la plantilla | Edición HTML, y expandimos los artilugios. Hay dos códigos que debemos insertar; el primero lo podemos poner en cualquier parte justo antes de una instrucción </b:includable>. Par seguir el mismo esquema que usa Blogger, podríamos ubicarlo así:
De ahora en adelante, podemos seguir trabajando en Blogger Draft o en Blogger "normal", es indistinto.
Con cualquier plantilla nueva, el resultado será instantáneo; el problema surge con las plantillas que ya tenemos. En ese caso, necesitamos agregar los códigos correspondientes y, en principio, no hay que deshabilitar ningún otro hack realizado.
Vamos a Diseño de la plantilla | Edición HTML, y expandimos los artilugios. Hay dos códigos que debemos insertar; el primero lo podemos poner en cualquier parte justo antes de una instrucción </b:includable>. Par seguir el mismo esquema que usa Blogger, podríamos ubicarlo así:
.......
<:/b:includable>
[... aquí insertamos el código ...]
<:b:includable id='backlinkDeleteIcon' var='backlink'>
.......En esa parte, lo que debemos insertar es lo siguiente:
<b:includable id='comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <h3><data:postCommentMsg/></h3> <p><data:blogCommentMessage/></p> <iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/> </div> </b:includable>
Ahora la segunda parte; para eso debemos buscar algo así:
<p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:postCommentMsg/> </a> </p>
Y lo reemplazamos por esto:
<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:postCommentMsg/> </a> </b:if> </b:if> </p>
Eso, sería todo. Si guardamos la plantilla debería funcionar sin problemas y adaptarse al color de fondo del blog.
<$BlogItemCreate$>
Un detalle fundamental es que ese formulario no es un agregado común, es un <iframe> con todo lo que eso significa, un elemento externo a nuestra página que Blogger sigue controlando y al que no será sencillo personalizar.
Los botones son lo que son, el área de textos es lo que es; nada de esto es modificable aunque hay ciertos detalles que podemos mejorar. Estas son las clases CSS que son accesibles y los valores que estoy usando en este blog:
- El formulario trabaja con cuentas de Google, OpenID, nombre/URL y anónimos; es decir, con los mismos modos que el formulario común.
- Si tenemos un mensaje personalizado en el formulario se verá igual y se integrará al nuevo modelo.
- Si utilizamos la verificación de palabras se mostrará en una pequeña caja de diálogo.
- Por el momento, el seguimiento via mail de los comentarios no está habilitado.
<$BlogItemCreate$>
Un detalle fundamental es que ese formulario no es un agregado común, es un <iframe> con todo lo que eso significa, un elemento externo a nuestra página que Blogger sigue controlando y al que no será sencillo personalizar.
Los botones son lo que son, el área de textos es lo que es; nada de esto es modificable aunque hay ciertos detalles que podemos mejorar. Estas son las clases CSS que son accesibles y los valores que estoy usando en este blog:
.comment-form { /* este el rectángulo general */
margin: 0 auto; /* lo centro en el área de posts */
width: 400px; /* le doy un ancho para poder centrarlo */
}
.comment-form h3 { /* este es el título que por defecto es "Publicar un comentario" */
[... propiedades del texto ...]
}
.comment-form p { /* este es el mensaje personalizado */
[... propiedades del texto ...]
}
#comment-editor { /* es el IFRAME */
height: 200px; /* le doy un alto menor */
width: 400px; /* le doy un ancho menor, por defecto es el 100% */
}Los enlaces a usar son los que están definidos o los podemos cambiar para que nos dirijan a diferentes posiciones del post. En la plantilla, este es un enlace al inicio de las entradas individuales:
<a expr:href='data:post.url'> ENLACE </a>
Este, es un enlace al formulario de comentarios:
<a expr:href='data:post.addCommentUrl'> ENLACE </a>
Este, es un enlace al inicio de los comentarios:
<a class='comment-link' expr:href='data:post.url + "#comments"'> ENLACE </a>
<a expr:href='data:post.url'> ENLACE </a>
Este, es un enlace al formulario de comentarios:
<a expr:href='data:post.addCommentUrl'> ENLACE </a>
Este, es un enlace al inicio de los comentarios:
<a class='comment-link' expr:href='data:post.url + "#comments"'> ENLACE </a>
Por ahora, disfrutemos lo que hay y en un par de días reiniciaremos las quejas.
Blogger Fenix: el rating de estrellitas |
Implementar la nueva opción para califica posts es simple si ya disponemos del código en nuestra plantilla. Sólo hay que editar el elemento Blog y allí marcar la casilla correspondiente.
De esa manera, aparecerá debajo de cada post con el color de fondo que tengamos establecido.
¿Y cómo sabemos si tenemos el código? Hay que buscar esto:
¿Y cómo sabemos si tenemos el código? Hay que buscar esto:
<span class='star-ratings'>
que es el inicio. Si está, seguramente está el resto. Si no está, lo podemos agregar manualmente.
Tiene dos partes. Para la primera debemos buscar esto:
Tiene dos partes. Para la primera debemos buscar esto:
<b:includable id='main' var='top'> ....... <b:include name='feedLinks'/> [ ... aquí insertaremos el código ...] </b:includable>
El código que debemos pegar es este:
<!-- RANKING -->
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>Ahora, falta la segunda parte que colocaremos donde nos gustaría que apareciera. Por defecto, se ubica en alguno de estos bloques del footer de los posts. No es sencillo mostrar exactamente donde pero, supongamos que es donde está el autor o las etiquetas. Buscamos ese bloque y lo ponemos al final:
<p class='post-footer-line post-footer-line-1'> ...... [ ... aquí insertaremos el código ...] </p>
El código a insertar es el siguiente:
<span class='star-ratings'> <b:if cond='data:top.showStars'> <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'> </div> </b:if> </span>
Este elemento nuevo tiene algunos problemas que cada uno evaluará. Para empezar es lento, demorará en cargarse. El segundo problema es que es difícil de personalizar aunque hay algunas cosas que podemos hacer:
g:width='180' es el ancho
g:height='42' es la altura
g:background-color='data:backgroundColor' es el color de fondo
g:text-color='data:textColor' es el color del texto.
También podemos la clase star-ratings que no tiene propiedades o bien colocarlas directamente.
g:width='180' es el ancho
g:height='42' es la altura
g:background-color='data:backgroundColor' es el color de fondo
g:text-color='data:textColor' es el color del texto.
También podemos la clase star-ratings que no tiene propiedades o bien colocarlas directamente.
<span class='star-ratings'>
por:
<span class='star-ratings' style='display: block; background-color: #343F4A; margin: 30px 20px; padding: 10px; text-align: center;'>
Blogger Fenix: herramientas varias |
La integración de las Herramientas para Webmaster de Google a Blogger es sencilla, sólo debemos ir al escritorio y allí, abajo de todo, hacer click en el enlace que nos guiará en el proceso.
Otro detalle que no deja de ser importante es la posibilidad de Exportar e Importar blogs. Ya cuando creamos uno nuevo nos aparece la opción correspondiente:
Pero también podemos hacerlo desde los blogs que tenemos. Tenemos que ir a Configuración y en la primera sola aparecerán las opciones:
Hacemos click en exportar para crear un backup y nos advierten que lo podemos hacer ya sea para mover el blog a otro servicio o para guardarlo en nuestra PC (más información). Eso es todo, se descargará una archivo XML que contendrá los posts y los comentarios y cuyo tamaño dependerá de lo que tengamos publicado.
Blogger Fenix: el nuevo editor |
Tal vez estoy empezando por lo más sencillo y dejo lo más complicado para más tarde.
También Alejandro de SpamLoco ha estado jugando y ya ha puesto el nuevo modelo de comentarios en su blog
Aquí van algunas capturas de pantalla del nuevo editor y algo de lo que he visto que han incorporado:
El nuevo diseño del Editor de posts de Blogger
La nueva forma de previsualizar las entradas
La nueva ventana para establecer enlaces
Cuando se agrega una imagen, la ventana cambia significativamente y nos mostrará una miniatura. Un vez agregada, desde el editor, podemos arrastrarla para reubicarla, redimensionarla o eliminarla (en Firefox 3 hay que hacer doble click sobre la imagen).
También Alejandro de SpamLoco ha estado jugando y ya ha puesto el nuevo modelo de comentarios en su blog
Aquí van algunas capturas de pantalla del nuevo editor y algo de lo que he visto que han incorporado:
El nuevo diseño del Editor de posts de Blogger
La nueva forma de previsualizar las entradas
La nueva ventana para establecer enlaces
Cuando se agrega una imagen, la ventana cambia significativamente
y nos mostrará una miniatura. Un vez agregada, desde el editor, podemos arrastrarla para reubicarla, redimensionarla o eliminarla (en Firefox 3 hay que hacer doble click sobre la imagen).
En las Opciones aparece lo de siempre, la fecha y hora de la entrada, las distintas posibilidades para definir los comentarios de los posts individuales, etc.Se ha agregado la Configuración para editar HTML que antes estaba en las opciones generales del blog con lo que podemos establecer cómo trabajar cada entrada:
<b>algo en negrita</b> lo que veremos será algo en negrita
marcando la primera opción, podemos escribir código y este será tomado como tal es decir, si escribimos:
<b>algo en negrita</b> lo que veremos será <b>algo en negrita</b>
así podemos combinar códigos y previsualización sin tener que permutar entre Redactar y Edición HTML.
Temporalmente, en ese editor, el modo Autosave está deshabilitado y algunas funciones no funcionan en ciertos navegadores pero recuerden que se trata de un editor en desarrollo.
- Convertir saltos de línea a <br>
- Ignorar saltos de línea
- Interpretar HTML escrito
- Mostrar HTML literalmente
<b>algo en negrita</b> lo que veremos será algo en negrita
marcando la primera opción, podemos escribir código y este será tomado como tal es decir, si escribimos:
<b>algo en negrita</b> lo que veremos será <b>algo en negrita</b>
así podemos combinar códigos y previsualización sin tener que permutar entre Redactar y Edición HTML.
Temporalmente, en ese editor, el modo Autosave está deshabilitado y algunas funciones no funcionan en ciertos navegadores pero recuerden que se trata de un editor en desarrollo.
Y un dia se despertaron ... |
No se si será la noticia del año pero ... anda cerca.
Blogger in Draft dice hace minutos en su actualización mensual (traduzco como puedo)
Blogger in Draft dice hace minutos en su actualización mensual (traduzco como puedo)
- Se ha introducido la Webmaster Tools Verification: una herramienta que se integra automáticamente a Google’s Webmaster Tools (más información)
- Se ha implementado un sistema de rankings para calificar posts (Star ratings 0/5) que se puede colocar debajo de cada post (más información)
- Se ha agregado la posibilidad de importar o exportar el contenido de los blogs esto es, hacer un backup de posts y comentarios (más información)
- Se ha cambiado el editor de posts para permitir insertar imágens con drag-and-drop, etc (más información)
Pero la frutilla del postre dice han agregado la posibilidad de Embedded comment form es decir, que "debido a la increibe demanda popular":
se podrá poner el formulario de comentarios dentro del mismo post
No, no pregunten nada más, hay que leer las instrucciones y ver cómo hacerlo pero, todas las opciones están disponibles entrando con nuestra cuenta en Blogger Draft.
Evidentemente, las próximas semanas serán agitadas.
Evidentemente, las próximas semanas serán agitadas.
Las barras de desplazamiento (sólo en IE) |
Si bien no creo en los estándares absolutos ni me preocupan cosas como la validación de las páginas o las reglas rígidas de la W3C, creo que debemos intentar que nuestro sitio se vea lo mejor posible sin importar el navegador o el sistema operativo que utilicen los visitantes. Claro, eso no siempre es posible pero, hay que intentarlo.
Es por eso que no me gusta utilizar códigos que sólo funcionen en ciertos navegadores, ni los de IE ni los de Firefox y lo cierto, es que ambos los tienen. Incomprensiblemente, algunos de ellos podrían ser aplicados genéricamente pero, la guerra es la guerra.
Pero, una cosa es lo que yo pienso y otra lo que piensan los demás así que, como hay muchas preguntas sobre ciertos códigos o propiedades que no son genéricas sino exclusivas, este sería el primero de una serie de post para explicar algunas de las más comunes.
En Internet Explorer las barras de desplazamiento pueden ser personalizadas utilizando CSS. Por defecto, tienen un estilo que es establecido por el tema que usemos pero podemos modificarlas tanto de manera general (para toda la página) o para determinado elemento (por ejemplo, un textarea).
Es por eso que no me gusta utilizar códigos que sólo funcionen en ciertos navegadores, ni los de IE ni los de Firefox y lo cierto, es que ambos los tienen. Incomprensiblemente, algunos de ellos podrían ser aplicados genéricamente pero, la guerra es la guerra.
Pero, una cosa es lo que yo pienso y otra lo que piensan los demás así que, como hay muchas preguntas sobre ciertos códigos o propiedades que no son genéricas sino exclusivas, este sería el primero de una serie de post para explicar algunas de las más comunes.
En Internet Explorer las barras de desplazamiento pueden ser personalizadas utilizando CSS. Por defecto, tienen un estilo que es establecido por el tema que usemos pero podemos modificarlas tanto de manera general (para toda la página) o para determinado elemento (por ejemplo, un textarea).
Click para ver ejemplos (sólo Internet Explorer)
| scrollbar-3dlight-color: #FFEEDD; scrollbar-arrow-color: navy; scrollbar-base-color: #FFFFF0; scrollbar-darkshadow-color: #FF9966; scrollbar-face-color: gold; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #000000; | |
| scrollbar-highlight-color: darkgray; scrollbar-arrow-color: #DAA520; scrollbar-base-color: gray; scrollbar-darkshadow-color: gray; scrollbar-track-color: gray; | |
| scrollbar-3dlight-color: #00FF00; scrollbar-arrow-color: #00FF00; scrollbar-darkshadow-color: #000000; scrollbar-face-color: #000000; scrollbar-highlight-color: #00FF00; scrollbar-shadow-color: #00CC00; scrollbar-track-color: #00CC00; | |
| scrollbar-3dlight-color: #F7F9FB; scrollbar-arrow-color: #70737B; scrollbar-darkshadow-color: #F7F9FB; scrollbar-highlight-color: #70737B; scrollbar-face-color: #F7F9FB; scrollbar-shadow-color: #70737B; scrollbar-track-color: #F7F9FB; | |
| scrollbar-3dlight-color: #101214; scrollbar-arrow-color: #000000; scrollbar-darkshadow-color: #101214; scrollbar-face-color: #7E898B; scrollbar-highlight-color: #C3C8C9; scrollbar-shadow-color: #7E898B; scrollbar-track-color: #101214; | |
Hay ocho propiedades que controlan las barras, cada una de ella define el color de una parte.
- scrollbar-3dlight-color y scrollbar-highlight-color son el ángulo superior izquierdo de los botones, generalmente los más claros
- scrollbar-darkshadow-color y scrollbar-shadow-color son el ángulo inferior derecho de los botones, generalmente los más oscuros
- scrollbar-arrow-color es el color de las flechas de desplazamiento
- scrollbar-base-color es el color general (las demás quedan al tono)
- scrollbar-face-color es el color de los botones
- scrollbar-track-color es el color de la base de deslizamiento
Las propiedades las podemos agregar a nuestra hoja de estilo o utiliza el atributo STYLE; del mismo modo que el resto de las propiedades CSS, podemos acceder a ellas usando JavaScript, en este caso, las variables asignadas a cada atributo son las siguientes:
scrollbar3dLightColor = scrollbar-3dlight-color
scrollbarHighLightColor = scrollbar-highlight-color
scrollbarDarkShadowColor = scrollbar-darkshadow-color
scrollbarShadowColor = scrollbar-shadow-color
scrollbarArrowColor = scrollbar-arrow-color
scrollbarBaseColor = scrollbar-base-color
scrollbarFaceColor = scrollbar-face-color
scrollbarTrackColor = scrollbar-track-color
scrollbar3dLightColor = scrollbar-3dlight-color
scrollbarHighLightColor = scrollbar-highlight-color
scrollbarDarkShadowColor = scrollbar-darkshadow-color
scrollbarShadowColor = scrollbar-shadow-color
scrollbarArrowColor = scrollbar-arrow-color
scrollbarBaseColor = scrollbar-base-color
scrollbarFaceColor = scrollbar-face-color
scrollbarTrackColor = scrollbar-track-color
Lograr una combinación de colores adecuada suele ser complejo pero, hay una forma sencilla de hacerlo, establecer sólo la propiedad scrollbar-base-color ya que funciona como "combinador" del resto de los atributos.
| rojo amarillo verde azul |
Este es un pequeño ejemplo donde se pueden experimentar las posibilidades que ofrecen estas propiedades. Seleccionando los colores para cada una de ellas, el botón MOSTRAR hará que se vea el ejemplo concreto en el textarea y se escribirá el código necesario a incluir en el estilo.
NOTA: Como sólo es una demostración, colocando un valor no admitido generará un error que habrá que ignorar y corregir.
NOTA: Como sólo es una demostración, colocando un valor no admitido generará un error que habrá que ignorar y corregir.
