REFERENCIAS:gran-angular.net
Personalizar los comentarios del autor |
Pasó mucho tiempo desde que Maurico C. preguntara si era posible modificar la fuente o el color de fondo de los comentarios dejados por el administrador del blog pero, de todas maneras, aquí va uno de los posibles métodos para hacerlo.
En una plantilla normal, los comentarios se muestran en tres rectángulos diferentes:
En una plantilla normal, los comentarios se muestran en tres rectángulos diferentes:
<b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> ....... es el nombre del comentarista y un ícono que lo representa ....... ....... data:comment.authorUrl es la URL del comentarista y data:comment.author su nombre ....... es el texto adicional que se muestra ....... </dt> <dd class='comment-body'> ....... es el contenido del comentario ....... </dd> <dd class='comment-footer'> ....... es la fecha en que fue enviado el comentario ....... ....... también se incluye el ícono para eliminar los comentarios ....... </dd> </b:loop>
Como son tres partes diferentes, podemos modificar sólo una de ellas (en este caso la segunda) o todas a la vez de tal forma que los comentarios del autor en su propio blog se verán "tan distintos" como uno quiera.
Para conseguir esto, lo que debemos hacer es condicionar el código y verificar "quien" comenta y eso lo podemos hacer con la variable data:comment.author (nuestro nombre) o con la variable data:comment.authorUrl que es única y por lo tanto, más precisa. Esta URL es personal, cada usuario tiene una diferente y corresponde a la del perfil así que puede copiarse directamente desde el escritorio de Blogger en el enlace Ver Pefil. Sería algo así:
http://www.blogger.com/profile/XXXXXXXXXXXXXXXXXXXX
El primer paso es poner la condición "rodeando" el contenido del loop; sea cual sea el que tengamos:
Para conseguir esto, lo que debemos hacer es condicionar el código y verificar "quien" comenta y eso lo podemos hacer con la variable data:comment.author (nuestro nombre) o con la variable data:comment.authorUrl que es única y por lo tanto, más precisa. Esta URL es personal, cada usuario tiene una diferente y corresponde a la del perfil así que puede copiarse directamente desde el escritorio de Blogger en el enlace Ver Pefil. Sería algo así:
http://www.blogger.com/profile/XXXXXXXXXXXXXXXXXXXX
El primer paso es poner la condición "rodeando" el contenido del loop; sea cual sea el que tengamos:
<b:loop values='data:post.comments' var='comment'> <b:if cond='data:comment.authorUrl == "http://www.blogger.com/profile/XXXXXXXXXXXXXXXXXXXX"'> <b:if cond='data:comment.authorClass == "blogger-comment-icon"'> <!-- estos serán nuestros propios comentarios --> ....... y aquí pondremos el nuevo código ....... </b:if> <b:else/> <!-- estos son los comentarios "normales" tal y como están ahora --> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> ....... </dt> <dd class='comment-body'> ....... </dd> <dd class='comment-footer'> ....... </dd>
</b:if> </b:loop>
Si ahora guardáramos, veríamos lo mismo que antes pero no nuestros comentarios. Faltaría agregar el código para eso que, será muy similar al otro excepto que podemos eliminar cosas ya que sabemos que son nuestros y no hace falta verificarlos. El código podría ser algo así:
<div class='misComentarios'> <dt class='comment-author-YOMISMO'> <a expr:name='data:comment.anchorName'/> <img class='icoYO' src='URL_miImagen' style='width:50px;height:50px;'/>El texto que queremos que aparezca </dt> <dd class='comment-body-YOMISMO'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> <dd class='comment-footer-YOMISMO'> <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </div>
Para controlar el contenido con facilidad le agregamos clases CSS a cada sector. Así que ahora, podemos ir a la parte de estilo de la plantilla y antes de </b:skin> colocar esas definiciones.
dt.comment-author-YOMISMO { /* es el rectágulo superior con nuestro nombre */
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
background-color: aliceBlue;
border: 2px solid CornflowerBlue;
border-bottom: 1px dotted cornflowerBlue;
color: CornflowerBlue;
font-size: 22px;
height: 50px;
padding: 10px 10px 5px 10px;
}
dd.comment-body-YOMISMO { /* es el rectágulo central con el comentario en si mismo */
background-color: aliceBlue;
border-right: 2px solid CornflowerBlue;
border-left: 2px solid CornflowerBlue;
clear: both;
color: #444;
font-family: Comic Sans MS;
font-size: 16px;
margin: 0;
padding:5px 10px 10px 10px;
}
dd.comment-footer-YOMISMO { /* es el rectágulo inferior con la fecha */
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
background-color: aliceBlue;
border: 2px solid CornflowerBlue;
border-top: none;
margin: 0 0 30px;
padding: 10px;
text-align: right;
}
dd.comment-footer-YOMISMO a {
color: cornflowerBlue;
font-family: Tahoma;
font-size: 11px;
}
img.icoYO { /* es el icono de laimagen */
float: left;
padding-right: 10px
}
Cinco plantillas de Templates Novo Blogger |
 | Template Green Demo online: VER Descargar: 4shared.com Información y detalles: VER |
 | Template Abril Demo online: VER Descargar: 4shared.com Información y detalles: VER |
 | Template Março Demo online: VER Descargar: 4shared.com Información y detalles: VER |
 | Template Girly Diaries Demo online: VER Descargar: 4shared.com Información y detalles: VER |
 | Template WingGirl Demo online: VER Descargar: 4shared.com Información y detalles: VER |
REFERENCIAS:Templates Novo Blogger
Ajustar el tamaño de una imagen al texto |
Por lo general, usando CSS, armar un texto combinado con una imagen es bastante sencillo aunque a veces, ajustar ambas cosas se vuelve una tarea titánica.
Supongamos que tenemos dos imágenes, una de 128x128 y otra de 256x256 y que queremos usarlas como "adorno".
Usando la propiedad float, podemos colocar el texto "rodeando" la imagen, ya sea a un lado o al otro. Esto es lo que hace Blogger cuando nos pide que elijamos un diseño al subirlas pero podemos hacerlo con cualquiera, basta darle un estilo:
Supongamos que tenemos dos imágenes, una de 128x128 y otra de 256x256 y que queremos usarlas como "adorno".
Usando la propiedad float, podemos colocar el texto "rodeando" la imagen, ya sea a un lado o al otro. Esto es lo que hace Blogger cuando nos pide que elijamos un diseño al subirlas pero podemos hacerlo con cualquiera, basta darle un estilo:
<div style="text-align: justify;"><img src="URL_imagen" style="margin-right: 10px; float: left;" /> ... el texto a mostrar ... </div>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum arcu felis, semper sed vestibulum eget, gravida id tortor? Mauris eleifend suscipit tellus, a tempor lorem euismod eget? Maecenas porta rutrum faucibus. Pellentesque eget rhoncus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem est, laoreet non pharetra in, porttitor sed turpis pellentesque.Lo mismo hacemos para el otro lado:
<div style="text-align: justify;"><img src="URL_imagen" style="margin-left: 10px; float: right;" />el texto a mostrar ... </div>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum arcu felis, semper sed vestibulum eget, gravida id tortor? Mauris eleifend suscipit tellus, a tempor lorem euismod eget? Maecenas porta rutrum faucibus. Pellentesque eget rhoncus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem est, laoreet non pharetra in, porttitor sed turpis pellentesque.Sólo invertimos los códigos, uno flota a la izquierda y tiene un margen a la derecha, el otro flota a la derecha así que tiene un margen a la izquierda pero ¿qué pasa si por cualquier motivo cambiamos el tamaño o el tipo de fuente del texto?
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum arcu felis, semper sed vestibulum eget, gravida id tortor? Mauris eleifend suscipit tellus, a tempor lorem euismod eget? Maecenas porta rutrum faucibus. Pellentesque eget rhoncus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem est, laoreet non pharetra in, porttitor sed turpis pellentesque.Se descalabra todo y claro, deberíamos "redimensionar la imagen para mantener el efecto. La rehacemos, la subimos otra vez ... demasiado trabajo.
También podemos "redimensionarla" usando los atributos width y height.
Basta colocar el ancho y el navegador se encargará de calcular el alto de forma automática para mantener la proporción. O colocar sólo el alto. O colocar ambos valores y cambiar esa proporción:
También podemos "redimensionarla" usando los atributos width y height.
Basta colocar el ancho y el navegador se encargará de calcular el alto de forma automática para mantener la proporción. O colocar sólo el alto. O colocar ambos valores y cambiar esa proporción:
| original = 256x256 --> 100x100 | ||
| <img width="100" src="URL" /> | <img height="100" src="URL" /> | <img width="100" height="100" src="URL" /> |
 | | |
| <img width="50" height="100" src="URL" /> | <img width="100" height="50" src="URL" /> |
| |
Sea como sea, deberíamos "recalcular" el tamaño de manera individual ... sigue siendo mucho trabajo.
Sin embargo, hay una técnica explicada en JON TANgerine que nos facilita hacer esto de manera genérica, usando CSS. Para ello, en lugar de utilizar pixeles para dimensionar las imágenes, utilizaremos la unidad em lo que significa que el tamaño de la imagen tendrá una relación con el tipo de fuente del texto.
¿Cómo calculamos eso? No hay otra forma que usar la aritmética o una calculadora online.
Supongamos que estoy satisfecho con el modelo creado. Conozco dos datos, sé que la imagen debe tener 128x128 y que la fuente del texto tiene 14 pixeles. Uso una fórmula de conversión:
(1 / TamañoFuente) * AnchoImagen = AnchoImagen en unidades em
(1 / TamañoFuente) * AltoImagen = AltoImagen en unidades em
en este caso:
(1 / 14) * 128 = 9.14
Así que puedo cambiar el código a usar:
Sin embargo, hay una técnica explicada en JON TANgerine que nos facilita hacer esto de manera genérica, usando CSS. Para ello, en lugar de utilizar pixeles para dimensionar las imágenes, utilizaremos la unidad em lo que significa que el tamaño de la imagen tendrá una relación con el tipo de fuente del texto.
¿Cómo calculamos eso? No hay otra forma que usar la aritmética o una calculadora online.
Supongamos que estoy satisfecho con el modelo creado. Conozco dos datos, sé que la imagen debe tener 128x128 y que la fuente del texto tiene 14 pixeles. Uso una fórmula de conversión:
(1 / TamañoFuente) * AnchoImagen = AnchoImagen en unidades em
(1 / TamañoFuente) * AltoImagen = AltoImagen en unidades em
en este caso:
(1 / 14) * 128 = 9.14
Así que puedo cambiar el código a usar:
<div style="text-align: justify;"><img src="URL_imagen" style="margin-right: 10px; float: left; width: 9.14em; height: 9.14em;" /> ... el texto a mostrar ... </div>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum arcu felis, semper sed vestibulum eget, gravida id tortor? Mauris eleifend suscipit tellus, a tempor lorem euismod eget? Maecenas porta rutrum faucibus. Pellentesque eget rhoncus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem est, laoreet non pharetra in, porttitor sed turpis pellentesque.De esta manera, el texto y la imagen mantendrán una relación pre-establecida, sin importar ni el tipo de fuente ni el tamaño de la imagen que usemos.
Las propiedades CSS por defecto |
Sin CSS, una página está desnuda pero, aún así, algo de pudor le queda ya que los navegadores establecen una serie de propiedades por defecto que serán aplicadas a menos que las cambiemos. Tienen ciertas diferencias según se trate de un navegador u otro pero, en general, son justamente esas propiedades no-identificadas, las que nos causan problemas porque no solemos tenerlas en cuenta.
Es habitual que se nos diga que para evitar problemas, lo mejor es resetear las propiedades CSS y para eso, hay decenas de reglas de estilo pre-diseñadas que nos aconsejan agregar a nuestro sitio. Pero, en realidad para un uso normal, tanta cosa suele ser excesiva y terminan confundiendo más de lo que aclaran. Lo más sencillo es entender por qué deberíamos hacer esto y luego, usar el sentido común para crear las reglas que nos sean útiles.
Blogger y sus códigos misteriosos |
Hace ya varios días que Ariane twiteaba una información que, hasta ahora, sigue siendo un misterio. Trabajando con una plantilla recién cargada desde Blogger, había encontrado unos códigos nuevos y se preguntaba ¿son eso lo que parecen ser?
Si buscamos en:
Si buscamos en:
<b:includable id='post' var='post'>
veremos que inmediatamente después de las instrucciones que muestran los posts, aparece esto:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
Parecería que, con alguna condición, las entradas tendrían la posibilidad de ser mostradas parcialmente, al estilo de lo que hace el tag MORE en WordPress, una función largamente solicitada y que usualmente, simulamos con algún hack.
Por ahora, nada funciona excepto el texto Read More que genera <data:post.jumpText/> Tampoco he visto ningún tipo de referencia al tema en la web.
No es el único misterio. Revisando un poco, hay otros códigos "raros" o por lo menos, cosas que no había visto antes y que no tengo la menor idea para que sirven.
Por ejemplo ¿qué hace esto que aparece en el LOOP?
Por ahora, nada funciona excepto el texto Read More que genera <data:post.jumpText/> Tampoco he visto ningún tipo de referencia al tema en la web.
No es el único misterio. Revisando un poco, hay otros códigos "raros" o por lo menos, cosas que no había visto antes y que no tengo la menor idea para que sirven.
Por ejemplo ¿qué hace esto que aparece en el LOOP?
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
¿Carga un script? ¿Cuál? ¿Bajo qué condiciones?
Una más. Ahora, el includable del formulario de comentarios incrustado es distinto:
Una más. Ahora, el includable del formulario de comentarios incrustado es distinto:
<b:includable id='comment-form' var='post'>
Luego del IFRAME se ve esto:
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
¿Sería mucho pedir que Blogger nos informara de estos cambios y su significado? Digo, no sé, se me ocurre que es lo que debería hacer cualquier servicio, por muy mediocre que sea.
Pequeña lista de herramientas online para desarrolladores |
Crear layouts básicos:
Fuentes y textos:
Colores:
Generación de sprites:
Herramientas varias:
Hojas de ayuda:
REFERENCIAS:w3avenue.com
