Caja de notas con efecto deslizante en las entradas (JQuery)

En esta entrada te enseñaré una forma de incluir notas en tus entradas. Se trata de añadir un atractivo botoncito que abre un recuadro y despliega el anuncio, aviso o la nota con efecto deslizante.

Ver la caja de notas en funcionamiento

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y añade estos bloques de CSS encima:

#balconcart {
background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0FVzZM8yu9l3xX_E_Izv0aUQBYhyphenhyphenE4hkVRPkuG3otRBpPC_Uu3Rv-WnWWiiNy-NpJ0RQRXRnC4Ncs0lHEDzz-FSm888UDk1iW-vHpxWa65qV_VLrBpHZyt1Io9pELQSVQIxdtPIxhhbo/s1600-r/jbalcon.png) repeat-y scroll 0 0;
color:#000000;
display:none;
height:112px;
text-align:center;
width:211px;
}

#blboton {
background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOZDALY8LdlIjfn-EA3mV2sJqyFhcAQUL2ZEU89cJhwYuKrG-DQTptq-ej_wDrG4nzazrTAxaoKz2WAfSuGtCREhALvKysTtspbVjz5IpOZjrx7wdckaYbFqAewb4uQVpvbNS0hyphenhyphenAat18/s1600-r/blcbut.png) no-repeat scroll 0 0;
border:0 none;
padding:3px;
}

Ahora busca la etiqueta </head> e inserta encima lo siguiente:

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script type='text/javascript'>$(function(){$(&quot;#blboton&quot;).click(function(){$(&#39;#balconcart&#39;).toggle(1000);});});</script>

El código resaltado en verde es el script de JQuery-1.3.2.min.js. Si ya lo tienes en tu plantilla (debido a un truco anterior) no hará falta que lo insertes de nuevo.

Guarda la plantilla:



Seguidamente, abre una entrada cualquiera y pega esta línea de código que insertará la Caja de notas:

<div id="balconcart">CONTENIDO DE LA CAJA</div>
<button id="blboton">Abrir / Cerrar</button>

Reemplaza CONTENIDO DE LA CAJA por la frase, el aviso, el comentario o la recomendación que contendrá la caja, así como Abrir / Cerrar por el texto que aparecerá en el botón (si lo prefieres, puedes dejar esto último como esta).

Debes saber que con este código podrás incluir una sola nota por entrada. Para utilizar más cajas desplegables, pega esta línea de código encima de </head> y añade un 2 al lado de balconcart y otro despues de blboton ...

<script type='text/javascript'>$(function(){$(&quot;#blboton2&quot;).click(function(){$(&#39;#balconcart2&#39;).toggle(1000);});});</script>

A continuación pega otros bloques de CSS encima de ]]></b:skin> y edita lo que ves en verde:

#balconcart2 {
background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0FVzZM8yu9l3xX_E_Izv0aUQBYhyphenhyphenE4hkVRPkuG3otRBpPC_Uu3Rv-WnWWiiNy-NpJ0RQRXRnC4Ncs0lHEDzz-FSm888UDk1iW-vHpxWa65qV_VLrBpHZyt1Io9pELQSVQIxdtPIxhhbo/s1600-r/jbalcon.png) repeat-y scroll 0 0;
color:#000000;
display:none;
height:112px;
text-align:center;
width:211px;
}

#blboton2 {
background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOZDALY8LdlIjfn-EA3mV2sJqyFhcAQUL2ZEU89cJhwYuKrG-DQTptq-ej_wDrG4nzazrTAxaoKz2WAfSuGtCREhALvKysTtspbVjz5IpOZjrx7wdckaYbFqAewb4uQVpvbNS0hyphenhyphenAat18/s1600-r/blcbut.png) no-repeat scroll 0 0;
border:0 none;
padding:3px;
}

Guarda la plantilla.

El nuevo código a utilizar en la entrada sería:

<div id="balconcart2">CONTENIDO DE LA CAJA</div>
<button id="blboton2">Abrir / Cerrar</button>

Repite este procedimiento con el número de notas que deseas añadir por entrada, utilizando una cifra (que en este caso era 2) por otra distinta.

Nota:

Para no estar copiando los códigos que insertan la caja de notas con efecto deslizante, haz uso de la plantilla de entrada que ofrece blogger.