CÓMO PONER EL NÚMERO DE COMENTARIOS DEBAJO DEL TÍTULO DEL POST

21 ene. 2016

como-poner-numero-comentarios-debajo-titulo-post

Después de la marabunta de emails recibida esta semana (muchos tenéis muchas ganas de colaborar conmigo) vamos a seguir con la iniciativa de "Crea tu blog cañero". Antes de enharinarnos hasta las cejas, os recuerdo que esta es la tercera parte, por lo que podéis visitar las dos entregas anteriores:
CÓMO DISEÑAR TU BLOG CAÑERO: PARTE I
CÓMO DISEÑAR TU BLOG CAÑERO: PARTE II
Como ya os comenté en su momento el propósito de todo esto es ayudaros a que vuestro blog mole un poquito más, así que os he preparado un tutorial, sencillito (no empecéis a arrancaros los pelos antes de tiempo) para que aprendéis cómo poner el número de comentarios de vuestras entradas, justo debajo del título del post, como lo tengo puesto yo.

Así que sin más rollos, que el martes me di 4 vueltas por los cerros, pasamos al tuto. Espero que os guste y que os salga.

EL TUTORIAL

El tutorial consiste en colocar el número de comentarios justo debajo del título de la entrada. De esta manera nuestros lectores sabrán cuántos comentarios hay e incluso se animarán a dejaros uno.

Si miráis más abajo y veis la cantidad de código que hay fijo que os vais a asustar. Puede parecer súper complicado. Sé de muchos que tienen pesadillas con esto, pero no os preocupéis que va a ser muy muy fácil. Si seguís bien los pasos, en menos de 5 minutos tendréis el número de comentarios justo debajo del título del post. Solo tenéis que seguir el vídeo pasito a pasito.

Os he preparado un vídeo explicativo donde, creo, que queda todo muy claro. Podéis pararlo, tranquilamente, para ir copiando y pegando los códigos que necesitéis.


Antes de tocar nada, como siempre haced una copia de seguridad. Vaya a ser que la liéis parda y luego me riñáis, así que a guardar. Como veis en el vídeo a mí me ha salido, si ha vosotros no os sale, lo siento en el alma, pero no sé si sabré responder a todas las dudas. Bueno, aquí tenéis el código que vamos a ir necesitando.

los códigos que necesitaréis

1. En primer lugar iremos a PLANTILLA editar HTML y buscaremos: 

<span class='post-comment-link'>

2. Una vez que hemos encontrado el código cortaremos todo el código y lo pegaremos en un word, un block de notas o donde sea. Pero pegadlo. Debéis cortar todo esto:

<span class='post-comment-link'>
<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'>

<b:include data='post' name='comment_count_picker'/>

</b:if>

</b:if>

</b:if>

</span>


3. Una vez cortado y pegado ese código, de nuevo, en el buscador buscamos esto:

<div class='post-header-line-1'/>

4. Justo debajo de ese código pegaremos el código que previamente, habíamos pegado en nuestro block de notas. De manera que os quedará algo parecido a esto:

<div class='post-header-line-1'/>
<span class='post-comment-link'>
<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'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</span>
</div>

5. Volvemos a buscar esto y cortaremos todo hasta span. Este código no hace falta que lo guardemos

<span class='post-comment-link'>

6. Ya tenemos el número de comentarios justo debajo del título de la entrada. Pero imagino que querréis personalizarlo un poquito más. Así que vamos allá. 

7. Vamos a PLANTILLA>PERSONALIZAR> AVANZADO>AÑADIR CSS.En ese espacio en blanco es donde pegaremos este código. Como veis, al lado de cada código os explico qué es, así sabréis qué estáis modificando en cada momento.

.comment-link {
cursor: pointer;

letter-spacing: 3px; /*Espacio entre las letras, si no quieres espacio pon 0px*/

font:normal normal 14px Arial; /*Tamaño y tipografía */

color:#000000; /*Color de la fuente*/ 

text-transform: uppercase; /*Con ponemos mayúsculas, si no las queréis, borrad esta línea*/ {


Y listo, en principio debería saliros a la primera (a no ser que tengáis la plantilla html mega toqueteada ...) Ah! Y os recuerdo que para más información sobre css y HTML podéis echar un vistazo a este curso de Personalización de blogs, que a lo mejor os interesa.
Y ahora me despido, a seguir trabajando, que tengo mucha plancha y me muero de ganas de contaros cosas. Un besazo majos y como siempre, trillones de gracias.


N E W S L E T T E R


SI TE HA GUSTADO ¡COMPÁRTELO!

Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

13 comentarios:

  1. Me gusta esta idea, aunque en mi caso, no suelo tener muchos comentarios en los post del blog, con lo que prefiero se quede como y donde están, jeje. Lo que sí me ha encantado es como tienes puesta la fecha al lado del titulo a la derecha, queda muy elegante. Estaría genial que algún día lo compartieras¡¡ ;)
    Y ya que estoy comentando, algo que aunque te sigo siempre no suelo hacer muy a menudo, hay una cosa que SI me encantaría que algún día (a ser posible cuanto antes, jeje) hicieras: un tutorial para poner un carrusel de imágenes con entradas recientes debajo del titulo o imagen del blog en condiciones, que se pueda modificar para el ancho de cada blog poniendo varias imágenes y el titulo de cada post. Es algo que me encanta y he visto en varios blogs, y que iría que ni pintado para blogs, que como el mío las imágenes son su fuerte. He visto varios por internet, pero la mayoría fallan a la hora de introducir el código HTML y dan error a intentar insertarlos. Además casi siempre son muy feos o pequeños y es complicado acoplarlos a blogs anchos como el mío. Estoy segura que tendrías muchísimas visitas y mucha gente lo aplicaría a los suyos¡¡ No hay nada en condiciones por internet te lo digo yo que llevo bastante tiempo buscando... Gracias y piénsatelo May¡¡ Saludos ;)

    ResponderEliminar
  2. ¿funciona iguál si tengo activado los comentarios de google+?

    ResponderEliminar
    Respuestas
    1. uy... pues ahí me has pillado.... Haz una copia de seguridad, y haz la prueba, en vista previa lo verás!

      Eliminar
  3. Hola!!!
    Tomo nota, ya que el numero de comentarios no me aparece debajo del post!
    Un besazo, gracias por compartir el tutorial!

    ResponderEliminar
  4. Muchas gracias por esta entrada. A mi con esta serie de tutoriales me has animado a intentar hacer algo con el mio. La verdad es que se me da bastante mal y seguro que cuando tenga un poco de más tiempo libre, invierto en uno de tus cursos. Acabo de hacer una entrada sobre esto y te agradecería tu opinión si tienes tiempo. ¡Un besazo!

    ResponderEliminar
  5. Hola!! aaaiinnsss que molón me ha quedado jajaja : Un abrazote, gracias por tu trabajo guapa!

    ResponderEliminar
  6. ¡Hola, May! ¡Me encanta! Lo voy a probar ya mismo. ¿Podrías hacer un tutorial contando cómo poner la fecha en el lateral, tal y como la tienes tú? Queda preciosa :)
    ¡Un besazo y gracias por compartir!

    ResponderEliminar
  7. ¡Hola May! Me encanta tu blog, encantada te leo. He puesto en práctica la parte de CSS de este tutorial, porque debajo del título ya tengo la fecha y no sé como se quedará.
    El caso, que el color de la palabra COMENTARIOS no se queda estático, si no que se sigue cambiando según el color que pongamos al personalizar los enlaces en general. Y, además, no sé si podría poner centrado, para que queda igualmente al final de la entrada pero en el centro, ¿se podría?

    ¡Muchas gracias por todos tus conocimientos! :)

    ResponderEliminar
    Respuestas
    1. Hola!!
      Lo del color no sabría decirte pero para alinear, tendrías que añadir TEXT-ALIGN: CENTER; y en principio debería salirte
      Beso

      Eliminar
    2. ¡Reinas! Para que se quede estático el color tenéis que poner !important al lado. Así:
      Color: #000000 !important;
      De esta manera ya no cambia el color si no es que lo modificamos desde CSS.

      Eliminar
  8. ¡Hola!
    Muchísimas gracias por el tutorial, me preguntaba ¿cómo se centraria?
    Un saludo ^^

    ResponderEliminar
  9. Hola Mai, muchas gracias por el tutorial. YO tengo activados los comentarios de Google +, imagino que no sirve con esta opción no?

    ResponderEliminar

Muchas gracias por escribirme!! Si quieres puedes hacer alguna petición, recomendación... ¡¡Me encanta leeros!!