A petición de K_nelita y Patán voy a explicar en esta entrada los pasos a seguir para conseguir el efecto añadido a mi sidebar, en concreto el bloque desplegable con el texto "Énlazame"
No se trata de nada nuevo ni por descubrir, todo lo contrario, es uno de los efectos más usados y comentados en este blog.
Se trata de añadir un bloque animado, para el que necesitaremos descargar el archivo .js y alojarlo en un servidor propio.
Después nos situamos en la plantilla edición de HTML y justo antes de </HEAD> añadimos el script de Dynamic Drive incluyendo en él la url del archivo.js
Una vez tenemos el script alojado en la plantilla añadimos el código para el bloque animado en Plantilla/añadir un elemento de página/HTML/JavaScript.
Ver explicaciones para la creación de un bloque animado.
Para añadirlo a la sidebar he modificado algunas cosas, por ejemplo las medidas, el borde y colores.
Algo muy importante a tener en cuenta son los nombres, los nombreVAR y nombreID deben ser únicos, si se colocan varios bloques expandibles, cada nombre debe ser diferente.
Utilizando width:100% abarca el total de la sidebar, si deseamos añadirlo en otro lugar y especificar la medida podemos añadir al principio del código
<div style="width: "220px;"> o sustituimos en el código width: 100%; por la medida necesaria.
Código personalizado:
<a style="border-top: 1px solid rgb(153, 204, 255); border-bottom: 1px solid rgb(0, 0, 0); margin: 2px 0px; padding: 10px 0pt; width: 100%; height: 13px; display: block; background:url('URL IMAGEN DE FONDO PARA EL BOTÓN'); color: rgb( 252,252,252) ! important; text-align: center; text-decoration: none ! important; font-size: 12px;" href="javascript:collapseE9900.slideit()">IMAGEN O TíTULO
</a>
<div id="E9900" style="width: 100%;">
<div style="border: 1px solid rgb( 61, 56, 22); padding: 0px; height: 550px; background:url('URL IMAGEN DE FONDO DEL CONTENIDO');">
CONTENIDO...
</div>
</div>
<script type="text/javascript">var collapseE9900=new animatedcollapse("E9900", 800, false)</script>
En color rojo es la que nos permite modificar o personalizar la parte del título o imagen que sirve de botón para desplegar el bloque.
En color azul podemos modificar el espacio del contenido.
En color verde es el cierre del código, donde 800 es la duración del efecto expresado en milisegundos. Al estado inicial del bloque añadimos "false"para que el bloque quede contraído, puede ser también "true" y el bloque quedaría expandido.
Recomiendo probar con colores fuertes o bordes muy gruesos eso nos ayudará a visualizar con exactitud la parte que estamos modificando.
.. Prueba ..| Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. |
 |
La forma de personalizar el contenido es muy sencilla, en mi caso añadí una imagen de fondo y un enmarcado para delimitar cada complemento.
El enmarcado se hace de la siguiente forma:
<table border="1" bordercolor="#ccc" #ccc white width="160" background-color: height="50">
<tr><td width="90%">
Contenido de texto, imágenes o lo que deseas añadir
</td></tr></table>
Contenido de texto, imágenes o lo que deseas añadir |
También podemos crear otro tipo de borde, pero será en otra entrada.
!Suerte¡
0 comentarios:
Publicar un comentario