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

Para que esto funcione, debemos colocar lo siguiente:

<span class='comment-reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=NUESTRO_ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); 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:

<data:comment.author/>

o en el footer de cada comentario:

<dd class='comment-footer'>
PUEDE AGREGARSE ACÁ
<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + 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

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

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:

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

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

La cultura del spaghetti

continuar leyendo

La codificación de caracteres es una opción que vemos en cualquier navegador y, por lo general, lo que dice es Unicode(UTF-8) que es un standard para mostrar caracteres de diferentes idiomas que no están disponibles en el juego de caracteres ASCII.

Cuando se usa Blogger, vemos que nuestra plantilla tiene una primera línea que define la codificación de caracteres de nuestro sitio:

<?xml version="1.0" encoding="UTF-8" ?>

y además, de manera automática, agrega esta otra:

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

Con esto, ya podemos utilizar esos caracteres especiales que deben ser escritos como códigos. El mismo Blogger los utiliza para algunos de sus elementos; allí veremos cosas como   ▼ ◄ que no son otra cosa que esos códigos.

Hay muchísimos de ellos, tanto para los caracteres de los diferentes idiomas como para símbolos y en unicode.org pueden descargarse archivos PDF que los detallan uno por uno pero, esta es una breve tabla con alguno de ellos:

▲		▲	►		►	▼		▼
◄		◄	■		■	□		□
▣		▣	▤		▤	▥		▥
▦		▦	▧		▧	▨		▨
▩		▩	▪		▪	▫		▫
◊	◊	◊	○		○	●		●
☺		☺	☻		☻	☼		☼
Ä	Ä	Ä	ö	ö	ö	Ö	Ö	Ö
ä	ä	ä	ü	ü	ü	Ü	Ü	Ü
ß	ß	ß	€	€	€	¢	¢	¢
£	£	£	¥	¥	¥	¤	¤	¤
₪		₪	♀		♀	♂		♂
♠	♠	♠	♤		♤	♣	♣	♣
♧		♧	♥	♥	♥	♡		♡
♦	♦	♦	★		★	☆		☆
⌂		⌂	№		№	☎		☎
☏		☏	♨		♨	☜		☜
☞		☞	♩		♩	♪		♪
♫		♫	♬		♬	♭		♭
†		†	‡		‡	←	←	←
↑	↑	↑	→	→	→	↓	↓	↓
↔	↔	↔	↕		↕	↖		↖
↗		↗	↘		↘	↙		↙
	 	 	"	"	"	&	&	&
<	&lt;	&#60;	>	&gt;	&#62;	«	&laquo;	&#171;
»	&raquo;	&#187;	©	&copy;	&#169;	®	&reg;	&#174;
™	&trade;	&#8482;	¿	&iquest;	&#191;	¡	&iexcl;	&#161;
@		&#64;	§	&sect;	&#167;	÷	&divide;	&#247;
+		&#43;	-		&#45;	Ω		&#8486;
±	&plusmn;	&#177;	×	&times;	&#215;	√		&#8730;
¼	&frac14;	&#188;	½	&frac12;	&#189;	¾	&frac34;	&#190;
⅓		&#8531;	⅔		&#8532;	⅛		&#8539;
⅜		&#8540;	⅝		&#8541;	⅞		&#8542;
%		&#37;	‰		&#8240;	¹	&sup1;	&#185;
²	&sup2;	&#178;	³	&sup3;	&#179;

Las entradas del blog, título, contenido, pie de página, etc, son agregadas con un widget; más complejo que cualquier otro de los que podemos incluir pero, widget al fin:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
.......
</b:widget>

Obviamente, hay uno solo y desde Diseño | Elementos de la Página no podemos agregar otros; ni siquiera aparece en la lista pero, nada impide que podamos hacerlo manualmente desde la Edición HTML.

¿Y para qué se nos ocurriría agregar otro widget con las entradas del blog? Pués porque sólo allí es donde podemos leer los datos de la entrada y, por ejemplo, de ese modo, podríamos mostrar algunos de ellos en cualquier parte de nuestra página y no necesariamente en el post-footer. Usando esta idea de quiterandom.com, los vamos a mostrar en la sidebar.

Primero que nada, vamos a Diseño | Edición HTML y sin expandir los artilugios para que sea más simple; buscaremos la sección de la sidebar que, por defecto, dirá algo así:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Inmediatamente debajo de eso, agregaremos el siguiente código que ha sido modificado del artículo original para evitar que Blogger nos agregue códigos innecesarios:

<b:widget id='Blog99' locked='false' title='Entradas del blog' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'>
<div class='meta'>
<div class='title'>Leyendo: &quot;<data:post.title/>&quot;.</div>
<div class='comments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/> <data:top.commentLabelPlural/>
</a>
</div>
<div class='labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</div>
<div class='date'>Publicado el <data:post.dateHeader/></div>
<!-- ....... cualquier otro dato que nos interese mostrar -->
</div>
</b:includable>
<b:includable id='status-message'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</b:if>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='comments' var='post'/>
</b:widget>

Lo llamamos Blog99 pero cualquier nombre es admitido. Como se ve, hay muchos includables vacíos porque no los necesitamos pero, no podemos quitarlos ya que si lo hacemos, Blogger los agregará otra vez completos. Sólo necesitamos dos de ellos, los llamados main y post. En el primero, condicionamos todo nuestro nuevo widget para que funcione exclusivamente en páginas individuales y en el segundo, ponemos todo eso que nos interese mostrar. En ese ejemplo hay algunas posibilidades agregadas.

El resto es diseño gráfico. Para eso, agregamos un poco de estilo antes de </b:skin>. Por ejemplo:

/* este es el rectángulo donde mostraremos nuestro widget */
div.meta {
background-color: #141414;
border: 1px solid #333;
padding: 20px;
}
/* las diferentes partes del ejemplo */
div.meta div.title { /* el texto "Leyendo" y el título */ }
div.meta div.comments { /* la cantidad de comentarios */ }
div.meta div.labels { /* las etiquetas */ }
div.meta div.date {  /* la fecha de publicación */ }

Las pseudo-clases son "palabras" adicionales que agregamos en una definición CSS para establecer algún tipo de dato especial y tal vez, la más conocida es :hover [ 1 2 3 ]

¿Qué podemos hacer para identificar un elemento cualquiera o grupo de elementos dentro de otro sin tener que agregar datos adicionales? Para eso es que existen las pseudo-clases nth-child y nth-last.

leer artículo actualizado

Algunos ejemplos de burbujas para contener textos, realizadas utilizando sólo CSS3, creados por Nicolas Gallagher. La página con demos tiene muchos más y el archivo de estilo que contiene las definiciones tiene muchos comentarios que las explican.

Duis quis urna nunc, sit amet tincidunt lectus.

Duis quis urna nunc, sit amet tincidunt lectus.

Duis quis urna nunc, sit amet tincidunt lectus.

.triangle-border {
  background: #FFF;
  border: 5px solid #5A8F00;
  color: #333;
  margin: 1em 0 3em;
  padding: 15px;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.triangle-border:before {
  border: 20px solid transparent;
  border-top-color: #5A8F00;
  bottom: -40px;
  content: "\00a0";
  display: block;
  height: 0;
  left: 40px;
  position: absolute;
  width: 0;
}
.triangle-border:after {
  border: 13px solid transparent;
  border-top-color: #FFF;
  bottom: -26px;
  content: "\00a0";
  display: block;
  left: 47px;
  position: absolute;
  height: 0;
  width: 0;
}

.triangle-border.top:before {
  border: 20px solid transparent;
  border-bottom-color:#5A8F00;
  bottom: auto;
  left: auto;
  right: 40px;
  top: -40px;
}
.triangle-border.top:after {
  border: 13px solid transparent;
  border-bottom-color:#FFF;
  bottom: auto;
  left: auto;
  right:47px;
  top: -26px;
}

.triangle-border.left {
  margin-left: 30px;
}
.triangle-border.left:before {
  border-width: 15px 30px;
  border-style: solid;
  border-color: transparent #5A8F00 transparent transparent;
  bottom: auto;
  left: -60px;
  top: 10px;
}
.triangle-border.left:after {
  border-width: 9px 21px;
  border-style: solid;
  border-color: transparent #FFF transparent transparent;
  bottom: auto;
  left: -42px;
  top: 16px;
}

Nulla quis eros dolor, eget tincidunt velit. Nam ultrices magna vitae eros accumsan vestibulum. Morbi quis dui ac justo volutpat sagittis a eget sapien.

.example-right {
  background: #5A8F00;
  background: -moz-linear-gradient(top, #b8db29, #5A8F00);
  background: -o-linear-gradient(top, #b8db29, #5A8F00);
  background: linear-gradient(top, #b8db29, #5A8F00);
  border-radius: 10px;
  color: #FFF;
  margin: 0;
  padding: 15px 30px;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
.example-right + p {
  margin: 15px 0 2em 85px;
  font-style: italic;
}
.example-right:after {
  border-width: 0 20px 50px 0px;
  border-style: solid;
  border-color: transparent #5a8f00;
  bottom: -50px;
  content: "\00a0";
  display: block;
  left: 50px;
  height: 0;
  position: absolute;
  width: 0;
}

Aliquam scelerisque cursus ante, et lobortis orci elementum in. In commodo ipsum nec leo malesuada aliquet.

.oval-thought-border {
  background: #FFF;
  border:10px solid  #C81E2B;
  color: #333;
  margin: 1em auto 80px;
  padding: 70px 30px;
  position: relative;
  text-align:center;
  -webkit-border-top-left-radius: 240px 140px;
  -webkit-border-top-right-radius: 240px 140px;
  -webkit-border-bottom-right-radius: 240px 140px;
  -webkit-border-bottom-left-radius: 240px 140px;
  -moz-border-radius: 240px / 140px;
  border-radius: 240px / 140px;
}
.oval-thought-border:before {
  background: #FFF;
  border: 10px solid #C81E2B;
  bottom: -40px;
  content: "\00a0";
  height: 50px;
  position: absolute;
  right: 100px;
  width: 50px;
  z-index: 10;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}
.oval-thought-border:after {
  background: #FFF;
  border: 10px solid #C81E2B;
  bottom: -60px;
  content: "\00a0";
  height: 25px;
  position: absolute;
  right: 50px;
  width: 25px;
  z-index: 10;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}