Formulario de busqueda original para el blog



Con un sencillo diseño, original y gracioso, os presento este formulario de busqueda realizado integramente utilizando CSS. Una manera diferente de presentar esta utilidad imprescindible para todo buen blog que se precie. Se puede utilizar en Blogger y en practicamente todas las plataformas blogueras. Si os gusta y quereis ponerlo en vuestro blog, elegid un de los dos, copiad el codigo correspondiente y pegadlo donde querais mostrarlo. Sustituid la parte que esta en color rojo por la direccion URL de vuestro blog. Si vuestro blog tiene el fondo claro, aconsejo elegir el primer modelo, de tenerlo oscuro, el segundo.



buscador ->




ver codigo
<div class="contenedorform">
<div class="textoindicativo">
buscador -> </div>
<form class="buscabusca" action='http://redeando.blogspot.com/search' method='get' target="_blank">
<input type="text" placeholder="buscar..." required name="q"></div>
</form>
<style>
.contenedorform{
width:250px;
  margin: 0 auto;
}
.textoindicativo{
  font-family: 'Gochi Hand', cursive;
  font-size:27px;font-weight:bold;
  float:left;padding-top:6px;color: #111;
 position:relativeM;
}

input:focus{
  border:0;
  outline:0;
font-family:Century Gothic;
font-size:15px;color:#5D5E5E;
}

.buscabusca{
  width:20px;
  height:20px;
  border: 4px solid #111;
  border-radius:10px;
  transition:
    height .2s ease .5s,
    width .5s ease 0s;
  position:relative;
  float:left;
  margin-left:5px;
  top:5px;
}

.buscabusca input{
  font-weight:700;
  height:0px;
  width:0px;
  border:0;
  margin:0;
  padding:0 10px;
  background:transparent;
}

.buscabusca:after{
  content:"";
  position:absolute;
  width:1px;
  height:7px;
  bottom:-8px;
  right:-5px;
  background:#111;
  border: 2px solid #111;
  transform:rotate(-45deg);
  transition:all .2s ease;
}

.buscabusca:hover{
  width:100px;
  height:30px;
  transition:
    height .2s ease,
    width .2s ease .2s;
}

.buscabusca:hover input{
  width:100%;
  height:100%;
  transition:all .2s ease;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>






buscador ->




ver codigo
<div class="contenedorform2">
<div class="textoindicativo2">
buscador -> </div>
<form class="buscabusca2" action='http://redeando.blogspot.com/search' method='get' target="_blank">
<input type="text" placeholder="buscar..." required name="q"></div>
</form>
<style>
.contenedorform2{
width:250px;
  margin: 0 auto;
}
.textoindicativo2{
  font-family: 'Gochi Hand', cursive;
  font-size:27px;font-weight:bold;
  float:left;padding-top:6px;
 position:relativeM;color: #cdcdcd;
}

input:focus{
  border:0;
  outline:0;font-family:Century Gothic;
  font-size:15px;color: #cdcdcd;
}

.buscabusca2{
  width:20px;
  height:20px;
  border: 4px solid #cdcdcd;
  border-radius:10px;
  transition:
    height .2s ease .5s,
    width .5s ease 0s;
  position:relative;
  float:left;
  margin-left:5px;
  top:5px;
}

.buscabusca2 input{
  font-weight:700;
  height:0px;
  width:0px;
  border:0;
  margin:0;
  padding:0 10px;
  background:transparent;
}

.buscabusca2:after{
  content:"";
  position:absolute;
  width:1px;
  height:7px;
  bottom:-8px;
  right:-5px;
  background:#cdcdcd;
  border: 2px solid #cdcdcd;
  transform:rotate(-45deg);
  transition:all .2s ease;
}

.buscabusca2:hover{
  width:100px;
  height:30px;
  transition:
    height .2s ease,
    width .2s ease .2s;
}

.buscabusca2:hover input{
  width:100%;
  height:100%;
  transition:all .2s ease;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>





Batman cumple 75 tacos

comentar























Si hace un año se cumplia el 75 aniversario de Superman, ahora le toca el turno al hombre murcielago. Pues si amig@s, porque Batman se creo un mes de mayo de 1939 por Bob Kane y Bill Finger. Para commemorar tal evento, Bruce Timm, (co-responsable de Batman: The Animated Series) ha realizado este corto que remite a los origenes del personaje. Un 'look de 1939', segun sus responsables, coprotagonizada por un conocido villano de Batman: Hugo Strange.






leer articulo ➨

Reproductores para videos de YouTube

5 comentaron



Si quieres mostrar los videos de YouTube en tu blog o web de una manera diferente, aqui te traigo estos 2 reproductores tan originales en formato flash que, ademas son personalizables y te permiten poner el titulo que tu quieras. Puedes verlos en funcionamiento aqui debajo, elige el que mas te guste y copia el codigo correspondiente. Si deseas descargarte los archivos flash (swf) para alojarlos donde tu quieras, puedes hacerlo clicando aqui.
<object type="application/x-shockwave-flash" height="410" width="610" data="https://sites.google.com/site/redeando1/1.swf"><param name="movie" value="https://sites.google.com/site/redeando1/1.swf" /><param name="wmode" value="transparent" /><param name="flashvars" value="&in_title=TEXTO&&Video_url=http://www.youtube.com/v/VIDEO?version=2;autoplay=0;loop=1&" /></object>


<object type="application/x-shockwave-flash" height="410" width="610" data="https://sites.google.com/site/redeando1/2.swf"><param name="movie" value="https://sites.google.com/site/redeando1/2.swf" /><param name="wmode" value="transparent" /><param name="flashvars" value="&in_title=TEXTO&&Video_url=http://www.youtube.com/v/VIDEO?version=2;autoplay=0;loop=1&" /></object>




CONFIGURACION: Para poner un video, tienes que copiar la id de YouTube de dicho video, que aparece en la barra de direcciones (ver imagen de abajo) y pegarlo en lugar de donde pone VIDEO (en color rojo). El titulo lo añades donde pone TEXTO (en azul). Si quieres que se reproduzca automaticamente, cambias el 0 (en verde) por el 1, de lo contrario, lo dejas tal cual.


leer articulo ➨