Ya faltan pocos días para celebrar el día de San Valentín y el romance ya se siente en la atmósfera. Y ya que andamos con la pasión en las venas por qué no adornamos el blog con unos corazones flotando por la página y que cada uno tenga un enlace a una red social o al feed del sitio, digo, para que además de vagar por la página tengan una utilidad.
Puedes ver estos corazones en este blog de pruebas.
Para agregarlos entra en Diseño | Edición de HTML y antes de </head> agrega esto:
<script type='text/javascript'>Ahora pega después de <body> lo siguiente:
//<![CDATA[
/***********************************************
* Floating image script- By Virtual_Max
* Modified by Dynamic Drive for various improvements
***********************************************/
var vmin=2;
var vmax=5;
var vr=2;
var timer1;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function Chip(chipname,width,height){
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width+20;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}
function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
if (window.innerWidth || window.opera){
pageX=window.pageXOffset;
pageW=window.innerWidth-40;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;
}
else if (document.body){
pageX=iecompattest().scrollLeft;
pageW=iecompattest().offsetWidth-40;
pageY=iecompattest().scrollTop;
pageH=iecompattest().offsetHeight-20;
}
chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;
chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX){
chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();
}
if(chip.xx>=pageX+pageW-chip.w){
chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();
}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();
}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();
}
document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";
chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
}
}
function pagestart(){
//Aquí le agregamos los IDs a las imágenes
corazon1=new Chip("corazon1",47,68);
corazon2=new Chip("corazon2",47,68);
corazon3=new Chip("corazon3",47,68);
corazon4=new Chip("corazon4",47,68);
//Aquí indicamos cuántas imágenes hay programadas
movechip("corazon1");
movechip("corazon2");
movechip("corazon3");
movechip("corazon4");
}
if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>
<!-- Corazones flotando por la página -->Si usas una plantilla hecha con el Diseñador de plantillas de Blogger entonces el código anterior deberás pegarlo después de esta línea:
<div id='corazon1' style='position:absolute; z-index:80; left: -500px; width:47px; height:68px;'>
<a href='http://facebook.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtErFBqHvZ4HflIFbiGSMokHDHewfozRQ5_ApgXGoMVP0gQRTUXaVBA8zsssLtzXNuWF7T7xE-DYJzD1cqaZpi-YieF_HM4LnrY88lkVeLvfbqDB5-iLzljU607YfeNB8Od0Sida6iHtg/'/></a>
</div>
<div id='corazon2' style='position:absolute; z-index:81; left: -500px; width:47px; height:68px;'>
<a href='http://twitter.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMpSxb9Ix8nc1wuYnZ2X9ADFpFzObCQgwyNFRjjW5dIce2WNTO7-fQZi88Klrzg8kQrE0MDH5VXp1OwN3Iwsw3lJ-GeJHNmS1SrMTgI748d_duSfrFwKX_sDHgzo6vcnLVJUBQqRAnjHk/'/></a>
</div>
<div id='corazon3' style='position:absolute; z-index:82; left: -500px; width:47px; height:68px;'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJaH-p4IwqounfBtpzdHDvnVvqNfmO0eFMMk-w_9QNkkZAch7JPxSic0ZpHfPvPiN7d1-Iw7TRxo32lDTs-SqPnexQRbpH5USHBPi2_cBfOn4oGlAwEvGKBbgtGhJ7MarfC3n6cBCDMes/'/></a>
</div>
<div id='corazon4' style='position:absolute; z-index:83; left: -500px; width:47px; height:68px;'>
<a href='URL de cualquier enlace'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDEyz6WzTxhd53SpEop_LSLxrm73XuUlIQ9wNfLSMz6t98MZNIHa2XavktlWlQbA2ENSrKdR03H2C9rZ6ksOjJ6FcKA-J8O4KbSjcBqZlpEowKuEcfBfSOYUpnEqud9aUxnMu55lUhuPU/'/></a>
</div>
<!-- Fin de Corazones flotando por la página -->
<body expr:class='"loading" + data:blog.mobileClass'>
Ya sólo agrega los nombres de usuario de Facebook y Twitter donde se indica en color rojo así como el nombre de tu blog y el enlace a algún sitio que quieras.
Si deseas añadir más corazones o imágenes busca esta parte del código y agrega las líneas en color verde como se indica:
//Aquí le agregamos los IDs a las imágenes
corazon1=new Chip("corazon1",47,68);
corazon2=new Chip("corazon2",47,68);
corazon3=new Chip("corazon3",47,68);
corazon4=new Chip("corazon4",47,68);
corazon5=new Chip("corazon5",47,68);
corazon6=new Chip("corazon6",47,68);
corazon7=new Chip("corazon7",47,68);
//Aquí indicamos cuántas imágenes hay programadas
movechip("corazon1");
movechip("corazon2");
movechip("corazon3");
movechip("corazon4");
movechip("corazon5");
movechip("corazon6");
movechip("corazon7");
Si te fijas en todas las líneas se han cambiado los números de manera consecutiva, por lo que si agregas más líneas también deberán seguir números consecutivos.
Y luego, en la otra parte del código se agregarían los códigos de las imágenes también tomando en cuenta el ID con en número consecutivo:
<div id='corazon5' style='position:absolute; z-index:83; left: -500px; width:47px; height:68px;'>
<a href='URL del enlace'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDEyz6WzTxhd53SpEop_LSLxrm73XuUlIQ9wNfLSMz6t98MZNIHa2XavktlWlQbA2ENSrKdR03H2C9rZ6ksOjJ6FcKA-J8O4KbSjcBqZlpEowKuEcfBfSOYUpnEqud9aUxnMu55lUhuPU/'/></a>
</div>
Seguramente nos hartaremos en poco tiempo de estos corazones, pero al menos durante el día de los enamorados quedará ad hoc en el blog y los que somos más melosos lo dejaremos por más rato, ¡Vive l'amour!
NOTA: En Internet Explorer no funciona.
¿Otra opción?
Ciudad Blogger
se ven increíbles esos corazones potro, gracias
ResponderEliminarBellísimo Potro!! estupendo detalle para este fin de semana de los enamorados. La música que se oye en el blog de pruebas cómo la pones porque no encuentro reproductor!! jejeje
ResponderEliminarlerh, gracias a ti por tu visita!
ResponderEliminarPabela, sólo usé el reproductor Dewplayer y la altura (height) del reproductor la puse en 0px
Hola El Potro, quería verdaderamente agradecerte por la increíble ayuda que brindas con tu blog, te comento que hace poco que estoy en este mundo bloggero y he creado mi blog con tu ayuda y de Rosa... Llegándome a quedar como 5 horas diarias a más durante un mes creo jeje, así que si vez en tu visitas una IP de Perú ya sabes quien es XD.
ResponderEliminarLos corazones están A1 como todo y tu logo mejor... yo para ese día utilizare a cupido como cursor, bueno muchas gracias de nuevo y si visitas mi Blog que aun está en construcción me das unos tips para mejorarlo pero si lo vez notarás que la mayoría son tus aportes bueno con algo de mi imaginación... antes que se me olvide te quería preguntar como hiciste tus entradas relacionadas "Más Trucos" ya que he buscado pero los que encuentro no me sirven.
Saludos ☺
Se miran chidos POTRO! buen post!
ResponderEliminarHola Potro.
ResponderEliminarNo creo que utilice los corazones, pero la poesía que has empleado en el blog de pruebas es mi favorita, buena elección, si señor.
Un saludo.
muy buena idea...te dejo un link de algunos corazones muy bonitos :)
ResponderEliminarMuy buena la dia pero no va conmigo jejeje
ResponderEliminarhola mi potrito.. hizo todo lo k dices y no me resulta . el año pasado lo hice y resultó pork ahora no?? bno espero m ayudes y guies como siempre.. t kiere muxo tu amiga de Chile pa mala suerte un nuevo sismo grand pero al sur de chile yo no sentí nada. gracias a Dios. un gran beso mi potrito hermoso!!
ResponderEliminarGenial Potro gracias! Puse todos los corazones rojos jejeje porque me gustaban más! y el mismo tema que me encanta- Love is in the air- justo buscaba algo para San Valentín!!. Un abrazo y repito mi agradecimiento por todo lo que nos brindas.
ResponderEliminarEsta bueno para estas fechas ,ademas que le da un poco de vida y movimiento al blog
ResponderEliminarEn primer lugar quiero darte la aenhorabuena por tu blog. Contiene multitud de grandes utilidades para nuestros blogs. Lamentablemente no me veo capaz de poner en práctica muchas de ellas por mis pobres conocimientos informáticos.
ResponderEliminarUna de las cosas que más necesito es saber como puedo agrupar varios iconos de páginas como lo tienes al final de la barra lateral de tu blog, para no tener que ocupar tanto espacio y poder compartir más enlaces a sitios. Alguna idea de como hacerlo más o menos fácil. Muchas gracias de antemano.
Daniel, gracias por tu comentario. Las entradas relacionadas son las mismas que explico aquí en el blog, sólo que yo las he puesto dentro del footer y les he dado un poco de color. Saludos.
ResponderEliminarMaG@S RaDioMuSiC, gracias a ti por tu visita!
Microboy90, están perrones, diríamos por acá :)
Tu siempre sorprendiendo :) jajaja me parecen muy buenos... lastima que todos pongan al amor antes que mi cumpleaños (es el 14 de febrero) pero nimodos... jajaja saludos POTRO pasatela genial, espero y tengas a una jinete que t haya domado xD
ResponderEliminarTapestryworkerman, es una obra magistral de Pablo Neruda, también de mis favoritas.
ResponderEliminarpos_ch, lo sé, no es un estilo que se apegue a todos, pero el día de San Valentín es una buena justificación para usarlos :)
mikamy tiernita, ¿en cuál blog lo has puesto?
Escorpazz, no conocía esos corazones, me han gustado más :) gracias por el enlace.
ResponderEliminarPabela, excelente elección ;)
PeliculasTube, sí, sí, aunque sea por estos días :)
Estan preciosos :). También me gusta lo que hiciste con el título del Blog, super romántico ♥!
ResponderEliminarhola potrito en este blog
ResponderEliminarhttp://fotos-amigos-forever.blogspot.com/
el año anterior m resulto y ahora no me resulta.. mira por fis k hice mal lo hice tal como lo dices en tus pasos a seguir
besos mi potro hermoso
Ángel Ruiz, sólo pega los códigos de las imágenes en un elemento HTML/Javascript uno detrás del otro, sin dar saltos de línea. Gracias por tu comentario!
ResponderEliminarSergiio, este potro no se deja domar por nadie (6) jaja
Sweet Muse, ¿verdad que sí? sólo faltaron unos chocolates y una rosa junto al logotipo :)
ResponderEliminarmikamy tiernita, olvidé mencionar que en Internet Explorer no se ven, sólo en los demás navegadores :/ Besos!
tu entrast a mi blog se veian los corazónes oh simplemente no se verán??
ResponderEliminargx
Sí entré y se ven muy bien en Google Chrome y los demás navegadores, pero en Internet Explorer no se ven.
ResponderEliminaroka.. gx mi potrito hermoso. un beso!!
ResponderEliminar¡qué gracioso, bonito ha quedado, ocurrente, jeje...eso sí, el que me gusta es el que has colocado "alojando al simbolito de ciudad blogger, PRECIOSO...
ResponderEliminarÉse es para que siempre quedara, ¿verdad?...me lo imagino hasta latiendo
Como siempre, mil gracias, Potro
Un beso enorme
Bien. Gracias Potro. Probare lo que dices a ver si poco a poco voy aseando el blog. Saludos a todos los bloggeros
ResponderEliminarSofía Serra Giráldez, lástima que no tengo buenas habilidades como diseñador gráfico porque esa idea del corazón latiendo es excelente, ¡ya me lo imaginé! pero bueno, sólo estará ese logotipo unos días, sino me veré forzado a cambiar el nombre del blog por 'El jardín romántico del Potro' :D
ResponderEliminarÁngel Ruiz, saludos y olvidé darte las gracias por tu amable comentario (ya sabes, las prisas) ;)
Hola Potro,un detalle muy bonito que quisiera poner en mi blog,pero quisiera solo pner los corazones rojos,¿como lo hago?.Como siempre mil gracias por tu ayuda y un saludo.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarAMPA-IGE,
ResponderEliminarSólo busca las URLs de las imágenes que están en el código que pusiste después de <body> y cámbialas todas por esta URL:
https://lh4.googleusercontent.com/_dsEG33PDaHw/TVM5KyaZXKI/AAAAAAAAA-Q/_ph_CP_WkXY/corazon.png
¡Hola Potro!
ResponderEliminarDisculpa pero quería hacerte una pregunta que nada tiene que ver con esta entrada... (aunque me ha gustado mucho el truco y ya veré si lo implemento en mi blog)
La cosa es que he armado una comunidad de bloggeros de mi país (Argentina) y estoy buscando alguna clase de herramienta para poner en el blog de la comunidad en la que se puedan ver resúmenes de las entradas de los miembros registrados (osea, de diversos blogs externos)
Existe algo similar? O alguna otra cosa que me puedas aconsejar? Porque que me estén enviando mails continuamente para que promocione en el sitio tal entrada suya es un incordio, necesito algo más cómodo... Espero que puedas ayudarme
Desde ya muchas gracias!
Tu sitio es geniaal :)
Potro perdon que mi siguiente comentario no tenga nada que ver con el post pero queria saber si me podes ayudar a colocar un banner en mi blog ya que en la parte de arriva del mismo me lo divide y me lo corta a la mitad entonces no lo puedo colocar?
ResponderEliminarTenes alguna idea de como ponerlo?
Hola potro perdona pero este esta muy bueno solamente queria preguntarte si no hay uno que esten subiendo los corazones o bajando como si fueran nieves, y que no tengan ningun enlace a nada solamente diseño, espero tu ayuda saludos
ResponderEliminareres genial men una ves más gracias men.
ResponderEliminarHola Annie,
ResponderEliminarLa manera más cómoda podría ser usar un gadget en la sidebar o arriba de las entradas que muestre los últimos artículos de esos blogs, sólo sería agregar el gadget 'Lista de blogs' y ahí añadir todos los blogs que deseas. En el gadget puede aparecer una miniatura de la imagen de la entrada, así como un resumen.
Ahora, si te refieres a que dentro de tus entradas haya un tipo de actualización de todos esos blogs entonces no sabría decirte, dudo mucho que exista algo parecido.
Saludos.
Matthew Mati, ¿en cuál blog tienes el problema?
ResponderEliminarjangel, al final de la entrada hay un enlace a otra opción, esos corazones no tienen enlace y caen como si fuera nieve.
Cirilo, gracias a ti por tu visita :)
pero men nose cual es la opcion solamente beo
ResponderEliminarMenú tipo acordeón con efecto deslizante
Cambiar el tamaño de la letra con una barra de desplazamiento
Listones de banderas para el blog
¡Feliz Navidad!
me dises cual es?
No me refería a las entradas relacionadas sino al final de la entrada donde dice:
ResponderEliminar¿Otra opción?
Hola Potro me preguntaba si nos podrias hacer el favor de hacer una guia para hacer este menu
ResponderEliminarhttp://jqueryglobe.com/labs/slide_thumbs/
la guia ya esta hecha si no que no la entiendo y ademas esta en ingles... aca esta la guia
http://jqueryglobe.com/article/slide-thumbs
muchas gracias potro eres el mejor! :D
Hola Pozo,
ResponderEliminarEsos mensajes de voz son así justamente para evitar SPAM, sólo pon atención a las letras o palabras que diga, eso es lo que tienes que enviar.
Según la respuesta que me describes en el correo el problema inicial era que no podías entrar a tu cuenta y ellos te han respondido que ya está resuelto.
Supongo que ahora deberás ponerte en contacto con ellos para restabelecer tus blogs.
Ya hace unas semanas había leído en el foro de ayuda de Blogger que al parecer estaban teniendo problemas para identificar blogs con SPAM y que muchos blogs que no eran de SPAM estaban siendo eliminados por equivocación pero que estaban tardando un poco en restaurar esos blogs. Así que probablemente también sea tu caso y pueda demorar unos días en que lo restablezcan pero esa sólo es una suposición mía, por eso te sugiero que te pongas en contacto con ellos para que te den las instrucciones necesarias y que todo regrese a la normalidad.
Pero no te preocupes, que si se trata de un error de ellos entonces tarde que temprano tendrás tu blog de vuelta.
Saludos.
Hola Sirius,
ResponderEliminarJustamente hace como tres días Gema publicó en su blog una entrada que explica cómo hacer esa galería:
gemablog-.blogspot.com/2011/02/slide-con-sombra.html
Saludos!
Es en el blog de descargoafull
ResponderEliminarhttp://descargoafull.blogspot.com en ese blog es en el que no le puedo poner la imagen principal
Matthew Matii,
ResponderEliminarEl blog tiene la cabecera dividida y el banner lo veo bien ahí. Supongo que a lo que te refieres es que quieres poner una imagen como cabecera que ocupe todo el ancho del contenedor de la cabecera. Si es así entonces busca esta línea:
#header-wrapper{width:950px;margin:0 auto 0;height:100px;background: #fff;padding-top:5px;overflow:hidden;}
Y cambiala por esta otra:
#header-wrapper{width:950px;margin:0 auto 0;height:100px; background: #fff url(URL de la imagen) no-repeat; padding-top:5px;overflow:hidden;}
Ahí coloca la URL de la imagen que quieres.
Pozo+10™, no te preocupes que yo cuando ando preocupado hasta de saludar a mi suegra olvido y ahí sí se pone grave la situación.
ResponderEliminarQué bueno que ya está todo resuelto.
Saludos.
Gracias potro siempre al rescate..
ResponderEliminarjajaj
Y como podemos quitar los corazones por que me estoy haciendo un lio , y como me ha salido mal por fi contetad!
ResponderEliminarEs tan sencillo como mirar el código de la entrada y buscarlo en tu plantilla para eliminarlo.
ResponderEliminarHola Potro, hay alguna forma que al dar click en el corazon flotante, el link no cargue en la misma pagina sino en una pestaña aparte?.. Gracias
ResponderEliminarHola K@MUX,
ResponderEliminarDespués de la URL, o sea después de esto:
href='http://twitter.com/usuario'
Deja un espacio y luego pon:
target="_blank"
Aquí hay más información sobre ello:
http://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html
Gracias Potro, me funcionó perfecto.
ResponderEliminarQue pena molestarlo con otras pregunticas... si quiero cambiar el corazón con otra imagen, que tengo que tener en cuenta con el código, osea, la nueva imagen debe tener algún tamaño en especial y a parte tengo que cambiar algo en el código?.. se puede colocar un gif animado?, la imagen puede ser mas grande o mas pequeña?.
Gracias
En el código que va después de <body> puedes encontrar los parámetros de las medidas:
ResponderEliminarwidth:47px; height:68px;
Los puedes cambiar por las medidas de la nueva imagen (width es el ancho y height el alto); y sí, puede ser una imagen animada.
Sólo debes cambiar la URL de la imagen que está en el código por las de las imágenes que quieres.
Saludos.
esta bueno :D
ResponderEliminarlo usare algun dia ^^
Hola,me encanto la idea.Ya la aplique en un blog de fotos mias,jaja.Una pregunta sobre el blog de pruebas con corazones,vos hisite un corazon que dice "cuidad blogger",con qe programa lo hisiste??
ResponderEliminarRespondeme a mi blog:
http://cuandocaperucitasecomioallobo.blogspot.com/
Gracias
Hola Oriianna!,
ResponderEliminarMira esta entrada, ahí hice el corazón:
http://ciudadblogger.com/2009/02/crea-imagenes-divertidas-para-tu-blog.html
Saludos.
hola oye Potro se le puede poner la opcion de X cerrar a los corazones????
ResponderEliminarA este no, de hecho no he visto alguno con esa opción.
ResponderEliminary algo parecido a esto ke sea un un gif en movimiento que se pueda cerrar..
ResponderEliminarHay imágenes que se pueden cerrar con un botón, pero no conozco ninguna que caiga desde toda la página o que la imagen se repita y cubra toda la página.
ResponderEliminar:( gracias por la ayudita iwall
ResponderEliminarés muy xulo!
ResponderEliminarperò se ha de hacer mucha cosa!
Hola!! he hecho lo del los corazones y me sale todo bien menos el corazón rojo que debería de salir el azul con la f de facebook y no me sale. El corazón rojo es el que me redirige a la página de facebook. Qué he hecho mal?
ResponderEliminarHola LoKieroTodo,
ResponderEliminarEl primer enlace es el de Facebook, ese es el que corresponde al color azul.
Saludos.
Disculpe que lo moleste maestro, en caso de que aplique este metodo, se podria hacer lo mismo con el boton me gusta de facebook, o mejor aun el boton me gusta y el contador, en caso de que se pudiese seria tan amable de enseñarme como, le agradezco por todas las opciones que ya nos ha dado.... de antemano gracias por leer mi comentario.....
ResponderEliminarMe temo que no | Menderley |, el script sólo admite imágenes. Saludos.
ResponderEliminarLastima, muchas gracias por responder mi comentario... disculpe maestro no le molestaria si me hago fan de esta maravillosa página, voy a suponer que no y me voy a subsribir... gracias, voy a esperar a que salga algo nuevo...
ResponderEliminarTodo lo contrario, estaría encantado de que lo hagas :)
ResponderEliminarSaludos y buen inicio de semana.
me pueden ayudar? pongo la direccion a donde quiero que los mande cuando le den click a algun corazon pero no los panda, les sale error :C y los quiero quitar los corazones y elimino el html de los corazones y no se puede guardar :c como le hago ayuden porfavor
ResponderEliminarSi quieres quitar los corazones sólo mira el código de la entrada, ese mismo código es el que debes eliminar, nada más, nada menos.
Eliminar