REDEANDO

Juego New Super Luigi Bros

2012-02-28T10:29:00.000+01:00

Original versión de uno de los clásicos juegos de Mario Bros, pero desde un punto de vista diferente: en esta ocasión el protagonista es el hermano de Mario, Luigi, el que tendrá que salvar a la princesa. Como es habitual, Tendremos que recoger todas las monedas que podamos, e ir superando niveles, para ello utilizaremos las flechas de dirección para controlar a Luigi. Para acabar con los enemigos debemos saltar sobre ellos.

Copia este codigo si quieres ponerlo en tu blog o web:

<param value="http://www.juegosmariobrosgratis.com/games/New_Super_Luigi_Bros.swf" name="movie">

Internautas TV en el blog

2012-02-27T21:28:00.000+01:00

¿Sabes quienes son Internautas Television? ITV es un programa de acceso público a través de Internet bajo el auspicio de la Asociación de Internautas, que emite de lunes a viernes un informativo donde se tratan noticias de interés para la comunidad internauta: Seguridad en la Red, tarifas, ofertas de acceso a Internet, calidad de los servicios, ciberderechos, agenda, aplicaciones, videojuegos, telefonía móvil, y en ocasiones, algo de astronomía. Pues eso, que esta web española te informa de la actualidad en la red periodicamente mediante programas en formato video. Y si quieres tener todos los videos semanales (se actualizan automaticamente) en tu blog o web, solo tienes que copiar el codigo de abajo. Si quieres personalizarlo a tu gusto, haz click en el la letra 'C' del video y te mandara a su web.

CODIGO:

<script src="http://www.internautas.tv/internautastv.php?reg=9867" type="text/javascript"></script>

La web de: Tom Cruise

2012-02-27T15:25:00.000+01:00

Un actor como Tom Cruise tiene una pagina a la altura de una megaestrella de accion de Hollywood. La web esta realizada en formato flash, con un diseño elegante en el que predomina el color negro y con muchas fotos suyas. En portada aparece su ultimo gran estreno, para promocionar mas aun si cabe, la peli que protagoniza. En su menu podemos encontrar las ultimas noticias sobre el actor, su blog, biografia, una galeria de fotos y enlaces a sus redes sociales oficiales.

Si eres seguidor o seguidora de Tom y quieres estar al tanto de sus ultimos trabajos, pasate y apuntate la direccion de su web.

visitar la web de Tom Cruise

Iconos girando 360 grados

2012-02-26T18:51:00.003+01:00

A la hora de mostrar los iconos sociales en nuestro blog, podemos darle un toque de originalidad con este efecto. Se trata de CSS3, aplicando las propiedades transform y rotate al hover de las imagenes, estas giran 360º sobre si mismas al pasar el cursor del raton sobre ellas. Para añadirlo en tu blog o web, solo tienes que copiar el codigo de abajo y ponerlo en un elemento HTML. Donde esta indicado en rojo, añades las urls de las imagenes y las de las de tus redes sociales.

CODIGO:

<center><div id="socialicons"><a href="URL FACEBOOK" target="_blank"><img height="50" src="URL IMAGEN" width="50" /></a><a href="URL GOOGLE PLUS" target="_blank"><img height="50" src="URL IMAGEN" width="50" /></a><a href="URL TWITTER" target="_blank"><img height="50" src="URL IMAGEN" width="50" /></a></div></center>
<style>
#socialicons img{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;}
#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);}
</style>

Productos con los logos de Google

2012-02-26T10:06:00.002+01:00

En Zazzle.es podras ver los doodles (esos logos conmemorativos) de Google transformados en camisetas, tazas o cualquier tipo de merchandising. En esta tienda online tienes cientos de doodles para escoger y elegir en qué producto deseas imprimirlo. Puedes dar un recorrido por año, viendo todos aquellos que Google ha creado en diferentes partes del mundo de acuerdo a la fecha. Una vez que escoges el doodle y el producto que deseas, solo queda agregarlo a tu carrito de compra.

visitar Zazzle

Acelera la carga de tu Blogger con JQuery

2012-02-24T14:14:00.001+01:00

Ahora en nuestro blog de Blogger podemos añadir un script que ayudara a que que cargue mas rapidamente. Se trata de un plugin de JQuery llamado Lazy Load que lo que hace es que las imagenes de los posts vayan cargando a medida que vamos bajando hacia abajo. Es algo parecido a lo que incorporan los blogs de Wordpress. Pero ojo, este script no es milagroso, si que funciona bastante bien, pero tambien tienes que tener en cuenta los siguientes consejos que aqui te doy para no sobrecargar el blog:

→ No abuses de las imagenes, tanto en los posts, como en el diseño o en la sidebar.

→ No añadas demasiados gadgets o widgets innecesarios.

→ No pongas mas de 5 posts en la pagina principal y por pagina.

→ No pongas demasiados videos o flash.

→ No te aconsejo que pongas el gadget de seguidores, tarda mucho en cargar.

→ Elige una plantilla que cargue rapido.

→ Cambia todos los scripts (menos este) en el footer, si te funcionan bien.

Este es el codigo, añadelo en la plantilla justo antes de </head>

CODIGO:

¿Terminator 5?

2012-02-23T22:55:00.002+01:00

Como much@s de vosotr@s ya sabreis, esta en proyecto el rodaje de la quinta pelicula de Terminator, en la que vuelve aparecer Arnold Schwarzenegger. Tras haber cierto jaleo con los derechos del film, se dice (no quiere decir que sea cierto) que este nuevo film obviaria la 3ª parte y Salvation, y seria una continuacion de Terminator 2. Pues bien, aqui os traigo este curioso video que, al principio creia que era un montaje, pero viendolo bien ya no se que pensar. Porque el que sale con la moto y la 'recorta' es Arnold, y el que lleva protegiendo se parece al chaval John Connor de la 2, pero mas mayorcito. El idioma en que se escucha es raro, me parece que es ruso, pero eso es lo de menos. Echadle un vistazo y decidme que opinais.

Imagenes con descripcion deslizante

2012-02-22T10:14:00.001+01:00

Vamos a ver como añadir un texto que describa una imagen que hemos puesto en el blog, con la particularidad de que esta descripcion esta oculta. Al pasar el cursor del raton por encima de la imagen, esta aumenta un poco (con la propiedad transform) y por debajo asoma la descripcion automaticamente. Todo esto es posible gracias a la evolucion del CSS (llamada CSS3), sin codigos Javascript ni nada de nada.

Aqui tienes un ejemplo con 2 imagenes. Pasa el cursor por encima de ellas:

Este es uno de los posibles logos o banners de mi proximo proyecto. Un directorio de blogs llamado Blogs en Red.

Si, ya se, es Pilar Rubio. Es que me encanta esta chica. ¿Esta guapa en la foto, eh? ejem...

Para poner este efecto en nuestro blog, lo primero que tenemos es que añadir el CSS en la plantilla, antes de </head>. Lo que esta en rojo es el ancho de la descripcion, que por lo general tiene que ser igual que el de la imagen.

Una vez hecho esto, cada vez que querais añadir este efecto en una imagen, poneis el siguiente codigo, poniendo la url de la imagen, la descripcion y el tamaño donde esta indicado en rojo.

<div class="imagepluscontainer" style=" z-index: 2;">
<img src="URL IMAGEN" height="250" width="250" /><div class="desc">DESCRIPCION</div></div>

Plantilla para Blogger Videofication

2012-02-21T02:09:00.000+01:00

Moderna plantilla orientada exclusivamente a los blogs dedicados a publicar videos (videoblogs), ya que posee unos scripts especiales para ello. Diseñada casi al completo con CSS puro, cuenta con paginacion, barra de busqueda expandible, menu con botones, posts estilo magazine y sidebar a la derecha.

ver demo

descargar

"Los Cuadrado", una web-serie catalana

2012-02-20T21:51:00.000+01:00

Los Cuadrado es una serie que presenta en formato "docu-reality" la filosofía de vida de los hermanos Cuadrado: Víctor y Juanmi. Dos fiesteros treintañeros, de familia humilde y trabajadora, que reflexionan sobre la ciudad donde viven, Barcelona, las chicas, la familia...

This text will be replaced

Efecto metalico con HTML5

2012-02-20T11:06:00.000+01:00

He aqui otro ejemplo de las posibilidades que nos da el HTML5 (HyperText Markup Language, versión 5). Un fondo blanco en el que, al pasar el raton dibujamos una composicion como de metal liquido.

Galeria "Street Fighter"

2012-02-18T19:37:00.003+01:00

Ilustraciones, diseños y fotos de varias nacionalidades, basados en el popular videojuego de Capcom.

Juego "Dismount 2 Win"

2012-02-17T10:16:00.001+01:00

Entretenido juego flash tipo puzzle en el que el objetivo es hacer clik con el raton a los grupos de bloques del mismo color. La pantalla se va llenando de bloques y avanza subiendo, tienes que ser rapid@ para ir eliminandolos antes de que lleguen arriba. Tambien dispones de bombas para explotar mas de una tacada.

Ponlo en tu blog o web:

<center><param value="http://uploads.ungrounded.net/589000/589909_Dismount2Win.swf" name="movie"><param value="never" name="allowscriptaccess"><param value="true" name="allowfullscreen"><param value="NewgroundsAPI_PublisherID=1&NewgroundsAPI_SandboxID=4f3e1642289bf" name="flashvars"><param value="direct" name="wmode"></object></center>

DVDs animados con CSS

2012-02-16T09:00:00.000+01:00

Hay veces que con un codigo muy cortito podemos hacer maravillas, y solo con CSS, sin utilizar scripts ni librerias externas. Es el caso de este ejemplo que aqui te pongo, unas cajas en las que asoma un DVD, y al pasar el cursor por encima, este 'rueda' hasta salir a fuera. La propiedad de estilo que hace esto posible se llama transition, luego solo hay que 'llamarlo' con HTML y con la etiqueta alt. El resultado es muy original como podeis ver y se le puede dar muchos usos, ademas, cambiando las imagenes podemos hacer multiples creaciones. Abajo del todo tienes el codigo que he utilizado, lo que esta en rojo son las urls de las imagenes, una la del DVD y otra la del cartel de la peli.

Efectos en tus imagenes online

2012-02-15T14:51:00.004+01:00

¿Te gusta editar fotos? ¿Agregarle efectos para que sean originales? Tenemos muchas opciones online que nos permiten darle un toque diferente a nuestras imagenes de manera sencilla y gratuita. MessMyPhoto es una nueva opción muy interesante que sin registro y con solo escoger la fotografía de nuestro ordenador, Facebook o nuestra cuenta de Google, podremos comenzar a retocarlas. Puedes escoger entre 12 efectos diferentes para aplicarlos, entre ellas las más populares como sepia, blanco y negro, integrar la bandera de un país, utilizar efecto nigth vision, fisheyes y reflection entre otros. Una vez que tenemos nuestra imagen con los efectos que deseados, solo nos resta guardarla en nuestro ordenador, imprimirla o compartirla en Picasa o Facebook.

IMAGEN NORMAL

IMAGEN CON EFECTOS

visitar MessMyPhoto

Iconos con forma de corazon

2012-02-15T13:55:00.000+01:00

Ahora que estamos en la semana de San Valentin, es el momento idoneo de mostrarte estos iconos sociales con forma de corazon. Si te gusta este estilo, puedes descargarlos y ponerlos en tu blog. Este pack consta de 5 tipos de iconos (como puedes ver en la foto) en 7 tamaños diferentes formato png.

descargar iconos

Tu blog con fondo de colores animado

2012-02-14T21:41:00.001+01:00

Muchas veces habras visto scripts para cambiar el color del fondo del blog o web, como por ejemplo este que escribi en un articulo. Pues si eso no te parecia bastante y ya no sabes que poner de background para darle un toque original a tu pagina, aqui tienes un script que te dejara 'flipa@'. Se trata de un codigo Javascript que lo que hace es fusionar distintos colores y moverlos continuamente. Para añadirlo, solo tienes que copiar este codigo y ponerlo donde quieras en tu web o blog, en Blogger lo añadimos en un gadget HTML/Javascript y listo. Si quieres cambiar los colores hexadecimales, modificalos donde esta indicado en azul.

ver demostracion

Red Bull TV en tu web

2012-02-13T14:25:00.000+01:00

Si te gusta la aventura y los deportes extremos te gustara Red Bull TV , el canal oficial de la bebida energetica. Este canal suele retransmitir las 24 horas del dia ininterrumpidamente y ahora lo puedes poner en tu blog o web, copiando el codigo de abajo.

<center></center>

Menu vertical "Naranzul"

2012-02-13T11:02:00.000+01:00

Para organizar las secciones o categorias de tu blog, aqui tienes este menu que combina los colores azul y naranja con la imagen de una flechita en cada enlace. Este menu es ideal para ponerlo en la sidebar o columna lateral del blog. Para ello, solo tienes que copiar el codigo de abajo y añadirlo en un gadget HTML/Javascript. Sustituye lo que esta indicado en rojo por el texto y las urls de tus enlaces. Para poner mas enlaces, solo tienes que añadir la linea <li><a href="URL">TEXTO</a></li> debajo de las otras, tantas veces como quieras.

CODIGO:

<center><div id="naranzul"><ul>

<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>

<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>

</ul></div></center>

<style>#naranzul ul { list-style: none; margin: 0; padding: 0; } #naranzul img { border: none; } #naranzul { width: 200px; margin: 10px; } #naranzul li a { height: 32px; font-family:Helvetica; margin: 0; font-size: 15px; font-weight: bold; background: transparent; height: 24px; text-decoration: none; } #naranzul li a:link, #naranzul li a:visited { color: #FFF !important; display: block; background: url(http://1.bp.blogspot.com/-AAhV4DTkRCg/Th78ErWmLfI/AAAAAAAABQQ/uMefE8T9UNc/s1600/menu5.gif); padding: 8px 0 0 35px; } #naranzul li a:hover { color: #FFF !important; background: url(http://1.bp.blogspot.com/-AAhV4DTkRCg/Th78ErWmLfI/AAAAAAAABQQ/uMefE8T9UNc/s1600/menu5.gif) 0 -32px; padding: 8px 0 0 35px; } </style>

Iconos Sociales "Monitor"

2012-02-12T02:45:00.000+01:00

En este pack vas a encontrar 5 iconos (Twitter, Facebook, Google Plus, YouTube y RSS) de 500x500 px en formato png con fondo transparente y un diseño muy elegante en forma de monitor. Una muy buena opcion, sin duda, para ponerlos en tu blog o web.

Guia Facebook

2012-02-11T20:08:00.003+01:00

¿Tienes problemas con Facebook? ¿Todavía te preguntas por qué tienes menos amigos que un inspector de Hacienda? Esta guía te mostrará cómo crear correctamente un perfil de Facebook.

Calendario con eventos

2012-02-10T09:30:00.000+01:00

¿Quieres poner un calendario en tu blog o web? Pues aqui tienes uno muy funcional, en español y que ademas, al hacer click en los dias de fiesta te pone que festividad es. Para ponerlo en tu pagina, solo tienes que copiar el codigo de abajo. Si quieres cambiar el tamaño del calendario, solo tienes que modificar los numeros que estan indicados en color rojo.

"The amazing Spiderman", la nueva peli del trepamuros

2012-02-09T03:21:00.006+01:00

Vuelve nuestro colega y vecino el hombre araña en una pelicula nueva que se estrena este verano. Y cuando digo nueva, quiero decir por completo, desde el director (ya no estara el genial Sam Raimi) pasando por el prota y todo el conjunto del reparto. El film vuelve a los origenes, con un Spiderman adolescente que adquiere los poderes y comienza a despuntar como superheroe. Tambien hay nuevo villano en esta entrega, el profe de ciencias (el Dr. Curt Connors) que se transforma en El Lagarto. Todo esto lo podeis ver en este trailer oficial en castellano.

This text will be replaced

Entradas Populares en Blogger con slider horizontal

2012-02-08T16:25:00.002+01:00

Basandome en un widget de Abu Farhan, lo he rediseñado un poco con CSS para mostrar las entradas populares tipo slider, lo que le dara un toque mas 'cool' a nuestro blog. Este gadget, que funciona con JQuery, cuenta con dos flechas a ambos lados para mover los posts de un lado a otro con efecto deslizante.

Este es el aspecto que tendra una vez lo hayamos puesto:

Para ponerlo en nuestro Blogspot, lo primero que tenemos que hacer es añadir el gadget de entradas populares. En las opciones ponemos solo imagen en miniatura, para que se muestren solo los titulos de los posts y las imagenes. El gadget esta pensado y diseñado para ponerlo arriba o debajo de las entradas, tu eliges.

Una vez hecho esto, añadimos un gadget HTML/Javascript (este lo podemos poner donde queramos), pegamos el siguiente codigo y guardamos.

Galeria Google Plus

2012-02-08T04:56:00.005+01:00

Recopilatorio de imagenes, diseños y fotografias inspiradas en la red social de Google.

Eclipse Javascript

2012-02-06T02:52:00.001+01:00

Situa el cursor del raton encima de el "espacio" y mueve la luna tapando y destapando el sol a modo de eclipse. Esto es otra muestra de lo que se puede llegar hacer con Javascript y HTML5, en este caso de la mano de un diseñador Español llamado Ricardo Cabello.

Pepe cantando en "Crackovia"

2012-02-05T15:02:00.000+01:00

Genial imitacion del programa catalan "Crackovia" del jugador del Real Madrid Pepe, a raiz de la polemica surgida por el pisoton a Messi. Todo esto versionando la cancion "Ai se eu te pego" del cantante Michel Tello.

This text will be replaced

Chatea con un Chatroll

2012-02-05T01:30:00.000+01:00

Hay muchos chats gratuitos por la red para blogs o webs, como Chatango, Xat, Cbox, etc... Lo que pasa que muchas veces recargan la pagina relentizandola mucho, sobre todo si son en formato flash. Una buena opcion es decantarse por Chatroll, porque es bastante liviano, puedes personalizarlo y tambien moderarlo. Para hacerte con uno, solo tienes que entrar en la web, registrarte y crearlo. Aunque esta web esta en ingles, te permite elegir el idioma que aparecera en el modulo del chat, como por ejemplo el español.

visitar Chatroll

Menu "Violeta Gradius"

2012-02-03T22:13:00.001+01:00

Para l@s que os guste este color o posiblemente os combine con el estilo de vuestro blog o web, aqui teneis este menu tan chulo diseñado en tono violeta gradient (difuminado) con bordes redondeados. Esta integramente realizado con CSS, es decir que no utiliza ninguna imagen de fondo.

Este es el aspecto del menu, una vez acabado:

Para ponerlo en Blogger puedes añadir si quieres los dos codigos juntos en un gadget HTML/Javascript.
Y si quieres ponerlos por separado, primero añade el codigo CSS en la plantilla antes entre las etiquetas <head> y guardas.

Ahora añades el codigo HTML alli donde quieras mostrar el menu, escribiendo los enlaces donde pone URL y el texto donde esta indicado en color rojo. Si quieres añadir mas enlaces, solo tienes que poner la linea <a href="URL">TEXTO</a> a continuacion de las otras, tantas veces como quieras.

<div class="violetagradius"><span class="izmvg"></span><a href="URL">TEXTO</a><a href="URL">TEXTO</a><a href="URL">TEXTO</a><span class="demvg"></span></div>

Transformacion de cubos

2012-02-03T10:27:00.000+01:00

Un diseñador web llamado Gerard Ferrandez ha creado estas fantasticas animaciones tridimensionales compuestas por HTML5 Canvas, CSS y Javascript. El codigo de realizacion es algo complicado y creo innecesario ponerlo aqui, sobre todo porque no os va a ser de utilidad para vuestra web o blog, mas que nada es un espectaculo visual. Coloca el cursor sobre el cubo en 3D y clickea sobre el, dale la vuelta para que rote y que se reproduzca en otros mas. Ademas, tienes varias opciones en la barra lateral, como cambiarle el fondo, darle transparencia, resetear, etc...

Crea un formulario de contacto gratis en ContactMe

2012-02-03T02:21:00.000+01:00

Muchas veces nos hace falta un formulario (sobre todo en Blogger) para que los usuarios de nuestro blog contacten con nosotros. Pues en ContactMe te lo ofrecen gratuitamente (con publicidad en la version gratuita), pudiendo personalizar todos los campos que queramos poner. Ademas, aunque la web esta en ingles, nos permite elegir el idioma y hasta poner el logo de nuestro blog o web. Tambien se pude escoger con una pestaña flotante, que al hacer click aparece el formulario. Solo tenemos que copiar el script y pegarlo en nuestra pagina.

Vista previa del formulario:

visitar ContactMe

Haciendo tonterias vestido de Batman

2012-02-02T23:46:00.000+01:00

Esta pareja que van disfrazados de Batman y Catwoman, se conocen en YouTube como Chad y Angie y, desgraciadamente para los aficionados serios de este mundillo, se declaran fans de los cómics. En este video tan friki, hacen un particular homenaje al Move Like Jagger de Maroon 5 y al Señor de la Noche.

This text will be replaced

Box social para Blogger

2012-02-02T11:59:00.004+01:00

Para que l@s que visiten tu blog periodicamente puedan suscribirse por email, a los feeds, agregarte en Facebook o seguirte en Twitter, aqui tienes esta elegante caja social con sus iconos correspondientes. Para añadirlo a tu Blogger, solo tienes que copiar el codigo de abajo y pegarlo a un gadget HTML/Javascript. Antes de guardar, modifica lo que esta en rojo, es decir: tu url de tu Facebook, la de tu Twitter, la de los feeds RSS y la de suscripcion (ahi solo tienes que poner el nombre de tu Feedburner, no la direccion completa). Recuerda que hay que repetir la url de cada sitio 2 veces, una para el icono y otra para el texto.

<div class="sidebar-subscription">

<ul id="subscription">

<li><a href="URL DE TWITTER" target="_blank"><img src="http://lh6.ggpht.com/_1RC6aqxCk8A/TU7PHVzePjI/AAAAAAAAAzI/kslJFMurvVs/Twitter_Icon_thumb%5B2%5D.png" /></a>

<h4>

<a href="URL DE TWITTER" target="_blank">Sigueme</a></h4>

Puedes seguir mis actualizaciones en Twitter</li>

<li><a href="URL RSS" target="_blank"><img src="http://lh3.ggpht.com/_1RC6aqxCk8A/TU7PJ9NNc7I/AAAAAAAAAzQ/h0RVD4St3cU/RSS_Icon_thumb%5B2%5D.png" /></a>

<h4>

<a href="URL RSS" target="_blank">Posts RSS</a></h4>

Lee mis articulos completos en tu lector de feeds favorito</li>

<li>

<a href="URL FACEBOOK" target="_blank"><img src="http://lh3.ggpht.com/_1RC6aqxCk8A/TU7PFZOLr3I/AAAAAAAAAzA/daWXXv3bm74/Facebook_Icon_thumb%5B2%5D.png" /></a>

<h4>

<a href="URL FACEBOOK" target="_blank">Facebook</a></h4>

Hazte fan en Facebook</li>

<li>

<h4>

<a href="http://feedburner.google.com/fb/a/mailverify?uri=NOMBRE FEEDBURNER&loc=es_ES" target="_blank">Subscribete via e-mail</a></h4>

Recibe mis ultimas actualizaciones en tu correo</li>

</ul>

</div>

Megaupload en el Jueves

2012-02-01T21:16:00.001+01:00

Como no podia ser de otra manera, el caso del cierre de Megaupload no podia quedarse sin su portada en la revista que sale los miercoles, en este caso dibujada por el genial Maikel.

Reloj Flash "Cuentarrevoluciones"

2012-02-01T17:10:00.000+01:00

Otro magnifico reloj en formato Flash para que lo pongas en la sidebar de tu blog o donde quieras tu. El diseño, como veras, esta inspirado en los marcadores del salpicadero de un coche, desde el fondo hasta las agujas. Puedes cambiar el tamaño modificando los numeros (ancho y alto) indicados en color rojo.

Ponlo en tu blog o web

<center><script src="http://hostredeando.ucoz.es/media/?t=video;w=150;h=150;f=http://hostredeando.ucoz.es/RELOJES-FLASH/cuentakm.widget" type="text/javascript"> </script></center>

Galeria de bicis con truco

2012-02-01T16:23:00.000+01:00

(Haz click en las imagenes para ampliarlas)

La transmisión de la Shadow Ebike es inalámbrica. Acelerador y frenos funcionan vía wireless, y cuenta con un sistema de recuperación de la energía de frenado. 1.450 euros.

Con sensores de alta competición y autonomía de 85 km, la eBike de Ford utiliza materiales ultraligeros. De ahí que el cuadro, de aluminio y carbono, pese 2.5 kg. Todavía no han dado fecha de comercialización.

Cicloteckstore te ofrece este triciclo con pantalla LCD, que controla la asistencia al pedaleo, y una cestita para transportar hasta 20 kg. Lleva una batería de 36 V, 10 A, y admite 1.000 recargas. 1.919 euros.

No se sabe muy bien qué es, pero sí que tiene que resultar divertidísimo. El Yikebike es un artilugio de fibra de carbono que puede ser plegado y transportado en una sencilla mochila. Tiene una autonomía de 10 km. 2.872 euros.

Dos hermanos de Queensland, Australia, han creado este monopatín todoterreno con acelerador inalámbrico, ABS y un motor eléctrico que alcanza 37 kilómetros/hora. Permite hasta 2.000 recargas. 1.160 euros.

Puedes utilizarlo como sistema de transporte para cortos recorridos, porque este patinete Wayroller tiene una autonomía de 25 km, asiento extraíble, frenos de disco y amortiguadores. 470 euros.

En 2012 empezará a venderse la bicicleta eléctrica que Smart está desarrollando en colaboración con la firma Grace. La iluminación, tanto delantera como trasera, se realiza por leds. 2.900 euros.

Yuji Fujimura ha diseñado la Electric Bike Version 2, una bicicleta extrafina que permite almacenar y cargar dispositivos electrónicos. Bajo su particular cuadro se esconden unas finísimas baterías que favorecen el aparcamiento en batería sin apenas ocupar espacio. Está en fase de producción.

Un buscador de pelis online

2012-02-01T01:00:00.000+01:00

CanIStream es un buscador de películas streaming en diferentes servicios web legales que ofrecen la película que estamos buscando. Para realizar la busqueda no necesitamos registrarnos, ya que con solo escribir el nombre veremos una serie de sugerencias. Claro que si no te registras no tendras acceso a la mayoria de films disponibles.

visitar CanIStream

Widget buscador de videos de YouTube

2012-01-30T09:24:00.000+01:00

En otra ocasion ya os hable de un widget para buscar videos hecho con JQuery. Ahora te muestro otro que es mucho mas sencillo de implementar. Se trata de un buscador de videos de YouTube para añadir a un blog o web y esta confeccionado mediante un iframe, unos parametros url y CSS. En este buscador tienes una pestaña (en ingles) en la que puedes elegir las ultimas novedades, los mas votados, los mas vistos y, por supuesto una barra para que hagas tu propia busqueda personalizada. Los videos aparecen de seis en seis con imagenes con miniaturas y paginacion, al hacer click en una de ellas aparece el video para visionarlo. Lo que no se puede cambiar es el tamaño del widget, ya que no se veria a tamaño completo.

Para añadir el buscador en tu blog o web, solo tienes que copiar el siguiente codigo y ponerlo donde quieras mostrarlo:

<center></center>

3 grandes compañias de EEUU renuevan sus logos

2012-01-29T10:53:00.001+01:00

Dice la famosa frase eso de que renovarse o morir, y esto mismo es lo que han hecho 2 grandes estudios de cine y una gran compañia editorial de comics.

En primer lugar tenemos a la gigante Universal Studios en la que elimina el resplandor excesivo de su predecesor, sustituyéndolo por un elegante atisbo de sol naciente en la parte superior. Tambien elimina los colores sobresaturados de los continentes para dar paso a un panorama más nocturno y coloca al planeta en un cielo estrellado mucho más realista y azulado.

En segundo lugar, otra veterana y gran productora como es Paramount que mantiene casi todos los elementos del anterior, pero realiza sutiles cambios. El sol se coloca detras del pico, en una especie de atardecer y la tipografía y las estrellas se vuelven grises, un cambio en general mas agradable.

Y por ultimo, la que ha renovado totalmente el logo es la supereditorial DC Comics, que ha querido homogeneizar graficamente su imagen, crear una identidad que represente todo el espectro de productos que maneja en la actualidad y que funcione igual en digital que en impresion. El concepto principal en el que se han basado para la realizacion del logo ha sido el de la piel. Una piel (la D) que revela otra (la C). Ademas, en algunas de sus colecciones variara el color y la textura del logo, como por ejemplo en Green Lantern que sera de color verde.

Nueva cancion del "Tio la Vara"

2012-01-28T17:41:00.009+01:00

Jose Mota ha versionado la cancion de Ska-p "Cannabis" (Legalización), adaptandola como sintonia para su personaje "El Tio la Vara". El videoclip le ha quedado de lo mas graciosico que he visto ultimamente.

This text will be replaced

Juego "Casino Slot"

2012-01-28T10:34:00.002+01:00

Si quieres probar suerte en las "tragaperras" y no gastarte ni un euro, aqui tienes este juego para tirarle. En "Casino Slot" cuentas con 150 monedas iniciales y puedes apostar sencillo (botones SPIN o BET ONE) o triple (boton BET MAX).

Pon este juego en tu blog o web

<center><param name="allowFullScreen" value="true"><param name="type" value="movie"><param name="flashvars" value="maintainAspectRation=true"></object></center>

Iconos sociales "Piedra"

2012-01-27T00:09:00.000+01:00

Original pack de 12 iconos en formato png y en disponibles en tres tamaños diferentes. Diseñados en color grisaceo y con una textura imitando a la de la piedra, seguro que quedan muy bien en tu blog o web. El unico icono que no esta es el de Google +, pero estan todos los demas de las redes mas conocidas.

Crea un cubo de imagenes

2012-01-26T11:04:00.001+01:00

Para hacer el titulo de una cabecera, para decorar o para lo que tu quieras. Este cubo con efecto 3D hecho exclusivamente con imagenes y CSS, seguro que te gusta.

Aqui tienes un ejemplo de como queda, hecho con imagenes de mis banners:

Para ponerlo en tu blog o web, primero añades los estilos CSS en la plantilla (en Blogger lo puedes poner antes de ]]></b:skin> quitando las etiquetas <style> de principio y final) y guardas.

Una vez hecho esto, alli donde quieras mostrarlo pones el siguiente codigo. Selecciona las imagenes que vas a poner y añades las urls donde esta indicado en rojo:

<div id="contenedorcubo"><div class="cube"><div class="face top"><img height="100" src="URL IMAGEN" width="100" /></div><div class="face left"><img height="100" src="URL IMAGEN" width="100" /></div><div class="face demoright"><img height="100" src="URL IMAGEN" width="100" /></div></div></div>

Tuneando el reproductor de YouTube

2012-01-24T14:33:00.000+01:00

Antes, YouTube nos daba la opcion de cambiar de color tanto el marco como la barra del reproductor flash de video. Eso ya desaparecio y ahora todos son de color negro. Pero con un poco de CSS y Flash podemos customizarlo a nuestro gusto, dandole un toque mas personal y diferente.

Aqui tienes 2 ejemplos de videos "tuneados":

Cada vez que quieras poner un video del Youtube customizado en tu blog o web, añade este codigo, cambiando los numeros en rojo por los numeros y letras por las del video que quieras (los veras en la barra de direccion de YouTube).

CODIGO:

Parametros modificables en el codigo:

·color1=0xF4F50D(color de los bordes de la barra) ·color2=0x6699FF(color del fondo de la barra ) ·background: #000000;(color de fondo) · border: 4px solid #6699FF(tamaño y color del borde) ·width:500px(tamaño ancho del fondo) ·height="350"(tamaño alto del reproductor) ·width="500"(tamaño ancho del reproductor)

Efecto Lupa

2012-01-23T10:49:00.001+01:00

Otro gran efecto que se puede realizar con JQuery y CSS3 es este que al pasar el cursor por encima de una imagen, se convierte en una lupa que aumenta toda la zona por la que pasa. Esto nos puede servir para darle un toque de gracia a algunas imagenes de nuestro blog o web.

Para implementar este efecto en nuestra web, añadiremos los codigos JQuery y los estilos en nuestra plantilla antes de </head> y guardamos. Donde esta en rojo ponemos la url de la imagen que queremos aplicar la lupa.

Una vez hecho esto, donde quieras mostrar este efecto añades el siguiente codigo. Donde pone URL IMAGEN en rojo, vuelves a poner la direccion de la imagen que has puesto antes.

Relojes flash del Real Madrid y el Barcelona

2012-01-22T19:48:00.000+01:00

Si eres aficionad@ a uno de estos dos grandes equipos de futbol, ya puedes poner en tu blog o web un reloj flash con el emblema del Barça o el Madrid. Solo tienes que copiar el codigo de debajo del reloj y añadirlo donde quieras mostrarlo. Si quieres cambiarle el tamaño, solo tienes que modificar los numeros de los pixeles donde pone height (alto) y width (ancho).

<center></center>

<center></center>

Gifs animados con tu webcam

2012-01-22T01:39:00.000+01:00

Si eres de l@s que les gusta poner carazas y hacer gestos ante la webcam, ahora los puedes convertir en una imagen gif animada. Entra en la web Cam Slide (esta en ingles), te registras, le das a 'create slideshow' y empiezas a grabar con la cam. Cuando creas que ya lo tienes, le das a stop y lo que has grabado se convierte automaticamente en una imagen gif. Si no te gusta como ha quedado, la borras, haces otra y ya esta. Ademas, puedes participar en un ranking en el que l@s usuarios votan a los que mas le molan y comentan las imagenes.

visitar Cam Slide

Cancion "El Internet"

2012-01-21T12:02:00.000+01:00

Estaba yo escuchando el genial programa nocturno de radio "La parroquia del monaguillo" en Onda Cero y escuche esta cancion. Se trata de de un duo mejicano (chica y chico) llamado Los Alguiens con dos mascaras verdes y con un videoclip casero. Lo busque por Youtube y aqui lo tienes para que escuches esta cancioncica tan pegadiza.

This text will be replaced

Photo3D, supergaleria de imagenes con Javascript

2012-01-20T16:55:00.000+01:00

Ahora si que tienes oportunidad de mostrar las mejores imagenes en tu blog o web con Photo3D Gallery. Una fantastica galeria hecha con Javascript, en la que al pulsar sobre la imagen, esta se aumenta y al volver hacer click sobre ella vuelve a su tamaño pequeño. Ademas, las imagenes tienen un genial efecto rotatorio que da una vision 3D.

Para añadir esta galeria a nuestro blog o web, primero vamos a la plantilla y antes de </body> ponemos el codigo CSS.

Ahora añadimos en la plantilla los scripts antes de </head> y guardamos.

Por ultimo, ponemos este codigo cada vez que queramos mostrar la galeria. Donde pone IMAGEN, lo sustituimos por la url de la imagen que queramos.

<center><div id="contenedorfotos">
<div id="screen"></div>

<div id="bankImages">
   <img alt="" src="IMAGEN"/>
   <img alt="" src="IMAGEN" />
   <img alt="" src="IMAGEN"/>
   <img alt="" src="IMAGEN"/>

        <img alt="" src="IMAGEN" />
   <img alt="" src="IMAGEN"/>
   <img alt="" src="IMAGEN"/>
   <img alt="" src="IMAGEN"/>

</div></div></center>

<script type="text/javascript">
   /* ==== start script ==== */
   onresize = tv.resize;
   tv.init();
</script>

Analiza tu blog o web con Woorank

2012-01-19T00:41:00.000+01:00

Woorank es una herramienta seo que permite realizar un informe sobre una página web, el mismo puede contener distinta información tal como una estimación del tráfico, la cantidad de páginas indexadas, te indica cuales son las páginas más populares, los meta tags, los meta description, cuantas cabeceras y de que tamaños son en la página y un montón más de datos interesantes para el sitio, además con esto se puede investigar a la competencia y ver como podemos hacer para superarla o mejorarla. Además te da información sobre los servidores del sitio web y su localización y además te da un listado de las páginas similares del sitio por lo que puedes ver si alguien más compite contigo.Esta herramienta nos será muy útil para seo sin lugar a dudas y nos dará consejos para optimizar internamente nuestro blog.

visitar Woorank

Reloj digital con CSS rotación

2012-01-18T10:48:00.001+01:00

Este magnifico (y grande) reloj esta creado usando HTML, JavaScript y CSS con rotacion. No hay archivos de Adobe Flash , solo <divs> e imagenes. El modo de funcionamiento es a través de esas imágenes en un {overflow: hidden} y la rotación de ellas a través de JavaScript, con la propiedad 'transform' CSS. Veras que los segundos 'van a su bola' muchas veces, pero te aseguro que la hora y los minutos no fallan. Si quieres ponerlo en tu blog o web, solo tienes que copiar el codigo y ponerlo alli dode quieras mostrarlo. En Blogger, aconsejo ponerlo en un gadget HTML/Javascript.

Ponlo en tu blog o web:

<center><div id="clockdigital">

Juego "3D LA Supercars"

2012-01-17T10:07:00.001+01:00

Entretenido juego de carreras con buenos graficos, trafico real y obstaculos. Inicia la competicion hacia Los Angeles para convertirte en el mejor corredor que alguna vez existio. Manten un ojo en el dinero acumulado, porque despues de cada nivel tendras que mejorar el rendimiento del coche.

Ponlo en tu blog o web

<center></center>

Simbolos y caracteres especiales

2012-01-16T23:37:00.000+01:00

Muchas veces el teclado se nos queda corto y tenemos que recurrir a las imagenes para escribir un post o para diseñar algo. Es por eso que a menudo viene bien tener esta clase de caracteres a mano. Aqui tienes unos cuantos que he recopilado por si te hacen falta. Puedes seleccionarlos y copiarlos con el raton y guardarlos en un documento de texto para cuando los necesites.

♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ ❤ ❥ ♡ ♥ ღ ɞ ㋡ ♛ ♚ ♝ ♞ ♜ ♟ ♔ ♕ ♖ ♗ ♘ ♙ ☚ ☛ ☜ ☝ ☞ ☟ ☩ ☨ ☦ ✙ ✚ ✛ ✜ ✝ ✞ ✠ ❀ ✿ ❁ ✾ ✽ ❃ ❋ ♪ ♫ ♩ ♬ ★ ✩ ✮ ✯ ✰ ☆ ⋆╰☆╮✡ ۞ ❇ ❈ ❅ ❄ ❆ ☃ ☾ ☽ ☼ ☀ ☁ ☂ ♠ ♥ ♣ ♦ ☯ ✌ ☮ ✉ ✍ ✎ ✏ ✐ ✑ ✒ ✈ ✂ ✄ ✓ ☎ ☏ ✆ ⌛ ⌚ ☠ ♨ ๑ ۩ ۞ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳ Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ ㊊㊐㊋㊌㊍㊎㊏㊐㊑㊒㊓㊔㊕㊖㊗

Las entradas de tu Blogger con texto en movimiento

2012-01-16T02:14:00.005+01:00

Una alternativa muy buena para mostrar las entradas de nuestro blog, es utilizar Javascript, concretamente JSON (acrónimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos). Este codigo lo que hace es mostrar el texto (sin imagenes) de los posts utilizando efecto scroll. Para ponerlo en nuestro Blogger, simplemente vamos a Diseño, añadimos un gadget HTML/Javascript y pegamos el codigo de abajo. Sustituimos lo que esta en rojo por la direccion de nuestro blog y automaticamente se actualizara.

EJEMPLO

CODIGO:

<div id="entradicas"><div style="font-size:18px;background:#000000;padding-top:5px;padding-bottom:5px;color:#000000 !important;border-radius:20px;border:2px dotted #8CCCEF;"><script type="text/javascript">var nMaxPosts =100; var nWidth = 100;var nScrollDelay = 110;var sDirection = "left";var sOpenLinkLocation = "N";var sBulletChar = "·········";</script><script src="http://hostredeando.ucoz.es/SCRIPTS/postscroll.js" type="text/javascript"></script><script src="http://nombredetublog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=100" type="text/javascript"></script>
</div></div><style>#entradicas a {color:#cdcdcd !important;}#entradicas a:hover {color:#8CCCEF !important;}</style>

Boton "Ir Azul"

2012-01-15T17:05:00.001+01:00

En este tutorial te enseñare cómo crear este boton con pseudo-elementos, con una sola etiqueta class y el gran poder del CSS. Se trata de un boton que lleva incorporada una imagen png de una flechita (de ahi lo del nombre de "Ir) que al presionarlo se 'hunde' dando un efecto visual muy bueno. Lo puedes utilizar para cualquier cosa en tu blog o web y ademas es muy facil de realizar.

ejemplo de como te quedara

Para añadirlo a nuestro blog o web, lo primero es poner el codigo con los estilos CSS en nuestra plantilla y guardar los cambios. En Blogger los pondremos antes de ]]></b:skin> quitando la etiqueta <style> del principio y del final.

Ahora solo queda añadir este codigo cada vez que quieras mostrar el boton, sustituyendo lo que esta en rojo por la url y el texto que quieras poner.

<a class="botonirazul" href="URL"><b>TEXTO</b></a>

Psicodelias verdiblancas

2012-01-15T03:15:00.000+01:00

Los programadores de la web dhteumeuleu hacen cada cosa que me dejan 'flipado'. Por ejemplo, este psicodelico efecto que ellos denominan "The Momentum Equation", en el que al pasar el cursor se disparan como cometas abstractos de color verde y blanco en un fondo negro. Todo ello creado con HTML5, Javascript y CSS.

Plantilla para Blogger "Mangos"

2012-01-13T10:32:00.000+01:00

Elegante plantilla que combina los colores gris, blanco y negro, con un slider gigante para las imagenes. Posee un menu con JQuery desplegable con un estilo sofisticado. La sidebar la tiene a la derecha y cuenta con: las entradas al estilo magazine, iconos sociales, widget personalizado para suscribirse por correo y para la busqueda, bloque para poner publi y paginacion con un diseño muy chulo. Ademas, esta preparada para que se vea bien en principales navegadores como IE, Firefox, Chrome, Safari y Opera.

VER PLANTILLA

Crea tu logo flash

2012-01-13T01:29:00.001+01:00

Ahora ya puedes poner un logo flash con este codigo que REDEANDO te ofrece. Tienes dos modelos a elegir en los que puedes modificar los parametros. Lo puedes utilizar como logo del blog, como titulo o para lo que quieras. Solo tienes que copiar el o los codigos y ponerlos alli donde quieras mostrarlos.

CODIGO:

CODIGO:

Puedes añadir o modificar los siguientes parametros del codigo que estan indicados en color rojo:

TEXTO: sustituyelo por el texto que quieres mostrar

height="100": tamaño altura

width="500": tamaño ancho

bgcolor="#000000": color de fondo

tc=0xFFFFCC": color del texto

Menu horizontal "Radius Cool"

2012-01-12T13:58:00.001+01:00

Si te hace falta un menu para tu blog, aqui tienes este tan chulo que tiene hasta submenus. Tiene todos los bordes redondeados, desde el fondo hasta los enlaces. Si quieres ponerlo, copia el codigo y añadelo donde lo quieras mostrar. Puedes poner los estilos aparte si quieres, pero si tienes Blogger, lo puedes poner todo el codigo en un gadget HTML/Javascript. Modifica lo que esta en rojo para poner los nombres y los enlaces que desees.

Ejemplo de como te quedara el menu:

ver codigo

<ul id="nav1">
<li class="current"><a href="ENLACE">Un enlace</a>

<ul>
<li><a href="ENLACE">Enlace 1</a></li>
<li><a href="ENLACE">Enlace 2</a></li>
<li><a href="ENLACE">Enlace 3</a></li>
<li><a href="ENLACE">Enlace 4</a></li>
</ul>
</li>
<li><a href="ENLACE">TEXTO</a>

<ul>
<li><a href="ENLACE">TEXTO</a></li>
<li><a href="ENLACE">TEXTO</a></li>
<li><a href="ENLACE">TEXTO</a></li>
<li><a href="ENLACE">TEXTO</a></li>
</ul>
</li>
<li><a href="ENLACE">TEXTO</a></li>
<li><a href="ENLACE">TEXTO</a></li>
</ul>


<style>
#nav1 {
margin: 0;
padding: 6px 7px 0;
height:37px;
background: #7d7d7d url(http://4.bp.blogspot.com/-_i1yn5hxsz0/Tf8XoLEGesI/AAAAAAAAAhA/2zI_yCncnao/s320/image1.png) repeat-x 0 -110px;
line-height: 100%;

border-radius: 3em;
-webkit-border-radius: 3em;
-moz-border-radius: 3em;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav1 li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}

/* main level link */
#nav1 a {
font-weight: bold;
color: #000000 !important;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;

-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav1 a:hover {
background: #000;
color: #fff !important;
}

/* main level link hover */
#nav1 .current a, #nav1 li:hover > a {
background: #666 url(http://4.bp.blogspot.com/-mJGtQvkk0uo/Tf8YeUI5bQI/AAAAAAAAAhI/_fmQ6Z3y234/s320/image1.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;

-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);

text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav1 ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;

-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav1 ul a:hover {
background: #0078ff url(http://4.bp.blogspot.com/-mJGtQvkk0uo/Tf8YeUI5bQI/AAAAAAAAAhI/_fmQ6Z3y234/s320/image1.png) repeat-x 0 -100px !important;
color: #fff !important;

-webkit-border-radius: 0;
-moz-border-radius: 0;

text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav1 li:hover > ul {
display: block;
}

/* level 2 list */
#nav1 ul {
display: none;

margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(http://4.bp.blogspot.com/-_i1yn5hxsz0/Tf8XoLEGesI/AAAAAAAAAhA/2zI_yCncnao/s320/image1.png) repeat-x 0 0;
border: solid 1px #b4b4b4;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav1 ul li {
float: none;
margin: 0;
padding: 0;
}

#nav1 ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
font-weight: bold;
color: #000000 !important;
}

#nav1 ul ul {
left: 181px;
top: -3px;
}

#nav1 ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;

-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav1 ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;

-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav1:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav1 {
display: inline-block;
}
</style>

Widget del tiempo de HC

2012-01-11T10:11:00.000+01:00

La web inglesa Hotels Combined dedicada a buscar y reservar hoteles por todo el mundo, nos ofrece gratis y sin registro un widget para ver el clima en nuestro blog o web. Puedes elegir entre dos tamaños, ideales para ponerlos en tu sidebar, el color y la ciudad, mediante un buscador. Una vez hecho esto, le das a "Get Code", copias el codigo y lo añades a tu pagina. Sin duda una buena opcion, por su diseño atractivo y su buena implementacion.

See 10-Day Forecast

ir al widget

Las webs de: Frank Cuesta

2012-01-10T23:51:00.000+01:00

Al polifacetico "Frank de la jungla", famoso por el programa en el que igual te coge una serpiente, un murcielago o cualquier bicho viviente que se menee,lo podeis encontrar en dos blogs y una web (aparte de su Twitter y de la web de Cuatro). Lo curioso es que tenia una web con su nombre (www.cuestafrank.com), pero parece que ya no existe. ¿Sabiais que era jugador de tenis? Pues si, pero a los 18 años tuvo un accidente de moto y se hizo entrenador. Se fue a EEUU, luego la academia de tenis lo destino a Thailandia. Tambien se puso a estudiar herpetología, que es una rama de la zoología que estudia reptiles y anfibios, y se recorrió todos los Parques Nacionales de Thailandia para ampliar sus conicimientos.

Para l@s que seais seguidores de sus andanzas televisivas, aqui teneis las 3 webs de Frank. Haced click en las imagenes para visitarlas.

Blog Frank de la Jungla

Blog La "selva" en casa

Web Frank Cuesta Tennis Academy

Fantasticos iconos para compartir tus posts en Blogger

2012-01-10T10:10:00.000+01:00

Ya puedes ponerte en tu Blogspot estos iconos tan guapos creados con CSS3 para que aparezcan en todas las entradas del blog.

Para añadirlos, vamos a la plantilla y marcamos 'expandir plantillas de artilugios'. Buscamos (apreta control+F) la linea <div class='post-footer-line post-footer-line-3'/> y justo debajo pegamos el siguiente codigo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<ul class="redeando-social" id="redeando-cssanime">
<li class="redeando-facebook">
<a expr:href=""http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Share this on Facebook"><b>Facebook</b></a>
</li>
<li class="redeando-twitter">
<a expr:href=""http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Tweet This!"><b>Twitter</b></a>
</li>
<li class="redeando-googlebuzz">
<a expr:href=""http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="" href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Post on GoogleBuzz"><b>Google Buzz</b></a>
</li>
<li class="redeando-stumbleupon">
<a expr:href=""http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Stumble upon something good? Share it on StumbleUpon"><b>StumbleUpon</b></a>
</li>
<li class="redeando-digg">
<a expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Digg this!"><b>Digg</b></a>
</li>
<li class="redeando-delicious">
<a expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Share this on del.icio.us"><b>Delicious</b></a>
</li>
<li class="redeando-linkedin">
<a expr:href=""http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="" href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Share this on LinkedIn"><b>LinkedIn</b></a>
</li>
<li class="redeando-reddit">
<a expr:href=""http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Share this on Reddit"><b>Reddit</b></a>
</li>
<li class="redeando-technorati">
<a expr:href=""http://technorati.com/faves?add=" + data:post.url " href="http://www.blogger.com/post-create.g?blogID=8544071767970846739" rel="nofollow" title="Share this on Technorati"><b>Technorati</b></a>
</li>
</ul>

</b:if>

Ahora buscamos en la plantilla ]]></b:skin> y justo antes añadimos el siguiente codigo CSS y guardamos todos los cambios.

ul.redeando-social { list-style:none; margin:15px auto;display:inline-block; }
    ul.redeando-social li { display:inline; float:left; background-repeat:no-repeat; }
    ul.redeando-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
    ul.redeando-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
    ul.redeando-social li.redeando-facebook { background-image:url("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/way2blogging-facebook.png"); }
    ul.redeando-social li.redeando-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png"); }
    ul.redeando-social li.redeando-googlebuzz { background-image:url("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); }
    ul.redeando-social li.redeando-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); }
    ul.redeando-social li.redeando-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); }
    ul.redeando-social li.redeando-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); }
    ul.redeando-social li.redeando-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); }
    ul.redeando-social li.redeando-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); }
    ul.redeando-social li.redeando-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/way2blogging-technorati.png"); }
    #redeando-cssanime:hover li { opacity:0.2; }
    #redeando-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
    #redeando-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
    #redeando-cssanime li:hover { opacity:1; }
    #redeando-cssanime li:hover a strong { opacity:1; top:-10px; }

Y asi de majos apareceran los iconos debajo de tus entradas:

Enlaces multicolor

2012-01-09T00:04:00.000+01:00

Otra manera de cambiarle un poco el look y darle un toque mas alegre a nuestro blog o web es que los enlaces cambien de color sin parar al pasar el cursor sobre ellos. ¿Que como se hace esto? Muy sencillo, solo tienes que copiar el codigo Javascript que tienes abajo y añadirlo en la parte de la plantilla que quieras (en Blogger lo puedes añadir en un gadget). Todos los enlaces de tu pagina adquiriran este efecto automaticamente.

Aqui tienes un enlace de ejemplo, pon el cursor sobre el y veras el efecto.

REDEANDO Blog

CODIGO JAVASCRIPT:

<script src="http://hostredeando.ucoz.es/SCRIPTS/enlaces-multicolor.js" type="text/javascript"></script>

Juego "¿Quien es quien?" estilo South Park

2012-01-08T17:21:00.001+01:00

Divertida version del juego de mesa diseñado con el estilo de la famosa serie animada, esta disponible en ingles y en español. El objetivo del juego es adivinar el personaje del rival antes de que él adivine el tuyo. En tu turno haces una pregunta para descartar opciones en el panel que contiene todas las fotos.

Ponlo en tu web

<center></center>

Pescando bajo el hielo

2012-01-08T13:53:00.000+01:00

This text will be replaced

La Laguna de Saarijärvi es una de las más bellas de Finlandia, ubicada cerca al pequeño poblado de Oterma, municipio de Vaala, en la provincia de Kainuu (occidente del país). Durante el verano, cientos de visitantes aprovechan los mágicos escenarios que rodean la laguna para disfrutar de una gran variedad de actividades ecoturisticas como el senderismo y la pesca deportiva. Durante el invierno, este lugar continúa siendo visitado, pero esta vez por viajeros más aventureros, como los protagonistas de este fabuloso video, quienes tienen el privilegio de dar un paseo por debajo de la placa congelada de la laguna. Se trata de una experiencia realmente sorprendente, e inigualablemente fría, en la que incluso se dan el lujo de pescar.

Bares del mundo por webcam

2012-01-08T09:11:00.000+01:00

En la web Baladacam podras ver en directo lo que esta sucediendo por bares, discotecas y restaurantes de varios puntos del globo terraqueo. Solo tienes que elegir la ciudad que te interese y ver si hay webcams disponibles. La web te ofrece un perfil del lugar, la descripción del sitio y datos destacados, la localización utilizando como herramienta el Google maps, una galería de imágenes y un video del lugar. Y mientras vas ojeando todo esto, escucharas una música de fondo que, por cierto en la mayoría de los casos es muy buena. La propuesta de Baladacam realmente es interesante, ya que te permite elegir desde tu hogar el lugar indicado para disfrutar de la mejor movida nocturna de varias cuidades.

Foto del bar Oviso de Barcelona emitiendo por webcam

Apaga las luces de tu web

2012-01-07T21:03:00.002+01:00

Sin duda con las librerias JQuery se pueden hacer efectos que quedan muy bien. En este caso, te voy a explicar como 'apagar' las luces de tu blog o web. Lo que quiero decir es que al hacer click en un enlace, se muestra un contenido y el resto de la pagina se oscurece. Para que veas un ejemplo, haz click en el boton de abajo:

ver demostracion

Para añadirlo en nuestro blog o web, primero ponemos los scripts y el CSS antes de </body> o </head>

VER CODIGO

Una vez hecho esto, cada vez que quieras mostrar los enlaces, añades este codigo:

<center><div id = "standout"><div id = "turnoff"><a href="javascript:void">apagar luz</a></div>

<div id = "soft"><a href="javascript:void">luz suave</a></div>

<div id = "turnon"><a href="javascript:void">encender luz</a></div></div>
<div id="the_lights"></div></center>

Reloj-calendario flash

2012-01-06T00:38:00.000+01:00

La verdad es que un reloj o un calendario, aparte de para informar, siempre da un toque decorativo a nuestro blog o web. Pues con este que tienes aqui, vas a tener los dos en uno. En principio solo se ven dos pestañas, pero al hacer click en "CLOCK" o "CALENDAR" se expanden automaticamente. Ademas de funcional y original, tiene un diseño muy atractivo. Si quieres ponerlo en tu pagina, solo tienes que copiar el codigo de abajo y pegarlo donde quieras mostrarlo.

ponlo en tu blog o web

<param name="movie" value="http://hostredeando.ucoz.es/RELOJES-FLASH/relojcalendario.swf">

Lienzo con HTML5

2012-01-05T08:49:00.001+01:00

El HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML.HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>. Mejoras en el elemento <canvas>, capaz de renderizar en algunos navegadores elementos 3D.

Y bien, explicado asi por encima lo que es esto, os voy a enseñar una muestra de lo que se puede hacer con esta tecnica. En este caso, combinando JQuery y CSS, se trata de un lienzo para dibujar, eliges el color en la parte de arriba y con el raton vas pintando. Ademas, el dibujo queda como bocetado y con un toque, dijeramos 3D.

Preview:

Este es el codigo que he utilizado para su realizacion:

VER CODIGO

Iconos Sociales "Papel Arrugado"

2012-01-03T21:32:00.000+01:00

Otro fantastico pack de 8 iconos sociales en tres tamaños diferentes y con un estilo que parecen papeles arrugados. Cuenta con iconos en formato png como por ejemplo de Facebook, Twitter o Tuenti.

Flechas de navegacion para el blog

2012-01-03T12:26:00.000+01:00

Un elemento casi imprescindible en un blog es la navegacion para subir arriba y abajo, sobre todo para los que muestran muchas entradas por pagina. En este caso os traigo dos flechitas tipo boton, de color gris plateado muy elegante. Para añadirlo a tu blog, solo tienes que copiar el script de abajo y añadirlo en un elemento HTML (en Blogger lo puedes poner en un gadget). El boton con las flechas aparecera automaticamente en la parte inferior derecha.

EJEMPLO:

PONLO EN TU BLOG:

<div id="navigation_up_down_45510"><script type="text/javascript" src="http://hostredeando.ucoz.es/SCRIPTS/navegacion-flechas.js"></script></div>

Crea tu blog o web con NixiWeb

2012-01-01T22:36:00.000+01:00

Una alternativa nueva y muy buena para crear nuestros blogs/webs es sin duda NixiWeb . Entras, te registras, eliges el nombre, la plantilla y la personalizas. En esta plataforma cuentas con hosting gratuito que te ofrece: 1 GB de espacio, 90 GB de transferencia, soporte PHP y MySQL, potente panel de control y ademas todo ello sin publicidad forzada. Para ir a la web y registrarte, haz click en el banner de abajo.

Un año mas viejo

2011-12-31T01:09:00.002+01:00

Lo mas importante de comenzar un año nuevo no son las tipicas supersticiones de siempre, no. Lo importante es seguir con salud y animo para seguir adelante. Que las cosas mejoren y que ni los ricos sean tan ricos ni los pobres seamos tan pobres. A tod@s l@s colegas de REDEANDO les deseo un queloflipas Feliz Año Nuevo.

Un mazo de laberintos en "Maze"

2011-12-30T04:05:00.001+01:00

Con una estructura clasica de juego tipo puzzle o de habilidad, "Maze" te viciara un buen rato. Manejamos a un muñeco (se parece a un robot) que debe salir de un laberinto antes de que se acabe el tiempo. Para pasar de pantalla tendremos que coger todas las llaves. Tambien hay relojes que nos daran un tiempo extra repartidos por el recorrido y mazos que nos serviran para romper paredes.

ponlo en tu web:

<center><param value="http://hostredeando.ucoz.es/FLASH-VARIOS/juego-mazex.swf" name="movie"><param value="transparent" name="wmode"><param value="true" name="allowFullScreen"></object></center>

El texto 'dance'

2011-12-29T13:46:00.001+01:00

Al igual que con el CSS, el Javascript tambien nos da muchas posibilidades en cuanto al diseño de texto se refiere. En este caso lo animamos como si las letras estuvieran bailando, a la vez que cambian de color y aumentan y disminuyen de tamaño. Para añadirlo a tu blog o web, solo tienes que copiar el codigo de abajo. Escribes el texto donde esta indicado en rojo, pero recuerda que tienes que escribirlo del reves para que se lea bien.

Codigo:

Generador de paginacion para Blogger

2011-12-27T23:12:00.000+01:00

Muchas veces echamos de menos tener paginacion en nuestro Blogger y no las tipicas "entradas antiguas" o "entradas mas recientes". Pues ahora con este generador lo tienes 'chupao'. Solo tienes que elegir el estilo y la configuracion, le das a "Generar" y luego al boton "Añadir a Blogger". El codigo se instalara como si fuera un gadget mas.

Selecciona el estilo de color

Configuracion

Numero de entradas por pagina	:
Cantidad de numeros a mostrar	: (Preffered Value is 5)*
"Anterior" texto	:
"Siguiente" texto	: