Mostrando entradas con la etiqueta Comentarios. Mostrar todas las entradas
Mostrando entradas con la etiqueta Comentarios. Mostrar todas las entradas

miércoles, 24 de abril de 2013

Habilitar los nuevos comentarios de Google+ en plantillas modificadas de Blogger

De seguro ya muchos se habrán dado cuenta de la nueva característica de comentarios de Google+ en Blogger, y es muy seguro de que a muchos de los usuarios no les funcionen en plantillas modificadas, incluso configurando desde la sección Google+ desde el escritorio de Blogger.

blogger, comments googleplus

En mi caso en particular, suprimí infinidad de elementos y comenté los scripts que cargan en el blog para poder tener la plantilla 100% validada en HTML5, por lo que usar las funciones por defecto no daban ningún resultado en mi blog.

Podemos usar un método alternativo genérico para cualquier página web, ya que este sistema no es exclusivo de Blogger. Para ello utilizaremos atributos con expr para poder transformarlos a nuestra plataforma:

Para plantillas HTML5:

<script src="https://apis.google.com/js/plusone.js">{lang: 'es'}</script><div class="g-comments" expr:data-href="data:post.url" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD" />

Para el contador de comentarios:

<div class="g-commentcount" expr:data-href="data:post.url" />

Si necesitas que tu plantilla esté 100% validada, podemos reemplazar:

<script src="https://apis.google.com/js/plusone.js">{lang: 'es'}</script>

Por esto:
<script type='text/javascript'>
//<![CDATA[
 window.___gcfg = {lang: 'es'};
 (function() {
   var crearjsplus = document.createElement('script'); crearjsplus.type = 'text/javascript'; crearjsplus.async = true;
   crearjsplus.src = 'https://apis.google.com/js/plusone.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(crearjsplus, s);
 })();
//]]>
</script>

Si usas una plantilla en XHTML no habrá problemas si usas los códigos anteriores, pero si por alguna razón se resiste el sistema a funcionar (Lo cual es casi imposible), puedes optar por la versión estándar:

<script src="https://apis.google.com/js/plusone.js">{lang: 'es'}</script><g:comments expr:href="data:post.url" first_party_property="BLOGGER" view_type="FILTERED_POSTMOD" />

Para el contador de comentarios:

<g:commentcount expr:href="data:post.url" />
Nota: El código de los comentarios lo puedes incluir en donde gustes, si quieres añadirlo debajo de los comentarios normales, símplemente busca esta línea:

<b:includable id='comment-form' var='post'>

Y debajo añades el código.

lunes, 5 de noviembre de 2012

Modificar el enlace "X Comentarios" en Blogger

Hace algún tiempo atrás vimos cómo añadir el Jumplink y el CommentLink en Blogger en plantillas que no incluían estas funciones.

En esta oportunidad veremos cómo modificar la forma en la que se muestra el mensaje bajo ciertas condiciones, es decir, cuando no hayan comentarios, cuando el total sea 1 sólo comentario o cuando estos sean plural.

El tutorial:

Recordemos que el código del CommentLink es el siguiente (Basado en una plantilla con los artilugios predeterminados):

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></b:if>
</b:if>
</b:if>

Si nosotros aprovechamos las condicionales de Blogger, podemos hacer que este mensaje varíe según la cantidad de comentarios que existan en la entrada.

La condicional para hacer esto requiere la cantidad de comentarios que se encuentren en una entrada, y para este fín la etiqueta <data:post.numComments/> nos servirá:

Recuerden que las condicionales de Blogger funcionan igual que las de javascript, podemos usar las etiquetas <data> y elegir un valor, que este valor se condicione de manera igual mediante el operador ==.

Sabiendo esto, podemos usar la etiqueta dentro de una condicional de esta manera:

<b:if cond='data:post.numComments == VALOR'>
</b:if>

Lo que aparezca encerrado dentro de esta condicional es lo que nosotros mostraremos, asignamos un valor que nosotros mismos añadiremos y encerraremos con el enlace:

<a class='comment-link' expr:href='data:post.addCommentUrl'>
  <b:if cond='data:post.numComments == 0'>
    Sin opiniones.
  </b:if>
 
  <b:if cond='data:post.numComments == 1'>
    Una opinión</b:if>
 
</a>

Pero, ¿Qué pasa si la entrada tiene más de 0, y más de 1?

Símplemente recurriremos a <b:else /> para que la condicional actúe cuando el valor sea diferente a 0, y dentro de ésta encerraremos la que irá entre 1 e infinito. Necesitaremos alterar un poco la estructura para que la condicional no se "confunda" y no nos muestre el mensaje duplicado.

<a class='comment-link' expr:href='data:post.addCommentUrl'>
        <b:if cond='data:post.numComments == 0'> <!-- Si el total de comentarios es igual a 0-->
                Sin Opiniones
        <b:else /> <!-- Si la condición anterior no se cumple se aplica lo siguiente -->

            <b:if cond='data:post.numComments == 1'> <!-- Si el total de comentarios es 1 -->
                Una opinión
            <b:else/> <!-- Si la condición no se cumple y tienen 2 o más comentarios -->

                <data:post.numComments/> Opiniones
          
            </b:if>

        </b:if>

</a>


Ese código debería dar un resultado como este:


Recuerda que debes encerrar el código mediante el siguiente para que el enlace aparesca únicamente en el índice del blog:
<b:if cond='data:blog.pageType == "index">
 <!-- El código anterior deberá ir aquí -->
</b:if>

Nota: El código completo debería reemplazar el código por defecto de tu plantilla, si no tienes en enlace puedes pegarlo justo debajo de:

<data:post.body />

jueves, 2 de agosto de 2012

Fondo en los comentarios del blog

Hace poco me preguntaron cómo hacía para poner una imagen de fondo en los comentarios, un fondo que es independiente del color de cada comentario. El fondo que le puse a los comentarios de mi blog es de unas nubecitas, fondo que pueden ver en cualquier entrada o en la siguiente imagen.


Colocar la imagen o un color es muy sencillo. Sólo seguimos estos pasos:

1.§ Vamos a Plantilla - Edición de HTML.

2.§ Con ayuda de CTRL+F buscaremos la siguiente línea:
#comments {
border: solid #78ut65; 1px;
margin:-25px 13px 0;
}
El contenido puede no ser identico al de nuestra plantilla. Lo importante es localizar la línea en negrita.
Debajo de #comments { pegaremos lo siguiente:
background: url(URL_IMAGEN_DE_FONDO) repeat;
Si queremos usar un color en lugar de una imagen, simplemente pondremos este código:
background: #9b1b8c;
3.§ Damos clic en Guardar y listo !

viernes, 17 de febrero de 2012

Cambiar avatar de comentarios anónimos en Blogger (Para los comentarios anidados)

Por desgracia para muchos cambiar la imagen de los comentarios anónimos puede ser un problema, ya que el método antiguo consistía básicamente en añadir una imagen de fondo que supliera la imagen faltante, pero ahora la cosa cambió.



Blogger en sus nuevos comentarios anidados muestra una imagen (Antes no incluía y el contenedor quedaba libre para añadir una imagen mediante el atributo "background"), y como ya recalcamos anteriormente, el cuerpo de estos mensajes no puede ser editado, por lo que dicha imagen siempre estará ahí.

Ahora bien, existe un método para añadir CSS mediante selectores de atributos, que básicamente consiste en crear selectores que contengan un atributo en particular. Con esta función podemos hacer que la imagen "desaparezca" y podamos nuevamente aplicar el efecto de imagen de fondo al contenedor sin necesidad de recurrir a métodos complicados.

El tutorial:

Si deseas pasar el tutorial e ir directamente al código presiona aquí


Para poder usar estos selectores de atributos, primero es necesario conocer su síntaxis correspondiente:
selector[atributo="valor"] {/*Atributos que se asignarán al selector*/}
Entenderla puede ser complicada al inicio, pero es muy sencilla y fácil de memorizar, veamos un ejemplo particular para situarnos mejor:
<a href="http://www.ayuda-bloggers.info" target="_blank">Enlace con atributo target</a>

El enlace anterior como es posible de apreciar, incluye el atributo target="_blank" (Permite abrir enlaces en otra pestaña), para poder dar atributos a TODOS los enlaces que incluyan este atributo, bastaría con usar la síntaxis, reemplazando los selectores:
a[target="_blank"] {/*Atributos que se asignarán al selector*/}

Ahora, que damos por entendido este ejemplo, procedemos a llevar a cabo nuestro objetivo.

Aprovecharemos entonces el atributo "src" para tomar la URL de la imagen que Blogger por defecto incluye en los comentarios (La URL de este avatar es "http://img1.blogblog.com/img/anon36.png"):

.avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {/*Atributos que se asignarán a la imagen con la URL seleccionada*/}
Ahora para ocultar esta imagen, bastaría con establecerle la opacidad al 0% (Puedes optar por usar el atributo "visibility:hidden", pero cualquiera de las 2 opciones es buena):

.avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {opacity:0;}
Y ahora, para establecer una nueva imagen bastaría con tomar el contenedor y añadir la URL mediante el atributo background:
.avatar-image-container {background:url(URL-IMAGEN);}
Quedando todo el código de la siguiente forma:
.avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {opacity:0;} 
.avatar-image-container {background:url(URL-IMAGEN);}
Reemplaza URL-IMAGEN por la dirección de la nueva imagen.

El código debería ir antes de:
]]></b:skin>

jueves, 19 de enero de 2012

Mostrar mayor número de comentarios al "Cargar más..."


En el anterior sistema de comentarios Blogger paginaba los comentarios, agrupándolos de 200 en 200. Este valor no se podía ni se puede cambiar, y para acceder a ellos había que hacer click en los enlaces de paginación para que cargara de nuevo la entrada con otros 200 comentarios.

En el nuevo sistema de comentarios anidados los comentarios cargan en la misma página, y cuando tenemos más de 200 comentarios en una entrada entonces debemos hacer click en "Cargar más..." para que se muestren más comentarios.

El inconveniente es que carga los comentarios de 50 en 50, así que quienes tienen entradas con muchísimos comentarios pierden algo más de tiempo en poder ver el último comentario publicado.

Por suerte, como este nuevo sistema de comentarios usa Javascript, y está insertado en nuestra plantilla, podemos modificar ese valor, de modo que podamos elegir cuántos comentarios mostrará en cada carga.

Sólo tenemos que entrar en la Edición HTML de la plantilla, marcar la casilla Expandir plantillas de artilugios y buscar esta línea:
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
Ese 50 en color rojo es el número de entradas que se mostrarán en cada carga, así que puedes cambiarlo por otro valor, por ejemplo 200
De esa forma, cuando quieras ver el resto de los comentarios, te aparecerán de 200 en 200 (suponiendo que lo hayas puesto en 200) en lugar de 50 en 50, con lo que ahorrarás algunos clicks y algo de tiempo.

domingo, 15 de enero de 2012

Numerar comentarios anidados en Blogger

Si antes de aplicar los comentarios anidados en tu blog poseías numeración en los comentarios,  puedes usar la siguiente alternativa para mantener tus comentarios con el número y sin necesidad de recurrir a algún script.

La solución la encontré en W3.org, en donde dan a conocer un sistema enumerador que al trabajar bajo CSS 2.1 tiene compatibilidad con todos los navegadores web, incluyendo Internet Explorer.



Podemos aprovechar esta útil función para enumerar los comentarios ya que esta versión no la posee.

Vista Previa de la enumeración:


El tutorial:

Para lograr enumerar los comentarios, recurriremos a 2 atributos cruciales: content y counter.

El atributo "content", permite generar contenido directamente con CSS, mientras que el atributo "counter", permite crear enumeraciones de distintas formas. Usaremos "content" para así incrustar el contador.

Para poder enumerar mediante "counter", primero hay que establecerle el atributo "counter-reset" al elemento padre (El que almacena todos los elementos que queramos enumerar). En nuestro caso, el elemento padre está denominado por la clase ".comments":
.comments {
counter-reset: numeros;
}
El valor numeros es un nombre que asignaremos para que se cumplan las instrucciones que posteriormente aplicaremos.

Ahora bien, que ya tenemos el elemento padre con el atributo, procedemos a crear las reglas CSS para la enumeración mediante el pseudo-selector ":after", el cual irá aplicado a los blockquotes (Cada comentario está establecido por la etiqueta </blockquote>):
.comments blockquote:after {
content: counter(numeros, decimal);
counter-increment: numeros;
}
Si bien este código ya mostrará la numeración, posiblemente la visualice mal ya que no contiene flotación ni ningún atributo extra. Puedes optar por el siguiente código el cual incluye algunas reglas para que se visualice correctamente la numeración y así no tengas que tomarte la molestia de crear tus reglas:
.comments {
counter-reset: numeros;
}

.comments blockquote:after {
content: counter(numeros, decimal);
counter-increment: numeros;
font-size: 20px; /*Tamaño del número*/
color:orange; /*Color del número*/
float:right;
margin:0;
margin-left:15px;
margin-top:14px;
}
 Recuerda que al ser un código CSS deberá ir antes de:
]]></b:skin>

jueves, 12 de enero de 2012

Los comentarios anidados en Blogger (Responder comentarios)



Ayer les mencionaba por Facebook y Twitter sobre la nueva función que Blogger ha presentado en los comentarios. Se trata de los comentarios anidados, es decir, la opción de responder directamente a un comentario.

Esta opción está disponible de forma nativa para las plantillas de Vistas Dinámicas y plantillas del Diseñador de Plantillas de Blogger, y no hay que hacer nada para activarlos, pero sí es necesario que tengas los comentarios debajo de las entradas, y que el feed de los comentarios esté en Completo (Más información)

Los que usamos plantillas personalizadas debemos hacer algunos cambios, en Oloblogger explican qué hay que cambiar para que esta nueva opción aparezca, y si usas Scriptaculous te darás cuenta que éste sistema no funciona, pero en Vagabundia dicen cómo modificar el script de Scriptaculous para solventar esto.

Como los comentarios ahora aparecen en bloques entrecomillados es posible que se vean bastante distintos a como los tenías, ahí mismo en Oloblogger resuelven esta situación si aplicamos los estilos de los bloques entrecomillados sólo para las entradas.

Pero además de esto, hay otras situaciones que se han venido con esta modalidad en los comentarios, por ejemplo, los emoticones en los comentarios no funcionarán*, la caja de comentarios de Facebook no se verá*, la numeración en los comentarios con script tampoco funcionará*, los bordes en los comentarios no se verán*, y al menos en mi caso, la paginación en los comentarios tampoco funciona*, aun cuando no he habilitado esta función (ni lo haré).

Así que supongo que en los próximos días tendremos que ir resolviendo uno a uno todas estas situaciones. Claro, para los que usen esta opción de responder, para los que nos quedemos con el formato de siempre no tendremos esos problemas, excepto el de la paginación de los comentarios, que parece que por ahora, tengamos esta opción o no, esos enlaces no funcionan.


*ACTUALIZACIÓN:
La entrada de la caja de comentarios de Facebook se ha actualizado para que ésta aparezca.
La entrada de los comentarios enmarcados ha sido actualizada para que funcione en este tipo de comentarios (sólo las dos primeras modalidades).

lunes, 19 de diciembre de 2011

Reducir el espacio debajo de los comentarios

No es que sea un problema, pero algunos encuentran esteticamente poco atractivo el espacio que hay entre el formulario de comentarios y los enlaces de navegación. No sé si sea mucho o poco espacio pues eso viene siendo relativo, lo cierto es que si no te gusta tener todo ese espacio no tienes que vivir con ello pues puedes modificarlo.


Para reducir el espacio que hay debajo de los comentarios ingresa a la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y busca este código:
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
Busca el segundo height que se muestra en color rojo y cambia su valor por uno más bajo, por ejemplo height='260'
Y habiendo hecho eso el espacio se habrá reducido.

Si se te dificulta encontrar el código guíate por la línea en color gris, pero toma en cuenta el height del cual hablamos aparece dos veces en ese código, y el que hay que modificar es el segundo.

martes, 6 de diciembre de 2011

Agregar la caja de comentarios de Facebook en Blogger

Uno de los temas más solicitados es cómo poner la caja de comentarios de Facebook en el blog, y es que a veces se vuelve más fácil comentar desde Facebook pues la mayoría está conectado a esa red social todo el tiempo, además no necesitamos ingresar con nuestros datos de Google para poder comentar en un blog que contenga este tipo de comentarios.

Este método lo vi en Vagabundia, donde explican cómo agregar el Plugin de comentarios de Facebook de manera que cada entrada tenga su propia caja de comentarios y sea independiente a las demás.

Antes de empezar asegúrate de tener los comentarios debajo de las entradas, pues el plugin lo pondremos en esa área así que es necesario tener los comentarios incrustados debajo de los posts.

Ahora sí, como primer paso entra en la Edición HTML del blog y marca la casilla Expandir plantillas de artilugios, luego busca la etiqueta:
<body>
Si usas una plantilla del Diseñador entonces la encontrarás como:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Debajo de cualquiera de ellas agrega esto:
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/es_LA/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
Después busca esta parte:
</b:includable>
<b:includable id='status-message'>
Y justo arriba de ella pega esto:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>
</b:if>

Con eso ya tendrás la caja de comentarios de Facebook en tus entradas (recuerda que debes ingresar a un post para poder verla).
La caja estará arriba de los comentarios de Blogger. Si quieres que esté debajo del formulario de comentarios entonces el código del plugin ponlo justo arriba de este código:
</div>
<b:if cond='data:post.includeAd'>

Dentro del código que añadimos veremos estos parámetros:
data-num-posts='5'
data-width='500'
data-colorscheme='light'
El primero es el número de comentarios que se mostrarán; el segundo el ancho del formulario; y el tercero el color del formulario, puedes cambiar light por dark

Hasta ahí ya tenemos el CommentBox de Facebook; si deseas personalizarlo un poco puedes colocar antes de ]]></b:skin> algunos estilos, por ejemplo:
#comentariosFacebook {
background:#F2F2F2; /* Color de fondo del contenedor */
width:520px; /* Ancho del contenedor */
padding:10px;
margin-top:0px; /* Cámbialo por -180px si lo has puesto debajo de los comentarios de Blogger */
}

Si quieres que cada vez que alguien haga un comentario te llegue una notificación de Facebook, y puedas moderar los comentarios, será necesario que crees una aplicación. Pero para ello es necesario tener verificada la cuenta de Facebook.

Si es así, entra a Facebook Developers y haz click en el botón Crear nueva aplicación.


Ahí escribe el nombre de la aplicación, acepta los términos y click en Continuar.


En la siguiente pantalla haz click en Sitio web, ahí escribe la URL de tu blog donde lo pondrás; también copia el número que está en App ID.


Ahora entra de nuevo en la Edición HTML de tu blog y pega antes de </head> esto:
<meta content='ID de USUARIO' property='fb:admins'/>
<meta content='ID de APLICACIÓN' property='fb:app_id'/>
En la ID de aplicación agrega la serie de números que copiaste. Y en ID de usuario agrega tu ID de Facebook, sino lo conoces ingresa a este enlace:
http://graph.facebook.com/usuario
Cambia donde se indica tu nombre de usuario y da click, ahí verás cuál es la ID de tu usuario de Facebook (Gracias a Siniestro por el tip).

Una vez hecho eso ingresa a una entrada para ver tu caja de comentarios y dale click en Configuración. Ahí verás varias opciones del plugin; en donde dice Moderadores, agrega tu nombre y guarda los cambios.


Una vez habiendo hecho todo lo anterior podrás moderar los comentarios y recibirás las notificaciones en tu cuenta de Facebook cada vez que alguien haga un comentario. Sino lo haces podrás seguir teniendo tu caja de comentarios de Facebook pero sin estas opciones.

Al final de la entrada he puesto una para que puedas probar el resultado, pero cualquier duda sobre el tema déjala en los comentarios de Blogger ;)

miércoles, 30 de noviembre de 2011

Personalizar Disqus con CSS

He visto muchos blogs en los que se utiliza Disqus como sistema de comentarios, lamentablemente esta magnífica extensión sólo posee 2 estilos: Houdini y Narcissus, y para algunos puede significar un contra al momento de usarla en su plantilla ya que la adaptación a veces no es muy buena.

Si bien en la página de Disqus explican los pasos para añadir CSS personalizado, no muestran los selectores necesarios para modificarlo, y en esta oportunidad mencionaremos los más importantes para que puedan así personalizar sus formularios exitosamente.

El tutorial:

Antes de empezar el tutorial aclararé que es posible insertar CSS directamente en la plantilla del blog o desde el escritorio de Disqus (Settings | Appearance). Recomiendo a ciegas que usen la función integrada de Custom CSS en Disqus para evitar así problemas de atributos (Si los insertan directamente en la plantilla necesitarán sobreescribir cada atributo con el valor !important).

Lista de selectores:

/*DISQUS SELECTORES CSS*/

.dsq-content-stub { /*LOGO DISQUS CARGANDO*/
}

/*SECCIÓN PARA POSTEAR*/
.dsq-post-area { /*Contenedor post completa*/
}

.placeholder { /*Textarea para comentar*/
}

.dsq-request-user-stats { /*Status del usuario*/
}

.dsq-button { /*Botón comentar*/
}

.dsq-subscribe-rss { /*Enlace suscripción RSS*/
}
.dsq-subscribe-email { /*Enlace e-mail*/
}

.dsq-comments-title {/*Mostrando X comentarios*/
}


/*COMENTARIOS*/

.dsq-comments { /*Contenedor de todos los comentarios*/
}
.dsq-header-avatar { /*Avatar del comentarista*/
}

.dsq-full-comment { /*Contenedor de comentario único*/
}

.dsq-comment-cite { /*Enlace nombre de perfil*/
}

.dsq-comment-header-meta { /*Cabecera comentarista*/

}

.dsq-comment-body { /*Cuerpo del mensaje*/
}

.dsq-button-small  { /*Botones del comentario*/
}

.dsq-pagination { /*Paginación de comentarios*/
}

/*FOOTER DISQUS*/

.dsq-item-trackback { /*Sección Trackbacks*/
}
Para que puedan modificar cada item de manera correcta he añadido un comentario destacado en color verde, recuerda que puedes aplicar los atributos que desees, si no sabes usar CSS te recomiendo que leas esta guía para que empieces a hacer tus propios cambios.

Si lo deseas puedes revisar este blog de pruebas para comprobar que la personalización funciona correctamente. El código que utilicé fué el siguiente, puede servirles como ejemplo:
.dsq-comment-body {
background:#fff;
border:1px solid #c0c0c0;
color:#222;
padding-bottom:10px;
font-size:12px;
font-family: Century Gothic, sans-serif;
}

.dsq-comment-text {padding:10px;}
.dsq-comment-header {background:#3d7196;color:#fff;margin-left:-6px;}
.dsq-comment-header a {color:#fff;}

#dsq-content .dsq-avatar img {
border: 0 none;
box-shadow:inset 1px 1px 1px #c0c0c0;
border-radius: 3px;
height: 36px;
width: 36px;
}

#dsq-content .dsq-avatar {
-webkit-transform: rotate(-10deg) scale(1.5) skew(1deg) translate(0px);
-moz-transform: rotate(-10deg) scale(1.5) skew(1deg) translate(0px);
-o-transform: rotate(-10deg) scale(1.5) skew(1deg) translate(0px);
z-index:200;
}

Importante:

Si hay algunas classes que no haya agregado puedes comprobarlas tu mismo con Firebug, una extensión para Firefox que permite analizar cada elemento y así detectar las classes. Si usas Google Chrome basta con seleccionar un elemento con botón derecho del mouse y selecciona "Inspeccionar elemento", ya que este último navegador incluye ya algo similar.

domingo, 23 de octubre de 2011

Mostrar trackbacks de Twitter en las entradas de Blogger

Los trackbacks son menciones desde un sitio a otro con el fin de promover los blogs de manera mas fácil. En Blogger no existe un sistema de visualización de trackbacks propio por lo que es un poco dificil conocer quién hace referencias a un sitio.

Existe un plugin llamado Twitter Trackbacks, un complemento basado en jQuery el cual permite integrar los trackbacks desde Twitter a algún sitio web. He hecho una adaptación al script para que funcione de manera automática en Blogger y no sea necesaria ninguna intervención.


El Tutorial:

Paso 1: Añadiendo jQuery y el script:

En "Diseño | Edición HTML" deberás buscar el siguiente código:

</head>

Arriba de este pega el siguiente:
<script type="text/javascript" src="http://dl.dropbox.com/u/28164309/AyudaBloggers/APPS/jquery.twittertrackbacks-1.0.min.js"></script>
<script charset='ISO-8859-1' src='http://dl.dropbox.com/u/28164309/Recompressed/jquery151.min.js' type='text/javascript'></script>

Si ya tienes instalado jQuery en tu plantilla deberás eliminar el código destacado.

Paso 2: Añadiendo los estilos:

Ahora busca la siguiente zona:
]]></b:skin>

Arriba de ésta pega el siguiente código:

ul.ttw-inner{
    padding:0;
    margin:0;
}
ul.ttw-inner li{
    border-bottom:silver 1px dotted;
    float:left;
    margin:1px 0 1px 0;
    padding:2px 2px 4px 2px;
    list-style-type:none;
    position:relative;
    height:48px;
    overflow:hidden;
    width:100%;
}

ul.ttw-inner span.ttw-author-img{
    display:block;
        padding:0;
    width:48px;
    height:48px;
    margin:0 5px 0 2px;
    left:0;
    position:absolute;
}
/* author name */
ul.ttw-inner strong a{
    margin-right:5px;
}
/* tweet body */
ul.ttw-inner span.ttw-body {
    display:block;
    margin-left:55px;
}
/* tweet content */
ul.ttw-inner span.ttw-content{}

/* tweet meta : date, reply, retweet line */
ul.ttw-inner span.ttw-meta {
    color:#999999;
    display:block;
    font-size:0.764em;
    margin:3px 0 0;
}
ul.ttw-inner span.ttw-meta a{
    color:#999999;
    text-decoration:none;
}
ul.ttw-inner span.ttw-meta a:hover{
    text-decoration:underline;
}

ul.ttw-inner a.ttw-reply { /* RESPONDER */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXL0f0Wtojge0bWJTnrxlstR6VOk-0M-6-l-7BlIoGCQesG6ezBcJ1edPl8jmvdYwGtzgWG5m_OMwbPeIeQUTjFzPYZNnlhtumbaCmAYMwfylGM5qwHRJHCwTwzQv89Wz1M5Jz3pInHY/s1600/icon-twitter-reply.png) no-repeat left;
padding-left:14px;
}

ul.ttw-inner a.ttw-retweet {  /* RETWITTEAR */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ctROOQEsdMmuhIJMTAuct6HlEYVjSAZxKRtMAFmTxWeGEmR6ge0nuWzJr9RFJ6ZMl-tYrcXXXhK42vIxgD1KIaQAUYUHfhT9RYtEUNw-i78bgBfh-NLvdqQVYKbVkCSQKX6XNdVhZbE/s1600/icon-twitter-retweet.png) no-repeat left;
padding-left:20px;
}


/*Hashtags -Ejemplo: #fail-*/

ul.ttw-inner a.ttw-hashtag { color:#2d2d2d; }
Paso 3: Añadiendo los trackbacks:

Ahora deberás buscar algún sitio en donde se mostrarán los trackbacks, mostraré un ejemplo de cómo situarlos debajo de cada entrada.

Busca en tu plantilla el siguiente código:
<data:post.body/>

Debajo de éste pega el siguiente:
<b:if cond='data:blog.pageType == "item"'><script type="text/javascript">
$(document).ready(function(){
   $('div.trackbacks-blogger').twitterTrackbacks({
      url:'<data:post.url/>'
      ,n:8
      ,show_n:0
      ,inf_tip:1
   });
});
</script>
<div id="twitter-tweets">
<div class="trackbacks-blogger">Cargando trackbacks....</div>
</div></b:if>

Guarda los cambios y listo.

Importante: 
  • Si los tweets se vén cortados o no se vén correctamente puedes aplicar CSS para corregir el alto y los paddings en el selector "ul.ttw-inner li".
  • Si no hay tweets de una entrada no cargará el contenedor y por lo tanto el mensaje "Cargando trackbacks...." no desaparecerá. Puedes cambiar este texto por uno distinto o bien twittea cada entrada que no tenga un tweet.
Documentación sobre el script en : Twitter Trackbacks Widget.

Traducción del script por Ayuda Bloggers.

sábado, 3 de septiembre de 2011

Pulgares de votación personalizables en Blogger

Hace varios meses atrás habíamos visto cómo añadir pulgares de votación tanto en las entradas como en los comentarios de Blogger. Gracias a PeliculasTube les enseñaré una sencilla forma de usar una imagen personalizada en los botones y además podremos redefinir el tamaño de los pulgares.

El tutorial:

Como la última vez que publiqué algo relacionado a este sistema no entendía mucho no le situé una buena localización a las secciones, por lo que haré los tutoriales nuevamente y esta vez será algo un poco mas elaborado.

Para instalar el script es necesario pegar el siguiente código antes de </body>:
<script charset='ISO-8859-1' src='http://dl.dropbox.com/u/28164309/Ayuda%20Bloggers/Recursos%20del%20Blog/RATINGSTHUMBS2.js' type='text/javascript'/>

Añadiendo los pulgares de votación en las entradas:

El resultado será muy similar a este:


En ''Diseño | Edición HTML'' marcaremos la casilla ''Expandir plantillas de artilugios'', buscaremos el siguiente código:
<data:post.body/>
Arriba de este, pegaremos el siguiente código:
<b:if cond='data:blog.pageType == "item"'>
<div class="js-kit-rating" style='float:left;padding-left:4px;padding-bottom:6px; padding-right:0px;width:110px;height:90px;background: #fafafa;border:1px solid #f5f5f5;border-radius:2px;box-shadow:1px 1px 1px #969696;margin-top:-2px;' expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title" imagesize="36x36" imageurl="http://1.bp.blogspot.com/-xFcwIBhJovk/TmKMLaE0wUI/AAAAAAAABlk/PKf9pu-JInI/s1600/thumbsbloggergrandes.png" view="score">
</div>
</b:if>

Cambia el valor float:left, por float:right si quieres que se sitúe a la derecha.

Guarda los cambios y listo.


Añadiendo los pulgares de votación en los comentarios:

Para que los pulgares de votación queden a la derecha del nombre del comentarista, deberás buscar el siguiente código, recuerda que ninguna plantilla es igual a otra así que deberás buscar los códigos por cuenta propia:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<div id='thumbscomentarios' style='float:right;margin-left:10px;margin-right:10px;margin-top:-18px;'>
<div class='js-kit-rating' expr:path='data:comment.cmtBodyIdPostfix' expr:permalink='data:post.url' expr:title='data:post.title' imagesize='18x18' imageurl='http://2.bp.blogspot.com/-BGqiGTIcRk0/TmFVKNGH2rI/AAAAAAAABlA/Vvy-k9l7OSA/s1600/thumbsblogger.png' view='score'>
</div></div>


<dd class='comment-body'>
<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'>
<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>
</dd>
</b:loop>
</dl>

Deberás agregar el código destacado entre los códigos correspondientes, una vez realizado, guardas los cambios y listo.

Cómo usar una imagen personalizada:

Como es posible apreciar, en ambos casos destaqué 2 valores importantes para esta acción, el valor imageurl, permite utilizar una imagen externa, mientras que el valor imagesize, permite definir el tamaño de cada ícono.

Para entenderlo mejor, veremos un ejemplo para imágenes de tamaño de 18px:

La estructura de la imagen deberá ser de la siguiente forma:


En este caso la imagen es de un tamaño de 36x36px, cada imagen es de 18px.

La imagen deberá tener 4 sprites, y el tamaño que asignaremos corresponde al tamaño de cada ícono (No el de la imagen total). Hay que tener cuidado de no sobrepasar los píxeles de cada ícono para evitar problemas.

viernes, 22 de julio de 2011

Poner emoticons en Blogger estilo Facebook

AVISO
Este truco sólo funciona en el sistema antiguo de comentarios. Si usas los comentarios anidados visita esta entrada de Vagabundia.



Las palabras no siempre son suficientes para expresar alguna emoción, sobre todo en el mundo cibernético donde todo tiene el sentido connotativo que cada uno le da. Es ahí cuando los emoticonos salen a nuestro rescate para poder reflejar algún estado de ánimo o gesto que a veces es más fácil expresar con una imagen.

Por esa razón muchos optan por usar emoticons en los comentarios del blog, y es eso mismo lo que haremos con esta entrada. Veremos cómo agregar emoticons en el blog estilo Facebook, es decir, con los mismos emoticons que usa Facebook en su chat y muro. Puedes verlos funcionando en este blog de pruebas.
Estos son los emoticones que verás:


Estos emoticons (emoticones, emoticonos, smiles, o como le quieras llamar) aparecerán sólo en los comentarios, y para ello usaremos un script de Vagabundia que ingeniosamente hace que los emoticons sólo se ejecuten en el cuerpo de los comentarios para no interferir con otras áreas.

Primero entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y agrega antes de </head> el siguiente script:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function emoticonComentario(emoticon) {
if(!document.getElementById) {return;}
bodyText = document.getElementById(emoticon);
cambiarLetra = bodyText.innerHTML;

// :)
cambiarLetra = cambiarLetra.replace(/:\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK4AMIiYKmB6Rg9kgyjjPFbxLsNHOaHXj2eoACmi80N0jT88183ZHKvvlmDNkoi2ZWZhyphenhyphen1W_-Ad4ninc0ULwnk6f_wjDdZnQwWRKYwaHZaCoGk6U3EdTO39MYnjHWL3-UKQ6BFQQiAV3g/" />');

// :(
cambiarLetra = cambiarLetra.replace(/:\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgai9UHGF3gW_0fRofwQUXRFR2elZyybP_za5YD7rhI-6mRjWQMfvKVSMbonoSybUf6P09FK3xvYqBdoypjElpOsiEPKKXmHbFt57UJdc_A3BvNZZf6zzjpRa1J3mwxbPDwSRMl41HrUdw/" />');

// ;)
cambiarLetra = cambiarLetra.replace(/;\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2WV1IhE9-w5vGZs9AeUu9lb58yUi11flKx9wMnwaAeVFnvgzkQEnkjNxGQUcJ4U78iU8ctcfEkdK_S0It8Yl5IwULomaqvI7XB7avbKfrP09tnvrTrXMH9hB0UrX7tN7IrewBJA6lPjM/" />');

// :P
cambiarLetra = cambiarLetra.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYV8vLPS5A5adXTj5940bpO86EEcsDYfWNN8S7R_wuE48zKQ-ARPK-IbOX_U6GrV0BJPp4HVpb_KXYA5no1Fsc3BF6Cd_xbb_vrW73RfpERD4gLyTeizK2RhrPs_An3dT44YUO0KH6csw/" />');
cambiarLetra = cambiarLetra.replace(/:\p/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYV8vLPS5A5adXTj5940bpO86EEcsDYfWNN8S7R_wuE48zKQ-ARPK-IbOX_U6GrV0BJPp4HVpb_KXYA5no1Fsc3BF6Cd_xbb_vrW73RfpERD4gLyTeizK2RhrPs_An3dT44YUO0KH6csw/" />');

// :D
cambiarLetra = cambiarLetra.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBxLYh4CiW3WGz4bRefbTQs2o6GLCP66uotbJdMzFh918SMH-egHNxsamoW_-8pBfyHP3NgIlXzsxY8RF2Ek_hLmnE6u-7Mq_1d-mZQpqg341J1lbwrdrmp9N-HcjbxUOzknxiH520J5s/" />');
cambiarLetra = cambiarLetra.replace(/:d/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBxLYh4CiW3WGz4bRefbTQs2o6GLCP66uotbJdMzFh918SMH-egHNxsamoW_-8pBfyHP3NgIlXzsxY8RF2Ek_hLmnE6u-7Mq_1d-mZQpqg341J1lbwrdrmp9N-HcjbxUOzknxiH520J5s/" />');

// XD
cambiarLetra = cambiarLetra.replace(/XD/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbLnf_Y9ivW8rJun0YdUiBtZWszzNeJXYxExU6-10ri8l7ky_B-MwQY9idG5g3rrG8GGu4IjgG4yNSwdGjOP8qEiS0w1oNICHSD8MJd3WVSGDjLUHAdu9ippBlG7aI6N-gI1a5EiljvyA/" />');

// :S
cambiarLetra = cambiarLetra.replace(/:S/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5-KyM5TFDjoZbtUUn0KZi9bLE0RA1nhs1gPjO4H9GejfQSOOdPLMUfrTnrdxfYVmA4fW8OU9q9EYZgQPaPD30OhajYSWYMTaRXf60Okv-QBSmVBvoHLQgnUkS4FSDA5UnqWNOMOypG-g/" />');
cambiarLetra = cambiarLetra.replace(/:s/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5-KyM5TFDjoZbtUUn0KZi9bLE0RA1nhs1gPjO4H9GejfQSOOdPLMUfrTnrdxfYVmA4fW8OU9q9EYZgQPaPD30OhajYSWYMTaRXf60Okv-QBSmVBvoHLQgnUkS4FSDA5UnqWNOMOypG-g/" />');

// X(
cambiarLetra = cambiarLetra.replace(/X\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwtQWRSgonFNyh0eQy_E50x4muXtxe1QIn_QykGqzQWyTCOgKiIjOSnQHUVrXSnhJjktm-tZkc_DBDV7hGrcdrXgO7WKbFa35Kci6HRIpMJevSfb0FpCHtwG1_f0bRSiALSS39aMv_Ijs/" />');

// :'(
cambiarLetra = cambiarLetra.replace(/:'\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh45wihqSZP57MUW46GACCSlDq1AZ6yZDdMcn62Pf2hyphenhyphenygAkrfySrFdcJrtQoy9-DLehoF-J1n3q_voMl7jyPL_xDK-Ct5uA2V33pHiZV9Vu4dCxOHO0ZZqDxXFHTbjrejgcMBDChC8n9I/" />');

// 8)
cambiarLetra = cambiarLetra.replace(/8\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwKYlivy5j5ha5m7jWRNCgYvk1yu_kN6vNS_XmzOekze9LvefcMV1jOGBzipbpb_yZLXa0bSOSnHHCoPF0FoF8IevhXi4ldgIl7spnZwtVrIzDjz5R2lrA2KkIX6ZLGaLUSGImZ59l7Ps/" />');

// :O
cambiarLetra = cambiarLetra.replace(/:\O/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTyEe5hnQB5swXs1zlvTiPhEeMHpBbeSHVdH5D9qsb3YUa6dybvWwt6Fdkuj5I2spIMTdovkYctVNjIYqoc8znnDRNj30KA88P9f-uaF8j2bncV86R379sCTxNjWYr8tn6KM7ksv5YjNE/" />');
cambiarLetra = cambiarLetra.replace(/:\o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTyEe5hnQB5swXs1zlvTiPhEeMHpBbeSHVdH5D9qsb3YUa6dybvWwt6Fdkuj5I2spIMTdovkYctVNjIYqoc8znnDRNj30KA88P9f-uaF8j2bncV86R379sCTxNjWYr8tn6KM7ksv5YjNE/" />');

// :*
cambiarLetra = cambiarLetra.replace(/:\*/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN4uvcxhDbU48ie9QbE4Jzk3v7E2aWVG0Gg7sYFeQrE-tDwxCGtXcc_-npcHNFNPs6FOMZRTGt2IMx1BuSK5z8I_rq58XhrKfL6yNUsExKBkuIO8croPfgMUkMoxb0o3QEFBuDEt69IpQ/" />');

// :A
cambiarLetra = cambiarLetra.replace(/:A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDld30lgF7Szi_M6QOoMFIUEYf-EvdhYa8C6dSBIUMOla2x-CUtebz5xrDA3-4bW0Qhhnt-Luy5duyIzzpOhqqcIYsL641iQtamIH11Vu8pB4SzvEgIvR8IhE6hE0Vmgefve5N45E__VA/" />');
cambiarLetra = cambiarLetra.replace(/:a/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDld30lgF7Szi_M6QOoMFIUEYf-EvdhYa8C6dSBIUMOla2x-CUtebz5xrDA3-4bW0Qhhnt-Luy5duyIzzpOhqqcIYsL641iQtamIH11Vu8pB4SzvEgIvR8IhE6hE0Vmgefve5N45E__VA/" />');

// 3:
cambiarLetra = cambiarLetra.replace(/3:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSDIyp4ywUCPMwaL_Fo5RLZMEOnGuSv9LElFREA4CRWH4nEcYIsfwNDxsJEmc6dngNsi8LCcWalfSU8QgoaP7VBJz9W-vmmn7dqKw_MeM_lI47CmlodjP9Zp8kEXx0YYt8m8E8Iph1Cs/" />');

bodyText.innerHTML = cambiarLetra;
}
//]]>
</script>
</b:if>

Ahora busca esta parte:
<p>
<data:comment.body/>
</p>

Y cámbiala por este código:
<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p>
<script type='text/javascript'>
emoticon = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;
emoticonComentario(emoticon);
</script>

Luego busca esta línea:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
Muy posiblemente la encontrarás dos veces, justo debajo de la segunda que encuentres agrega esto, que es la imagen que se mostrará arriba del formulario de comentarios:
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJgJybLaFYfu7eJqRvor4SnqS9M2VXO8EtraaUEHTtoF-KI3BDKXplzYK-lEMXVfk9OA3_8WfQdrIL8g0z3DFeaXrfaL3V8Y1VzBsOKyOiftKDuFQERuLyBLQxKg7FZaUljdeSRZ2aMRU/'/>
Y listo, tendrás estos emoticonos en tu blog. Estas imágenes son tomadas del mismo Facebook y tienen el contorno ligeramente marcado de blanco, por lo que se recomienda usarlo en blogs con colores claros para que no se note ese pequeño borde alrededor de ellas.
O si lo prefieres puedes cambiar los iconos por los tuyos, sólo busca las URLs de las imágenes del primer código que corresponden a cada juego de caracteres, los he señalado en color verde para que sean más fácil de encontrar.

Que los disfruten

domingo, 17 de julio de 2011

Avatares redondeados en los comentarios en Blogger

Algunos usuarios me han preguntado cómo añado los avatares de los comentarios del blog en forma de círculo y cómo también se muestra un avatar para el usuario anónimo que comenta.

En esta oportunidad les compartiré el mismo estilo que utilizo yo en los avatares.
El resultado es muy similar a este:

Avatares redondeados.
Recuerda que sólamente es el estilo de los avatares, lo demás no está incluído.

Tutorial:

En ''Diseño | Edición HTML'' (''Plantilla | Editar Plantilla'' si usas Blogger 2011) busca la siguiente sección:
]]></b:skin>
Arriba de esta, pega el siguiente código:
#comments-block.avatar-comment-indent {
margin-left: 0;
}
#comments-block .avatar-image-container {
border-radius:45px;
float: left;
height: 49px;
position: static;
width: 49px;
}
#comments-block .avatar-image-container img {
border-radius:45px;
display: block;
float: none;
min-height: 45px;
min-width: 45px;
padding: 2px;
}
#comments-block .avatar-image-container.avatar-stock {
border-radius:45px;
background: #dadada url(http://3.bp.blogspot.com/-Ug-KluyFuHk/TiNB5HDJUeI/AAAAAAAABaE/BmDbfhNf4nI/s1600/question+comments.png) no-repeat 50% 50%;
}
#comments-block .avatar-image-container.avatar-stock img {
display: none;
}
img.delayLoad {
max-height: 45px;
max-width: 45px;
min-height: 45px;
min-width: 45px;
}

Guarda los cambios y listo.

Importante: 
  • Es muy posible que necesites modificar las secciones para que los avatares no sobrepongan los comentarios.
  • Si no se ven bien, tendrás que aplicar estilos al contenedor ''comment-author''.
  • Yo creé una imagen redonda para los comentarios anónimos, pero no es necesario ya que si utilizas una imagen de 45x45px cuadrada, se verá redonda igual.

miércoles, 29 de junio de 2011

Emotícones en Blogger (Versión Taringa!)

Muchos usuarios conocen la comunidad Argentina llamada Taringa!, en lo personal me encanta por la variedad de contenido que hay en ella. Algo también que me gusta es el sistema de emotícones, por lo que me empeñé en recrear algo similar en Blogger.

El resultado es el siguiente:
 


Esta variedad muestra una lista de la misma forma que lo hace Taringa mediante un popup.

Contiene casi todos los emotícones de esta comunidad, a excepción de 3 2 que no pude añadir por un conflicto en HTML.

¿Cómo añadir los emotícones?

Paso 1: Añadiendo el script:

En ''Diseño | Edición HTML'' marcaremos ''Expandir plantillas de artilugios''. Buscaremos la siguiente zona:
</body>
 Justo arriba de esta pegaremos el siguiente código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/Emoticones%20Ayuda%20Bloggers-old.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

Paso 2: Añadiendo el enlace en el formulario:

Ahora deberás buscar la siguiente línea:
<data:postCommentMsg/>
Si se repite en la plantilla, deberás buscar uno muy similar a este:
<h4><data:postCommentMsg/></h4>
Si usas una plantilla clásica el código será muy similar a este:
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
Debajo de este, deberás pegar el siguiente código:
<a href='' onclick='openpopup(); return false' style='font-size: 14px;'>Mostrar Emotícones</a>
<script type='text/javascript'>
function openpopup(){
var winpops=window.open(&quot;http://dl.dropbox.com/u/28164309/Resources/Lista%20Emoticones%20Ayuda%20Bloggers/emoticones.php.htm&quot;,&quot;&quot;,&quot;width=180px,height=500px,scrollbars,resizable&quot;);}
</script>

Guarda los cambios y listo.


Importante:

La lista de emotícones es la siguiente:





Si lo deseas puedes probarlos en mi blog, pero recuerda no hacer spam con ellos.

lunes, 20 de junio de 2011

Usar el mismo avatar en todos los comentarios propios

AVISO
Este truco no funciona en los comentarios anidados de Blogger.


¿Les ha pasado alguna vez que por andar de curiosos eliminaron sin querer la foto del perfil y por consiguiente el avatar en los comentarios dejó de verse? ¿O quizá alguna vez usaron un avatar que ya no les gusta pero no quieren eliminar el comentario ni dejar ese comentario sin avatar?
Pues no sé ustedes pero yo siempre he sido muy curioso, una vez entré a mi cuenta de Picasa, vi una carpeta que decía 'Imágenes de Blogger', y como vi muchos avatares repetidos los eliminé, y claro, mis comentarios antiguos dejaron de tener avatar. Y peor aun, mi primer avatar era una foto mía sin camisa (no se preocupen chicas, prometo no volver a hacerlo), luego me arrepentí de subir esa foto pero no quería ni eliminar esos comentarios ni eliminar el avatar para evitar dejar ese icono que siempre nos recuerda que una imagen está rota

¿Qué podemos hacer en estos casos? Si por haber eliminado tu foto tienes comentarios sin avatar, o si simplemente quisieras que todos tus comentarios (propios por supuesto) tengan la misma imagen aun cuando sean comentarios antiguos, lo que podemos hacer es usar un código para condicionar nuestro avatar de manera que la imagen que elijamos aparezca por defecto en todos los comentarios propios, tanto aquellos antiguos como los actuales y futuros. Así que si a los largo de la vida de tu blog has usado varios avatares en los comentarios podrás cambiar todos ellos por la imagen que quieras.


Para conseguir tener el mismo avatar en todos tus comentarios entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca este código:
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Una vez encontrado reemplázalo por este:
<b:if cond='data:blog.enabledCommentProfileImages'>
<b:if cond='data:comment.authorUrl == &quot;URL de tu perfil de Blogger&quot;'>
<!-- Inicia mi avatar -->
<div class='avatar-image-container'>
<img src='URL de la imagen' style='height:100%; width:100%;'/>
</div>
<!-- Termina mi avatar -->
<b:else/>
<data:comment.authorAvatarImage/>
</b:if></b:if>
Cambia donde se señala, la URL de la imagen del avatar que quieres mostrar, así como la URL de tu perfil de Blogger, es algo como esto:
http://www.blogger.com/profile/XXXXXXXXXXXXXXXX
Como estamos usando la URL del perfil eso evitará que el avatar se muestre en otro comentarista que tenga el mismo nick que el nuestro (gracias a Felipe por ese tip)

Con eso conseguirás que absolutamente todos tus comentarios tengan el mismo avatar, sin importar si tenías comentarios sin foto.
Si el blog tuviera dos autores y deseas que el otro autor tenga su propio avatar personalizado en todos sus comentarios entonces en ese caso en lugar de ese código, el que habrá de ponerse es este:
<b:if cond='data:blog.enabledCommentProfileImages'>
<b:if cond='data:comment.authorUrl == &quot;URL de tu perfil de Blogger&quot;'>
<!-- Inicia mi avatar -->
<div class='avatar-image-container'>
<img src='URL de la imagen' style='height:100%; width:100%;'/>
</div>
<!-- Termina mi avatar -->
<b:else/>

<b:if cond='data:comment.authorUrl == &quot;URL del perfil de Blogger del otro autor&quot;'>
<!-- Inicia avatar otro autor -->
<div class='avatar-image-container'>
<img src='URL de la imagen del otro autor' style='height:100%; width:100%;'/>
</div>
<!-- Termina avatar otro autor -->
<b:else/>

<data:comment.authorAvatarImage/>
</b:if></b:if></b:if>

Cambia donde se indica las URLs de los perfiles de los dos autores. Y de igual manera pon la URL de las imágenes donde se indica.

Debo aclarar que obviamente esto sólo afecta a tus propios comentarios y únicamente en los comentarios que hayas hecho en tu propio blog.

martes, 7 de junio de 2011

Cambiar el mensaje''dijo'' en los comentarios de Blogger

Cuando un lector o nosotros mismos escribimos un comentario en nuestro blog, nos damos cuenta de que aparece en el nombre del autor del comentario un mensaje que dice ''dijo...'', si no queda claro, veamos un ejemplo mediante la siguiente imagen:



El mensaje es aquel que se situa a la derecha del nombre del comentador.

¿Cómo cambiar este valor?:

Para cambiar este mensaje, deberás ir a ''Diseño | Edición HTML'', en donde marcaremos ''Expandir plantillas de artilugios''. Buscaremos la siguiente línea:
<data:commentPostedByMsg/>
Esta línea deberá ser reemplazada por el fragmento de texto que aparecerá junto al nombre del autor.

Recuerda que si deseas restaurar el mensaje puedes escribirlo de forma manual o volviendo a agregar la línea reemplazada.

jueves, 5 de mayo de 2011

Thumbs Up and Down en Comentarios de Blogger

Hace algún tiempo hablaba de añadir pulgares de votación en las entradas de Blogger. En esta oportunidad y a petición de @vivavalve mostraré cómo añadir un sistema de puntuación a cada comentario de nuestras entradas.


Vista previa del script:


Puedes ver trabajando este sistema en este blog de pruebas.

¿Cómo añadirlo a Blogger?

Paso 1: Añadiendo la sección:

Primero, vamos a ''Diseño | Edición HTML'', en donde marcamos ''Expandir plantillas de artilugios'', buscaremos la siguiente sección:
<dd class='comment-body'>

Si utilizamos una plantilla del Diseñador de Blogger, la sección a buscar es la siguiente:
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

Debajo de ésta, pegaremos el siguiente código:
<div id='thumbscomentarios'>
<div class='js-kit-rating' expr:path='data:comment.cmtBodyIdPostfix' expr:permalink='data:post.url' expr:title='data:post.title' view='score'>
</div></div>


Paso 2: Añadiendo el script:

Ahora buscaremos la siguiente sección en nuestra plantilla:
</body>

Antes de esta, pegaremos el siguiente script:

<script src="https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts/RATINGSAYUDABLOGGERS.js"></script>


Paso 3: Añadiendo la flotación mediante CSS:

Busca la siguiente zona de tu plantilla:
]]></b:skin>

Arriba de ésta, pega el siguiente código:
#thumbscomentarios {
float: right;
padding:3px;
}


Guarda los cambios y listo.

jueves, 21 de abril de 2011

Top comentaristas en Blogger

Existe una forma bastante particular de obtener obtener una lista de los mejores comentaristas de nuestro blog, para ello utilizaremos una herramienta llamada Pipes. Permite visualizar mediante RSS la lista de últimos mejores comentaristas junto con la cantidad numérica de sus comentarios.
 
Vista previa:


¿Cómo obtener este gadget?

Primero, vamos a ''Diseño | Elementos de la página'' en donde agregaremos un gadget:


En la lista buscaremos el gadget Feed:


En este gadget, pegaremos la siguiente dirección:

http://pipes.yahoo.com/pipes/pipe.run?_id=491c057ab3a20b1aee3491e2c3d2210e&_render=rss&num=50&url=http%3A%2F%2Ftu-blog.blogspot.com

Reemplaza tu-blog.blospot.com por la dirección de tu blog (Sin http://)

jueves, 24 de marzo de 2011

Insertar avatar a los comentarios anónimos en Blogger

Cuando algún usuario escribe de forma anónima, se muestra un ícono o simplemente no aparece nada en la zona del avatar de los comentarios.

Con este sencillo tutorial podremos agregar una imagen a todos los comentarios anónimos y a los comentarios con identificación mediante nombre y URL.

¿Cómo agregar un avatar a los usuarios anónimos en Blogger?

Primero, vamos a ''Diseño | Edición HTML'' en donde buscamos la zona de nuestro CSS:
]]></b:skin>
Sobre este código, deberás pegar el siguiente:
/* avatar comentarios anónimos
----------------------------------------------- */
#comments-block.avatar-comment-indent {
margin-left: 0;
}
#comments-block .avatar-image-container {
float: left;
height: 49px;
position: static;
width: 49px;
}
#comments-block .avatar-image-container img {
background:#234 url(https://lh6.googleusercontent.com/-y3a8mvMp3Zc/TYgvTnMzodI/AAAAAAAAAis/C4ZMS7S5RG4/s1600/default-image+%2528Custom%2529.png) no-repeat 50% 50%;
border: 1px solid #456;
display: block;
float: none;
min-height: 45px;
min-width: 45px;
padding: 2px;
}
#comments-block .avatar-image-container.avatar-stock {
background: #234 url(https://lh6.googleusercontent.com/-y3a8mvMp3Zc/TYgvTnMzodI/AAAAAAAAAis/C4ZMS7S5RG4/s1600/default-image+%2528Custom%2529.png) no-repeat 50% 50%;
border: 1px solid #456;
}
#comments-block .avatar-image-container.avatar-stock img {
display: none;
}
img.delayLoad {
max-height: 45px;
max-width: 45px;
min-height: 45px;
min-width: 45px;
}



Guardamos los cambios y listo:





Por defecto se mostrará este avatar:


Para cambiarlo reemplaza las URLs en rojo por la dirección de la imagen.