Tarjeta de Navidad en CSS

22 de diciembre de 2012 178 comentarios ,
Esta entrada en realidad tiene dos motivos, la primera es para desearles a todos y cada uno de los lectores de este blog, una feliz Navidad, pero más aun, que estas fechas sean un pretexto para reconciliarnos con quienes hemos discutido, disfrutar a nuestros seres queridos, y valorar todo aquello que tenemos para así compartir con los demás un poco de lo mucho que la vida nos da.


¡Feliz Navidad!

les desea Ciudad Blogger


El otro motivo es para compartirles esta tarjeta de navidad hecha sólo con CSS, las únicas imágenes que hay en ella son la de los copos de nieve.
Es un pequeño experimento que hice basado con la nieve de Joshua Johnson y las esferas de Catalin Rosu, yo prácticamente sólo le he añadido algunos efectos de hover y los bordes.

Como está hecho con CSS sólo se verá bien en navegadores modernos, así que si lo ves medio abstracto ya sabes porqué razón se ve así.
El código para copiar y pegar en una entrada es este:
<link href='http://fonts.googleapis.com/css?family=Clicker+Script' rel='stylesheet' type='text/css'/>
<style>
@keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-ms-keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
#xmas-contenedor {
height: 380px;
width:580px;
background-color: #6b92b9;
background-image: url(http://lh3.googleusercontent.com/-k6mAvDmeu4Q/UMefU6JI32I/AAAAAAAADpM/zdjTclnGDhM/s500/snow.png), url(http://lh6.googleusercontent.com/-8wOkQAdxfgg/UMefVfmte0I/AAAAAAAADpU/aE4HxfiXD88/s400/snow3.png), url(http://lh5.googleusercontent.com/-fhO2tXwKP9M/UMefVCohCOI/AAAAAAAADpQ/nFVnzK1W0xw/s300/snow2.png);
-webkit-animation: xmas-snow 20s linear infinite;
-moz-animation: xmas-snow 20s linear infinite;
-ms-animation: xmas-snow 20s linear infinite;
animation: xmas-snow 20s linear infinite;
position:relative;
border:5px solid #98BF21;
z-index:1;
}
#xmas-contenedor:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom:0;
border: 5px solid #fff;
}
#xmas-contenedor:after {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border: 6px dotted #98BF21;
}
#xmas-contenedor h4, #xmas-contenedor p {
font-family: 'Clicker Script', cursive;
font-size:60px;
font-weight:bold;
text-align:center;
text-shadow: 2px 2px 4px #000000;
color:#fff;
margin-top:200px;
margin-bottom:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#xmas-contenedor p {
font-size:25px;
line-height:0;
margin-top:50px;
}
html>/**/body #xmas-contenedor h4, x:-moz-any-link, x:default {
font-weight:normal;
}
html>/**/body #xmas-contenedor p, x:-moz-any-link, x:default {
font-weight:normal;
}
#xmas-contenedor h4:hover {
font-size:75px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#bauble-container {
list-style: none;
width: 568px;
margin: 40px auto;
padding: 0;
}
#bauble-container li {
margin: 0 20px;
float: left;
}
#bauble-container li:before {
content: "";
background: #dadada;
background: -moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0) );
background: -webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0)));
height: 50px;
width: 2px;
display: block;
margin: 0 auto;
}
#bauble-container li:nth-child(odd) {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
}
#bauble-container li:nth-child(odd):hover {
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
}
#bauble-container li:nth-child(even) {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
}
#bauble-container li:nth-child(even):hover {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}
.bauble {
border-radius: 100px;
box-shadow: 0 0 5px #777777;
border: 1px solid rgba(0,0,0,0.3);
position: relative;
height: 100px;
width: 100px;
}
.bauble:before {
content: "";
background: #fff;
background: -moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c );
background: -webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c));
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
border: 1px solid #dadada ;
height: 10px;
width: 20px;
position: absolute;
left: 50%;
top: -12px;
margin-left: -10px;
}
.bauble:after {
content: "";
border-radius: 100px;
background: #fff;
background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1) );
background: -webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1)));
position: absolute;
top: 0;
left: 50%;
margin-left: -40px;
opacity: 0.15;
height: 80px;
width: 80px;
}
.red-bauble {
background: #c8171f;
background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f));
}
.blue-bauble {
background: #00a1ee;
background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee));
}
.yellow-bauble {
background: #fcb83d;
background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d));
}
.green-bauble {
background: #4d8d00;
background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00));
}
</style>

<div id="xmas-contenedor">
<ul id="bauble-container">
<li>
<div class="bauble red-bauble">
</div>
</li>
<li>
<div class="bauble blue-bauble">
</div>
</li>
<li>
<div class="bauble yellow-bauble">
</div>
</li>
<li>
<div class="bauble green-bauble">
</div>
</li>
</ul>
<h4>¡Feliz Navidad!</h4>
<p>les desea Ciudad Blogger</p>
</div>

Lo dicho, ¡feliz Navidad a todos!



178 comentarios en:

" Tarjeta de Navidad en CSS "

  1. Feliz navidad Potro, que la pases en familia y que te lleguen buenos regalos :B
    Saludos!

    ResponderEliminar
  2. Felices Fiestas!!!! y muchas gracias por compartir con tod@s nosotr@ todos tus conocimientos que son de gran ayuda y nos sacan de mas de un apuro.Bss apretaos!!!

    ResponderEliminar
  3. ¡Feliz Navidad, querido Potro y muchas gracias por todo lo que haces por nosotros! ^_^

    ResponderEliminar
  4. FELIZ NAVIDAD!!! ^^ y que linda tarjeta, gracias por compartirla ^-^

    ResponderEliminar
  5. ¡Precioso!. Es increíble que este hecho simplemente con CSS :) . Muchas gracias por compartirlo y ¡Felices Fiestas!

    ResponderEliminar
  6. Sou brasileiro e te desejo um feliz Natal!

    ResponderEliminar
  7. 83 Trucos y tutoriales para Blogger en 2012...

    Gracias Potro, felices fiestas... Y CiudadBlogger para siempre!

    Por cierto, ¿Habrá nueva plantilla para 2013?... :D

    ResponderEliminar
    Respuestas
    1. No lo creo, me siento a gusto con esta, quizá sólo la adapte para móviles :)

      Eliminar
    2. Voy contigo Potro esta Plantilla es Clase Súper

      Eliminar
  8. Gracias por los buenos deseos.
    Que Dios te bendiga y te siga dando esa inteligencia que nos ayuda a los que no sabemos.
    Un abrazote.

    ResponderEliminar
  9. Gracias, y Feliz Navidad a ti también, que disfrutes este fin de año =) La tarjeta la voy a usar ese día. De nuevo muchas gracias =)

    ResponderEliminar
  10. ¡Feliz Navidad y gracias por toda la ayuda brindada!

    ResponderEliminar
  11. Feliz Navidad a usted también. Aprendo y uso cosas de su blog aunque nunca hago comentarios, pero en estas fechas entrañables aprovecho para darle las gracias por tan buen trabajo que a los poco mañosos como yo nos viene muy bien aunque solo asimilo las más sencillas.
    Saluditos.

    ResponderEliminar
  12. ¡Muchas gracias a todos, felices fiestas!

    ResponderEliminar
  13. Potro, tú ya compartes muchas cosas con los demás

    Vi un cartelito en tu blog hace unos días y veo que ya lo has quitado, espero que todo vaya bien y que éstos días sean para mejorar todos un poco, te deseo mucha felicidad para ti y los tuyos y que, el año que viene, llegue cargado solo de cosas buenas, que nos hacen buena falta, ahhhhhhh y espero seguir contando con tus ayudas que, eso, no tiene precio, jejeje, muchas gracias por la tarjeta que nos ofreces, un beso grandote y, lo dicho ¡¡Felices Fiestas!!

    ResponderEliminar
    Respuestas
    1. Por supuesto que sí Ana, mientras Dios me lo permita seguirás contando conmigo, que no quede duda ;)
      ¡Felices Fiestas!

      Eliminar
  14. Está bellísima Potro. Muchas gracias por todo y que tengas una muy feliz navidad y un 2013 lleno de BENDICIONES! :)

    ResponderEliminar
  15. Aunque sabes que sigo este sitio como todos, casi nunca me dejo ver por aquí, pero hoy tengo la excusa perfecta para hacerlo, así que Felices fiestas :)

    ResponderEliminar
    Respuestas
    1. Todos los años te me adelantas, para el próximo yo pasaré primero al tuyo :)
      ¡Feliz Navidad y año nuevo!

      Eliminar
  16. Felices Fiestas!!
    Pero, como puedo hacerla más pequeña? =p

    ResponderEliminar
    Respuestas
    1. El contenedor general se cambia con el width y height que está dentro de #xmas-contenedor {
      El ancho que ocupan todas las esferas se cambia con el width que está dentro de #bauble-container {
      El tamaño de las esferas con el width y height dentro de .bauble { y dentro de .bauble:after {

      Eliminar
    2. He intentado cambiar las medidas y no lo consigo.
      Me puedes ayudar?
      Un saludo

      Eliminar
    3. Siento responderte tan tarde yolanda, aun así te digo por si el próximo año quieres ponerlo.
      Hay que modificar (como menciono en el #18.1) los width y height de esa área. Sólo tienes que poner la medida que quieras tomando en cuenta que todos esos valores terminan siempre en px;
      Saludos.

      Eliminar
  17. Feliz navidad para todos y en especial para POTRO por compartir sus conocimientos con nosotros y aprovecho de igual para dar una feliz navidad a oloman

    ResponderEliminar
  18. Felices fiestas Potro ;)

    ResponderEliminar
  19. Felices fiestas y mil gracias por tan buenos trucos y consejos sin los que no podría haber mejorado mi blog :-)

    ResponderEliminar
  20. Grosísimo, hay veces que me siento una vieja en el campo, esperando que venga el cartero con tu brillantes ideas. Muy buen año, mucha paz y reconciliaciones.

    ResponderEliminar
    Respuestas
    1. Jajaja, me has hecho reír con esa analogía Enrique :D
      ¡Feliz año venidero!

      Eliminar
  21. Que genial está la tarjeta Potro =) Felices fiestas ;)

    ResponderEliminar
  22. Potro un saludo, y disculpa que esto no tiene que ver on este post tengo una duda hice el gatget de seguidores google entonces los seguidores no quedan bien alineados como los de facebook por ejemlo, se ve muy desagradable solo filas de 3 seguidores... como podria arregral eso...
    anyelogonzalez.blogspot.com

    ResponderEliminar
    Respuestas
    1. Expande los artilugios, localiza el gadget de los seguidores de Google Plus y encuentra esta línea:
      <div class='g-plus' data-action='followers' data-height='300' data-source='blogger:blog:followers' data-width='300' expr:data-href='data:profileUrl'/>

      Verifica que tenga lo que está en negrita, en caso de que no entonces agrégaselo, eso hará que el ancho tenga esa medida y con ello se muestren más avatares.

      Eliminar
  23. Potro: como siempre, sublime lo tuyo!!
    Muchas Felicidades para vos y tu familia!!

    ResponderEliminar
  24. Feliz Navidad Potro, gracias por estar ahí y por ser como eres.

    ResponderEliminar
  25. ¡Muy bonita excusa!
    Ten tú también una maravillosa navidad, augurando que el próximo año te traiga muchas metas cumplidas, cambios positivos, felicidad, y sobre todo, mucho, mucho amor :) ¡Bienaventuradas fiestas!

    Mis mejores deseos para ti y to@s l@s habitantes de esta ciudad. Les envío una lluvia de bendiciones,

    Lluvia

    ResponderEliminar
  26. Hola Potro
    Visitame y mira el cambio que le di
    http://franciscoadame.es/

    Saludos

    ResponderEliminar
  27. Muy Feliz Navidad Potro!
    Buenísima la tarjeta de Navidad, ya la estamos compartiendo por estos lares (con la cita que corresponde).
    Muchas gracias!

    ResponderEliminar
  28. Feliz Navidad mi Potrito bello!! que Dios te bendiga y te llene siempre de dicha . Bendiciones y muchos besotes!!

    ResponderEliminar
  29. Gracias Potro!
    Felices Fiestas desde Argentina!

    ResponderEliminar
  30. Feliz Navidad, Potro!!! Te deseo lo mejor para ti y para los tuyos, espero ke pases una exclente y linda navidad, un gran abrazo de oso!!! Cuídate mucho. Besos !!!!

    ResponderEliminar
  31. Feliz navidad potro.. sos el mejor.. ;D

    ResponderEliminar
  32. Gracias de nuevo todos por sus comentarios, que todos estos buenos deseos se les multipliquen a ustedes y a sus seres queridos!

    ResponderEliminar
  33. Gracias potro un aporte bastante interesante, igual felices fiestas!!!!

    ResponderEliminar
  34. Muchísimas gracias por la entrada ¡feliz Navidad!

    ResponderEliminar
  35. Igual que todos, vengo para desearte a ti y a todos los bloggeros que visitan este blog una feliz Navidad. ¡Y muchas gracias por este aporte, me ha encantado! Gracias a mis pocos conocimientos de CSS (que estoy empezando a manejarme con él) he adaptado la felicitación al espacio que tenía y he conseguido eliminar una bola y parte del ancho para que cupiese :D

    ResponderEliminar
  36. Un gran abrazo en estas fechas Potro y muchas gracias por la gran ayuda que me/nos has prestado en este 2012 y por seguir ahí. ¡Hasta para felicitarnos las fiestas aprovechas para poder enseñarnos algo y que nos sea de utilidad! :)

    Quería pasar para agradecerte todo este año lleno de buen trabajo y ayuda que nos has regalado a todos, ¡y desearte que pases unos días lo mejor posible!

    Un cordial abrazo virtual,

    ResponderEliminar
  37. Feliz Navidad y gracias una vez más por tus "trucos".
    Si me lo permites quería preguntarte cómo podría lograr que la banda de luces superior que he puesto en mi blog se reprodujera lateralmente.

    Entiendo que la imagen tendría que rotarla y volverla a subir, pero aparte de eso no sé cómo lograr que se reproduzca a ambos lados y verticalmente,

    Gracias.

    http://capitaldegalicia.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Feliz Navidad Master_AS, deja la pregunta en la entrada de las luces para darle el seguimiento adecuado.
      ¡Saludos!

      Eliminar
  38. Hola, Potro:
    Primero que nada, me alegra tu regreso. Se te extrañó.
    En seguida, enviarte mis felicitaciones para ésta Navidad.
    Que Dios te bendiga y llene tu vida de lo mejor.
    Sigo por aquí visitándote y llevando a mi blog tantas cosas bellas como compartes.

    ResponderEliminar
  39. Felices fiestas amigo muchas gracias por dedicar parte de tu tiempo con todos nosotros que dios te de mucha salud a ti y los tuyos y que el próximo año tengamos la mejor área de comentarios de todas las plataformas jajaja ojala... Que santa blogger nos escuche :P

    ResponderEliminar
  40. Felices fiestas para vos Potro!

    Un fuerte abrazo!

    ResponderEliminar
  41. ¡¡¡ FELIZ NAVIDAD¡¡¡,que lo pases bien Potro¡¡

    ResponderEliminar
  42. Querido Potro, aunque te puse mis deseos en otra de tus entradas, quise estar en esta que es más acorde los mensajes.

    GRACIAS, GRACIAS, por toda la ayuda que nos das y con todo lo que compartís.

    Espero que este año venidero alcances lo que tienes proyectado.
    Estoy seguro que muchos de nosotros hará la fuerza que necesitas!!

    Abrazo

    ResponderEliminar
  43. Feliz Navidad pero tengo una duda: como hago la postal más pequeña? GRACIAS

    ResponderEliminar
    Respuestas
    1. Necesitarías eliminar algunos elementos del código CSS como el .green-bauble y todo lo que tiene para eliminar una bola, luego ajustar un nuevo tamaño en height y width del contenedor y eso...

      Eliminar
    2. Gracias Javier, mira el comentario #18.1

      Eliminar
  44. Felices Fiestas y gracias por compartir tanto con todos nosotros.
    Un cariñoso abrazo:)

    ResponderEliminar
  45. Potro, estuve buscando a ciudad blogger en los premios de la blogoteca y no te he encontrado, ¿Este año no estás participando?

    Una lluvia de bendiciones.

    ResponderEliminar
    Respuestas
    1. Este año no Lluvia, de hecho el anterior fue el primero y el último :)
      Bendiciones para ti también!

      Eliminar
  46. Un abrazo muy fuerte a todos, ¡felices fiestas!

    ResponderEliminar
  47. Grx por todos tus aportes excelentes Potro y Felices Fiestas! Un abrazo

    ResponderEliminar
  48. FELIZ NAVIDAD POTRO!!!

    Un abrazo muy gordo!!!

    ResponderEliminar
  49. FELIZ NAVIDAD POTRO!!!

    Un abrazo mu gordo!!!

    ResponderEliminar
  50. Me podrias ayudar diciendome q hay q hacer para numerar los comentarios y para q el correo electronico de los comentario no sea visible para el resto de comentarios? Gracias

    Nuestro blog se llama cosicasdenuestravida

    Felices fiestas!

    ResponderEliminar
    Respuestas
    1. Hola Lola, el correo no es visible para nadie. Para enumerar los comentarios mira esta entrada de Oloblogger:
      http://www.oloblogger.com/2012/01/numerar-los-nuevos-comentarios-blogger.html
      ¡Felices fiestas!

      Eliminar
  51. Ayer y antier con el ajetreo, ya no alcancé a pasarme para desearte una muy Feliz Navidad, aunque en mi mente les enviaba a todos mis mejores deseos...

    ¡Feliz Navidad. Un abrazo fuerte colmado de buenos deseos!

    ResponderEliminar
    Respuestas
    1. Gracias Karla, después paso por los tamales :D
      ¡Próspero Año Nuevo!

      Eliminar
  52. Felices Fiestas Potro!! que hoy y siemore tengas salud, amor y mucha abundancia, gracias por tu tiempo y conocimientos compartidos, abrazos!!!

    ResponderEliminar
  53. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  54. Hola, Potro!
    Gracias por tus buenos deseos navideños.
    Y Feliz Navidad a ti también (aunque un poquito tarde... ups!).
    Feliz Año 2013 y que Dios te llene de paz, de gozo, prosperidad, salud y amor, junto a todos tus seres más queridos.
    Gracias también por ser siempre tan amable y por brindar ayuda a todos, como lo haces siempre.
    Dios te bendiga, Potro y saludos!

    ResponderEliminar
  55. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola henry, no tengo ese navegador así que no podría verlo desde ahí, pero es un tanto "normal" que las páginas no se vean igual en IE. La recomendación es que cuando elijas una plantilla o hagas un cambio en ella revises cómo se ve en ese navegador, así sabrás qué te conviene poner y qué no.

      He eliminado el comentario por el aviso que está al final.

      Eliminar
  56. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola Gonzalo, es porque unos estilos (los que dicen #comentariosface) los has puesto en el lugar incorrecto. Mira esta entrada:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  57. Hola Potro! Prospero año para ti!! Queremos mas cuidad blogger en el 2013! Siempre me has ayudado y necesito de nuevo tu ayuda! En mi blog www.hijosobedientes.blogspot.com los botones para compartir de facebooj y de twitter anduvieron mal... empezaron a mostrar publicidad. Cambie la plantilla y sigo con el problemas, pero además hay elementos de diseño de la plantilla anterior que ahora no puedo eliminar... Puedes ayudarme? Un millon de gracias!!!

    ResponderEliminar
    Respuestas
    1. Gracias Pablo, no veo puestos los botones que dices, si los has tomado de alguna entrada de aquí deja el comentario en esa entrada, de ser posible haz una captura con la publicidad que mencionas, pues hasta donde recuerdo ninguno de los botones que he publicado tienen alguna publicidad.

      Feliz año!

      Eliminar
  58. Hola potro de considero un genio de blogger por lo que te pido esto un tutorial que le hace mucha falta a quienes tienen menus muy largo y tambien apra evitar poner el scroll un paginador jquery pero no lo se poner para blogger quisiera saber si podrias hacer un tutorial de como poner este paginador y poner cualquier html dentro de el o poner la lista de enlaces un que sea espero me puedas ayudar te dejo aqui el tutorial que no entendi

    http://andyplus.com/paginador-jquery-sweet-pages/

    espero lo agas es muy pedido y gracias desde ya

    ResponderEliminar
    Respuestas
    1. Gracias Sasuke Uchiha, lo dejo en los marcadores para probarlo más adelante y publicarlo si logro hacerlo en Blogger :)
      Saludos!

      Eliminar
  59. FELIZ NAVIDAD POTRO Y UN MEJOR AÑO 2013.

    ResponderEliminar
  60. Feliz Navidad Potro y un mejor año 2013.Gracias por estar siempre ahí y tu amabilidad.te deseo de corazón lo mejor y te agradezco tu trabajo.un abrazo

    ResponderEliminar
  61. hola postro, primero que todo feliz navidad y prospero año :).
    segundo es que poseo un problema y es que cuando publico algun post de mi blog en facebook no me muestra la imagen en miniatura sabes a que se deba este problema?

    ResponderEliminar
    Respuestas
    1. Gracias Ero Krlox, igualmente!
      Quizá debas añadir metas para Facebook, y añadir microdatos:
      http://vagabundia.blogspot.com/2011/07/optimizar-las-etiquetas-meta-para.html
      http://www.oloblogger.com/2012/04/microdatos-schema-en-plantillas-blogger.html

      Eliminar
  62. Potro Gracias por todos los aportes q haces a los bloggeros.... :) ahora disculpa q me meta pero tengo una urgente pregunta..... esta es la pagina q estoy tratando de hacer http://www.maryinova.com/ pero quisiera poder mostrar las entradas grandes sin esas letras q aparecen, como para dejar solo 1 entrada con una imagen de bienvenida y ya.... me puedes ayudar.?? a ver q linea de código debo borrar o modificar :) gracias

    ResponderEliminar
    Respuestas
    1. Hola Semaul, mira esta entrada para que veas cómo quitar el Leer más:
      http://ciudadblogger.com/2011/07/quitar-el-leer-mas-automatico-en-las.html

      Eliminar
  63. Hola Potro!! Felices fiestas!!!
    es la primera vez que te escribo, pero te sigo de hace mucho, me ayudas muchísimo en el Blog, te invito a verlo y darme tu opinión, es un poco de todo, porque es como la continuación de mi pagina de facebook , bueno ya te dejare saluditos mas a menudo, porque siempre ando por aquí, saludos y Feliz año nuevo!!!
    http://lau-lau-poramarteasiblog.blogspot.com.es/

    ResponderEliminar
  64. Por cierto no se porque cuando pongo la tarjeta de navidad solo me salen las letras, las bolas no :( no se porque , añadi un elemento Html y agrege el codigo :( porfa si puedes miratelo , lo dejo puesto http://lau-lau-poramarteasiblog.blogspot.com.es/, gracias ♥

    ResponderEliminar
    Respuestas
    1. No vi puesta la tarjeta lau :(
      Pero muchas gracias por tu comentarios, qué bueno que te has animado a dejar tu opinión :)
      ¡Feliz año!

      Eliminar
  65. Hola Potro, tengo una duda que no tiene que ver con el post, a ver si me la puedes solucionar.
    Quiero poner debajo de la caja de comentarios de las entradas un aviso como el que tienes tú 'Si tu blog contiene...' ¿cómo podría hacerlo? Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Ash_Teleco, yo lo he puesto arriba de:
      <!-- navigation -->
      <b:include name='nextprev'/>

      Eliminar
    2. He probado el style y aviso que tú tienes para ver si me salía. Lo he puesto donde me has dicho pero solo me aparece en el inicio del blog, debajo de todos los posts y dentro de las entradas no sale. Cómo puedo hacer para que aparezca solo dentro de las entradas, debajo de la caja de comentarios¿? Vamos, igual que tú. Gracias.

      Eliminar
    3. Pues yo lo he puesto justo en ese lugar, pero uso condicionales:
      http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

      Eliminar
    4. He probado con los condicionales y nada. Cuando no pongo ninguna condición solo me lo muestra en la portada del blog, ni dentro de las entradas ni nada, únicamente en la portada.
      Y cuando le pongo algún condicional no me lo muestra en ningún sitio :S ¿Qué estoy haciendo mal o qué falla? Muchas gracias por la ayuda.

      Eliminar
    5. Al final he podido ponerlo, solo que he colocado el código en otro lugar. Justo debajo de:

      ...class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>...

      Eliminar
  66. hola potro, tengo una duda, nada que ver con ete tema, mi problema es que le puse otra plantilla a mi blog pero esta en los temas tiene compartir en dig etc y quiero poner facebook y twitter, ¿como le ago?
    mi blog es
    http://dark-movil.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola blaster, supongo que puedes quitar esos y poner estos:
      http://ciudadblogger.com/2009/06/poner-marcadores-sociales-en-blogger.html

      Eliminar
  67. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Por ahora no lo publicaré, será hasta que lo pruebe y una vez que tenga un poco de tiempo, ahora tengo pendientes otras entradas.

      Saludos!

      Eliminar
  68. Potro tengo un problema , bueno lo que pasa es que en el menu de mi web , bueno puse tantas paginas que no me cavieron , bueno te dejare una imagen para que vea mejor http://img607.imageshack.us/img607/9415/probleman.png

    no es algo tan dificil , creo que solo seria bajarle el tamaño de font pero no entiendo el codigo html , esto no tardaria mucho , pero como desconosco tu agenda tu le puedes poner fecha , Gracias

    ResponderEliminar
    Respuestas
    1. El error no sé porqué salga, revisa el menú y mira si todas las etiquetas UL y LI están debidamente cerradas.
      Si quisieras cambiarle el tamaño de la fuente puedes hacerlo en esta área:
      .menu-secondary li a{color:#D7D7CE;padding:19px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif;margin:0 0 0 4px}

      Eliminar
  69. Tengo otra duda Potro. Hay alguna manera de hacer que las reacciones a los posts solo aparezcan al entrar en cada post¿? Es que ahora me aparecen también en la portada, debajo del resumen de cada post, antes de entrar.

    ResponderEliminar
    Respuestas
    1. Igual, usa condicionales, localiza el código de las reacciones y enciérrala en la condicional. Éste es el código de las reacciones:

      <span class='reaction-buttons'>
      <b:if cond='data:top.showReactions'>
      <table border='0' cellpadding='0' width='100%'><tr>
      <td valign='center'><span class='reactions-label'>
      <data:top.reactionsLabel/></span>
      </td>
      <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
      </tr></table>
      </b:if>
      </span>

      Eliminar
  70. Potro te deseo que tengas un feliz 2013, de verdad

    ResponderEliminar
  71. Potro, gracias por to lo que nos enseñaste este año y que este 2013 te traiga mucha salud, paz y alegrias ... lo demas con master card .... jijijijiji ... cariños y brindemos chin chin:-)

    ResponderEliminar
    Respuestas
    1. Jajaja, me encanto el sonido del brindis :D
      Feliz año!!!

      Eliminar
  72. Men no tengo palabras como agradecerte xD , si el problema era que estaba mal cerrado el codigo y claro le baje a la fuente , el dia que me paso el problema hasta pense en no hacer la pagina pero tu reviviste mis esperanazas , de verdad muchas gracias y Feliz Año nuevo :D

    ResponderEliminar
  73. Men no tengo palabras como agradecerte xD , si el problema era que estaba mal cerrado el codigo y claro le baje a la fuente , el dia que me paso el problema hasta pense en no hacer la pagina pero tu reviviste mis esperanazas , de verdad muchas gracias y Feliz Año nuevo :D

    ResponderEliminar
  74. Hola Potro, gracias por pasar por el Blog, la tarjeta la quite porque como te decía solo se veian las letras y quedaba muy vacía, estuve probando pero ni modo, las bolas no aparecian, :( igualmente gracias por todo, sigo aplicando cosillas, besitos

    ResponderEliminar
  75. potro te molesto de nuevo con una duda que me esta matando se trata de una lista de capitulos que tengo en mi blog kyubi anime que te lo apse anterior mente la entrada es /2012/04/naruto-shippuden-capitulos.html
    veras tengo esa lista y pues todas con background pero se ven tranparentes y hoy por un error se me desarmo la plantilla la buena noticia es que que hay si se veia el background pero tube que arreglar la plantilla y ya no se vieron alguna sugerencia de lo que pasa ?

    FELIZ 2013 Y QUE CIUDAD BLOGGER CREESCA AUN MAS ;)

    ResponderEliminar
    Respuestas
    1. Gracias Sasuke Uchiha :)
      ¿Cuál debería ser el fondo que se tendría que ver? porque yo veo la lista con unas líneas azules, luego al pasar el cursor sobre los títulos se pone el fondo color verde (como tipo verde turquesa), pero no sé exactamente cuál debería ser el fondo que se debería mostrar, ni qué código estás usando para dicho fondo.

      ¡Saludos!

      Eliminar
    2. bueno el codigo es .videos4

      y bueno viste que cuando le pasaste el cursor cambio de color bueno pero el fondo de ese menu es verde claro u cuando lo pasas al cursor se ase el verde que viste pero como veras es blando o mejor dicho tranparente yo creo que ser por que tengo una imagen como fondo del body se llama cabezerapr8 la imagen espero quete sirba para poder ayudarme

      Eliminar
    3. Ok, ok. Lo que sucede es que tienes un estilo que indica que todos los enlaces deben tener un fondo transparente, por eso no hace caso al fondo de esa clase. Para resolverlo busca la línea background:#cbe9f8; que está dentro de .videos4 a{ y cámbiala por:
      background:#cbe9f8 !important;

      Eliminar
  76. Hola amigo, me entere de esta aplicacion de facebook, me podrias decir si se puede usar en blogger o solo es para paginas web.
    http://developers.facebook.com/docs/plugins/registration/

    SI hay forma de usarlo en blogger, porfavor explicanos o sino ayudanos para usarlos en joomla. Gracias.

    ResponderEliminar
    Respuestas
    1. No conozco el plugin, pero después le daré una revisada para ver cómo funciona y si es que podría ser útil en Blogger.
      Saludos.

      Eliminar
  77. Buenos días. En primer lugar felicitar al creador del blog, para nosotros es una gran ayuda.

    Quería hacerte una preguntilla a ver si sabes como solucionarla. Quería saber si hay alguna manera para poner una imagen en un comentario, de manera que aparezca la imagen como tal, no la URL, ni un enlace. Aquí lo explica un poco mejor: http://www.davidairey.com/how-to-insert-an-image-or-photo-into-your-blog-comment/#comments

    (Pd: Yo tengo las vistas dinámicas de blogger.)
    Muchas gracias y felices fiestas

    ResponderEliminar
    Respuestas
    1. Gracias Mario. En Vistas Dinámicas no creo que puedas añadir nada de eso, en cualquier otra plantilla sí, aunque me parece que no funciona bien para quienes usan comentarios anidados:
      http://ciudadblogger.com/2009/05/imagen-en-el-formulario-de-comentarios.html

      Eliminar
  78. Feliz año nuevo 2013!!!
    atento a tu ayuda sobre lo nuevo Seorimícuaro visita:
    http://cinenewscine.blogspot.com/2013/01/seorimicuaro.html
    porfavor!

    ResponderEliminar
  79. Nunca escribo aquí, pero.... FELIZ NAVIDAD, POTRO!!!!!!!. Gracias a tí y a tus trucos me está quedando un blog de lujo. Todo el mundo me felicita y quiere saber cómo lo hago.

    Espero que tengas un Feliz Año Nuevo y que todos tus deseas se hagan realidad. Un millón de gracias por todas y cada una de tus aportaciones.

    ResponderEliminar
    Respuestas
    1. Muchas gracias Mary, y qué gusto que te has animado a comentar :)

      Eliminar
  80. Potro, mira este blog tiene medio foro de ayuda!
    http://blog.nguoiaolam.net/p/f.html
    contactame en mi correo:
    ruddy_roman@hotmail.com

    ResponderEliminar
  81. El Potro queda muy bien! te felicito.
    Aprovecho para preguntarte una duda quiero poner mas a la derecha el buscador de mi blog y nose como, mi blog es este: http://noticiapples.blogspot.com.es/

    ResponderEliminar
  82. es que hace poco puse mas ancho el blog y tuve que cambiar todo!! pero algunas cosas se han quedado asi, no esta mal pero tampoco esta perfecto.el slidebar se ha quedado como el buscador se puede centrar un poco mas?

    ResponderEliminar
    Respuestas
    1. Lo que puedes hacer es alargar más hacia la derecha el buscador modificando el -220px que está dentro de #topsearch #search (por ejemplo en -245px) pero, también tendrías que mover el ícono del buscador, eso lo harías aumentando el width que está dentro de #topsearch #s

      Eliminar
  83. nada solucionado el problema que te comente ayer siento las molestias

    ResponderEliminar
  84. Hola Potro mira estaba mirando mi plantilla nueva descargada y vi esta trozo de html y veo que es un boton pero como hago para que aparezca en la plantilla o para que sirve (supongo que para algo si esta en la plantilla). GRACIAS...

    .selectt {
    border: 0;
    height:25px;
    padding:5px 0px;
    width:80px;
    background:url(http://3.bp.blogspot.com/-ULh34D47los/UM1Us71HGwI/AAAAAAAACm8/UtSMGpeSuKw/s1600/drop.png);
    overflow: hidden;
    float:left;

    ResponderEliminar
    Respuestas
    1. Parece que es de algún menú, mira la URL de la imagen que está en ese código e identifícala en tu plantilla.

      Eliminar
  85. Hola Potro, que significa este codigo que encontre en uno de mis post...
    será que me quieren perjudicar o yo lo agrege sin querer

    wrchoverdiv
    wrccontainer
    wrcflags
    wrcicon




    saludos espero me puedas ayudar

    ResponderEliminar
    Respuestas
    1. Tal vez lo añadiste sin querer, parecen ser IDs o clases de algún elemento de la plantilla (de la tuya o de otra).

      Eliminar
  86. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. No tengo idea de cómo se haga :(

      Eliminar
    2. Potro no se porq extraña razon, cuando cambio a 960 el banner se corta a la mitad :(

      Eliminar
    3. Entonces pon un valor más grande, tienes que jugar con los valores hasta que encuentres la medida deseada.

      Eliminar
  87. Potro Gracias por la ayuda!!!! espero tengas un muy buen año !!!!!! :) jejejejej ahora como siempre quisiera preguntarte algo.... es q le cambie el tamaño a la cabecera de mi pagina a 9000 pero con eso ahora tambien quedo un graaaaannnn espacio al margen derecho.... como lo quito? gracias http://www.maryinova.com/

    ResponderEliminar
    Respuestas
    1. Gracias MaryiNova, 9000px es demasiado, no hay monitores cone sa resolución, así que no hay necesidad de poner ese valor, con 960px debería ser más que suficiente.

      Eliminar
  88. Hola, tengo una consulta que hacerte. En mi blog utilizo el gadget del buscador de google y me gustaría personalizar el cuadro de los resultados de búsqueda y la pestaña que dice "Este blog", ¿sabrías decirme qué códigos debo utilizar? Lo único que quiero es quitarle los bordes que se ven bastante antiestéticos...

    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Jorge, después haré una entrada completa sobre ello, basicamente son estas áreas las que se modifican:
      #uds-searchControl .gsc-tabhActive {
      background-color: #fff !important;
      color:#000 !important;
      }

      Esa es la pestaña, y esto el contenedor de abajo:
      #uds-searchControl .gsc-results {
      background-color: #fff !important;
      color:#000 !important;
      }

      Eliminar
    2. Muchas gracias, esos estilos funcionan perfectamente. Estaré esperando la entrada completa, así me entero de todas las opciones para personalizarlo.

      Eliminar
  89. Potro, si en mi blog, yo tengo publicidad de adsense... ¿Puedo poner publicidad de otras webs?

    ResponderEliminar
    Respuestas
    1. Sí, siempre y cuando los demás blogs también cumplan con las políticas de AdSense.

      Eliminar
    2. No se si me has entendido bien.

      Mira, si tengo publicidad de adsense, ¿me penalizarán por poner publicidad de Exponsor?

      A que te refieres con que cumplan los otros blogs las normas?
      Que otros blogs?

      Eliminar
    3. Y otra cosita Emilio, ¿Como puedo subir mi web a yahoo?

      Eliminar
    4. Y otra cosita Emilio, ¿Como puedo subir mi web a yahoo?

      Eliminar
    5. No soy Emilio, aun así no sé a qué te refieres con subir tu web a Yahoo.
      En cuanto a lo otro, puedes usar distintos sistemas de publicidad junto con AdSense siempre y cuando esos sistemas de publicidad también cumplan con las políticas de AdSense (que no muestren anuncios de casinos, pornografía, etc.)

      Eliminar
    6. Ok, respecto a lo de subir a yahoo. Me refiero a que cuando busco en Yahoo mi web aparezca...

      Eliminar
    7. Mira esta entrada:
      http://ciudadblogger.com/2009/04/da-de-alta-tu-blog-en-los-buscadores.html

      Eliminar
  90. Feliz Año 2013 Potro, que en este nuevo año puedas lograr todas tus metas y que tengas exito en todo.

    Potro solo queria sugerirte si puedes hacer un articulo sobre el disavow links Tool, y como incrustar este codigo en el blog o como usarlo, me hablaron en chino y no entendi nada.

    Bendiciones abundantes

    ResponderEliminar
    Respuestas
    1. A mí también me suena a chino, pero ya leeré con tiempo de qué se trata porque no estaba enterado de ello.
      ¡Feliz Año para ti también!

      Eliminar
  91. Potro, que tengas un hermoso año y estoy totalmente agradecida por conocer personas como vos, que desinteresadamente comparten lo que saben con los demás! Te mando un beso grande!!!

    ResponderEliminar
  92. amigoo desde hace tiempo sigo tu blog y y he implementado muchos de tus trucos a mi blog tambien editado a mi gusto xD
    me gustaria que te pasaras por mi blog: http://noticiapples.blogspot.com.es/ y si me puedes ayudar en como puedo centrar la cabecera de mi blog, el titulo TT

    Saludos crack!

    ResponderEliminar
    Respuestas
    1. Es que tienes la cabecera dividida, necesitas quitar la segunda cabecera, o poner su ancho en 0%
      http://ciudadblogger.com/2010/08/dividir-la-cabecera-del-blog.html

      Eliminar
  93. Hola Potro,

    Oye se que esto no va aquí, pero es urgente, ha pasado algo con Blogger? me han desaparecido varios cambios que había puesto como las entradas tipo Magazine o el boton de google+1, y ahora no me sale ni el leer más tan siquiera que ya lo tenía de antes.

    Intente cerrar el feed, pero no sirvio de nada y los codigos siguen en principio en su sitio....

    Sabes algo? o puedes echarle un vistazo please?

    ResponderEliminar
    Respuestas
    1. Hola Weed I, no he sabido de alguien más con un problema similar, quizá eliminaste algo sin darte cuenta, o algún otro administrador del blog (en caso de que lo haya).

      Eliminar
  94. no, no he podido centrar el titulo quizas se deba a que es una imagen porque he buscado el link de la imegen en la plantilla y no aparece ni expandiendo la plantilla de artilugios.

    ResponderEliminar
    Respuestas
    1. Hola de nuevo, usa el botón "Responder" para que todos tus comentarios se agrupen en un solo hilo y no estén dispersos ;)

      La cabecera sigue estando dividida, mientras esté así no la podrás centrar, necesitar quitar esa segunda cabecera y que la primera ocupe el 100% del ancho. Una vez que hagas eso entonces a la primera cabecera (#header) le puedes aplicar un margen izquierdo, por ejemplo:

      #header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:100%;overflow:hidden; margin-left: 300px; }


      Eliminar
  95. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. En Blogger veo difícil que puedas hacer algo así, puedes usar una plantilla que muestre las fotos tipo magazine, pero con los botones debajo lo dudo :/

      Eliminar
  96. Hola potro el tema que estoy tocando es diferente con el que tu tienes en este post bueno mi pregunta es si tu tienes algun tutorial de como hacer señales de tv como en este blog redzer.tv o si no lo tienes talves subas uno gracias de ante mano

    ResponderEliminar
  97. hola potro mi pregunta es si tu tienes algun post de como hacer señale de tv como en esta pagina redzer.tv

    ResponderEliminar
    Respuestas
    1. No he podido ver a qué señales te refieres, pero usualmente usan tabviews:
      http://ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html

      Eliminar
  98. Potro, nunca comento, pero en serio MUCHISIMAS GRACIAS por todo lo que publicas en este pagina, demasiado buena gente como pocos :D feliz años y mucho éxito para siempre, te escribia para agradecerte nada más y dar un pequeño tip, que es revisar bien la publicacion una vez guardada por que pasa que a veces no se graban todos los codigos, me ha pasado mucho en estos dias asi que es de estar pilas con eso, gracias nuevamente y segui adelante maestro

    ResponderEliminar
    Respuestas
    1. Muchas gracias El Cynico :)
      Si te llega a pasar eso nuevamente intenta eliminar cookies y caché del navegador, o bien, prueba con un navegador distinto.
      Saludos!

      Eliminar
  99. Muy feliz año, de otra que suele pasar por aquí, pero nunca comenta...
    Con lo desastre que soy yo para el tema blogger, he de decirte que eres de eres de gran ayuda, el blog es estupendo !
    Saludos:))

    ResponderEliminar
  100. Woow Potro!... Muy bueno, me encantan las maravillas que se pueden lograr con CSS, creo que tendrías que hacer nos post o al menos uno explicando algunos "efectos" que pueden hacerse con CSS, como zoom en los elementos, ese fantástico efecto en el fondo. Geniales, y no son pesados como un flash... jajja
    -Saludos

    ResponderEliminar
    Respuestas
    1. Tienes toda la razñon Fatii, poco a poco iremos viendo todo eso :)

      Eliminar
  101. Hola Potro ¿Como está usted? he mandado varios saludos y usted ni caso ehhh!!!! :) bueno solo pasé a saludar ...abrazos
    p.d. no es necesario que lo publiques con que lo leas me conformo... besitos

    ResponderEliminar
    Respuestas
    1. Pero, pero, pero, soy un despistado :(
      Gracias por acordarte siempre, otro abrazo y beso para ti.

      Eliminar
  102. :) Saludos Querido Potro...
    Gracias por el abrazo y el beso .

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger