Hacía tiempo que tenía ganas de implementar con la librería JQuery el mostrar/ocultar elementos de mi blog. Aun estoy adecuando el formato de mi blog y puliendo detalles, pero tras los primeros cambios he decidido incluir mas entradas en mi página principal. Me encontraba con un par de problemas, por un lado, esa decisión podría llevar mi página principal a parecer un rollo de papel higiénico o solo podría poner un par de ellas como mucho y por otro no quería renunciar al nuevo formato de comentario bajo las entradas en la página principal. Ambas cosas se resuelven usando la librería JQuery, para las entradas aún pienso usar el hack de Hackosphere pero seguiría apareciendo el nuevo formato de comentario debajo de cada entrada y estéticamente resultaba horroroso.

Con JQuery he resuelto fácilmente lo del nuevo formato de comentarios, para implementarlo solo debemos bajarnos este fichero: Fichero 1 (los que ya tengáis JQuery implementado en vuestro blog no será necesario).

Después editamos nuestra plantilla HTML y antes de </body> pegamos

<script src='URL ALOJAMIENTO/jquery-1.3.min.js'/>
<script type='text/javascript'>
$(document).ready(function()
{
//hide the all of the element with class msgbody
$(&quot;.msgbody&quot;).hide();
//toggle the componenet with class msgbody
$(&quot;.msghead&quot;).click(function()
{
$(this).next(&quot;.msgbody&quot;).slideToggle(600);
});
});
</script>

Para ocultar el elemento usaremos
<div class='msghead'>AQUI LO QUE SE MUESTRA Y PULSANDO SOBRE EL SE MUESTRA EL RESTO</div><div class='msgbody'>AQUI LO QUE QUEREMOS OCULTAR</div>

Como podréis comprobar si pulsáis sobre <<Deja tu comentario>>, el nuevo formato de comentarios os aparece. Para ello edite mi plantilla HTML, expandí artilugios, busque el código correspondiente al nuevo formato

<b:if cond='data:post.embedCommentForm'><b:include data='post' name='comment-form'/> <b:else/><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'/> </b:if> </b:if>
y lo cambie por
<div class='msghead'><img alt='Deja tu comentario' src='http://es.geocities.com/pizcoss/Imagenes/com.png' style='vertical-align:middle;border:0;float:left; cursor:pointer; margin: -40px 150px 0px 150px;' title='Deja tu comentario'/></div><div class='msgbody'>
<b:if cond='data:post.embedCommentForm'><b:include data='post' name='comment-form'/> <b:else/><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'/> </b:if> </b:if></div>

He cambiado el elemento que se muestra por una imagen y le he incluido un poco de estilo, si en vez de una imagen incluimos una palabra o frase el cursor no cambia al pasar por él y por más que he intentado cambiar eso, debo tener alguna incompatibilidad en mi plantilla que lo impide. (Edito: Trás el útimo cambio ya puedo)

CSS

.msghead {
cursor: pointer;
color:#ac1f1f;
padding: 10px 0 10px 28px;
font-size: 16px; }

.msgbody {
margin : 15px 35px 15px 15px;
padding : 10px;
}

En Roshan´s Blog es donde aprendí este truco y en su ejemplo podréis comprobar que el cursor si cambia al pasar por las etiquetas. Yo le he dado otro uso a este script pero tenía que solucionar ese par de problemas que tenia.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también