Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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.

Cartel o nota de aviso con efecto deslizante en las entradas (JQuery)


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.

The Knight Of Dark Moon dice...

Simplemente, Sorprendente. ¡Saludos!

Unknown dice...

HEY men esta duro eso men tengo unos dias digo ya meses probando tus trucos y de verdad k me funcionan vien oye men si quieres ve mi web www.programasgratis.tk y una afiliacion no cae mal pues me dices y pun listo men palante y tamo activo cualquier cosa me avisas

Jaime Trujillo Escobedo dice...

¡Gracias, Knight-Dark Moon!

Jaime Trujillo Escobedo dice...

ROUADMIN, vi tu sitio web y debo decirte que está muy bien organizado y tiene muchos archivos de utilidad ;).

Siento comentarte que ya no hago intercambio de enlaces (o al menos por ahora).

Anónimo dice...

muy bueno!

núria laura orbaneja dice...

hola jaime, llego a tu blog a través de blogs de ayuda como los de rosa o gema, he cogido este truco y lo he probado en uno que tengo de pruebas para ver como quedaba, me ha quedado bien menos el recuadro de abrir / cerrar que me queda muy corto y el color no coge todo el ancho..... se puede arreglar ??
felicidades por los trucos, aparte de bien explicados los pones con ejemplo, que eso es lo que me gusta a mi, verlo antes de ponerlo,,,,,,
muchas gracias

Jaime Trujillo Escobedo dice...

¡Bienvenida núria! Agradecería que me enviases al dirección de la entrada / apartado del blog en el que la has instalado. De esta forma podré ayudarte mejor y tan solo tendrás que editar un valor para solucionarlo.

Encantado de tenerte por aquí. ¡Abrazos!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo