En esta oportunidad te mostrare un super truco o efecto de Arrastrar y soltar y HTML5. Como usted sabe (espero), todos los navegadores modernos (que son FF, Safari, Chrome, Opera ) tienen soporte nativo de esta útil característica (de arrastrar y soltar). Esto significa que podemos utilizar en nuestros proyectos.
Implementarlo en tu plantilla de blogger sera sencillo. Y, como el ejemplo de la aplicación práctica, vamos a suponer que tenemos que resolver algunas (imágenes) entre algunos álbumes.
Ejemplos:Con tu cursor del mouse arrastra las fotos a los recuadros que dicen album para que veas efecto en accion.
Album 1
Album 1
Como implementar este widget a tu blog de blogger
1.Entra a tu cuenta de Blogger
2.Ve a Plantilla>>Diseno
3.Selecciona Html/Javascript de la lista
4.Copia y pega el siguiente codigo en Html/Javascript
<link href="https://googledrive.com/host/0B0DJgT4v15seRFk0WkF6aGZRV1E/" rel="stylesheet" type="text/css"></link><br />5.Guarda ahora el Html/javascript ,pon el gadget debajo arriba de entradas.
<div class="albums">
<div class="album" droppable="true" id="drop_1">
<h2>
Album 1</h2>
</div>
<div class="album" droppable="true" id="drop_2">
<h2>
Album 1</h2>
</div>
</div>
<div style="clear: both;">
</div>
<div class="gallery">
<a draggable="true" href="http://www.blogger.com/null" id="1"><img src="http://s1.postimg.org/mpu4dnvej/image.jpg" /></a>
<a draggable="true" href="http://www.blogger.com/null" id="2"><img src="http://s24.postimg.org/v1mmbi1o1/image.jpg" /></a><br />
<br />
<a draggable="true" href="http://www.blogger.com/null" id="3"><img src="http://s24.postimg.org/4aazqlfjl/image.jpg" /></a>
<a draggable="true" href="http://www.blogger.com/null" id="4"><img src="http://s1.postimg.org/hxkb280qj/image.jpg" /></a>
</div>
<script src="https://googledrive.com/host/0B0DJgT4v15seZHpMOHV4Uk9LSmc/"></script>
Nota:sustituye los enlaces Url de las imagenes sombredas en amarillo por el enlace Url o direccion de tus imagenes.
Si deseas anadir mas imagenes a esta ecuacion o ejemplo solo debes anadir este codigo <a draggable="true" href="http://www.blogger.com/null" id="4"><img src="http://s1.postimg.org/hxkb280qj/image.jpg" /></a> por cada imagen que desees anadir adicionalmente.
6.Guarda tu plantilla y mira el efecto especial en tu pagina web o blog de blogger.
0 comentarios:
Publicar un comentario