REDEANDO

X5 - Shadow, plantilla para Blogger

2012-05-27T00:42:00.001+02:00

Si te gustan las plantillas con tonos oscuros, esta seguro te encantara. Se trata de un diseño muy actual, utilizando imagenes y CSS3. Cuenta con un slider bastante majo, un menu original y un deslizador con flechas para ver las entradas.

Ver plantilla

Descargar

Menu horizontal 'Hovercolor'

2012-05-26T01:31:00.000+02:00

Jugando un poco con el CSS y dos imagenes, me ha salido este menu tan chulo. Como veis, tiene un diseño elegante en color azul que, al pulsar sobre uno de los botones cambia de color gradualmente. Para ponerlo en vuestro blog, tan solo teneis que copiar el codigo que os facilito y añadirlo en un gadget HTML, cambiando lo que esta en rojo por las urls de los enlaces que querais poner y su respectivos nombres.

Asi te quedara:

Inicio
Contenido
Enlaces
Chat
Contacto

CODIGO

Estadisticas de Blogger y seguidores numerados

2012-05-25T00:08:00.000+02:00

En otra ocasion ya os mostre un widget para ver las estadidisticas de Blogger. Pues ahora os traigo otro diseñado por mi con un look nuevo. Este widget os mostrara los seguidores que teneis en Twitter, la cantidad de suscriptores, los comentarios y posts de vuestro blog. Esta pensado para ponerlo en la sidebar o barra lateral, para ello solo teneis que copiar el codigo de abajo y añadirlo un gadget HTML/Javascript. Teneis que sustituir lo que esta en rojo por vuestra url de Twitter, la de Feedburner y la del blog.

El resultado del widget sera como el que os muestro en esta imagen:

CODIGO:

<table style="width:100%;border:3px solid #000;background:url(https://lh4.googleusercontent.com/-zm12PrEP59k/T76mvcVkZJI/AAAAAAAADzw/Xw2sOagTgfM/s192/fondo%2520estadisticas.jpg)repeat scroll;"><tbody><tr><td><script language="javascript" type="text/javascript">
function snfbc(json){document.write(parseInt(json.value.items[0].feed.entry.circulation));}function xfeedburner(uri){ if(uri){ document.write('<sc'+'ript src="http://pipes.yahoo.com/pipes/pipe.run?_id=e61a81bcdb1660ebf8bc1a7c130f1f7b&_render=json&uri='+uri+'&_callback=snfbc" type="text/javascript"></s'+'cript>'); } else{ return false; }}
function sntwitter(json){document.write(parseInt(json.followers_count));}function xtwitter(user){ if(user){ document.write('<scr'+'ipt src="http://twitter.com/users/show/'+user+'.json?callback=sntwitter" type="text/javascript"></scr'+'ipt>'); } else{ return false; }}
</script><div style="float: left; padding: 8px;">
<img src="http://img72.imageshack.us/img72/5376/twittery.png" style="float: left; margin-right: 8px;"/><a href="http://twitter.com/nombre" target="_blank"><span style="color: black; float: left; font-family: Arial,Helvetica,sans-serif; font-size: 18px; margin-top: 2px; padding: 0pt;"><script type="text/javascript">
xtwitter("REDEANDOblog")
</script> Seguidores</span><br>
<span style="color: black; font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin: 0px; padding: 0px; text-align: left;">Sigueme en twitter</span></a></div><div style="clear: both;"><div style="float: left; padding: 8px;">
<img src="http://img638.imageshack.us/img638/3243/rsss.png" style="float: left; margin-right: 8px;"/><a href="http://feeds.feedburner.com/nombre" target="_blank"><span style="color: black; float: left; font-family: Arial,Helvetica,sans-serif; font-size: 18px; margin-top: 2px; padding: 0pt;"><script type="text/javascript">
xfeedburner("Redeando")
</script> Suscriptores</span>
<span style="color: black; font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin: 0px; padding: 0px; text-align: left;">Suscribete tu también!</span></a></div>
<div style="clear: both;">
<div style="float: left; padding: 8px;">
<img src="http://img684.imageshack.us/img684/6793/usersh.png" style="float: left; margin-right: 8px;"/><span style="color: black; float: left; font-family: Arial,Helvetica,sans-serif; font-size: 18px; margin-top: 2px; padding: 0pt;"><script>
function showpostcount(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}
</script><script src="http://nombredetublog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount">
</script> Comentarios</span>
<span style="color: black; font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin: 0px; padding: 0px; text-align: left;">Comentate algo!</span></div>
<div style="clear: both;">
<div style="float: left; padding: 8px;">
<img src="http://img707.imageshack.us/img707/3875/bloggerf.png" style="float: left; margin-right: 8px;"/><a href="http://redeando.blogspot.com/search/label/?max-results=999" target="_blank"><span style="color: black; float: left; font-family: Arial,Helvetica,sans-serif; font-size: 18px; margin-top: 2px; padding: 0pt;"><script src="http://nombredetublog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount">
</script> Posts</span><br><span style="color: black; font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin: 0px; padding: 0px; text-align: left;">visualizalos!</span></a></div></div></div></div></td></tr></tbody></table>

Volando voy...

2012-05-23T19:57:00.000+02:00

Mirad que especie de juego-animacion en flash mas original. Esta creado por un tal Trevor Van Meter, diseñado en blanco y negro y se titula "Fly Guy" (tipo volando). Utiliza las teclas de direccion para desplazarte, viaja por tierra y vuela al estilo Superman a ver que te encuentras por ahi. Sube y sube por los aires a lo mas alto del universo.

Relojes analogicos del Barça y del Real Madrid para tu blog o web

2012-05-22T21:25:00.002+02:00

Si eres fan de uno de estos dos superequipos de futbol y quieres poner un reloj en tu web o blog con su emblema, aqui tienes dos en formato flash ideales. Como veras, tanto el del Real Madrid como el del Barcelona llevan su escudo de fondo, ademas de las manecillas con su color a juego. Para ponerlos en tu web, tan solo tienes que copiar el codigo correspondiente y pegarlo donde quieras mostrarlo. Puedes modificar los numeros que estan en rojo (altura y anchura) para adaptarlos al tamaño que desees.

Reloj Real Madrid

<center><a rel="dofollow" href="http://redeando.blogspot.com/2012/05/relojes-analogicos-del-barca-y-del-real.html" target="_blank"><embed height="150" rel="noindex, nofollow" src="http://hostredeando.ucoz.es/RELOJES-FLASH/relojrmadrid.swf" type="application/x-shockwave-flash" width="150" wmode="transparent"></embed><param name="wmode" value="transparent" /></a></center>

Reloj FC Barcelona

<center><a rel="dofollow" href="http://redeando.blogspot.com/2012/05/relojes-analogicos-del-barca-y-del-real.html" target="_blank"><embed height="150" src="http://hostredeando.ucoz.es/RELOJES-FLASH/relojbarca.swf" type="application/x-shockwave-flash" width="150" wmode="transparent"></embed><param name="wmode" value="transparent" /></a></center>

Plantilla para Blogger Ureeka

2012-05-22T02:47:00.000+02:00

Original plantilla en la que se muestran los posts como libros en estanterias, y al pasar el cursor por ellos se abren las portadas. Un diseño con colores acogedores, barra superior de busqueda, menu y paginacion incluida.

ver demo

descargar

Avatares virtuales que hablan lo que escribes

2012-05-20T09:21:00.000+02:00

Redeando y revisando webs ya visitadas hace un tiempo, me acorde de SitePal. Una curiosa herramienta y servicio online para la creacion de un personaje virtual que servira como un agente que promocionara nuestros servicios o que dara soporte a nuestros clientes. El agente o avatar virtual que creemos puede ser facilmente incorporado en nuestro sitio web. Podemos diseñar su apariencia de tal forma que se ajuste a nuestras necesidades, modificar su pelo, ropa, color de piel, etc. Pero la parte mas interesante del servicio en la inclusion de voz. Hay varias formas diferentes de hacer que nuestro agente virtual hable: grabar nuestra propia voz desde un microfono, grabar nuestra voz desde un telefono, usar un lector de textos o cargar un sonido existente. Al final el sitio nos proporciona un codigo que tendremos que implementar en nuestra pagina web. Podemos subir incluso una foto nuestra y ser nosotros mismos el avatar en cuestion. Se pueden realizar unas pruebas gratuitas para ver como funciona, ya que se trata de un servicio de pago.

Para que veas un ejemplo, aqui tienes una demo. Escribe el texto que quieras, elige el idioma, la voz y los efectos, le das al boton 'Say It' y pronunciara todo lo que hayas escrito:

visitar SitePal

Cambia el look de tu fanbox de Facebook

2012-05-19T00:24:00.006+02:00

Muchos y muchas de vosotros/as seguramente tendreis en vuestro blog el fanbox o caja de seguidores de Facebook. Este widget esta bien, pero resulta un poco 'soso', ¿no os parece? Le podemos dar un toque mas 'cool' y personalizarlo a nuestro gusto utilizando un poco de CSS.

El fanbox en cuestion es asi 'de fabrica' y el codigo basico es este:

Si le añadimos un borde y una imagen de fondo, la cosa va cambiando:

Ahora le redondeamos un poco los bordes:

Y por ultimo le podemos dar un poco sombreado, por ejemplo:

Yo os he dado una idea, vosotros podeis ponerle el fondo que querais y personalizarlo a vuestro gusto. Todo es cuestion de 'jugar' con el CSS.

Hazte la tarjeta de Google+

2012-05-16T14:36:00.002+02:00

¿Quieres una tarjeta virtual como la que ves en la imagen de arriba? Pues en mygoogleplus podras obtener esta especie de 'carnet' de socio de Google+. Para ello solo tienes que dirigirte a la direccion abajo indicada y escribir tu ID de Google+, que es el numero que te identifica y aparece en la barra de direcciones de tu navegador, como puedes ver en esta imagen:

Una vez hecho esto le das al boton que pone 'Create my Google+ License' y te generara automaticamente la imagen con tu perfil y descripcion de tu cuenta de Google plus. Le das al boton derecho del raton y te la descargas. ¿Que para que sirve esto? Pues para ponerla en tu blog, web o imprimirtela, por ejemplo.

visitar mygoogleplus

Ojo slider con Transm.js

2012-05-13T22:35:00.001+02:00

Con la libreria Javascript Transm podemos hacer presentaciones con imagenes bastante originales. Te permite integrar el slider 'dentro' de un escenario de fondo como un teatro o como te muestro en este ejemplo de aqui abajo, en un ojo gigante. Su descarga y uso son gratuitos y su instalacion es basicamente como cualquier codigo Javascript. El zip contiene todos los archivos, ejemplos e imagenes.

Crea mapas con JQuery

2012-05-12T15:24:00.001+02:00

jQVMaps es un plugin para jQuery con el que podras renderizar mapas vectoriales en SVG, dando soporte a navegadores no tan modernos mediante VML. Los mapas generados por el plugin pueden actualizarse dinámicamente y enlazarse con datos en formato JSON, imprescindible para generar presentaciones de datos asociados al mapa. Actualmente contiene mapas del mundo, America, Europa y Alemania. No obstante, existe un pequeño script en Python con el que podrás convertir cualquier mapa en formatos como Shapefile para usarlos con el plugin.

EJEMPLO:

El codigo basico que he utilizado para este ejemplo es el siguiente:

<div id="vmap" style="width: 600px; height: 400px;"></div>
<link href="http://hostredeando.ucoz.es/SCRIPTS/mapa/jqvmap.css" media="screen" rel="stylesheet" type="text/css" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script src="http://hostredeando.ucoz.es/SCRIPTS/mapa/jquery.vmap.js" type="text/javascript"></script><script src="http://hostredeando.ucoz.es/SCRIPTS/mapa/jquery.vmap.world.js" type="text/javascript"></script><script src="http://hostredeando.ucoz.es/SCRIPTS/mapa/jquery.vmap.sampledata.js" type="text/javascript"></script><script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
      map: 'world_en',
      backgroundColor: '#333333',
      color: '#ffffff',
      hoverOpacity: 0.7,
      selectedColor: '#666666',
      enableZoom: true,
      showTooltip: true,
      values: sample_data,
      scaleColors: ['#C8EEFF', '#006491'],
      normalizeFunction: 'polynomial'
});
});
</script>

Si quieres visitar la web de jQVMaps, descargarte los archivos gratis y hacer pruebas haz clic aqui

Personaliza tu cabecera de Google+

2012-05-10T21:14:00.001+02:00

Desde que Google+ cambio su interfaz, tambien las opciones en Perfil han cambiado. Entre ellas, la posibilidad de escoger entre colocar 5 pequeñas fotografias o una al estilo banner. Para que esta tarea nos resulte más sencilla y podamos desplegar nuestra creatividad, contamos con servicios web como CoverPhotoEditor. Veras que con solo ir a la aplicacion tendrás muchas herramientas para crear una portada acorde a tus gustos. Tendrás una serie de plantillas que puedes escoger o subir tus propias imágenes. Puedes agregarle texto, realizar dibujos, integrar figuras geometricas, entre otros. Una vez que estés conforme con el diseño que has escogido solo tienes que descargarlo a tu ordenador y subirlo a tu perfil en Google+. Para ello solo tienes que escoger “Cambiar foto de portada”.

visitar CoverPhotoEditor

Slider rotatorio para mostrar entradas en Blogger

2012-05-04T19:51:00.001+02:00

Todos hemos visto plantillas de Blogger que llevan incorporado un slider para mostrar imagenes. El inconveniente es que dichas imagenes las tenemos que añadir manualmente y siempre mostraran las mismas, a no ser que las cambiemos de nuevo. Pues bien, este que aqui te presento, realizado con Javascript Jquery y Json, muestra automaticamente las imagenes de las entradas a medida que las vayamos publicando. Esto es una ventaja, ya que no tenemos que preocuparnos por el. En el slider iran apareciendo los posts, y al hacer click sobre las imagenes nos llevaran directamente a las entradas.

Ahora vamos a ver como ponerlo en nuestro blog. Primero debemos ir a la plantilla, y antes de </b:skin> añadimos el codigo CSS:

#featured                            {margin:10px 0 30px 0;}
#folio_scroller_container            {margin-top:35px; margin-bottom:40px; height:auto;}
#folio_scroller_container .roundabout-holder {list-style:none; height:400px; margin:0px auto 20px auto;}
.roundabout-holder                    {list-style:none; width:400px; height:250px; margin:0px auto;}
.roundabout-moveable-item             {font-size:12px!important;
/* Resize Image*/
height:180px;
width:350px;
/*-------------*/
cursor:pointer; padding:5px; border:1px solid #aaaaaa; -webkit-border-radius:5px; -moz-border-radius:5px; background:#f9f9f9;}
.roundabout-moveable-item img         {height:100%; width:100%; background-color:#FFFFFF; margin:0;}
.roundabout-in-focus                 {cursor:auto;}
.roundabout-in-focus:hover            {-webkit-box-shadow:0px 0px 20px #787878; -moz-box-shadow:0px 0px 20px #787878; background:#f9f9f9;}
.roundabout-holder span                {display:none; font-size:12px;}
.roundabout-in-focus:hover span        {display:inline; position:absolute; bottom:5px; right:5px; padding:8px 20px; background:#f9f9f9; color:#000000; z-index:999; -webkit-border-top-left-radius: 5px; -moz-border-radius-topLeft: 5px; font-size : 12px;border-left:1px solid #aaaaaa; border-top:1px solid #aaaaaa; }
.roundabout a:active,
.roundabout a:focus,
.roundabout a:visited                {outline:none; text-decoration:none;}
.roundabou li                         {margin:0}
a img                                {border:none; outline:0;}

Una vez hecho esto, tambien en la plantilla buscamos </head> y justo antes añadimos el codigo Jquery:

Guardamos los cambios en la plantilla. Y ahora pondremos el ultimo codigo en un gadget HTML/Javascript alli donde queramos mostrar el slider. Añades la url de tu blog (donde esta indicado en rojo) y puedes modificar el numero de entradas que se veran (tambien en color rojo):

Y el resultado final de nuestro slider sera este:

Widget de actividad de Google Plus

2012-05-01T11:28:00.000+02:00

Habras visto los widgets de Facebook o Twitter en los que muestran tus movimientos en dichas redes. De Google+ existen algunos sencillos para que te hagas seguidor y poco mas. Por eso REDEANDO ha creado este widget que ademas de permitir que te añadan a sus circulos, muestra tus posts o actividades en Google Plus en movimiento, gracias a que esta creado con Jquery. Para ponerlo en tu blog o web, tan solo tienes que copiar el codigo de abajo y cambiar los numeros en rojo por los de tu cuenta. Estos numeros los puedes ver en tu perfil en la barra de direcciones del navegador, como puedes ver en esta imagen. Luego solo queda añadir el codigo donde quieras mostrar el widget, como por ejemplo en la sidebar.

Y asi quedara el widget:

Google+ Actividad Widget

CODIGO:

Flash para que te sigan en Twitter (2)

2012-04-29T16:45:00.000+02:00

En otra ocasion ya os mostre un widget flash que servia de enlace para nuestra cuenta de Twitter. Pues bien, si aquel te gusto, creo que este tambien te molara. Se trata del pajaro twittero saliendo del cascaron de un huevo con el logo de Twitter, que dice el nombre de nuestra cuenta para que los usuarios nos sigan haciendo click sobre el. Como en el anterior, tienes que sustituir donde pone "NOMBRE TWITTER" por el nombre de tu cuenta, y puedes modificar el tamaño del widget en los numeros que estan escritos en rojo.

CODIGO:

<center><object data="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf" height="200" type="application/x-shockwave-flash" width="200"><param name="movie" value="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=NOMBRE TWITTER" /><embed src="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=NOMBRE TWITTER"></embed></object></center>

Cronometro experimental

2012-04-26T20:09:00.000+02:00

En esta seccion llamada 'Labs', como de costumbre, os suelo mostrar experimentos geniales de diseñadores y programadores. Esta vez se trata de una creacion de Leonid Lilo, a base de animaciones con CSS3, en la que como podeis apreciar se trata de un cronometro gigante. Si le dais al boton grande, se pone en marcha y se para, y con el mas pequeño de la izquierda se resetea a 0.

Slider sencillo con Javascript

2012-04-24T20:35:00.002+02:00

Si queremos mostrar varias imagenes en nuestro blog o web, que mejor que contar con un Slider, de los cuales existen muchos y de diversos tipos. El que te presento en este caso, esta realizado con Javascript y es muy sencillo de implementar. Tan solo debes copiar el codigo y añadirlo alli donde quieras mostrarlo. Tienes que poner las urls de las imagenes donde esta indicado en rojo, si quieres poner mas tan solo tienes que añadir la linea leftrightslide[0]='<img border="0" height="300" src="URL IMAGEN" width="500" />' tantas veces como quieras.

CODIGO:

<center><div style="width:500px;height:px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;background-color:#000000;padding:15px;">
<script type="text/javascript">
var sliderwidth="500px" // Ancho slider
var sliderheight="300px" // Alto slider
var slidespeed=5 // velocidad
slidebgcolor="#000000"
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<img border="0" src="URL IMAGEN" width="500" height="300">'
leftrightslide[1]='<img border="0" src="URL IMAGEN" width="500" height="300">'
leftrightslide[2]='<img border="0" src="URL IMAGEN" width="500" height="300">'
leftrightslide[3]='<img border="0" src="URL IMAGEN" width="500" height="300">'
leftrightslide[4]='<img border="0" src="URL IMAGEN" width="500" height="300">'
leftrightslide[5]='<img border="0" src="URL IMAGEN" width="500" height="300">'
var imagegap=""
var slideshowgap=5
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width="+sliderwidth+" height="+sliderheight+" name="ns_slidemenu" bgcolor="+slidebgcolor+">')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu2"></layer>')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu3"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script></div></center>

El boton rojo

2012-04-22T16:52:00.000+02:00

Curioso y adictivo flash creado con humor e imaginacion. Basta que nos digan que no presionemos el boton para que lo hagamos una y otra vez. Ideal para ponerlo en un blog o web para dar un toque de humor o simplemente para entretener al personal.

Ponlo en tu blog o web:

(modifica los numeros en rojo para cambiar el tamaño y adaptarlo como quieras)

No solo Google hace mapas

2012-04-18T23:25:00.001+02:00

Usuarios de todo el mundo han creado OpenStreetMap al estilo de Wikipedia, un mapa de uso gratuito. Se puede utilizar para buscar calles o para colocarlo en tu propia web, pulsando en el menu superior donde pone 'Exportar'.

visitar OpenStreetMap

visitar el blog en español

Menu Beat con CSS3

2012-04-17T09:23:00.002+02:00

El menu que os enseño hoy esta integramente hecho con CSS, es decir, no contiene ninguna imagen. Es elegante y al pasar el cursor por sus enlaces, estos aumentan y disminuyen como si del latido de un corazon se tratara. Tambien tiene sub-enlaces con una animacion muy buena, y todo esto con CSS3, sin ningun tipo de Javascript. Para ponerlo en el blog o web, primero añadimos los codigos CSS en la plantilla y luego el codigo con los enlaces alli donde queramos que se vea. En Blogger, si no te quieres complicar la vida, puedes poner los 2 codigos juntos en un gadget HTML/Javascript y asi te resultara mas facil y practico. Para editarlo a tu gusto, cambia lo que esta en rojo por el nombre de los enlaces y las urls de estos.

Codigo CSS3

Codigo enlaces

<ul id="menubeat">
<li><a href="URL">Inicio</a></li>
<li><a class="hsubs" href="URL">Enlace 2</a>
<ul class="subs">
<li><a href="URL">Submenu 1</a></li>
<li><a href="URL">Submenu 2</a></li>
<li><a href="URL">Submenu 3</a></li>
<li><a href="URL">Submenu 4</a></li>
<li><a href="URL">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="URL">Enlace 3</a>
<ul class="subs">
<li><a href="URL">Submenu 2-1</a></li>
<li><a href="URL">Submenu 2-2</a></li>
<li><a href="URL">Submenu 2-3</a></li>
<li><a href="URL">Submenu 2-4</a></li>
<li><a href="URL">Submenu 2-5</a></li>
<li><a href="URL">Submenu 2-6</a></li>
<li><a href="URL">Submenu 2-7</a></li>
<li><a href="URL">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="URL">Enlace 4</a>
<ul class="subs">
<li><a href="URL">Submenu 3-1</a></li>
<li><a href="URL">Submenu 3-2</a></li>
<li><a href="URL">Submenu 3-3</a></li>
<li><a href="URL">Submenu 3-4</a></li>
<li><a href="URL">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Enlace 5</a></li>
</ul>

Y asi de chulo quedara el menu:

Los Simpsons Pacman

2012-04-15T18:01:00.004+02:00

Pacman es todo un clasico en el mundo de los videojuegos y ahora aqui tienes una nueva version que mezcla los personajes de la famosa serie de TV Los Simpsons. Ayuda a Homer a escapar de Flander, el señor Burns, y otros personajes. Recoge todos los donuts que puedas y escapa antes que te atrapen!

ponlo en tu blog o web

<param value="http://hostredeando.ucoz.es/FLASH-VARIOS/juegos1/pacmansimpsons.swf" name="movie"><param value="opaque" name="wmode"></object>

Iconos Sociales Bocadillo

2012-04-14T01:14:00.000+02:00

Aqui tienes el ultimo grito en iconos sociales, con un diseño muy chulo en forma de 'bocadillo' de comic, en color amarillo gradient y con los logos en un azul difuminado. Este pack consta de seis iconos de Facebook, Flickr, Google Plus, RSS-feed, Twitter y YouTube, con un tamaño de 64x64 px en formato png.

descargar los iconos

Fondos gratis en Picky Wallpapers

2012-04-10T04:25:00.000+02:00

En esta web encontraras fondos abstractos, de aviones, de coches, arte digital, computadoras, juegos, motociclismo, musica, naturaleza, deportes, etc. Las descargas son completamente gratis, no tienes que registrarte y ademas de cuenta con varias resoluciones para elegir. Tambien puedes descargarte fondos para moviles de las principales marcas y hasta para la PSP.

visitar Picky Wallpapers

Huevo bookmarking con efecto deslizante, con Javascript

2012-04-07T00:38:00.001+02:00

Existen muchos sistemas para compartir las entradas de un blog en las redes sociales. Algunos con la ayuda del CSS y el Javascript son realmente originales, como en el caso que aqui te presento. Se trata de la imagen de un huevo flotante que lleva pintado el conocido signo de compartir. Al hacer click sobre el, se abre el cascaron y dentro aparecen los iconos de las principales redes para que compartan tus posts. Un efecto original y que sin duda sorprendera a los usuarios de tu blog.

ver demostracion

Para añadir este marcador social tan guapo en tu blog, vas a la plantilla y antes de </head> pegas este codigo Javascript:

Ahora buscamos </body> y tambien antes añadimos este codigo:

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div>
<script type='text/javascript'>stlib.shareEgg.createEgg
('shareThisShareEgg', ['facebook','twitter',
'googleplus','linkedin','blogger','
stumbleupon'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script>

Dos calendarios para el blog

2012-04-06T17:26:00.001+02:00

Un calendario siempre queda bien en un blog, a la par que decorativo y funcional. Si quieres ponerte uno en el tuyo, aqui tienes dos para elegir de diseño propio. Uno muestra una imagen de una ciudad con las luces animadas y el otro, segun la estacion del año, expone una imagen relacionada con dicha estacion. Para añadirlo en tu blog, solo tienes que copiar el codigo y ponerlo donde quieras.

Calendario City

<center><script src="http://hostredeando.ucoz.es/SCRIPTS/calendarios/c1.js" type="text/javascript"></script></center>

Calendario Estacional

<center><script src="http://hostredeando.ucoz.es/SCRIPTS/calendarios/c2.js" type="text/javascript"></script></center>