+ 100 Módulos Drupal





Drupal, nuevo framework que nos toca ver en clase, y ya que tenemos próximamente que entregar la práctica me he decidido por buscar unas listas de módulos que nos harán la vida mas fácil en este complicado mundo de drupal.



BREADCRUMBS


Menu Breadcrumb: Se encarga de mostrar las migas de pan para cualquier menú del sitio

Custom Breadcrumb: Sin duda uno de los indispensables, permite crear migas de pan totalmente personalizadas en función del tipo de contenido.

Panel Breadcrumb: Permite crear las migas de pan en los paneles de página.


CAPTCHA


Captcha: Modulo que te agrega un catcha a todos los formularios que eligas. 

reCaptcha: Uno de los captchas mas famosos que podemos ver en una gran variedad de webs. 

Image Captche refresh: Un captcha con imagenes de numero. 



ADMINISTRACION


Administration menu Crea un toolbar con toda la información del sitio de una forma mucho mas fácil y visual que el original que instala drupal. Su interfaz a modo de menús desplegables hace que navegar por la web sea mucho mas rápido de encontrar y/o acceder a cualquier departamento de tu web. Se recomienda desinstalar el modulo toolbar, del core de drupal, antes de instalar este modulo.

Adminimal Admin menu Añade un estilo minimal al menu de administracion, a mi personalmente me gusta mucho!, Recordad que si teneis habilitado el modulo "Administration menu Toolbar style" teneis que dehabilitarlo!

Navbar: Este módulo proporciona un menu amigable y responsive. Totalmente recomendado si teneis pensado usar el administrador desde el móvil o tablet, para este caso es mucho mejor que el anterior.

Backup and Migrate: Este modulo es uno de los imprescindibles para crear copias de seguridad de tu base de datos, es aconsejable tenerlo instalado independientemente si esta habilitado o no, pero se recomienda fervientemente utilizarlo en caso de actualizaciones importantes, recordad que si algo sucediera mal en una actualización no se podrá volver atrás.

Pathauto: Se encarga de auto generar automáticamente urls para todo tu contenido. Da la opción de crear un patrón para que las urls sean totalmente customizadas.

Module Filter: Este es uno de los mejores modulos para administrar tus modulos instalados,
Modifica la apariencia de la lista de modulos original de drupal agrupando los modulos por sus categorias, ademas te añade un pequeño buscador que se actualiza cada vez que modificas la busqueda. Para mi es un indispensable.

Devel: Este es un gran modulo que esta orientado a programadores y temeadores, te permite ver datos necesarios para el desarrollo de un tema o modulo. Importante desinstalarlo una vez utilizado!

Masquerade: Permite enmascararte como otro usuario. Util cuando estas en el proceso de desarrollo y tienes que testear constantemente otros usuarios.

Coffe: Te permite crear un "buscador" al estilo popup para realizar busquedas en tu sitio, DE LO QUE SEA, presionando alt + D. Para administradores. Lo recomiendo!


CSS


Block class: Permite añadir una clase css a los bloques 

Node class: Permite añadir una clase css a los nodos.






GEOLOCALIZACION


GMap Module: Es el modulo mas usado para incorporar un mapa google en tu web. Proporciona una interficie gráfica al estilo mapa de google y permite posicionar elementos en el mapa con iconos personalizados.

GMap Addons : Es una colección de complementos para mostrar en el modulo GMap Module.

Google Map Field: Te permite crear un campo para poder posicionar tu contenido en un mapa. Basicamente genera una interficie gráfica, muy fácil de usar y visualmente ágil, que te permite seleccionar la latitud y la longitud de una posición seleccionando una posición en un mapa (que ya viene incluido en el modulo), proporcionando una calle o introduciendo un código postal. Este modulo es bastante completo.

Get Directions: Te permite obtener una ruta desde el punto A al punto B, de igual modo que hace la aplicacion de google, google map. Unas de las opcionalidades que hace grande este modulo es la opcion que permite ver el trafico, el transito de las vías....

Get Locations: Te permite permite visualizar en el mapa diferentes tipo de contenidos, además de ofrecerte la posibilidad de buscar un punto concreto en elmapa. También permite ver opciones como el trafico y el transito.

Location: Es el modulo mas utilizado en términos de geolocalizacion. Proporciona un sistema de posicionamiento en un mapa al estilo google map.

Google Store Locator: Este modulo te permite crear un mapa con nodos y además te proporciona un bloque con los nodos que se visualizan, con un buscador y la opcion de buscar una ruta para llegar al punto del mapa donde esta el nodo.

GOOGLE


Google Analytics: Herramienta de análisis web proporcionada por google, es totalmente gratuita, pero requiere registrarse con una cuenta google y obtener un ID que habrá que colocar en la configuración del modulo.

Google Website Optimizer: Este modulo te ayuda a optimizar mejor tu web, informan dote que deberías de modificar.

Google Custom Search Engine: Añade un sistema de búsqueda en tu web basado en la tecnología google. Permite uno o varios sitios y no requiere clave de API


Google Fonts: Te permite añadir Google fonts a tu sitio web usando Google Font API.

Google Weather: Crea un bloque con informacion del tiempo.

IDIOMAS


Internationalization: Modulo necesario para traducir tu web a diferentes idiomas

Localization update: Se encarga de buscar actualizaciones de traducciones de los módulos realizados por la comunidad drupal.

Language icons: Añade iconos con las banderas asociadas a cada idioma

Translation overview: Muestra en una única pantalla un resumen del estado de traducción de los nodos del sitio.

Translation table: Aporta una interfaz para traducir fácilmente algunos elementos como vocabulario, terminos de taxonomia, menú....

Location Client: Permite realizar o corregir traducciones de la interfaz sobre la propia página donde se encuentra.

Transliteration: Este modulo es siempre recomendable instalarlo si tenemos instalado el modulo PATHAUTO. Es el encargado de modificar los caracteres especiales de las url y de los nombres de los archivos subidos. ejemplo: substituiría ñ por n.

GTranslate: Es un modulo basado en la teconologia google, permite traducir completamente tu web en diferentes idiomas de forma rapida y sencilla.

Lingotek Translation: Este es un módulo de traducción de contenido. Te ofrece una traducción de tu contenido en minutos, traducir usando una máquina o una persona y unas cuantas funcionalidades mas. La verdad que este módulo es bastante interesante si tienes que hacer una web multilingue donde los usuarios van crear contenido en diferentes idiomas

IMAGENES, ARCHIVOS & MEDIA


Media: Nos servirá para publicar contenidos multimedia en nuestra página web. Viene con el modulo Media Internet que nos permitirá además añadir vídeos externos.

Media: YouTube: Nos permitirá poner vídeos de youtube en nuestra web

Media: Vimeo: Nos permitirá poner vídeos de vimeo en nuestra web

ImageCache Actions: Increíble modulo para pretratar nuestras imágenes. Entre otras múltiples funciones nos permite crear un marco de agua en nuestras imágenes.

Colorbox(librería): Nos permite visionar la imagen encima de un fondo oscuro. Es bastante usado como visualizacion de imágenes y galerías. Es necesario instalar la librería en: sites\all\libraries\colorbox.

MediaBox: Potente modulo gestor de imágenes, te permite seleccionar y recortar una parte de la imagen y mostrar solamente el area seleccionada. También te permite hacer una gestión de las imágenes como crear carpetas, eliminar archivos... esta parte es un poco mas liosa, pero fácil de comprender.

Plupload Integration (librería): Magnifico modulo que permite una carga de imágenes de forma masiva. Es un poco complejo la configuración previa pero merece la pena por la facilidad a la hora de subir archivos de todo tipo. Utiliza el drag over permitiendo arrastrar los archivos directamente a la lista y subirlos de una formas mas sencilla aun. Lo recomiendo para aquellas webs que necesitan subir muchos archivos constantemente. Instalar librería en: sites\all\libraries\plupload.

Drag & Drop Upload: Este modulo nos permitira subir grandes cantidades de archivos usando el metodo de drag&drop, es decir, solo con arrastrar los archivos a nuestra pagina web, se subiran automaticamente. Facil de usar, de instalar y de configurar!!. Totalmente recomendado

Image url formatter: Seguro que muchos de vosotros os habeis encontrado con la tesitura de tener que añadir o printar solamente la url de una imagen en una vista, pues bien este modulo ultra sencillo nos permite esa posibilidad, yo la uso bastante en mis proyectos. Nuevo

MENU


Menu Block: Permite crear bloques de menú a partir de menús.

Menu per role: Permite mostrar los elementos del menú en función el rol del usuario que visita la página.

Menu Icons: Este modulo es bastante interesante, porque permite añadir iconos o imágenes a los enlaces del menú sin necesidad de tener que usar css.

Special Menu Items: Este modulo permite crear menús sin enlace y/o separadores entre los menús. Bastante recomendable tenerlo instalado.

Megamenu, Giga Menu, OM maximenu: Son algunos ejemplos de módulos que nos permite crear menús espectaculares.

Superfish (librería): Crea un bonito menú dropdown de una forma fácil y sencilla. Requiere el modulo Librearies API. Instalar la librería en: site/all/libraries/superfish.

Nice menu: Permite crear menús dropdown, menús horizontales, menús verticales con submenus....es Bastante completo.

Dynamic Persisten Menu: te permite crear mostrar submenus horizontales, y si la pagina que estamos visitando esta en el menu y este tiene un submenu se muestra por defecto.

REDES SOCIALES


ShareThis: Este es uno de los módulos mas usados y añade una barra de botones para compartir un contenido en diferentes redes sociales.

Service Links: Es otra alternativa para compartir contenidos en las redes sociales es util para usar algunas redes no incluidas en ShareThis como puede ser redes españolas.

Facebook Connect: Permite al usuario registrarse con su cuenta de facebook

Fabebook Like Button: Añade un botón estilo Like de Facebook

Follow: Permite crear un Follow me de forma rápida y sencilla.

Twitter: Permite asociar tu web con twiter. Modulo bastante completo.

Activity Stream: Permite importar cualquier contenido desde las principales redes sociales.

Google Plus One +1: Asocia tu web con Google Plus one+1.

Social Media: Te permite integrar de una forma muy muy sencilla con redes sociales, permite ademas gestionar de forma centralizada, desde compartir en multitud de redes social como facebook, twitter... hasta los widgets para ver las publicaciones en facebook y twiter.

Social media link block: Te premite crear un block con el cual linkar a tus redes sociales. Te permite elegir diferences set de iconos.

SEO


XML sitemap: Genera un mapa del sitio en formato xml para mejor posicionamiento en los buscadores pincipales

Site verify: Se recomienda instalar para que los motores de búsqueda puedan verificar la autenticidad del envió.

Search 404: Te permite sustituir la página 404 (página no encontrada) por una definida por ti.

Global Redirect: Con este modulo se evita enviar url duplicadas sobre un mismo contenido a los motores de búsqueda.

Metatag: Añade metadatos en cada página del sitio.

Page title: Permite añadir patrones para generar automáticamente el titulo de cualquier página. <title></title>.
 
SEO checklist: Genera un checklist con módulos de drupal recomendados y buenas practicas para el posicionamiento SEO.

SEO Checker: Comprueba, al crear o editar un contenido, si este cumple con las reglas SEO definidas.

SEO Watcher: Busca las palabras clave especificas en algunos motores de búsqueda y devuelve un informe con la posicion del sitio respecto a la búsqueda realizada.

Content Optimizer y Content Analysis: Analiza el contenido de cualquier página del sitio y devuelve un informe con recomendaciones para que el contenido cumpla con las buenas practicas de SEO.

RobotTxt: Permite crear y editar tu archivo robot.txt, se recomienda, antes de instalar y utilizar el modulo, renombrar en archivo robot.txt original que tenemos de nuestro sitio.

Site Verification: Este modulo te ayuda a verificar que el archivo sitemap.xml se ha enviado correctamente a los principales motores de busqueda.

SLIDESHOW & GALERIAS


Lightbox2: Modulo que permite ver las imágenes en overlay. al estilo ColorBox.

Cloud Zoom (demo): Este modulo permieta hacer un zoom a las imágenes. Usado por commerce KickStart

Views Slideshow (demo): Crea un estilo de vista en modo slideshow para imágenes. Es uno de los mas usado, si no es el que mas.

Fast Gallery: Permite la creacion de galeria de imágenes de una forma rápida y sencilla.

Flex Slider (demo): Galeria en slide

Nivo Slider (demo): Galeria en slide

Dynamic display block (demo): Galeria de imágenes con subbloques. Uno de mis favoritos.

Galleria (demo): Galeria con las imágenes pequeñas dentro de la grande.

Gallerific (demo): Tipica galeria con las imágenes a la izquierda y la imagen grande a la derecha.

Image Flow (demo): Mostrado de imágenes con profundidad.

JCarousel: Una de las galerías mas usadas para mostrar imágenes en carousel.

3D Views Carousel (demo): Crea galerías carousel en 3D.

TAGS


TagCloud: Permite crear un block con una lista de todos los tags que estas usando

Tagadelic: Parecido al TagCloud con la diferencia que este modulo aumenta de tamaño los tags mas importantes.


TAXONOMIA


Taxonomy menú: Permite crear tu vocabulario en un menú de forma rápida y sencilla

Taxonomy manager: Un modulo bastante potente que te permite gestionar tu taxonomía y te añade diferentes opciones extras.

Taxonomy Access Control: Es un modulo bastante potente que te permite gestionar el acceso a la taxonomia en función del usuario.

TEMAS


Themekey: Permite asignar diferentes temas en función de unas reglas predefinidas. Este modulo es bastante completo y recomendable en el caso de que en la misma web queráis tener partes bastante diferenciadas y con diferentes temas. filtra desde sistemas operativos, explorador, sitio web en el que te encuentras, dispositivo y un largo etc...

Switchtheme: Permite a los usuarios elegir que tema quieren tener habilitado. Este modulo solo lo recomiendo para aquellas webs que realmente necesitan permitir a sus usuarios cambiar el tema.

Mobile Theme: Permite asignar que tema quieres que muestre un usario que acceda desde un dispositivo mobil. Muy fácil de usar y de configurar.

Mobile tools: Otro modulo que permite asignar el tema a mostrar en función del dispositivo mobil desde que se acceda, a diferencia del anterior este no esta, del todo terminado, produce fallos y es algo mas complicado de utilizar.

Theme Editor: Aunque no soy muy partidario de modificar los archivos directamente del servidor, este modulo te permite modificar los css, .info y las plantillas de forma relativamente fácil y rápida sin necesidad de ir archivo arriba, archivo abajo, para durpal 7 esta aun en desarrollo pero funciona mas o menos bien.
Lista de temas Base: Zen , Fusion, Omega, Basic; Estos son una lista de temas de los cuales podras crear tu propio subtemas.


VISUALIZACION DE CONTENIDO


Views: Este es unos de los módulos que yo personalmente ya introduciría en el core de drupal, espero que en el nuevo drupal 8 lo tengan en cuenta. Este modulo sirve para visualizar los contenidos de tu web de forma personalizada ya sea simple consultas ala base de datos, como complicadas y/o customizadas presentaciones.

Views Accordion: Añade un nuevo estilo a las vistas en modo de acordeon. Personalmente lo encuentro muy util a la par de crear un bonito efecto para tu web.

Views bulk operation(VBO): Añade cuadros de selección de tipo checkbox a los resultados de la vista y te permite crear diferentes acciones sobre los resultados seleccionados. Se recomienda si tienes que realizar muchas acciones parecidas muy frecuentemente.


Panels: Este modulo nos permite crear presentaciones con mas de una vista y/o bloques. Es bastante util en el caso que queramos por ejemplo crear una página "home" totalmente customizada con unos determinados módulos y/o bloques. También es bastante util para reeditar las vistas de los módulos del core de drupal, como el perfil del usuario entre otros.

Panels Extras: Añade una coleccion de plugins adicionales al modulo Panels. Breadcurmbs configurables, Email Panel, FAQ Panel, Titulo de menú SEO, Región Pane y Menu node access.

Panels Extra Layouts: Te agrega una gran variedad de nuevos layouts algo mas complejos que los propicionados por el modulo Panels. Este modulo no es que sea de vital importancia, pero son de esos módulos que siempre va bien tenerlos instalados.

Display suite: Te permite preconfigurar la presentacion de un tipo de contenido (content type), formularios , vistas , busquedas... pudiendo asignar los campos (fields) a un determinado espacio. Cuenta con bastantes tablas de ejemplo y te permite crear tablas totalmente customizadas.



VOTOS & FLAGS


Fivestar(Voting API): Permite añadir al sitio un sistema de votos de los contenidos publicados.

Fivestar Recommender(Recommender API): Potente modulo que añade a fivestar funciones como: Nodos similares en voto, Recomendaciones de nodos que podrían ser de su interés teniendo encuentra otros nodos votados por el usuario con la misma puntuación, usuarios similares Lista de usuarios que realizaron la misma votacion que el usuario actual, recomendaciones de usuarios que han votado igual que el usuario actual.

Rate(Voting API): Aporta otros tipos de votaciones diferenes al empleado por Fivestar, como por ejemplo: pulgares arriba, pulgares arriba/abajo, numero arriba/abajo, Fivestar, Emoticonos, Si/no, Y crear un control personalizado.

User Points: Aporta una API para que los usuarios puedan ganas o perder puntos en función de las acciones realizadas.

User points Nodes and Comments: Permite a los usuarios puntos cuando publican un nodo , un comentario o moderan comentarios.

Flag: Este modulo te permite crear un sistema de "banderas" completamente customizable. Banderas del tipo: añadir a favorito...

Flag abuse: Crea una bandera para reportar abusos.



WYSIWYG Y EDITORES


Wysiwyg(What You See Is What You Get): Simplemente es un editor de texto enriquecido. Lo que hace grande a este modulo esque te permite seleccionar que editor quieres usar y además es bastante configurable.​


Tipos de editores: aqui una lista de los editores que permite el modulo Wysiwyg: CKEditor (Download) , FCKeditor (Download) , jWYSIWYG (Download) ,markItUp (Download) , NicEdit (Download) , openWYSIWYG (Download) , TinyMCE (Download) , Whizzywig (Download) , WYMeditor (Download) , YUI editor (Download). Es probable que algunos editores no funcionen correctamente se recomienda instalar una version anterior.

IMCE: Gestor de ficheros e imágenes con una interficie grafica bastante intuitiva. Ademas permite hacer varias configuraciones desde asignar que usuarios pueden subir archivos hasta cual es el espacio maximo que un usario tiene asignado.

IMCE Wysiwyg bridge: Es el encargado de permitirte usar el modulo IMCE con los editores Wysiwyg, de esta forma podras gestionar tus archivo y/o imágenes en el mismo momento que estas usando el editor de texto.



OTROS MÓDULOS


Libraries: El encargado de gestionar las librerías adicionales de algunos módulos.

Token: Sirve para poder usar determinados campos mediante una sencilla "url". este modulo es bastante
usado por módulos como comment, pathauto, commerce...

Chaos tools suite (ctools): Modulo inspensable para views, panels...

Entity

Variable: Necesario para el modulo internationalization, entre otros.

Rules: Importantísimo modulo para la creación de reglas en tu sitio drupal.

Chosen: Es un plugin que hace mas amigable la seccion de <select>. Util, sobretodo, a la hora de buscar tags.



Fuente: drupalia.cat 
             drupal.org 

El Jefe del Fotoshop











Y no digo esto  porque sea el mejor controlando esta aplicación, sino porque hay que ser muy "jefe" para  incrustarse de esta manera en fotografías de celebrities con resultados hilarantes.

PeejeT, el cual cuenta ya con mas de 200.00 seguidores en instagram, tiene especial debilidad por Rihanna, quién protagoniza aproximadamente la mitad de sus montajes, pero también se ha colado en fotos de Beyoncé, Jay-Z, Kanye West, Nicki Minaj o, recientemente, Amber Rose.




Lo que diferencia a PeejeT de muchos de los aspirantes a fenómeno viral con un mouse es que entiende a la perfección los códigos del humor meme. El mérito de sus montajes no está tanto en las habilidades técnicas -que las tiene, y muy buenas-, sino en encontrar las imágenes precisas para crear una bomba de carcajadas.

Pero la diversión no es su único objetivo. En realidad empezó este proyecto para promocionarse a sí mismo como diseñador gráfico. En vistas de su popularidad en la redes sociales, parece evidente que ha funcionado.

Aquí te dejo con una muestra de su trabajo.

































Mis trabajos



Ya que llevamos más de tres meses de curso y bastantes prácticas de HTML y CSS, me he decidido a colgar en la red algunas de ellas, las que son páginas web completas y no  ejercicios de clase sin más.

Practica Ciudad

Página Web turística sobre una Ciudad concreta. Las páginas realizadas son el index, el mapa y la galería.
DEMO


Práctica Inserción Laboral

Página Web para la Semana de Inserción Laboral del Instituto Polígono Sur.
DEMO


Práctica Música

Consistía en hacer una web con noticias, compra de música, audio y vídeos. Esta web es responsive web design.

¿Quien corrige?

Una tontería para echar a suertes quien sale a corregir el ejercicio. Una adaptación de la típica ruleta de la fortuna.
DEMO


Tienda con prestashop

Teniamos que realizar una tienda completa que completase la compra con módulos y demás. Cuidado de donde y con quién abre el siguiente enlace(quedas avisado).
DEMO



Portal de noticias hecho con CodeIgniter

Portal con noticias + un concurso de fotos usando codeigniter + Mysql. Esto es de la asignatura de Desarrollo web en servidor, por lo que el estilo de la página es muy mejorable.
DEMO



Manual Prestashop

Manual realizado en conjunto con la tienda para la asignatura de Diseño de Aplicaciones Web.


Manual Nodejs

Manual para la exposición del trabajo de investigación sobre nodejs.





La Navidad Llega a tu blog!





Es tiempo de navidad, la gente decora sus hogares y prepara todo con lujo detalle, entonces... ¿Por qué no decorar tú blog? Es nuestro espacio y lugar de relajamiento, trabajo y recreación, y es importante hacer aparentar a los demás que tenemos sentido navideño y que no descubran el verdadero Grinch que llevamos dentro.


NIEVE                                              

Empezamos con un script de Schillmania que hará que caigan unos finos copos de nieve en el blog y que se irán acumulando al final de la página. Además, la tormenta de nieve se mueve en dirección contraria al cursor, por lo que si movemos el cursor a la derecha entonces la nieve caerá desde la izquierda y viceversa.

Puedes ver un ejemplo en este blog de pruebas.

Para no complicarnos descargando y subiendo archivos, pegaremos el script directo en un gadget, así podrás quitar la nieve del blog cuando quieras con sólo eliminar el gadget.
Si usas la interfaz antigua entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript.
Si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript.

Ahí dentro del gadget pega el siguiente código.

Guarda los cambios y a aguantarse el frío virtual.
El número 40 es la velocidad en la que cae la nieve, con un valor más bajo caerá más rápida y con uno más alto caerá más despacio.
En color rojo está el código del color de la nieve, en este caso es blanca, pero puedes cambiarlo por otro en caso que tu blog sea de un color claro, sino pues no se verá.
Cuando acabe la temporada navideña sólo elimina el gadget donde pusiste el código y se habrá ido la nieve.

¿No te gusta esta nieve? mira esta otra.

Para poner esa nieve en el blog copia y pega esto antes de </head>

<script language='javascript' type='text/javascript'>
//<![CDATA[
// Nevando en la pagina por Eloi Gallés Villaplana
// Adaptado a navegadores DOM por Iván Nieto - junio 2007

var numero = 16
var velocidad = 4
var imagennieve = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4qIfwjf4F-Ypcb048oSOh-yB1mIEZZGRD6d6UfR-3kpQ9JhQ0oksQzndXpLmjZvb8F0M4UzbbY-51GmT65ot2tkkNQPJNrLviw3UnfT1NxgExRPfDRWMAs_WP_4cRGxjfx4eI-inIf9c9/"

var ns4arriba = (document.layers) ? 1 : 0
var ie4arriba = (document.all) ? 1 : 0
var dombrowser = (document.getElementById) ? 1 : 0

var dx, xp, yp
var am, stx, sty
var i, doc_ancho = 1024, doc_alto = 768

function nieva() {

 establece_dimensiones()

 dx = new Array()
 xp = new Array()
 yp = new Array()
 am = new Array()
 stx = new Array()
 sty = new Array();
    
 for (i = 0; i < numero; ++ i) {
  dx[i] = 0
  xp[i] = Math.random()*(doc_ancho-50)
  yp[i] = Math.random()*doc_alto
  am[i] = Math.random()*20
  stx[i] = 0.02 + Math.random()/10
  sty[i] = 0.7 + Math.random()
  if (document.layers) {
        if (i == 0) {
    document.write("<layer name=\"dot"+ i +"\" left=\"15\" ")
    document.write("top=\"15\" visibility=\"show\"><img src=\"")
    document.write(imagennieve + "\" border=\"0\"></layer>")
        } else {
         document.write("<layer name=\"dot"+ i +"\" left=\"15\" ")
         document.write("top=\"15\" visibility=\"show\"><img src=\"")
         document.write(imagennieve + "\" border=\"0\"></layer>")
        }
       } else if (document.all || document.getElementById) {
        if (i == 0) {
         document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")
         document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")
         document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"")
         document.write(imagennieve + "\" border=\"0\"></div>")
        } else {
         document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")
         document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")
         document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"")
         document.write(imagennieve + "\" border=\"0\"></div>")
        }
       }
     }
    
 nieve()
}

function nieve() {
 for (i = 0; i < numero; ++ i) {
  yp[i] += sty[i];
  if (yp[i] > doc_alto) {
   xp[i] = Math.random()*(doc_ancho-am[i]-30)
   yp[i] = 0
   stx[i] = 0.02 + Math.random()/10
   sty[i] = 0.7 + Math.random()
   establece_dimensiones()
  }

  dx[i] += stx[i];

  
  if ( document.all ) {
   var copo = eval("dot" + i )
   copo.style.posLeft = xp[i] + am[i]*Math.sin(dx[i])
   copo.style.posTop = yp[i]
  }
  
  else if ( document.layers ) {
   var copo = eval("document.dot" + i)
   copo.left = xp[i] + am[i]*Math.sin(dx[i])
   copo.top = yp[i]
  }
  
  else if ( document.getElementById ) {
   var copo = document.getElementById( "dot" + i)
   copo.style.left = xp[i] + am[i]*Math.sin(dx[i]) + 'px'
   copo.style.top = yp[i] + 'px'
  }
 }

 setTimeout("nieve()", velocidad)
}
function establece_dimensiones() {
 if (self.innerHeight) {
  doc_ancho = self.innerWidth
  doc_alto = self.innerHeight - 25
 } else if (document.documentElement && document.documentElement.clientHeight) {
  doc_ancho = document.documentElement.clientWidth
  doc_alto = document.documentElement.clientHeight - 25
 
 } else if (document.body) {
  doc_ancho = document.body.clientWidth
  doc_alto = document.body.clientHeight - 25
 }
}
//]]>
</script>


Luego antes de </body> pega esto:

<script language='javascript' type='text/javascript'>
nieva()
</script>

Al inicio del primer código que pegaste verás que dice var numero = 16 ahí puedes modificar el número de copos que quieres que aparezcan y en var velocidad = 4 la velocidad con la que caen.
Con estos sencillos pasos tendrás nieve cayendo en tu blog lo cual le dará un espíritu navideño


¿Ninguno de los dos anteriores te convence? mira este otro.

Si te gusta este procede igual que los anteriores e inserta este script en tu blog:

<script type="text/javascript">
var speed=30; // A menor numero más rápido
var flakes=150; // Numero de Copos de Nieve
var flake_image="http://i60.servimg.com/u/f60/13/20/23/83/sin_ta11.png"; // URL de la imagen de nieve
var swide, shigh;
var dx=new Array();
var xp=new Array();
var yp=new Array();
var am=new Array();
var sty=new Array();
window.onload=function() { if (document.getElementById) {
var k, f, b;
b=document.createElement("div");
b.style.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
for (var i=0; i<flakes; i++) {
dx[i]=0;
am[i]=Math.random()*20;
xp[i]=am[i]+Math.random()*(swide-2*am[i]-25);
yp[i]=Math.random()*shigh;
sty[i]=0.75+1.25*Math.random();
f=document.createElement("div");
f.style.position="absolute";
f.setAttribute("id", "flk"+i);
f.style.zIndex=i;
f.style.top=yp[i]+"px";
f.style.left=xp[i]+"px";
k=document.createElement("img");
k.src=flake_image;
f.appendChild(k);
b.appendChild(f);
}
setInterval("winter_snow()", speed);
}}
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600
}
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
document.getElementById("bod").style.top=sdown+"px";
document.getElementById("bod").style.left=sleft+"px";
}
function winter_snow() {
for (var i=0; i<flakes; i++) {
yp[i]+=sty[i];
if (yp[i]>shigh-30) {
xp[i]=am[i]+Math.random()*(swide-2*am[i]-25);
yp[i]=0;
sty[i]=0.75+1.25*Math.random();
}
dx[i]+=0.02+Math.random()/10;
document.getElementById("flk"+i).style.top=yp[i]+"px";
document.getElementById("flk"+i).style.left=(xp[i]+am[i]*Math.sin(dx[i]))+"px";
}
}
</script>



ESTRELLAS BRILLANDO POR EL BLOG 


DEMO
<script type="text/javascript" src="http://blogparts.giffy.me/0074/parts.js"></script>



HOJAS QUE CAEN DESDE ARRIBA DEL BLOG


<script type="text/javascript" src="http://blogparts.giffy.me/0004/parts.js"></script>


BOLAS QUE SUBEN CON OBJETOS NAVIDEÑOS EN SU INTERIOR


<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/16/16833/18/parts.js"></script>


CORAZONES QUE SALEN DEL CURSOR


<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/3/3575/8/parts.js"></script>


ESTRELLAS QUE SUBEN Y BAJAN


<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/17/17044/6/parts.js"></script>


PAPA NOEL TE DESEA FELIZ NAVIDAD



DEMO
<script src="http://img50.xooimage.com/files/0/8/e/papa-noel-2306a2b.js" type="text/javascript"></script>
<span id="supertext" style="color: white; font-family: Arial; font-size: 12px; font-style: normal; font-weight: normal; left: 0; position: absolute; text-align: center; text-decoration: none; top: 0; z-index: 99999999;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu2oe9a63yWiA9twaxIQ8wCAsk5dsnHwWFrBlG5V9Ojb1feu7vw8I-8IyrvME-9Zb5Hkg35VDA0-1PCJq9Nt2Ucp6RdaLJJLcp7D3h3kzRN4lZ7aIDta0zhWkr3aF8FutryIoeM8Xba5SF/s1600/papa-noel.gif" /><br />¡¡¡ FELIZ NAVIDAD !!!</span>



ESTRELLAS QUE SE DESPLAZAN DE IZQUIERDA A DERECHA



DEMO
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/0/7/20/parts.js"></script>



PAPA NOEL RECORRE EL BLOG EN UN TRINEO



<script src="http://bpmaker.giffy.me/userdata/user/0/1/212/parts.js" type="text/javascript"></script>



FUEGOS ARTIFICIALES SOLO CON CSS


DEMO
Para colocar los fuegos en el fondo de tu blog entra en Plantilla | Edición de HTML y antes de ]]></b:skin> pega esto:

/* Fuegos Artificiales en el fondo del blog
----------------------------------------------- */
@keyframes fire {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes fire {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes fire{
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-ms-keyframes fire {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
#contenedor-fuego {
background-image: url(http://www.sologif.net/Celebraciones/Fuegos-Artificiales/fuegos-artificiales-07.gif), url(http://img.123gif.es/fuegos-artificiales/fuegos-artificiales-17.gif);
-webkit-animation: fire 40s linear infinite;
-moz-animation: fire 40s linear infinite;
-ms-animation: fire 40s linear infinite;
animation: fire 40s linear infinite;
}

Ahora busca la etiqueta <body> en las plantillas antiguas, o éste código en las plantillas nuevas:


<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Y debajo de cualquiera de las dos agrega esto:

<div id='contenedor-fuego'>
Por último busca la etiqueta </body> y arriba de ella agrega:
</div>




GADGET DE DÍAS QUE FALTAN PARA NAVIDAD


Pega esto en tu archivo css:
<style>@charset "utf-8";
/* CSS Document */
.sm_counter_cont {
position: relative;
width: 200px;
border-radius: 5px;
float: left;
background:#fff;
padding: 5px 10px;
font-family: Arial, Helvetica, sans-serif;
margin-left: 30px;
margin-top: 10px;
box-shadow:inset 0px 1px 8px rgba(0,0,0,0.1);
}
.sm_santa {
width: 50px;
height: 70px;
position: absolute;
left: -18px;
top: -10px;
background-image: url(http://conversionvoodoo.com/Clients/blogposts/smalltimer/images/santa.png);
}
.sm_counter_cont h1 {
font-size: 15px;
margin: 0 0 2% 0;
text-align: CENTER;
color: #000;
}
.sm_counter_column {
color: #000;
width: 23%;
float: left;
border-top: 1px solid #ccc;
padding: 2% 0px;
margin: 0px 1%;
border-radius: 5px;
background-color: #FFF;
text-align: center;
}
.sm_column_top {
font-weight: bold;
}
.sm_column_bottom {
text-transform: uppercase;
font-size: 7px;
color: #898989;
}</style>



Pega esto en tu archivo HTML:
<div class="sm_counter_cont">
<div class="sm_santa"></div>
<h1>! Días para Navidad !</h1>
<div class="sm_counter_column">
<div class="sm_column_top" id="xmasdays"></div>
<div class="sm_column_bottom">Dias</div>
</div>
<div class="sm_counter_column">
<div class="sm_column_top" id="xmashours"></div>
<div class="sm_column_bottom">Horas</div>
</div>
<div class="sm_counter_column">
<div class="sm_column_top" id="xmasminutes"></div>
<div class="sm_column_bottom">Minutos</div>
</div>
<div class="sm_counter_column">
<div class="sm_column_top" id="xmasseconds"></div>
<div class="sm_column_bottom">Segundos</div>
</div>
</div>
<script type="text/javascript">
function calculateXmasCounter() {
//calculate
var now = new Date();
var current_year = now.getFullYear();
var xmas = new Date(current_year, 11, 25, 0, 0, 0, 0); //Xmas Date (be careful: 11 is December)
var hoursleft = 23 - now.getHours();
var minutesleft = 59 - now.getMinutes();
var secondsleft = 59 - now.getSeconds();
var daysleft = Math.floor((xmas - now) / (1000*60*60*24));
//format 0 prefixes
if (minutesleft < 10) minutesleft = "0" + minutesleft;
if (secondsleft < 10) secondsleft = "0" + secondsleft;
//display
document.getElementById('xmasdays').innerHTML = (daysleft < 0) ? 0 : daysleft;
document.getElementById('xmashours').innerHTML = (daysleft < 0) ? 0 : hoursleft;
document.getElementById('xmasminutes').innerHTML = (daysleft < 0) ? "00" : minutesleft;
document.getElementById('xmasseconds').innerHTML = (daysleft < 0) ? "00" : secondsleft;
}
calculateXmasCounter();
setInterval(calculateXmasCounter, 1000);
</script>




CORONA NAVIDEÑA PARA LA CABECERA



Pega este código en un gadget "HTML/ Javascript"

<img style="border:none;position:absolute;top:0; left:100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTKf1blI_TNoepzHcs89YQY0dhh5_ivbZr-RGiCFtcY9GXtXAtGToEagA2uBRN-n9sUtWxX6-vQA-WbPSysIXYbaex6Z69Nt-zeqAJCG5rzWbRajY4RLr3qas3_bEkHOcOaa1e751CHyc/s1600/corona+navide%25C3%25B1a.png" />



Feliz navidad


<div id="navidad"> <img alt="Feliz navidad" src="http://www.caxigalines.net/gifanimados/navidad/guirnaldas/guirnaldas2.gif" title="Feliz navidad" /></div>




Feliz navidad


<div id="navidad"> <img alt="Feliz navidad" height="320" src="http://www.guauquecosas.com/wp-content/uploads/2013/11/Una-guirnalda-navide%C3%B1a.gif" title="Feliz navidad" width="320" /></div>




Feliz navidad


<div id="navidad"> <img alt="Feliz navidad" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Xd6Pd_rE5ETWmfArgyJF4_JXBFOpTaOh4Q3VXVt7YkyYRP8OokRa6sChl-U1weE_0oaOOo0WSfwD-6Iieq2MHKZFQAI3_fiNH0G2AIdlQ0xAvkF24n1J7Qgy9vjNMiEdYTriiuCB020/s200/Navidad+(34).png" title="Feliz navidad" width="159" /></div>




Feliz navidad


<div id="navidad"> <img alt="Feliz navidad" height="185" src="http://cur.glitter-graphics.net/pub/3203/3203604egxjviugap.png" title="Feliz navidad" width="320" /></div>


ARBOL DE NAVIDAD





<img style="border:none;position:fixed;bottom:-10px; left:10px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhITAY3qyGyxyoO9f4KKrB8AyPEyu9uA_txPkG7uqMyPo8ICfmgmmfJ9VLXX6BTTJ3WDRSpPb4E4FiOl0FTwoJwkUXYv-vDXtFyLdGPSYGsjHnH0wNx5JtBQ79gcfGxjpl0APoSC2r6vJw/s1600/Christmas-tree-256%255B3%255D.png" />





PACK ICONOS SOCIALES NAVIDEÑOS

Christmas Social Bookmark (17 íconos):
Web oficial para descarga




Christmas Ornaments Social Media Icon Set (36 íconos):
Web oficial para descarga


 


 Pack 26 íconos navideños (Por Extreme John):
Web oficial para descarga






PERSONALIZA TU GORRO DE NAVIDAD


Datos personales

Con la tecnología de Blogger.

Copyright © / Ariza Blog