Poner una imagen al formulario de comentarios

El truco de poner una imagen al formulario de comentarios, puede incentivar a tus lectores o visitantes a dejar un comentario en tu post. De esta manera tus entradas serán más comentadas.

Para poner dicha imagen es bastante sencillo, lo primero tienes que hacer es asegurarte de que el formulario de comentarios lo tienes ubicado en Entrada incrustada a continuación.

Para configurar el formulario nos dirigimos a Configuración > Comentarios y busca Ubicación del formulario de comentarios, marca la casilla Entrada incrustada a continuación.

Bueno, ahora nos ve a Diseño > Edición de HTML > Expandir plantillas de artilugios  busca el siguiente código:

 <b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>


Ahora sólo tienes que sustituir lo que está en rojo por el siguiente código:


<img src="http://www.fileden.com/files/2009/7/2/2496611/coment-pb.jpg"/>

Lo que está en verde cámbialo por la URL de tu imagen.  

Read more »

Enmarcar y separar comentarios en Blogger

Los comentarios son una parte fundamental de un blog, pues en ellos se ve reflejada la opinión de los lectores respecto a una entrada o nuestro sitio, por lo tanto es importante dedicarle un poco de nuestro tiempo para hacer de esta área un espacio presentable, accesible y ordenado.

Y si de orden se trata entonces es necesario que cada comentario pueda identificarse donde empieza y dónde termina, de lo contrario se convierte en un revuelto de letras del cual el lector puede salir huyendo. Veamos pues algunas formas de darle un poco de orden para delimitar el área de cada comentario.

El primer método es el más sencillo, y se trata de poner un borde debajo de los comentarios, esto es para separar cada comentario del blog de una forma simple pero efectiva.

 Para agregar este separador sencillo sólo entra en Diseño | Edición de HTML y antes de
]]></b:skin> pega lo siguiente:

#comments-block .comment-footer {
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

Podemos hacer lo mismo pero que el separador de comentarios sea una imagen.

En ese caso el código que has de pegar es el siguiente:

#comments-block .comment-footer {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZtrV95iLc7lidlL5yverzFhEXV4nh_97IhwOlevn6tYrJudt_EZTvKN9FFObm_olUsconNKEe4HEyj7ZbVM6QicwmJ1KD0mpwuTXLq_T2tr69GZROIpcmr9DM0ge-TXIG9kt4GU5K2s/);
background-repeat:no-repeat;
background-position:center bottom;
height:70px;
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

La URL que está en color azul es la imagen que puedes cambiar por la que gustes, sólo recuerda que en el height deberás establecer la altura de la imagen más unos 20px más, por ejemplo, si el alto de la imagen es de 50px entonces el valor será de 70px
Esto es únicamente para que la imagen no se encime a la fecha de los comentarios.

Read more »

Enumerar comentarios

Enumerar los comentarios puede ser muy útil para darle un poco de orden al blog. Con esto consigues que la lista de comentarios realizados en tu blog se vean mucho mas ordenados y visiblmente mejor..

Vista previa del enumerado:

 
Primero, vamos a ''Diseño/Edición HTML'' en donde presionamos en ''Expandir plantillas de artilugios''. Buscaremos el siguiente código:

 <b:loop values='data:post.comments' var='comment'>

 Sobre esa línea pegaremos el siguiente código:

<script type='text/javascript'>var contadorComentarios=0;</script>

Ahora buscamos el siguiente codigo
 

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

  Y debajo del codigo anterior pegamos el siguiente codigo

<!-- Numerar comentarios -->
<div class='comentacontador'><a expr:href='&quot;#comment-&quot; + data:comment.id' title='Enlace al comentario'><script type='text/javascript'>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios);
</script></a></div>

Ahora para darle un poco de estilo al numerador buscamos el siguiente codigo

]]></b:skin>

Arriba del anterior codigo pegas el siguiente:

.comentacontador a {
float:right;
margin-top:-20px;
margin-right:20px;
font-size: 18px;
color: #999999 !important;
text-decoration:none;
padding:0px 4px;
}
.comentacontador a:hover {
color: #333333 !important;
}

Por ultimo guardamos la plantilla,y eso es todo ante cualquier duda no olviden preguntar. 

Read more »

Pulgares de votación para los comentarios de Blogger

Despues de tanto buscar una forma de votar los comentarios en Blogger porfin encuentro esta forma,muy estilizada y facil de aplicar..

El truco se ve de la siguiente manera:

Pasos.

1. Vamos a Diseño,Edicion HTML,Expandir plantillas de artilugio y buscamos el siguiente codigo:

 

<dd class='comment-body'>

Si utilizas una plantilla hecha por el Diseñador de plantillas de Blogger entonces buscas el siguiente codigo:

 

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

2. Luego pegamos debajo del codigo anterior (segun sea tu caso) el siguiente:

 

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

3. Ahora para añadir el script buscamos la siguiente etiqueta

 

</body>

Encima de la etiqueta anterior pega lo siguiente:

 

<script src='https://sites.google.com/site/miltrucosblogger/script/RATINGSMILTRUCOSBLOGGER.js'/>

4. Ahora por ultimo le añadimos estilo CSS,busca el codigo

 

]]></b:skin>

Y encima del anterior codigo pega lo siguiente:

 

#thumbscomentarios {
float: right;
padding:3px;
}

Listo

Read more »

Opcion "Responder" en los comentarios de Blogger

Este es un truco bastante practico ya que si queremos citar y responder a un comentario en especial,al hacer click en "Responder" automaticamente se escribira un codigo en el formulario de comentarios con el link del usuario al que le quieres responder.

 Pasos 

1.Debes buscar el ID de tu blog

Debes irte a tu panel de blogger, entra a Diseño > Edicion HTML ahora ahi mira la barra de direccion de tu navegador y los numeros que aparecen ahi son el ID de tu blog.

2. Ahora ahi en tu panel de blogger en Diseño > Edicion HTML hazle click en Expandir plantillas de artilugio y debes buscar este codigo 

<data:commentPostedByMsg/>

 

Abajo de el anterior codigo pega lo siguiente:

 

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=id de tu blog&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=450,height=450&quot;); return false;'>[Responder]</a></span> 

 

3.  Ahora solo cambia la ID de tu blog y guarda los cambios.  

Read more »

Poner una Imagen a los Comentarios Anónimos

Por defecto Blogger no muestra ninguna imagen cuando un usuario anonimo comenta en nuestro blog ,pero eso se puede solucionar con un pequeño truco el cual te traigo hoy.

Cada vez que un usuario anonimo comente en tu blog se vera de la siguiente manera:

 Pasos

Es muy facil de agregar este truco solo vamos a Diseño,Edicion HTML y buscas la etiqueta ]]></b:skin> y encima de ella agregas el siguiente codigo:

<!-- Avatar en comentarios-->

     #comments-block .avatar-image-container.avatar-stock img { 

    display:none; 

    } 

    #comments-block .avatar-image-container.avatar-stock { 

    background:transparent url(URL del Avatar) no-repeat scroll 50% 50%; 

    } 

<!-- Avatar en comentarios-->

 

 Cambias lo que esta en color azul  por la URL de tu avatar (de 35x35 pixeles para que se vea bien)  y listo guardas los cambios.

 

Read more »

Habilitar la Opción Responder a Este Comentario

Ahora en Blogger podemos disfrutar de esta opción gracias al ingenio de Jaime Trujillo. Para habilitar está opción en tu blog ve a Diseño > Edición de HTML > Expandimos los Artilugios  > y con la ayuda de (Ctrl+F) buscamos la siguiente línea de código:

<data:commentPostedByMsg/>

Una vez has encontrado la línea de código de arriba, pega a la izquierda o derecha el siguiente código:

<span class='blrespondrcmnt'><a title='Responder a este comentario' expr:href='&quot;https://www.blogger.com/comment.g?blogID=LA ID DE TU BLOG&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;'><img style="float:right" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_BMCMMAYxcZti_BPfHLTA0ZHE5Q6AdJ7dBPAq6aLq2ca0rWGPak2iFXeQ9Tls0FC2Dg0_281_NUbQqLsAhgWwsvT7BJP5Tt8o8PccY8epdAliUQz-guAqnNzfHqf8BQHyKGBY3maqKIOz/'/></a></span>

 

 

Ahora tienes que remplazar lo que está en color rojo por la ID de tu blog, fíjate en la barra de direcciones verás que aparece una dirección de tu blog así como la siguiente:

http://www.blogger.com/htmlblogID=xxxxxxxxxxxxxxxxx

Fíjate que donde he puesto puro x tiene varios números que son la ID de tu blog, copia esos números y remplázalo donde indica en el código de arriba.

Cambia  lo que está en color verde por la URL de tu imagen o icono. Hecho todo lo anterior, guardas los cambios y listo.

 

Resultado

Read more »