| Simpsons Mail Icons | |
 | Contiene 7 íconos de 512x512, en formato PNG.descargar |
 | |
| Email Me Icon Set | |
 | Contiene11 íconos de 128x128, en formato PNG.descargar |
 | |
Dos forma de insertar tweets en una página web |
Embed Tweet es un servico que permite insertar un tweet en cualquier página web de manera hiper-simple. Para utilizarlo, debemos tener agregado el script genérico antes de </head>:
<script src='http://embedtweet.com/javascripts/embed_v2.js' type='text/javascript'></script>
A partir de ese momento, cada vez que queremos mostrar alguno, sólo es necesario escribir un enlace con la URL correspondients; por ejemplo, si el tweet fuese este:
http://twitter.com/oloman/statuses/17254283321
bastaría poner algo así donde se nos ocurra mostrarlo:
http://twitter.com/oloman/statuses/17254283321
bastaría poner algo así donde se nos ocurra mostrarlo:
<a href="http://twitter.com/oloman/statuses/17254283321"> el tweet </a>
Como se puede ver en el ejemplo, todos los botones son operativos así que desde nuestra misma página, puede ser respondido, retweetado, etc.
Para quienes usan WordPress, hay un plugin disponible que puede descargarse en formato ZIP.
Para quienes usan WordPress, hay un plugin disponible que puede descargarse en formato ZIP.
REFERENCIAS:Oloblogger
Un poco diferente es el servicio que ofrece Between; allí, lo que podemos hacer es ver y publicar una conversaciones entre dos usuarios.
Para eso, vamos a la página, colocamos los nombres de usuario y selecionamos alguna de las opciones de personalización que incluyen establecer las fechas a filtrar y algunas otros detalels como colores y tamaño. El resultado será un iframe que luego, si no nos convence, podemos modificar directamente porque las opciones son bastante evidentes:
user1 es el @nombre de un usuario
user2 es el @nombre de otro usuario
date1 fecha desde (formato Jan-01-2010)
date2 fecha hasta desde (formato Jun-30-2010)
order indica si las ordenamos en forma ascendente o ascendente (asc|des)
No tiene muchos misterios pero, hay que tener en cuenta que si las conversaciones son muchas, el tiempo que tarda en ser mostrado puede llegar a ser excesivo.
Para eso, vamos a la página, colocamos los nombres de usuario y selecionamos alguna de las opciones de personalización que incluyen establecer las fechas a filtrar y algunas otros detalels como colores y tamaño. El resultado será un iframe que luego, si no nos convence, podemos modificar directamente porque las opciones son bastante evidentes:
user1 es el @nombre de un usuario
user2 es el @nombre de otro usuario
date1 fecha desde (formato Jan-01-2010)
date2 fecha hasta desde (formato Jun-30-2010)
order indica si las ordenamos en forma ascendente o ascendente (asc|des)
No tiene muchos misterios pero, hay que tener en cuenta que si las conversaciones son muchas, el tiempo que tarda en ser mostrado puede llegar a ser excesivo.
REFERENCIAS:TechCrunch
Creando botones sencillos para un menú |
Usando CSS es muy sencillo crear botones de cualquier tipo, en este caso, las explicaciones son de vanseodesign y se aplican a un menú pero, podría hacerse con cualquier otra parte.
El HTML básico de un menú es algo así:
<div id="miMenu">
<ul id="listaMenu">
<li><a href="URL_enlace1">Enlace 1</a></li>
<li><a href="URL_enlace2">Enlace 2</a></li>
<li><a href="URL_enlace3">Enlace 3</a></li>
<li><a href="URL_enlace4">Enlace 4</a></li>
</ul>
</div>
¿Cuales son las propiedades a tener en cuenta?
/* primero que nada, el contenedor, el rectángulo donde se mostrará el menú
#miMenu {
/* si es necesario, aquí podemos definir anchos, márgenes o fondos /*
}
/* luego, las definiciones de la lista */
ul#listaMenu1 {
/* reseteamos las propiedades por defecto /*
list-style: none;
margin: 0;
padding: 0;
/* y podemos agregar propiedades para las fuentes de los textos */
}
/* cada item de la lista */
ul#listaMenu1 li {
/* las mostraremos una al lado de la otra */
display: inline;
}
/* y la clave es definir los enlaces como bloques que floten; de ese modo, podemos agregarles porpiedades gráficas con facilidad */
ul#listaMenu1 li a {
display: block; /* esto, transforma el enlace en un rectángulo al que podemos dimensionar */
float: left; /* son bloques pero flotan, los veremos uno al lado del otro */
text-align: center; /* centramos el texto */
text-decoration: none; /* para que no se subrayen los enlaces */
margin-right: 2px; /* en este ejemplo, cada botón se separa un poco del adyacente */
/*
el tamaño podemos definirlo de varias formas, por ejemplo
height: 20px;
line-height: 20px;
width: 100px;
otra forma es usar padding y de ese modo, su tamaño es dinámico, varia según el texto */
padding: 5px 20px;
*/
padding: 5px 20px;
/* por último, los colores y los bordes */
background: #5F3222;
border-top: 2px solid #815444;
border-right: 2px solid #3D1000;
border-bottom: 2px solid #3D1000;
border-left: 2px solid #815444;
color: #EEE;
}
/* y el efecto hover donde simplemente, cambiamos esos colores */
ul#listaMenu1 li a:hover {
background: #A37666;
color: #000;
border-top: 2px solid #815444;
border-right: 2px solid #C59888;
border-bottom: 2px solid #C59888;
border-left: 2px solid #815444;
}
Las camisetas de Glennz |
Glenn Jones es un diseñador gráfico de Nueva Zelandia que bajo el pseudónimo de GLENNZ, ha descubierto que su negocio es vender camisetas con sus trabajos y allí está su tienda online, recibiendo pedidos y distribuyendolas por todo el mundo.No, no pienso comprar ninguna porque veinte dólares es un poco mucho pero, vale la pena mirar los diseños.
Click para ampliar las imágenes.
Además, en una de sus páginas hay wallpapers para móviles que pueden ser descargados gratuitamente:
REFERENCIAS:blog.glennz.com
Los botones para compartir de Blogger |
Por fin Blogger Buzz ha decidido hacer público que los botones de compartir están disponibles en todos los blogs; casi un mes después de haberlos agregados y varios dias después que Rosa 
nos contara que habían comenzado a funcionar.
El includable que controla todo eso ya fue incorporado a todas las plantillas así que podemos verlo si expandimos los artilugios:
nos contara que habían comenzado a funcionar.El includable que controla todo eso ya fue incorporado a todas las plantillas así que podemos verlo si expandimos los artilugios:
<b:includable id='shareButtons' var='post'> <b:if cond='data:post.sharePostUrl'> ....... </b:if> </b:includable>
Lo que puede faltar en algunas plantillas es el código que carga esa parte y que debería encontrarse dentro del includable de las entradas, por lo general, en el pie de página, por ejemplo, luego del ícono de edición:
<b:includable id='post' var='post'>
.......
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
.......
<!-- share buttons -->
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>De no existir, simplemente lo agregamos allí o donde se nos ocurra mostrarlo; además se debe habilitar como cualquier otra opción. Para eso, hay que ir a Diseño, hacer click en Editar Entradas del blog y marcar la casilla correspondiente.
Como todo elemento de Blogger, puede ser eliminado pero para eso no basta borrar el includable ya que es uno de esos elementos "obligatorios", por más que lo borremos, volverá a aparecer. Para quitarlo, hay que eliminar el contenido y dejar las etiquetas del includable:
<b:includable id='shareButtons' var='post' />
Así, tal como está pensado, posee una serie de propiedades por defecto, algunas de las cuales podemos modificar pero no demasiado.
.post-share-buttons {
display: inline-block;
margin: 0 0.5em !important;
vertical-align: middle;
width: 106px;
}
.share-button {
background: url("/img/share_buttons.png") no-repeat scroll left center transparent !important;
display: block;
float: left;
height: 22px;
overflow: hidden;
width: 21px;
}
a.share-button:hover {text-decoration: none;}
.share-button-link-text {
left: -999px;
position: absolute;
}
.sb-email {background-position: 0 0 !important;}
a.sb-email:hover {background-position: 0 -22px !important;}
a.sb-email:active {background-position: 0 -44px !important;}
.sb-blog {background-position: -21px 0 !important;}
a.sb-blog:hover {background-position: -21px -22px !important;}
a.sb-blog:active {background-position: -21px -44px !important;}
.sb-twitter {background-position: -42px 0 !important;}
a.sb-twitter:hover {background-position: -42px -22px !important;}
a.sb-twitter:active {background-position: -42px -44px !important;}
.sb-facebook {background-position: -63px 0 !important;}
a.sb-facebook:hover {background-position: -63px -22px !important;}
a.sb-facebook:active {background-position: -63px -44px !important;}
.sb-buzz {background-position: -84px 0 !important;width:22px;}
a.sb-buzz:hover {background-position: -84px -22px !important;}
a.sb-buzz:active {background-position: -84px -44px !important;}La más simple es ocultar cualquiera de ellos con display:none aunque, como se trata de un sprite, si ocultamos el primero o el último, se perderá el efecto de "curva" de esos botones; es decir, esta pensado para ser usado así como viene; de todos modos:
.sb-email {display:none;} /* oculta el ícono de email */ .sb-blog {display:none;} /* oculta el ícono de blog */ .sb-twitter {display:none;} /* oculta el ícono de Twitter */ .sb-facebook {display:none;} /* oculta el ícono de Facebook */ .sb-buzz {display:none;} /* oculta el ícono de Goggle Buzz */
El rectángulo que los contiene tiene un clase CSS que es posible sobrescribir y de esa manera, posicionarlo con cierta exactitud donde se nos ocurra. Para eso, me parece que lo mejor es utilizar las propiedades de posición (left top right bottom) aunque podría usarse cualquier otra:
.post-share-buttons {
display: block;
margin: 0 auto !important;
position: relative;
top: -30px;
}Aunque no lo utilicemos y sigamos empleando nuestros propios íconos para compartir, podríamos sacar ventaja de ellos porque nos ayudará a simplificar nuestros códigos y a darles una mejor terminación. Por ejemplo, en una entrada anterior se mostraba la forma de agregar esos botones y bastaría cambiar un poco ese código:
<a expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"" + data:top.shareToFacebookMsg + "\", \"height=430,width=640\"); return false;"' title='Compartir en Facebook' target='_blank' rel='nofollow'> texto/imagen Facebook </a> <a expr:href='data:post.sharePostUrl + "&target=twitter"' title='Enviar a Twitter' target='_blank' rel='nofollow'> texto/imagen Twitter </a> <a expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"" + data:top.shareToBuzzMsg + "\", \"height=415,width=690\"); return false;"' title='Compartir con Google Buzz' target='_blank'> texto/imagen Google Buzz </a> <a expr:href='data:post.sharePostUrl + "&target=email"' title='Enviar por correo electrónico' target='_blank' rel='nofollow'> texto/imagen EMail </a>
Y agregamos el de enviar al blog:
<a expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"" + data:top.blogThisMsg + "\", \"height=270,width=475\"); return false;"' title='Escribe un blog' target='_blank' rel='nofollow'> texto/imagen Blogger </a>
Para que esto funcione debemos habilitar la opción y eliminar <b:include data='post' name='shareButtons'/> de nuestra plantilla.
No hay mucho más que eso excepto, esperar que ahora que ya está funcionando, reparen el problema con Facebook ya que, vaya uno a saber por qué motivo, de un tiempo a esta parte no se muestra el resumen de las entradas tal como ocurría antes y entonces, el compartir se transforma en algo bastante precario.
No hay mucho más que eso excepto, esperar que ahora que ya está funcionando, reparen el problema con Facebook ya que, vaya uno a saber por qué motivo, de un tiempo a esta parte no se muestra el resumen de las entradas tal como ocurría antes y entonces, el compartir se transforma en algo bastante precario.
monkeyFly: Mejoras para nuestro Twitter |
monkeyFly es una extensión para Firefox, script de Greasemonkey o extensión para Google Chrome que amplia las posibilidades de nuestra página de Twitter, agregando opciones extras tales como simplicar la subida de imágenes, utilizar pestañas y columnas, acceder rápidamente a diferentes atajos y personalizar la forma en que mostraremos nuestras listas.
El error cuando no hay título en los gadgets |
Esta es una de esas cosas que suelen pasar en Blogger, un error temporal o un cambio de los tantos que se hacen y sobre los que nunca nos enteramos. El tema es que por ahora, cuando agregamos o modificamos un gadget, el campo del título es obligatorio y si lo dejamos en blanco, aparece un mensaje de error que nos impide guardarlo.
La solución a este inconveniente la leía hace un par de dias en El escaparate de Rosa y, como me han hecho esa pregunta varias veces, lo mejor que podemos hacer es remitirnos a su entrada para resolver las cosas.
La solución a este inconveniente la leía hace un par de dias en El escaparate de Rosa
y, como me han hecho esa pregunta varias veces, lo mejor que podemos hacer es remitirnos a su entrada para resolver las cosas.
Básicamente, la idea es colocar como título, cualquier tipo de etiqueta HTML sin contenido tal como <h2></h2>, así, sin espacios intermedios porque si llega a tener algún contenido, dependiendo de nuestro diseño de plantilla, veremos "algo" y la idea es no ver nada en absoluto.
No me había dado cuenta de este asunto porque, en realidad, es algo que ya me había pasado varias veces a lo largo de estos años y estaba convencido que ese campo era obligatorio por lo tanto, nunca lo dejaba vacio y si quería ocultar el título en el blog, lo eliminaba directamente de la plantilla.
Sí, ya sé que a veces, expandir los artilugios y modificar los códigos de la plantilla causa stress pero, creo que es mejor hacer eso y que cada gadget tenga su título aunque luego, lo eliminemos o modifiquemos porque, cuando no lo tiene, lo que vemos en la pantalla de diseño es confuso. Allí, cada elemento se muestra con su título y si ese campo está vacio, lo que se muestra es el tipo de gadget y si hay varios del mismo tipo, es difícil saber cuál es cuál ya que todos son iguales:
No me había dado cuenta de este asunto porque, en realidad, es algo que ya me había pasado varias veces a lo largo de estos años y estaba convencido que ese campo era obligatorio por lo tanto, nunca lo dejaba vacio y si quería ocultar el título en el blog, lo eliminaba directamente de la plantilla.
Sí, ya sé que a veces, expandir los artilugios y modificar los códigos de la plantilla causa stress pero, creo que es mejor hacer eso y que cada gadget tenga su título aunque luego, lo eliminemos o modifiquemos porque, cuando no lo tiene, lo que vemos en la pantalla de diseño es confuso. Allí, cada elemento se muestra con su título y si ese campo está vacio, lo que se muestra es el tipo de gadget y si hay varios del mismo tipo, es difícil saber cuál es cuál ya que todos son iguales:
Colocándole un título, será más sencillo saber cuál es cuál, tanto en la pantalla de diseño como en la plantilla misma:
Por supuesto, cada cuál lo hará como le resulte más cómodo pero si se quiere usar este método, basta expandir los artilugios, buscar el widget:
<b:widget id='HTML6' locked='false' title='el COSO sin titulo' type='HTML'>
y luego, eliminar el código que por defecto dice algo así:
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
Tal vez, en alguna plantilla se muestre diferente pero basta que encontremos el dato que siempre es data:title
Editar esa parte de la plantilla no sólo sirve para eliminar el título, también nos permite personalizarlos porque nada impide que lo que mostremos sea algo diferente de lo que hemos colocado en el campo respectivo cuando lo creamos:
Editar esa parte de la plantilla no sólo sirve para eliminar el título, también nos permite personalizarlos porque nada impide que lo que mostremos sea algo diferente de lo que hemos colocado en el campo respectivo cuando lo creamos:
<b:widget id='HTML6' locked='false' title='el COSO sin titulo' type='HTML'>
.......
<h2 class='title'>
cualquier <span>TITULO</span>
</h2>
Tabla de caracteres Unicode (continuación) |
Más caracteres estarfalarios que pueden usarse en una página web.
| ☀ | ☀ | ☁ | ☁ | ☂ | ☂ | ☃ | ☃ |
| ☄ | ☄ | ★ | ★ | ☆ | ☆ | ☇ | ☇ |
| ☈ | ☈ | ☉ | ☉ | ☊ | ☊ | ☋ | ☋ |
| ☌ | ☌ | ☍ | ☍ | ☎ | ☎ | ☏ | ☏ |
| ☐ | ☐ | ☑ | ☑ | ☒ | ☒ | ☓ | ☓ |
| ☚ | ☚ | ☛ | ☛ | ☜ | ☜ | ☝ | ☝ |
| ☞ | ☞ | ☟ | ☟ | ☠ | ☠ | ☡ | ☡ |
| ☢ | ☢ | ☣ | ☣ | ☤ | ☤ | ☥ | ☥ |
| ☦ | ☦ | ☧ | ☧ | ☨ | ☨ | ☩ | ☩ |
| ☪ | ☪ | ☫ | ☫ | ☬ | ☬ | ☭ | ☭ |
| ☮ | ☮ | ☯ | ☯ | ☰ | ☰ | ☱ | ☱ |
| ☲ | ☲ | ☳ | ☳ | ☴ | ☴ | ☵ | ☵ |
| ☶ | ☶ | ☷ | ☷ | ☸ | ☸ | ☹ | ☹ |
| ☺ | ☺ | ☻ | ☻ | ☼ | ☼ | ☽ | ☽ |
| ☾ | ☾ | ☿ | ☿ | ♀ | ♀ | ♁ | ♁ |
| ♂ | ♂ | ♃ | ♃ | ♄ | ♄ | ♅ | ♅ |
| ♆ | ♆ | ♇ | ♇ | ♈ | ♈ | ♉ | ♉ |
| ♊ | ♊ | ♋ | ♋ | ♌ | ♌ | ♍ | ♍ |
| ♎ | ♎ | ♏ | ♏ | ♐ | ♐ | ♑ | ♑ |
| ♒ | ♒ | ♓ | ♓ | ♔ | ♔ | ♕ | ♕ |
| ♖ | ♖ | ♗ | ♗ | ♘ | ♘ | ♙ | ♙ |
| ♚ | ♚ | ♛ | ♛ | ♜ | ♜ | ♝ | ♝ |
| ♞ | ♞ | ♟ | ♟ | ♠ | ♠ | ♡ | ♡ |
| ♢ | ♢ | ♣ | ♣ | ♤ | ♤ | ♥ | ♥ |
| ♦ | ♦ | ♧ | ♧ | ♨ | ♨ | ♩ | ♩ |
| ♪ | ♪ | ♫ | ♫ | ♬ | ♬ | ♭ | ♭ |
| ♮ | ♮ | ♯ | ♯ | ♰ | ♰ | ♱ | ♱ |
| ✐ | ✐ | ✑ | ✑ | ✒ | ✒ | ✓ | ✓ |
| ✔ | ✔ | ✕ | ✕ | ✖ | ✖ | ✗ | ✗ |
| ✘ | ✘ | ✙ | ✙ | ✚ | ✚ | ✛ | ✛ |
| ✜ | ✜ | ✝ | ✝ | ✞ | ✞ | ✟ | ✟ |
| ✠ | ✠ | ✡ | ✡ | ✢ | ✢ | ✣ | ✣ |
| ✤ | ✤ | ✥ | ✥ | ✦ | ✦ | ✧ | ✧ |
| ❤ | ❤ | ✩ | ✩ | ✪ | ✪ | ✫ | ✫ |
| ✬ | ✬ | ✭ | ✭ | ✮ | ✮ | ✯ | ✯ | ✰ | ✰ | ✱ | ✱ | ✲ | ✲ | ✳ | ✳ | ✴ | ✴ | ✵ | ✵ | ✶ | ✶ | ✷ | ✷ | ✸ | ✸ | ✹ | ✹ | ✺ | ✺ | ✻ | ✻ | ✼ | ✼ | ✽ | ✽ | ✾ | ✾ | ✿ | ✿ | ❀ | ❀ | ❁ | ❁ | ❂ | ❂ | ❃ | ❃ | ❄ | ❄ | ❅ | ❅ | ❆ | ❆ | ❇ | ❇ | ❈ | ❈ | ❉ | ❉ | ❊ | ❊ | ❋ | ❋ |
| ❍ | ❍ | ❏ | ❏ | ❐ | ❐ | ❑ | ❑ |
| ❒ | ❒ | ❖ | ❖ | ❘ | ❘ | ❙ | ❙ |
| ❚ | ❚ | ❛ | ❛ | ❜ | ❜ | ❝ | ❝ |
| ❞ | ❞ | ❡ | ❡ | ❢ | ❢ | ❣ | ❣ |
| ❥ | ❥ | ❦ | ❦ | ❧ | ❧ | ✁ | ✁ |
| ✂ | ✂ | ✃ | ✃ | ✄ | ✄ | ✆ | ✆ |
| ✇ | ✇ | ✈ | ✈ | ✉ | ✉ | ✌ | ✌ |
| ✍ | ✍ | ✎ | ✎ | ✏ | ✏ |
REFERENCIAS:Tabla de caracteres Unicode
overflow: Cuando las cosas se desbordan |
Una de las características más interesantes del diseño web es que uno no debe preocuparse por conocer previamente la dimensión de los elementos que vamos agregando. Sin embargo, algunas veces, esa ventaja se vuelve un problema si no tenemos en cuenta que si el contenido es más grande que el contenedor puede desbordarse y ocupar espacios indeseados.
Reel: Un script que ... vaya uno a saber |
Lo más probable es que esto no sirva absolutamente para nada pero no importa, como logré que funcione, es suficiente para ponerlo. Además, es una curiosidad divertida.
Reel es un plugin para JQuery que, dada una imagen, puede mostrar una secuencia animada similar a la que podría mostrarse con otro tipo de lenguajes. Por supuesto, no se trata de otra cosa que una simulación y hacer algo así es más que excesivo ya que necesitamos crear la imagen gigante que luego será mostrada en partes, sea esta un panorama de 360º o una rotación que es el ejemplo que incluyo en esta entrada: una imagen "pesadita" de 1656 x 756, ideal para los que se preocupan por las velocidades.
No pienso explicarlo simplemente porque no tiene mucho sentido pero, si alguien quiere experimentar, puede descargar el demo completo desde la página del autor donde estan los scripts y todos los ejemplos disponibles.
¿Cómo funciona? Simplemente moviendo el ratón dentro de la imagen o utilizando la rueda de desplazamiento si tenemos una:
Reel es un plugin para JQuery que, dada una imagen, puede mostrar una secuencia animada similar a la que podría mostrarse con otro tipo de lenguajes. Por supuesto, no se trata de otra cosa que una simulación y hacer algo así es más que excesivo ya que necesitamos crear la imagen gigante que luego será mostrada en partes, sea esta un panorama de 360º o una rotación que es el ejemplo que incluyo en esta entrada: una imagen "pesadita" de 1656 x 756, ideal para los que se preocupan por las velocidades.
No pienso explicarlo simplemente porque no tiene mucho sentido pero, si alguien quiere experimentar, puede descargar el demo completo desde la página del autor donde estan los scripts y todos los ejemplos disponibles.
¿Cómo funciona? Simplemente moviendo el ratón dentro de la imagen o utilizando la rueda de desplazamiento si tenemos una:
PACIENCIA QUE LA IMAGEN PUEDE TARDAR
Humor y comida |
 |  |
| Eggbert Casanova by Rerinha | Suicide OREO by Rerinha |
 |  |
| Vampire egg by partyeskimo | The Cola wars by caycowa |
 |  |
| OMG by Ytse80 | You’re toast by cake-monster |
Click para ver las imágenes.
REFERENCIAS:designzzz.com
Iconos sociales sólo con CSS |
Este es otro experimento de Nicolas Gallagher. Se trata de crear íconos a diferentes redes sociales pero, usando sólo CSS.
La idea es simple pero claro, las definiciones de cada modelo son muy complejas y sólo tienen como objeto destacar las cualidades de las nuevas propiedades del CSS3.
El HTML es una lista común:
La idea es simple pero claro, las definiciones de cada modelo son muy complejas y sólo tienen como objeto destacar las cualidades de las nuevas propiedades del CSS3.
El HTML es una lista común:
<ul id="typo"> <li id="Trss"><a href="javascript:void(0);" title="Suscribirse via RSS ">RSS</a></li> <li id="Ttwitter"><a href="javascript:void(0);" title="Compartir en Twitter">Twitter</a></li> <li id="Tfacebook"><a href="javascript:void(0);" title="Compartir en Facebook">Facebook</a></li> </ul>
Y ahora, las definciones. Primero que nada, las generales:
ul#typo {
font: 0.875em/1 Arial, sans-serif;
list-style: none;
overflow: hidden;
padding: 0;
margin: 0;
}
ul#typo li {
float: left;
height: 66px;
margin: 20px 20px 0 0;
width:66px;
}
ul#typo li a {
border: 1px solid transparent;
display: block;
height: 64px;
overflow: hidden;
line-height: 64px;
text-decoration: none;
width: 64px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
ul#typo li a:hover, ul#typo li a:focus, ul#typo li a:active {
border-color: #000;
opacity: 0.8;
}La parte sofisticada es la creación de cada uno de esos íconos y aquí hay tres ejemplos.
#Tfacebook a {
position:relative;
border-color:#3c5a98;
text-transform:lowercase;
text-indent:34px;
letter-spacing:10px;
font-weight:bold;
font-size:64px;
line-height:66px;
color:#fff;
background:#3c5a98;
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4);
}
#Ttwitter a {
position:relative;
border-color:#a8eaec;
text-transform:lowercase;
text-indent:20px;
letter-spacing:40px;
font:bold 60px/1 Tahoma, sans-serif;
line-height:60px;
color:#76DDF8;
background:#daf6f7;
text-shadow: 3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff;
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
background:-webkit-gradient(linear, left top, left bottom, from(#dbf7f8), to(#88e1e6));
background:-moz-linear-gradient(top, #dbf7f8, #88e1e6);
background:linear-gradient(top, #dbf7f8, #88e1e6);
}
#Trss a {
position:relative;
width:60px;
padding:0 2px;
border-color:#ea6635;
text-transform:lowercase;
text-indent:-186px;
font-size:64px;
font-weight:bold;
color:#fff;
background:#e36443;
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443));
background:-moz-linear-gradient(top, #f19242, #e36443);
background:linear-gradient(top, #f19242, #e36443);
}
#Trss a:before {
content:"\00a0";
position:absolute;
bottom:10px;
left:10px;
width:12px;
height:12px;
background:#fff;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
#Trss a:after {
content:"\00a0";
position:absolute;
bottom:10px;
left:10px;
width:22px;
height:22px;
border-style:double;
border-width:24px 24px 0 0;
border-color:#fff;
-moz-border-radius:0 50px 0 0;
-webkit-border-radius:0 50px 0 0;
border-radius:0 50px 0 0;
}
Cargar scripts de manera dinámica |
Pese a que este artículo de El MicoX fue publicado hace ya varios años, no deja de ser muy interesante y una técnica útil. Se trata de cargar archivos de JavaScript de manera condicional, es decir, sólo cuando nosotros queremos y, de esta manera, aliviar la carga general de nuestro sitio.
Muchas veces, usamos tal o cual truco o tal o cual script en una determinada entrada o bien en ciertas páginas; lo mismo podría ocurrir cuando a un visitante se le dan opciones de alguna clase y esas opciones requieren funciones diferentes. Las alternativas son muchas y esto, sólo es una idea genérica.
La teoría de esto es muy simple, sólo requerimos un poco de código:
Muchas veces, usamos tal o cual truco o tal o cual script en una determinada entrada o bien en ciertas páginas; lo mismo podría ocurrir cuando a un visitante se le dan opciones de alguna clase y esas opciones requieren funciones diferentes. Las alternativas son muchas y esto, sólo es una idea genérica.
La teoría de esto es muy simple, sólo requerimos un poco de código:
<script type='text/javascript'>
//<![CDATA[
function include(archivo) {
var nuevo = document.createElement('script');
nuevo.setAttribute('type', 'text/javascript');
nuevo.setAttribute('src', archivo);
document.getElementsByTagName('head')[0].appendChild(nuevo);
}
//]]>
</script>
Tomorrow again: Otra galería experimental |
Tomorrow again es el primer script de dhteumeuleu que vi y es uno de esos hallazgos de Gem@ 
que a muchos nos tienen entretenidos (y delirando) en estos últimos dias.
Para adaptarlo a Blogger debemos hacer algún cambio en el script original que puede verse en la página del desarrollador.
¿Qué se necesita hacer?
Primero que nada el script que, podemos agregarlo directamente en una entrada:
que a muchos nos tienen entretenidos (y delirando) en estos últimos dias.Para adaptarlo a Blogger debemos hacer algún cambio en el script original que puede verse en la página del desarrollador.
¿Qué se necesita hacer?
Primero que nada el script que, podemos agregarlo directamente en una entrada:
<script type='text/javascript' src='URL_tomorrowagain.js' ><script>O podemos agregarlo a la plantilla antes de </head>:
<script type='text/javascript'>
//<![CDATA[
... y aquí copiamos y pegamos el contenido del archivo tomorrowagain.js ...
//]]>
</script>Luego, el CSS con estas definiciones mínimas:
<style type='text/css'>
#screen { /* el contenedor */
margin: 0 auto;
overflow: hidden;
/* el ancho y el alto debemos calcularo en funcíon del tamaño definido en panel */
height: VALORpx;
width: VALORpx;
}
/* las imágenes */
.panel {
float: left;
margin: 5px;
overflow: hidden;
position: relative;
/* este es el ancho y el alto de cada cuadrado donde se producirá el efecto */
height: VALORpx;
width: VALORpx;
}
.imgPanel {
border: none;
position: absolute;
text-decoration: none;
}
/* la imagen que veremos debajo */
#imagenREAL {
display:block;
margin:0 auto;
/* si no queremos limitar el tamaño de las imágenes, eliminamos esto */
max-height: VALORpx;
max-width: VALORpx;
}
</style>En el ejemplo a descargar hay otras propiedades agregadas, bordes, colores, sombras, efectos varios que son personales y que pueden ser definidos a gusto y piacere de cada uno.
Ahora, el HTML que, si va en un post, recuerden que siempre debe ser escrito en una sola línea lo mismo que el CSS si es también lo colocamos allí:
Ahora, el HTML que, si va en un post, recuerden que siempre debe ser escrito en una sola línea lo mismo que el CSS si es también lo colocamos allí:
<div id="screen"> <img class="panel" src="URL_imagen1"> <img class="panel" src="URL_imagen2"> <!-- y seguimos agregando etiquetas IMG con todas las que se nos ocurra mostrar --> </div> <img id="imagenREAL" src="URL_imagen1" /> <script type="text/javascript"> window.onload= function(){panel.init();} </script>
Como se ve, sólo es un DIV donde agregamos etiquetas IMG con la clase panel. Debajo, he puesto otra imagen extra con un ID específico y es allí donde se mostrará la imagen original cuando hagamos click sobre alguna de las miniaturas.
El script final es el que ejecuta la función del efecto cuando se termina de cargar nuestra página.
El ancho y el alto del DIV screen es lo que nos permite establecer la forma en que veremos nuestra galería y lo calculamos usando aritmética elemental. Si decimos que cada panel tendrá 150x150, entrarán 3 en un ancho de 450 pixeles a lo que le sumamos el margen y padding si es que los tienen y así obtenemos un valor aproximado. Luego lo ajustamos; si vemos que la tercera se va para abajo, es que necesitamos aumentarlo. De ese modo, lograremos armar cualquier diseño.
El script final es el que ejecuta la función del efecto cuando se termina de cargar nuestra página.
El ancho y el alto del DIV screen es lo que nos permite establecer la forma en que veremos nuestra galería y lo calculamos usando aritmética elemental. Si decimos que cada panel tendrá 150x150, entrarán 3 en un ancho de 450 pixeles a lo que le sumamos el margen y padding si es que los tienen y así obtenemos un valor aproximado. Luego lo ajustamos; si vemos que la tercera se va para abajo, es que necesitamos aumentarlo. De ese modo, lograremos armar cualquier diseño.
EL CSS3 en diferentes navegadores |
Algunas de las propiedades del CSS3 pueden ser simuladas en Internet Explorer, utilizando sus filtros exclusivos. No todos ellos darán el mismo resultado pero tampoco el resto de los navegadores lo hacen y por ahora, cada uno tiene alguna particularidad distintiva.
En todos los casos, la propiedad tiene la misma sintaxis:
En todos los casos, la propiedad tiene la misma sintaxis:
filter: progid:DXImageTransform.NOMBRE(valores);O en IE8:
-ms-filter: "progid:DXImageTransform.NOMBRE(valores)";Aunque, en realidad, da lo mismo agregarla o no ya que sólo es una forma de escribir filter así que podemos obviarla.
La opacidad es la más sencilla de implementar
/* para IE, el valor varía entre 0 y 100 */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
/* para el resto, el valor varía entre 0 y 1 */
opacity: .7;
Opacidad
Aenean eu lorem nec elit semper ullamcorper nec sed neque. Etiam sit amet turpis eros. Nullam ut felis dui. Proin ac nulla et eros semper bibendum. Quisque pharetra erat eget nunc lobortis semper metus.Las sombras no son lo que mejor se ve en IE; se muestran "duras", sin esfumado:
/* para IE */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#FFFFFF', Direction=135, Strength=10);
/* para Firefox */
-moz-box-shadow: 10px 10px 5px #FFFFFF;
/* para Chrome y Safari */
-webkit-box-shadow: 10px 10px 5px #FFFFFF;
/* para Opera */
box-shadow: 10px 10px 5px #FFFFFF;
Una alternativa mejor es el filtro dropshadow ya que permite más flexibilidad:
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=10, Color='#FFFFFF', Positive='true');
Sombras
Aenean eu lorem nec elit semper ullamcorper nec sed neque. Etiam sit amet turpis eros. Nullam ut felis dui. Proin ac nulla et eros semper bibendum. Quisque pharetra erat eget nunc lobortis semper metus.La rotación es limitada ya que en IE sólo es posible usar tres valores:
/* para IE puede ser 0,1, 2 o 3 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
/* para Firefox */
-moz-transform: rotate(180deg);
/* para Chrome y Safari */
-webkit-transform: rotate(180deg);
/* para Opera */
-o-transform: rotate(180deg);
Rotación
Aenean eu lorem nec elit semper ullamcorper nec sed neque. Etiam sit amet turpis eros. Nullam ut felis dui. Proin ac nulla et eros semper bibendum. Quisque pharetra erat eget nunc lobortis semper metus.Las gradientes funcionan perfectamente y podemos conseguir resultados casi perfectos aunque en este caso, las versiones para los navegadores varían mucho:
/* para IE */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#112233', endColorstr='#AABBCC');
/* para Firefox */
background-image: -moz-linear-gradient(top, #112233, #AABBCC);
/* para Chrome y Safari */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #AABBCC),color-stop(1, #112233));
Gradientes
Aenean eu lorem nec elit semper ullamcorper nec sed neque. Etiam sit amet turpis eros. Nullam ut felis dui. Proin ac nulla et eros semper bibendum. Quisque pharetra erat eget nunc lobortis semper metus.Más información::
Loading |
Alojar casi todo tipo de archivos en SigMirror |
SigMirror es otro sitio para alojar archivos y, si bien aparenta aceptar sólo imágenes, esa es una restricción que no tienen los usuarios registrados así que basta crear una cuenta gratuita para disponer de 2.5 GB de espacio disponible y 7.0 GB de ancho de banda mensuales.
Como muchos otros, el servicio admite la posibilidad de subir archivos y mantenerlos como privados o públicos; en este último caso, lo interesante es que permite el hotlink, es decir, los podemos usar en cualquier sitio web y para eso, nos proporcionan la dirección URL de cada uno.
Como muchos otros, el servicio admite la posibilidad de subir archivos y mantenerlos como privados o públicos; en este último caso, lo interesante es que permite el hotlink, es decir, los podemos usar en cualquier sitio web y para eso, nos proporcionan la dirección URL de cada uno.
No hay una descripción detallada de los tipos de archivos aceptados pero aseguran que son casi todos. He probado imágenes, videos, documentos, zips, íconos, scripts, xml, html y hojas de estilo sin problemas. Este es un ejemplo de un archivo HTML simple 
El widget de Panoramio |
Panoramio es un sitio donde los usuarios pueden explorar el mundo a través de fotografias subidas por los miembros de la comunidad. Hace tiempo fue comprado por Google y en estos días, Blogger in Draft ha anunciado que hay un API que nos permite integrar un widget a cualquier blog.
A decir verdad, el código final es bastante simple de insertar, sólo hay que copiar y pegar pero todas las explicaciones están en ingles y, aunque son amplias, pueden ser un poco confusas; a diferencia de otros, no he visto (o no he encontrado) que haya algún tipo de página que nos ayude a seleccionar los parámetros; de todos modos, puede intentarse usar lo que ellos llaman Templates es decir, widgets prediseñados y hay cuatro de ellos: photo, slideshow, list y photo_list ; con eso vamos armando la URL necesaria para luego, insertar un IFRAME:
A decir verdad, el código final es bastante simple de insertar, sólo hay que copiar y pegar pero todas las explicaciones están en ingles y, aunque son amplias, pueden ser un poco confusas; a diferencia de otros, no he visto (o no he encontrado) que haya algún tipo de página que nos ayude a seleccionar los parámetros; de todos modos, puede intentarse usar lo que ellos llaman Templates es decir, widgets prediseñados y hay cuatro de ellos: photo, slideshow, list y photo_list ; con eso vamos armando la URL necesaria para luego, insertar un IFRAME:
http://www.panoramio.com/wapi/template/photo.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/slideshow.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/list.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/photo_list.html?opcion1&opcion2&opcion3 ...
La primera opción es la unica obligatoria y la más importante: el tipo de fotos a mostrar y para eso, podemos seleccionar un usuario (user=IDusuario), una categoría (tag=categoria) o simplemente seleccionamos alguna palabra genérica como set=all, set=public, set=recent. Algunos ejemplos:
http://www.panoramio.com/wapi/template/photo.html?tag=sea
http://www.panoramio.com/wapi/template/slideshow.html?user=98350
http://www.panoramio.com/wapi/template/list.html?set=public
http://www.panoramio.com/wapi/template/photo_list.html?set=recent
El resto de las opciones definen la forma de mostrar el widget y son optativas:
- width y height establecen el tamaño
- bgcolor es el color de fondo (formato hexadecimal donde reemplazamos el caracter # por %23; por ejemplo, %23FFFFFF es el color blanco)
- columns y rows son la cantidad de columnas y filas en los widgets de tipo lista
- orientation indica si se las listas se mostrarán de manera vertical u horizontal
- list_size es la cantidad de imágenes en el widget de tipo photo_list
- position es la posición de la foto en el widget de tipo photo_list
- delay es el tiempo del efecto en el widget de tipo slideshow
Así que, seguimos agregando las opciones para construir la URL final:
http://www.panoramio.com/wapi/template/photo.html?tag=sea&bgcolor=%23101921
http://www.panoramio.com/wapi/template/slideshow.html?user=98350&opcion2&delay=1.5
http://www.panoramio.com/wapi/template/list.html?set=public&width=280&height=140&rows=2&columns=4&orientation=horizontal
http://www.panoramio.com/wapi/template/photo_list.html?set=recent&position=right&list_size=8&bgcolor=%23223344
Ya está, ahora, podemos insertar el IFRAME:
<iframe src="la_URL_generada" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="valor" height="valor"></iframe>
WIDGET PHOTO
<iframe src="http://www.panoramio.com/wapi/template/photo.html?tag=sea&bgcolor=%23101921" frameborder="0" width="400" height="400" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
WIDGET SLIDESHOW
<iframe src="http://www.panoramio.com/wapi/template/slideshow.html?user=98350&delay=1.5&bgcolor=%23101921" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="400" height="400"></iframe>
WIDGET LIST
<iframe src="http://www.panoramio.com/wapi/template/list.html?set=public&width=280&height=140&rows=2&columns=4&orientation=horizontal&bgcolor=%23101921" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
WIDGET PHOTO LIST
<div style="-moz-border-radius:10px;-moz-box-shadow:0 0 10px #DDD inset;background-color:#234;border:2px solid #ABC;height:425px;margin:0 auto;padding:15px 15px 0;width:425px;"><iframe src="http://www.panoramio.com/wapi/template/photo_list.html?set=recent&position=right&list_size=8&bgcolor=%23223344" width="425" height="410" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe></div>
REFERENCIAS:Dicas Blogger
Button Maker: Ayuda para crear botones con CSS |
Button Maker es muy simple de usar. Permite que creemos botones con estilo, usando una serie de opciones que, al ir cambiando, podemos ver en una previsualización instantánea lo que lo hace muy intuitivo y fácil de manejar.
Una vez que nos hemos decidido, basta hacer click en el mismo botón generado para que nos de las definiciones CSS necesarias; por ejemplo:
.button {
background: #384954;
background: -webkit-gradient(linear, left top, left bottom, from(#93BDD9), to(#384954));
background: -moz-linear-gradient(top, #93BDD9, #384954);
border-top: 1px solid #96D1F8;
color: white;
font-size: 20px;
font-family: Helvetica, Arial, Sans-Serif;
padding: 13px 26px;
text-decoration: none;
vertical-align: middle;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
.button:hover {
background: #28597A;
border-top-color: #28597A;
color: #bab337;
}
.button:active {
background: #719BB8;
border-top-color: #719BB8;
}Simplemente son tres definiciones de clases CSS que podemos agregar en cualquier parte, ya sea entre <b:skin> y </b:skin> o bien entre etiquetas <style> y </style>
Por supuesto, podemos cambiarle el nombre y en lugar de llamarlas button ponerle cualquier otro, editarlo y modificar los detalle o basarnos en ese modelo para crear otros.
Para utilizarlos, basta agregar el atributo class en la etiqueta de un enlace:
Por supuesto, podemos cambiarle el nombre y en lugar de llamarlas button ponerle cualquier otro, editarlo y modificar los detalle o basarnos en ese modelo para crear otros.
Para utilizarlos, basta agregar el atributo class en la etiqueta de un enlace:
<a href="una_URL" class="button">, texto del enlace <,/a>,
Como muchas plantillas tienen definiciones de estilo que afectan a TODOS los enlaces o a los enlaces de una sección del blog, a veces es necesario reforzar la definición y para eso agregamos la palabra !important; por ejemplo:
color: white !important;
font-size: 20px !important;
Es una pena que se sigan olvidando que Internet Explorer existe y que algunas de esas propiedades pueden ser utilizadas con limitaciones. En este caso, usando filtros:
.button {
background: #384954;
background: -webkit-gradient(linear, left top, left bottom, from(#93BDD9), to(#384954));
background: -moz-linear-gradient(top, #93BDD9, #384954);
border-top: 1px solid #96D1F8;
color: white;
display: block;
font-size: 20px;
font-family: Helvetica, Arial, Sans-Serif;
height: 50px;
line-height: 50px;
position: relative;
text-align: center;
text-decoration: none;
vertical-align: middle;
width: 125px;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF93BDD9', EndColorStr='#FF384954');
}
.button:hover {
background: #28597A;
border-top-color: #28597A;
color: #bab337;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0093BDD9', EndColorStr='#00384954');
}
.button:active {
background: #719BB8;
border-top-color: #719BB8;
}REFERENCIAS:Gem@ Blog
Agregar Reply a los comentarios |
Lo que nos enseña MamaNunes en su última entrada, es la forma de agregar un enlace para "Responder comentarios".
Es muy simple de implementar y al aplicarlo, dispondremos de ese enlace en cada comentario realizado. Al hacer click, se abrirá el formulario de comentarios en una ventana pop-up y, de manera automática, el formulario ya tendrá incluido un enlace al comentario original y el nombre del comentarista; algo similar a lo que se muestra en Twitter; veremos entonces, que ya está escrito algo así:
Es muy simple de implementar y al aplicarlo, dispondremos de ese enlace en cada comentario realizado. Al hacer click, se abrirá el formulario de comentarios en una ventana pop-up y, de manera automática, el formulario ya tendrá incluido un enlace al comentario original y el nombre del comentarista; algo similar a lo que se muestra en Twitter; veremos entonces, que ya está escrito algo así:
Para que esto funcione, debemos colocar lo siguiente:
<span class='comment-reply'> <a expr:href='"https://www.blogger.com/comment.g?blogID=NUESTRO_ID&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'>[Reply to comment]</a> </span>
Allí, deberíamos colocar NUESTRO_ID que podemos ver en la misma ventana de la plantilla y que es un número (más información).
El otro dato que podemos modificar es el texto a mostrar que en el ejemplo es [Reply to comment] pero puede ser cualquier otro o incluso una imagen.
El tema es ¿dónde ponemos eso? y ahí hay muchas alternativas que dependerán de la plantilla. Por ejemplo, podría ponerse al lado del nombre del comentarista:
El otro dato que podemos modificar es el texto a mostrar que en el ejemplo es [Reply to comment] pero puede ser cualquier otro o incluso una imagen.
El tema es ¿dónde ponemos eso? y ahí hay muchas alternativas que dependerán de la plantilla. Por ejemplo, podría ponerse al lado del nombre del comentarista:
<data:comment.author/>
o en el footer de cada comentario:
<dd class='comment-footer'> PUEDE AGREGARSE ACÁ <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a> <b:include data='comment' name='commentDeleteIcon'/> </span> PUEDE AGREGARSE ACÁ </dd>
Es verdad que el código parece extrañísimo pero, no lo es tanto, simplemente envia ese texto extra en la URL que abre la ventana de comentarios y lo hace codificándolo (encode y decode) de tal manera que:
%40%3C%61%20%68%72%65%66%3D%22%23 es el equivalente de @<a href="# data:comment.anchorName es la URL del comentario a responder %22%3E es el equivalente de "> data:comment.authores el nombre del comentarista a quien se responde y %3C%2F%61%3E es el equivalente de </a>
Como detalle adicional, el SPAN donde está el enlace tiene una clase CSS así que es posible agregarla a nuestros estilos y darle propiedades:
.comment-reply {}
.comment-reply a {}
.comment-reply a:hover {}En el blog de MamaNunes puede verse el resultado comcreto 
Contenedores y contenidos: Opacidad |
Controlar o modificar la opacidad de cualquier elemento es una de las técnicas más comunes ya que pueden implementarse en todos los navegadores modernos con leves variaciones:
filter:alpha(opacity=VALOR); en Internet Explorer
opacity: VALOR; en el resto de los navegadores
filter:alpha(opacity=VALOR); en Internet Explorer
opacity: VALOR; en el resto de los navegadores
El problema con esta propiedad es que si la aplicamos a un contenedor, todo el contenido es afectado, es decir, si queremos poner un DIV con una imagen de fondo y usar opacity para hacerla transparente, todo lo que agreguemos dentro de ese DIV también será transparente.
Un ejemplo:
Un ejemplo:
<style type="text/css">
#ejemplo1 {
background: transparent url(URL_imagen) no-repeat 50% 0;
color: #FFF;
height: 280px;
margin: 20px auto;
padding: 20px;
text-align: center;
width: 420px;
filter: alpha(opacity=40);
opacity: 0.4;
}
#textoejemplo1 {
background-color: #ABC;
padding: 5px;
}
</style>
<div id="ejemplo1">
<div id="textoejemplo1">
....... un texto cualquiera .......
</div>
</div>Suspendisse a nulla et quam vehicula mattis at vitae sapien? In hac habitasse platea dictumst. Etiam diam ipsum, suscipit ut semper vel, vulputate eu justo? Nunc condimentum quam sed urna fermentum eu commodo massa tempor. In ligula turpis, adipiscing vitae scelerisque in, iaculis quis mi. Nam sodales interdum tincidunt.
El DIV ejemplo1 tiene una imagen de fondo y se le aplica opacidad así que el DIV textoejemplo1 que está dentro, también es transparente ya que las propiedades, se heredan.
Si lo que queremos hacer es que ese contenido no sea trasparente, debemos cambiar la técnica.
Cuando tenemos un contenedor al que le colocamos la propiedad position con un valor relative, podemos controlar la posición del contenido, agregándole a este, la propiedad position con un valor absolute y ubicándolo con top right bottom y left. Unos ejemplos:
Si lo que queremos hacer es que ese contenido no sea trasparente, debemos cambiar la técnica.
Cuando tenemos un contenedor al que le colocamos la propiedad position con un valor relative, podemos controlar la posición del contenido, agregándole a este, la propiedad position con un valor absolute y ubicándolo con top right bottom y left. Unos ejemplos:
<div style="position: relative;"> <div style="position: absolute; left: 20px; top: 10px;"> ... </div> <div style="position: absolute; bottom:10px; right: 20px;"> ... </div> </div>
left:20px;top:10px;
bottom:10px;right:20px;
left:0px;top:10px;
bottom:0px;right:30px;
Con esa misma idea, es posible tener un DIV con una imagen transparente y encima, colocar otro que no se vea afectado por esa propiedad.
<style type="text/css">
#ejemplo2 {
color: #FFF;
height: 320px;
margin: 20px auto;
overflow: hidden;
position: relative;
text-align: center;
width: 420px;
}
#internoejemplo2 {
background: transparent url(URL_imagen) no-repeat 50% 0;
height:320px;
width:420px;
filter: alpha(opacity=40);
opacity: 0.4;
}
#textoejemplo2 {
background-color: #ABC;
padding: 5px;
position: absolute;
top: 20px;
left: 10px;
overflow: hidden;
}
</style>
<div id="ejemplo2">
<div id="internoejemplo2"></div>
<div id="textoejemplo2">
....... un texto cualquiera .......
</div>
</div>Suspendisse a nulla et quam vehicula mattis at vitae sapien? In hac habitasse platea dictumst. Etiam diam ipsum, suscipit ut semper vel, vulputate eu justo? Nunc condimentum quam sed urna fermentum eu commodo massa tempor. In ligula turpis, adipiscing vitae scelerisque in, iaculis quis mi. Nam sodales interdum tincidunt.
Ahora, tenemos un DIV contenedor llamado ejemplo2 igual que antes pero, la imagen de fondo no está allí. Dentro de este, hay dos DIVs más. El que identificamos como internoejemplo2 es el que contiene la imagen y el otro, llamado textoejemplo2, es el que contiene el texto y es el que podemos posicionar a voluntad.
