Linea de Texto en movimiento con Marquee

Estuve pensando en algo "dinámico" para el blog, y encontré ésto!

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:

<marquee>ELTEXTOQUEESCOJAS</marquee>

• Ahora, si queremos que nuestro texto tenga un color de fondo, agregamos ésto:

<marquee bgcolor="#f778a1">TEXTO</marquee>

Y este es el resultado

Si desean,pueden reemplazar el #F778A1 por el color que más les guste.

• Si queremos que el texto se desplace hacia la izquierda:

<marquee direction="right" bgcolor="#99ccff">TEXTO</marquee>

• Si queremos que el texto se desplace de arriba hacia abajo usamos este código:

<marquee direction="down" behavior="alternate" bgcolor="#F76541">TEXTO</marquee>

Resultado

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:

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50" behavior="alternate" bgcolor="#4cc417">TUTEXTO</marquee>

El texto se verá asi cuando lo uses

• 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.

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:

<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="url#1">LINK#1</a> <a href="url#2">LINK#2</a> <a href="url#3">LINK#3</a> </marquee>

Reader Widget Empezando con tu blog Free Blogger Templates

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.)

Fuente: diyva.blogspot.com

--> Leer Más...

Poner un Botón al lado Derecho o Izquierdo del Blog | Para Facebook, Twitter, Icono RSS y más

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:

<a href='http://www.facebook.com/usuario' target='_blank' title='Sígueme en Facebook'><img src="http://3.bp.blogspot.com/_CJgyaq5cULk/S4J4hcZ

FYWI/AAAAAAAAArM/dIqF5xgzQdU/s320/Facebook-2.jpg" style="width:30px; display:scroll;position:fixed;bottom:225px;

right:0px" /></a>

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.

Fuente: pazosblogger.com

--> Leer Más...

Diseñar Plantillas en Blogger in Draft

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.

Ver Video

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.

Fuentes: elescaparatederosa

--> Leer Más...

Iconos Profesionales gratuitos para tu Web

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.

Desargar iconos

Fuente: baluart.net

--> Leer Más...

Menú de Navegación Lateral con Efecto Slide jQuery y CSS

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:

<script src='http://sites.google.com/site/pazosblogger/config/

pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

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>:

<script type="text/javascript">

$(function() {

$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);

},

function () {

$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);

}

);

});

</script>

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:

Descargar codigo

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:

<ul id="navigation">

<li class="imagen1"><a href="#" title="nombre-imagen"></a></li>

<li class="imagen2"><a href="#" title="nombre-imagen"></a></li>

<li class="imagen3"><a href="#" title="nombre-imagen"></a></li>

<li class="imagen4"><a href="#" title="nombre-imagen"></a></li>

<li class="imagen5"><a href="#" title="nombre-imagen"></a></li>

<li class="imagen6"><a href="#" title="nombre-imagen"></a></li>

<li class="imagen7"><a href="#" title="nombre-imagen"></a></li>

</ul>

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.

Descargar Script

Fuente: pazosblogger.com

--> Leer Más...

Botones con Efecto Burbuja con jQuery y CSS

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:

<script src='http://sites.google.com/site/pazosblogger/config/

pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

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> :

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/

script/bubbleup.jquery.js' type='text/javascript'/>

<script type="text/javascript">

$(function(){

$("ul#menu li img").bubbleup();

});

</script>

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:

/* CSS menu efecto burbuja */

ul#menu {

margin: 5px 0px;

}

ul#menu li {

padding: 0px;

display: inline-block;

*display: inline; /* IE 7 and below */

position: relative;

margin-left: 5px;

margin-right: 5px;

width: 48px;

height: 48px;

}

ul#menu li img {

width: 48px;

position: absolute;

top: 0px;

left: 0px;

padding: 0px;

margin: 0 8px 0 0;

border: none;

}

Por último ve a Diseño > Añadir gadget > elije > HTML/Javascript > y pega el siguiente código HTML:

<ul id="menu">

<li>

<a href="#" title="nombre-imagen">

<img src="url-de-tu-imagen" alt="descripción-imagen">

</a>

</li>

<li>

<a href="#" title="nombre-imagen">

<img src="url-de-tu-imagen" alt="descripción.imagen">

</a>

</li>

<li>

<a href="#" title="nombre-imagen">

<img src="url-de-tu-imagen" alt="descripción-imagen">

</a>

</li>

<li>

<a href="#" title="nombre-imagen">

<img src="url-de-tu-imagen" alt="descripción-imagen">

</a>

</li>

</ul>

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.

Descargar Script + Iconos

Ver: Demo

Fuente: pazosblogger.com

--> Leer Más...

Optimizar imagenes Online

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.

A continuación varios sitios online:

1.- Web Resizer

2.- Online image optimizer

3.- SmushIt

4.- Image Optimizer

5.- GifBot

Fuente: PizcosBlog

--> Leer Más...

Video: TwitterFeed, una poderosa herramienta para Vincular Twitter y Facebook a tu blog

Como Configurar TwitterFeed para que publique de forma automatica un Tweet en Twitter y Facebook cuando subas nuevo contenido a tu sitio web.

Fuente: Youtube - redwitear

--> Leer Más...

Cómo crear un blog en Wordpress

Tutorial en el que explicamos cómo crear un blog en Wordpess a todo detalle, para que cualquier usuario pueda tener su propia sitio web en Internet.

Fuente: Youtube - Configurarequipos

--> Leer Más...

Video Ponencia: Blogs, Wikis y Redes Sociales

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.

Comparto con ustedes esta ponencia interesante.

--> Leer Más...