Noveno post de ayuda. En este tutorial veremos cómo añadir los comentarios a nuestro Tumblr usando el Disqus, cómo poner una sección de comentarios recientes del mismo y cómo añadir un título a nuestras secciones.
Vamos a http://disq.us/ y pulsamos en Sign In. En la ventana de rellenamos lo que nos pide.
Por ejemplo:
Rellenamos también el usuario y contraseña de Disqus y pulsamos en siguiente. En esta ventana seleccionamos a gusto de cada uno. En mi caso lo he dejado así:
Pulsamos en siguiente y en la nueva ventana (install) seleccionamos Tumblr. Tal y como nos indican las instrucciones, tenemos que ir a Tumblr y seleccionar Customize Theme. Bajamos hasta donde pone Disqus shortname y escribimos el nombre que pusimos en la primera ventana del registro. En mi caso pruebasdelasazores:
Guardamos y listo. Ya tenemos los comentarios activados en nuestro Tumblr.
Ahora, debajo de cada post, se nos muestra un link indicando el número de comentarios y reacciones que tiene cada post:
Podemos cambiar el texto que se muestra. Para ello, tenemos que ir a la web del Disqus ( http://disq.us/ ) e ir a Settings -> Appearance y bajar hasta Comment Count Link. Ahí ponemos los textos como queremos:
El resultado sería:
Puede darse el caso de que en vez de salirnos el texto personalizado nos muestre siempre “Ver comentarios”. La solución sencilla es buscar:
[color=#000000]<a href="{Permalink}#disqus_thread">{lang:View comments}</a>[/color]
Y añadir un class=”dsq-comment-count”:
[color=#000000]<a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:View comments}</a>[/color]
Si después de esto sigue mostrándonos “Ver comentarios”, tenemos que ir a la web del Disqus ( http://disq.us/ ) y en la pestaña Moderate pulsamos Install. Seleccionamos Tumblr y bajamos hasta Manual instructions (advanced). Copiamos el código del punto 2 (Copy and paste the following embed code into the HTML.) y lo pegamos antes de </body>. Ya debería mostrar correctamente nuestros textos personalizados.
Ahora vamos a ver como añadir los comentarios recientes a nuestra página. Volvemos a http://disq.us y, dentro de la pestaña Admin, pulsamos en Tools. Dejamos seleccionado combination y cambiamos las opciones a gusto de cada uno. En mi caso no cambiaré nada:
Por último, copiamos el código de abajo y lo pegamos en nuestra página. El resultado sería:
Ahora vamos a ver como añadir una cabecera a nuestras secciones. Lo que vamos a hacer es poner un div encima de cada sección, que tendrá un fondo negro y letra blanca. Ahora mismo lo que tenemos es:
[color=#000000]<div id="top">
CONTENIDO
</div>[/color]
Y lo que tendremos será:
[color=#000000]<div id="titulo">NOMBRE CABECERA</div>
<div id="top">
CONTENIDO
</div>[/color]
Quedaría así:
Ahora tenemos que cambiar el CSS para poner la cabecera como queremos. Añadimos lo siguiente en el CSS:
[color=#000000]#wrapper #sidebar #titulo {
text-align:center;
background: #000;
padding-top: 5px;
padding-bottom: 10px;
color: #fff;
font-size: 20px;
border-radius: 10px 10px 0px 0px;
box-shadow: 0 0 5px 5px rgba(0,177,223,1);
border-width: 4px 4px 0 4px;
border-style: solid;
border-color: #000;
}[/color]
Este código añade un fondo negro a nuestra cabecera, y poner el texto a 20px centrado y de color blanco. También redondea los bordes superiores y les añade colores:
Ahora lo que vamos a hacer es corregir el CSS de top para que no tenga los bordes superiores y quede mejor el contacto entre ambos divs. Ahora mis tenemos:
[color=#000000]#wrapper #sidebar #top {
border-radius: 10px 10px 10px 10px;
border: 4px solid #000;
box-shadow: 0 0 5px 5px rgba(0,177,223,1);
background: #fff;
padding: 0 20px;
}[/color]
Y tiene que quedar así:
[color=#000000]#wrapper #sidebar #top {
border-radius: 0px 0px 10px 10px;
border: 4px solid #000;
box-shadow: 0 0 5px 5px rgba(0,177,223,1);
background: #fff;
padding: 0 20px;
}[/color]
El resultado final sería:
Ahora ya sólo nos queda añadir <div id="titulo">NOMBRE CABECERA</div> antes de cada <div id="top"> que queremos que tenga cabecera.
