Les gustó el efecto? Yo creo que sí; me encantó cuando los vi en el blog de Gem@ y decidí "jugar" con los códigos y obtener nuevos efectos:
El código base es éste:
Ahora, si queremos que nuestro texto tenga un color de fondo, agregamos ésto:
Si desean,pueden reemplazar el #F778A1 por el color que más les guste.
Si queremos que el texto se desplace hacia la izquierda:
Si queremos que el texto se desplace de arriba hacia abajo usamos este código:
Si desamos que el código se mueva de abajo hacia arriba, cambiamos "down" por "up".
Para que el texto se pare cuando pasamos el mouse sobre él, usamos este código:
Dseamos que el texto vaya más lento o más rápido?
Entonces, donde está scrollamount="1" cambiamos el número; si ponemos un número mayor (6,7...) el texto irá más rápido; si ponemos un número menos (1,2,...) el texto irá lento.
Pero también podemos usarlo para poner una lista de links, colocar nuestros post favoritos (como el ejemplo que sigue) o darle el uso que querramos:
En fin, podemos personalizarlo como querramos, ya depende de nuestra imaginación y luego lo colocamos donde deseemos (en la sidebar, como título de algún post, usarlo como un anuncio especial.)
Este botón lo puedes poner tanto al lado derecho como al izquierdo, y puede ser de Facebook, Twitter, RSS, o de lo que ustedes quieran.
El código de este post, es un código de ciudad blogger, al cual simplemente le he añadido la propiedad width:px; para ajustar el botón y que este no tape los bordes de nuestro blog.
Para este post utilizaré una imagen de Facebook ustedes pueden poner la imagen de su red social favorita.
Para añadirlo a tu blog ve a Diseño > Edición de HTML > con la ayuda del buscador de tu navegador (Ctrl + F) busca la etiqueta </body> y justo antes pega el siguiente código:
Lo que está en color azul cámbialo por la dirección de tu Facebook, Twitter, Icono RSS, etcétera. En este caso tenemos facebook.
Si quieres poner tu propia imagen, cambia lo que está en color rojo por la url de tu imagen.
Lo que está en color celeste cámbienlo por el texto que ustedes quieran.
Si el botón te tapa parte del borde de tu plantilla ajusta los pixeles en width:30px se los dejo en color amarillo.
También pueden ajustar la altura a la que se verá el botón en bottom:225px y la alineación si lo quieren al lado izquierdo cambien right por left.
Entre todas las nuevas funciones que Blogger ha ido incorporando en los últimos tiempos siempre se ha echado de menos el que no ofreciera un mejor y más variado surtido de plantillas. Durante años hemos tenido disponibles los mismos modelos para elegir desde nuestro panel.
Eso ha cambiado desde esta misma tarde según he podido saber a través del blog de Blogger in Draft, donde incluso han incluido un vídeo explicando la nueva función de Diseño de plantillas.
De momento solo tendremos disponible el uso del "Diseñador de plantillas" si accedemos a nuestro panel de Blogger desde Blogger in Draft.
Una vez dentro de nuestro panel y en la parte de Diseño del mismo, podemos comprobar que se ha añadido una nueva pestaña llamada precisamente "Diseñador de plantillas".
La interfaz del Diseñador es muy intuitivo y fácil de manejar, contando además con una "vista previa" al estilo de "Fuentes y colores" desde donde podemos ir comprobando los cambios que vamos añadiendo a la plantilla escogida. Además de la posibilidad de usar nuevos modelos de plantillas, podemos incluir desde el diseñador varios cambios personalizados, como el incluir una imagen de fondo o cambiar la gama de colores a usar en el diseño.
Modificar el diseño del cuerpo del blog, el pie de página y ajustar el ancho que necesitamos entre otras cosas, desde el menú Diseño.
Por último desde la pestaña "Avanzado" del menú del Diseñador, nos será fácil modificar distintos aspectos del diseño.
Nota: Recomiendo cierta precaución al probar esta nueva función, aunque yo he estado "jugando" un buen rato y todo parece funcionar bien (incluso el deshacer los cambios), mejor lo hacemos desde un blog de pruebas para evitar sorpresas indeseadas, pues es sabido que todas las funciones incluidas en Blogger in Draft están en periodo de pruebas.
Web Icon Set ofrece un set de iconos de diseño profesional a los desarrolladores de aplicaciones como nosotros.
Ellos han relanzado si primer pack de íconos, Web Application Icon Set gratis. Puedes usar estos íconos en cualquier computador y aplicación web.
Application Icon Set incluye los íconos de Registro, Herramientas, Usuarios, Base de datos, Login, Chat, Añadir, Borrar, Editar y muchos más.
Podemos descargarlos en formato PNG y en diferentes tamaños (128, 64, 48 y 32px). Web Icon Set suele añadir nuevos íconos, por lo que no es mala idea visitar su web regularmente.
Los menú de navegación son una parte vital del blog ya que contiene información importante o no, hoy día hay muchos tipos de menú, pero el que les mostraré hoy día lo podemos utilizar en nuestro blog o página web gracias a Tympanus, que nos enseña a crear un bonito menú de navegación con un bonito efecto slide. Pueden verlo en mi blog de pruebas.
Este menú desplegable casi no se verá ya que permanecerá escondido una parte de los botones hasta que los usuario de tu blog pasen el mouse por encima de cada elemento, cuando pasen el cursor por encima este se desplegará con un bonito efecto slide.
Para ponerlo en tu blog tienes que tener la librería jQuery v1.3.2 en tu plantilla es posible que ya la tengas si es que has puesto otro efecto con esta versión, si es así salta este paso, de lo contrario con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código:
Ya tenemos la librería jQuery en nuestra plantilla, ahora toca añadir el script que animará el efecto, para ello copia el siguiente código y pégalo justo después del código que acabas de pegar antes de </head>:
Ahora toca añadir el código CSS para darle estilo al menú, nuevamente con la ayuda de (Ctrl + F) busca la etiqueta ]]></b:skin> y justo antes pega el siguiente código:
Por último tenemos que agregar el código HTML para llamar a la hoja de css y al script, ve a Diseño > Añadir gadget > elije > HTML/Javascript y pega el siguiente código:
Configuración:
Cambia lo que está en color rojo por la dirección de tus iconos.
Donde está la # en color verde tienes que poner la url de tu enlace.
También pueden cambiar la velocidad del efecto slide, esto está en milisegundos, para ello cambien lo que está en color celeste en el código javascript, pueden ver que está en 200 milisegundos.
En Aext.net nos enseñan a crear un Plugin jQuery, empezando desde cero, así que si les gusta trabajar con los códigos lean este tutorial.
El caso es que en dicho tutorial escrito por Lan Nguyen donde nos enseña a crear un plugin al cual le ha llamado "Bubble Up", tiene un efecto de burbuja, que al pasar el mouse por encima de una o varias imágenes dentro de una lista esta se ampliará con una animación suave, y al sacar el cursor de encima de la imagen esta volverá a su tamaño original con la misma animación suave. Este efecto lo podemos utilizar para ofrecer suscripción a nuestros usuarios, para hacer una barra Bookmarks, para un menú, o para cualquier otra imagen. Pueden verlo funcionando en mi blog de pruebas.
Para utilizar este efecto en tu blog primero tienes que tener la librería jQuery 1.3.2 en tu plantilla, es posible que la tengas, si es así salta este paso, de lo contrario con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código:
Ya tenemos la librería jQuery en nuestra plantilla, ahora añadiremos el script que dará vida a la animación, para ello tienes que pegar el siguiente código justo después del anterior código que acabas de pegar justo antes de la etiqueta </head> :
Ahora añadimos la hoja de estilo CSS, con la ayuda de (Ctrl + F) busca la etiqueta ]]></b:skin> y justo antes pega el siguiente código:
Por último ve a Diseño > Añadir gadget > elije > HTML/Javascript > y pega el siguiente código HTML:
Cambia la # por la dirección de tu enlace, y lo que está en color rojo por la dirección de tu imagen o icono.
No te olvides de ponerle nombre y descripción a tu imagen, la descripción es buena hablando de S.E.O.
Particular mente creo que una de las cosas a las que tenemos que poner mucha importancia como bloguero a la hora de escribir un post, es la utilización de las imágenes, ya que puede ser que no la estés optimizando, y por ello tu blog tarda en cargar, debido a las imágenes pesadas que pones en cada post.
Pero no te preocupes, hoy te informo de varias herramienta potentes para que puedas optimizar tus imágenes y hacerlas lo más livianas que puedas.
Ahora que Google nos obliga a reducir el peso de nuestras páginas, no esta mal tener a la mano estas paginas para optimizar imágenes online.
El profesor de la UNIR, Miguel Arrufat, brindó una ponencia de Webs 2.0 y Educación. En este extracto de su ponencia, podemos prestar atención a la importancia que han tomado los Blogs, Wikis y Redes Sociales.
Estas herramientas muy usadas en todo el mundo, tiene una utilidad infinita en la educación. Miguel Arrufat hace mención de que los docentes en España, cuentan ya con blogs propios y realizan publicaciones referentes a sus materias, compartiéndola con sus alumnos, alumnos de otras escuelas y de otros países, como también intercambia conocimientos con colegas de todo el mundo. Blogger y Wordpress son las más usadas.
Los wikis tiene una elemental importancia en la distribución de conocimiento, totalmente abierta, donde cualquier usuario de mundo puede colaborar. Wikipedia es una de las más importantes.
Las Redes Sociales se han convertido en el medio preferido e los jóvenes para interactuar, que está influyendo en el comportamiento de los alumnos. Tuenti es de la más usadas en España por los estudiantes.
Aurelio Pastor fue sacado a patadas por rebelde
-
Esperaban su renuncia pero se declaró en rebeldía, se entornillo en el cargo
y a *Alan García* no le quedo otra que dejar sin efecto el nombramiento de *Aur...
Kenita Larraín, belleza chilena
-
Su verdadero nombre es María Eugenia Larraín Calderón, y es quizas la
chilena más conocida en el mundo del modelaje y farandula de hoy.
Ha trabajado en in...
El orgasmo femenino: mitos y mentiras
-
Sobre el orgasmo se ha dicho y escrito mucho. Alrededor de este, además, hay
una serie de mitos y mentiras que es recomendable desentrañar.
El orgasmo es ...
Trailer completo de Crepusculo:Eclipse
-
Les habíamos mostrado los primeros 10 segundos de la tercera parte de esta
película que tiene cautivado a sus miles de fans en el mundo, ahora les
mostram...
Curso Virtual de Redes Lan en Tecsup
-
El curso, dictado por Tecsup campus Lima, tendrá inicio el 10 de abril, y está dirigido a tanto a aquellos interesados en el mundo de las redes como a aquel...
Zonas y Ubicaciones del concierto de Aerosmith
-
Se dió a conocer las zonas y ubicaciones para el esperado concierto de
Aerosmith, que se realizará el 22 de Mayo en la Explanada del Estadio
Monumental.
...
Prepárate para la Universidad Agraria
-
*AGROCIENCIAS* te ofrece la mejor preparación preuniversitaria para postular
a la *UNIVERSIDAD NACIONAL AGRARIA LA MOLINA.*
*¿Por qué estudiar en AGROCIENC...
Centros Arqueológicos en Lima
-
*La Ciudad Muerta de Cajamarquilla*
Se encuentra ubicado a 15 km al este de Lima por la carretera Central, en la
margen izquierda y en la parte baja de la...
Gabriel Soto
-
Empezó en el mundo del modelaje a los 18 años , llegando incluso a
participar en Mr. Universo realizado en Estambul en el 1996.
Integró el grupo musical ju...
Video: Paseo Turístico por Copenhague
-
Es la capital y principal ciudad de Dinamarca. Se encuentra ubicada en la
isla de Selandia. Actualmente es la sede del Parlamento y de la Monarquía
danesa...