tag:blogger.com,1999:blog-6214992961626188952024-02-07T04:24:14.762+01:00Zona de PruebasAyuda para Bloggers??... bueno, se intentaZaeboshttp://www.blogger.com/profile/08767247851651728453noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-621499296162618895.post-64580790906879379902007-06-11T01:48:00.000+02:002007-08-19T12:37:43.156+02:00Tu foto o avatar en los comentarios<div style="text-align: justify;"><span class="dropcaps">G</span>racias a este truco que nos brinda <a href="http://purplemoggy.blogspot.com/2006/12/comment-author-photos.html"><span style="font-weight: bold;">PurpleMoggy´s Blog</span></a> podremos visualizar nuestras fotos o avatares de Blogger junto a los comentarios que dejemos en las entradas.<br />Para lograrlo tendremos que efectuar un par de pasos en la plantilla, pero nada demasiado complejo.<br /><br />Una vez hecha una copia de seguridad de nuestra plantilla, nos moveremos por el editor HTML con los widgets expandidos y buscamos la sección de comentarios de nuestro blog:<br /></div><br /><span style="color: rgb(0, 153, 0);font-size:85%;" > <dl id='comments-block'><br /> <b:loop values='data:post.comments' var='comment'><br /> <dt class='comment-author' expr:id='"comment-" + data:comment.id'><br /><span style="color: rgb(255, 0, 0);"><div class='commentphoto' style='float:right;'/></span><br /> <a expr:name='"comment-" + data:comment.id'/><br /> <b:if cond='data:comment.authorUrl'><br /> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /> <b:else/><br /> <data:comment.author/><br /> </b:if><br /> <data:commentPostedByMsg/><br /> </dt><br /> <dd class='comment-body'><br /> <b:if cond='data:comment.isDeleted'><br /> <span class='deleted-comment'><data:comment.body/></span><br /> <b:else/><br /> <p><data:comment.body/></p><br /> </b:if><br /> </dd><br /> <dd class='comment-footer'><br /> <span class='comment-timestamp'><br /> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'><br /> <data:comment.timestamp/><br /> </a><br /> <b:include data='comment' name='commentDeleteIcon'/><br /> </span><br /> </dd><br /><span style="color: rgb(255, 0, 0);"><div style='clear:both;'/></span><br /> </b:loop><br /></dl></span><br /><br /><br /><div style="text-align: justify;">Las líneas resaltadas en Rojo son las que tendremos que añadir a nuestra plantilla exactamente en las posiciones en las que veis arriba. Después de asegurarnos haber añadido correctamente este par de líneas, subiremos por nuestra plantilla hasta la etiqueta de cierre <span style="font-weight: bold;"></HEAD></span> y justo encima añadimos estas líneas:<br /></div><span style="font-size:85%;"><br /><span style="color: rgb(0, 153, 0);"><script src='http://jscripts.ning.com/get.php?</span><br /><span style="color: rgb(0, 153, 0);">xn_auth=no&id=830605' type='text/javascript'/></span><br /><span style="color: rgb(0, 153, 0);"><script type='text/javascript'></span><br /><span style="color: rgb(0, 153, 0);">//<![CDATA[</span><br /><span style="color: rgb(0, 153, 0);">addLoadEvent(function(){showCommentPhotos</span><br /><span style="color: rgb(0, 153, 0);">('commentphoto','comment-author', 1);});</span><br /><span style="color: rgb(0, 153, 0);">//]]></span><br /><span style="color: rgb(0, 153, 0);"></script></span><br /></span><span style="color: rgb(0, 153, 0);font-size:85%;" ><span style="font-size:78%;"></span><br /></span><br />Listo, ahora ya podremos ver nuestras imágenes asociadas a nuestra cuenta Blogger a la derecha de los comentarios.<br /><br /><div style="text-align: justify;"><span style="font-style: italic;">Actualizacion: Al cambiar ciertas partes del código para poder mostrarlo en un post he cometido algún error. Las lineas que hay que cambiar son estas, pero nolas he borrado arriba para no cometer el mismo error y de paso dejarlas en sus posiciones para que sirvan de referencia para encontrarlas en la plantillas.</span><br /></div><br /><span style="font-style: italic;">Primera linea a cambiar:</span><br /><span style="color: rgb(0, 153, 0);"><div class='commentphoto' style='float:right;'/></span><br /><br /><span style="font-style: italic;">Última linea a cambiar:</span><br /><span style="color: rgb(0, 153, 0);"><div style='clear:both;'/></span>Zaeboshttp://www.blogger.com/profile/08767247851651728453noreply@blogger.com10tag:blogger.com,1999:blog-621499296162618895.post-33738246920187396922007-02-26T01:00:00.000+01:002007-03-01T03:42:26.266+01:00Pon color en los comentarios<div style="text-align: justify;"><span class="dropcaps">E</span>ste código pretende darle un poco de vidilla a la plantilla de comentarios de tal manera que se pueda poner un poco de color en ellos. El código original es de <a href="http://stubborn-fanatic.blogspot.com/">Vivek Sanghi</a>, pero podéis encontrar el código y una buena explicación en <a href="http://gemablog-.blogspot.com/2007/02/comentarios-coloridos-para-entradas.html">Gem@BLOG</a>. Lo único que deberemos hacer en este caso es localizar en nuestra plantilla la seccion de Comentarios:<br /></div><br /><span class="fullpost"><span style="color: rgb(0, 0, 153);">/* Comments ----------------------------------------------- */</span><br /><span style="color: rgb(0, 0, 153);">#comments {</span><br /><span style="color: rgb(0, 0, 153);">margin:0;</span><br /><span style="color: rgb(0, 0, 153);">}</span><br /><span style="color: rgb(0, 0, 153);">#comments h4 {</span><br /><span style="color: rgb(0, 0, 153);">margin:0 0 10px;</span><br /><span style="color: rgb(0, 0, 153);">border-top:1px dotted $borderColor;</span><br /><span style="color: rgb(0, 0, 153);">padding-top:.5em;</span><br /><span style="color: rgb(0, 0, 153);">line-height: 1.4em;</span><br /><span style="color: rgb(0, 0, 153);">font: bold 110% Georgia,Serif;</span><br /><span style="color: rgb(0, 0, 153);">color:#333;</span><br /><span style="color: rgb(0, 0, 153);">}</span><br /><span style="color: rgb(0, 0, 153);">#comments-block {</span><br /><span style="color: rgb(0, 0, 153);">line-height:1.6em;</span><br /><span style="color: rgb(0, 0, 153);">}</span><br /><span style="color: rgb(0, 0, 153);">.comment-author {</span><br /><span style="color: rgb(0, 0, 153);">background:url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em; margin:.5em 0 0;</span><br /><span style="color: rgb(0, 0, 153);">padding:0 0 0 20px;</span><br /><span style="color: rgb(0, 0, 153);">font-weight:bold;</span><br /><span style="color: rgb(0, 0, 153);">}</span><br /><span style="color: rgb(0, 0, 153);">.comment-body {</span><br /><span style="color: rgb(0, 0, 153);">margin:0; padding:0 0 0 20px;</span><br /><span style="color: rgb(0, 0, 153);">}</span><br /><span style="color: rgb(0, 0, 153);">.comment-body p {</span><br /><span style="color: rgb(0, 0, 153);">margin:0 0 .5em;</span><br /><span style="color: rgb(0, 0, 153);">}</span><br /><span style="color: rgb(0, 0, 153);">.comment-body-author {</span><br /><span style="color: rgb(0, 0, 153);">margin:0; padding:0px 0px 0px 20px;</span><br /><span style="color: rgb(0, 0, 153);">}</span><br /><span style="color: rgb(0, 0, 153);">.comment-body-author p {</span><br /><span style="color: rgb(0, 0, 153);">font-size:100%; margin:0 0 .2em 0;</span><br /><span style="color: rgb(0, 0, 153);">color:#000000; text-decoration:bold;</span><br /><span style="color: rgb(0, 0, 153);">}</span><br /><span style="color: rgb(0, 0, 153);">.comment-footer {</span><br /><span style="color: rgb(0, 0, 153);">margin:0 0 .5em;</span><br /><span style="color: rgb(0, 0, 153);">padding:0 0 .75em 20px;</span><br /><span style="color: rgb(0, 0, 153);">color:#996;</span><br /><span style="color: rgb(0, 0, 153);">}</span><br /><span style="color: rgb(0, 0, 153);">.comment-footer a:link {</span><br /><span style="color: rgb(0, 0, 153);">color:#996;</span><br /><span style="color: rgb(0, 0, 153);">}</span><br /><span style="color: rgb(0, 0, 153);">.deleted-comment {</span><br /><span style="color: rgb(0, 0, 153);">font-style:italic;</span><br /><span style="color: rgb(0, 0, 153);">color:gray;</span><br /><span style="color: rgb(0, 0, 153);">}<br /></span></span><br /><br />Y sustituirlo por este otro:<br /><span class="fullpost"><span style="color: rgb(153, 0, 0);">/* Comments</span><br /><span style="color: rgb(153, 0, 0);">----------------------------------------------- */</span><br /><span style="color: rgb(153, 0, 0);">#comments {</span><br /><span style="color: rgb(153, 0, 0);">margin:0;</span><br /><span style="color: rgb(153, 0, 0);">}</span><br /><span style="color: rgb(153, 0, 0);">#comments h4 {</span><br /><span style="color: rgb(153, 0, 0);">margin:0 0 10px;</span><br /><span style="color: rgb(153, 0, 0);">border-top:1px dotted #99bb99;</span><br /><span style="color: rgb(153, 0, 0);">padding-top:.5em;</span><br /><span style="color: rgb(153, 0, 0);">line-height: 1.4em;</span><br /><span style="color: rgb(153, 0, 0);">font: bold 110% Georgia,Serif;</span><br /><span style="color: rgb(153, 0, 0);">color:#333;</span><br /><span style="color: rgb(153, 0, 0);">}</span><br /><span style="color: rgb(153, 0, 0);">#comments-block {</span><br /><span style="color: rgb(153, 0, 0);">line-height:1.6em;</span><br /><span style="color: rgb(153, 0, 0);">}</span><br /><span style="color: rgb(153, 0, 0);">.comment-author {</span><br /><span style="color: rgb(153, 0, 0);">background:<span style="font-weight: bold; color: rgb(0, 0, 0);">#CCFFCC;</span> /*comment header background color (comment author name)*/ url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em;</span><br /><span style="color: rgb(153, 0, 0);">margin:.5em 0 0;</span><br /><span style="color: rgb(153, 0, 0);">padding:0 0 0 20px; font-weight:bold;</span><br /><span style="color: rgb(153, 0, 0);">}</span><br /><span style="color: rgb(153, 0, 0);">.comment-body {</span><br /><span style="color: rgb(153, 0, 0);">background:<span style="font-weight: bold; color: rgb(0, 0, 0);">#99FFFF; </span>/*Reader comment background color*/</span><br /><span style="color: rgb(153, 0, 0);">margin:0;</span><br /><span style="color: rgb(153, 0, 0);"><span style="color: rgb(153, 0, 0);">padding:7px 7px 7px 7px;</span> /*Modified padding values*/</span><br /><span style="color: rgb(153, 0, 0);">}</span><br /><span style="color: rgb(153, 0, 0);">.comment-body p {</span><br /><span style="color: rgb(153, 0, 0);">margin:0 0 .5em;</span><br /><span style="color: rgb(153, 0, 0);">}</span><br /><span style="color: rgb(153, 0, 0);">.comment-body-author</span><br /><span style="color: rgb(153, 0, 0);">{</span><br /><span style="color: rgb(153, 0, 0);">background:<span style="font-weight: bold; color: rgb(0, 0, 0);">#cccccc; </span>/*The author comments background color.*/</span><br /><span style="color: rgb(153, 0, 0);">margin:0;</span><br /><span style="color: rgb(153, 0, 0);"><span style="color: rgb(153, 0, 0);">padding:7px 7px 7px 10px;</span> /*Modified padding values*/</span><br /><span style="color: rgb(153, 0, 0);">}</span><br /><span style="color: rgb(153, 0, 0);">.comment-body-author p {</span><br /><span style="color: rgb(153, 0, 0);">font-size:105%;</span><br /><span style="color: rgb(153, 0, 0);">margin:0 0 .2em 0;</span><br /><span style="color: rgb(153, 0, 0);">color:<span style="font-weight: bold; color: rgb(0, 0, 0);">#6728B2;</span> /*The author comments text color.*/</span><br /><span style="color: rgb(153, 0, 0);">text-decoration:bold;</span><br /><span style="color: rgb(153, 0, 0);">}</span><br /><span style="color: rgb(153, 0, 0);">.comment-footer {</span><br /><span style="color: rgb(153, 0, 0);">background:<span style="font-weight: bold; color: rgb(0, 0, 0);">#CCFFCC; </span>/*Comment footer background color (comment permalink)*/ margin:0 0 .5em;</span><br /><span style="color: rgb(153, 0, 0);">padding:0 0 .75em 20px; color:#996;</span><br /><span style="color: rgb(153, 0, 0);">}</span><br /><span style="color: rgb(153, 0, 0);">.comment-footer a:link {</span><br /><span style="color: rgb(153, 0, 0);">color:#996; }</span><br /><span style="color: rgb(153, 0, 0);">.deleted-comment {</span><br /><span style="color: rgb(153, 0, 0);">font-style:italic; color:gray;</span><br /><span style="color: rgb(153, 0, 0);">}</span></span><br /><br /><div style="text-align: justify;">El código está copiado exactamente igual de tal manera que las áreas en negrita se corresponden con los colores para la cabecera del comentario, el cuerpo y el pie. Estos valores se pueden cambiar por los que deseemos para darle una apariencia única a nuestros comentarios. A modo de aportación, añadiré que yo encuentro muy farragoso el hecho de tener que localizar el código de color, copiarlo y pegarlo cada vez que queramos cambiar los colores, ya que no siempre nos van a convencer las combinaciones resultantes o tal vez las queramos cambiar a menudo... ;) Así pues, podemos optar por esta otra alternativa, que no es otra cosa que definir cada color como una variable para que blogger nos la permita cambiar desde la pestaña "fuentes y colores".<br /></div><br /><div style="text-align: justify;">Localizamos la seccion Variable Definitions que encontraremos en la zona superior de nuestra plantilla y añadimos tres nuevas variables, una para el encabezado, otra para el cuerpo y otra para el pie:<br /></div><br /><br /><span style="color: rgb(0, 153, 0);">/* Variable definitions</span><br /><span style="color: rgb(0, 153, 0);"> ====================</span><br /><span style="color: rgb(0, 153, 0);"><Variable name="coment1color" description="color de cabecera del comentario"</span><br /><span style="color: rgb(0, 153, 0);"> type="color" default="#fff" value="#00FF80"></span><br /><span style="color: rgb(0, 153, 0);"><Variable name="coment2color" description="color de cuerpo del comentario"</span><br /><span style="color: rgb(0, 153, 0);"> type="color" default="#fff" value="#99C9FF"></span><br /><span style="color: rgb(0, 153, 0);"><span style="font-weight: bold; color: rgb(0, 0, 0);"> </span><Variable name="coment3color" description="color de pie del comentario"</span><br /><span style="color: rgb(0, 153, 0);"> type="color" default="#fff" value="#cc0000"></span><br /><br /><span style="font-size:85%;"><span style="font-style: italic;"></span></span><br /><div style="text-align: justify;">Ahora sustituímos los códigos de los colores en negrita del código por<br /><span style="font-weight: bold;">$coment1color</span>, <span style="font-weight: bold;">$coment2color</span> y <span style="font-weight: bold;">$coment3color</span><br /><br />De esta manera, si vamos a "Fuentes y Colores" en el diseño, podremos cambiar los parámetros de cada color siempre que queramos.<br /><br /><br /><span style="font-style: italic;">Actualización: ;) como podréis ver, me he comido unas cuantas varibles de color... es lo que tiene hacerlo sobre la marcha... :) en fin, en realidad son 5 variables a definir si es que queremos tener todo bajo control así que deberemos crear una línea para cada una de la misma manera que hicimos antes. </span><br /><br /></div>Zaeboshttp://www.blogger.com/profile/08767247851651728453noreply@blogger.com64