Aumentar el título del blog o imagen de la cabecera al pasar el cursor

30 de noviembre de 2011 219 comentarios ,
Esto de las transiciones con CSS3 es algo que a todos encanta por la variedad de efectos que podemos obtener y sin necesidad de utilizar ningún script, todo es CSS.
Uno de estos efectos que me han preguntado es cómo hacer para que la imagen de la cabecera (o el título del blog en caso de que no tengamos imagen) pueda aumentar al pasar el cursor con este efecto suave y deslizante.







Primero hay que procurar tener la imagen en un tamaño grande, esto es para que no se pixele al aumentarse. Con esto quiero decir que si por ejemplo, la imagen de la cabecera aumentará a 400px de ancho entonces el ancho original de la imagen debe ser de 400px o más.

Luego, hay que saber las medidas que tendrá la imagen cuando esté pequeña, para eso tendremos que sacar las medidas proporcionalmente para que no se desproporcione al reducirla (¿ves? te dije que algún día te serviría)

Ahora sí, entra en la Edición HTML de la plantilla y agrega antes de ]]></b:skin> lo siguiente:
#header img {
width:200px; /* Ancho de la imagen en su estado normal */
height:200px; /* Alto de la imagen en su estado normal */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header img:hover {
width:400px; /* Ancho de la imagen al pasar el cursor */
height:400px; /* Alto de la imagen al pasar el cursor */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Cambia los valores de width y height, width es el ancho de la imagen, y height el alto, en color verde verás a cuál corresponde cada una.
Si lo crees conveniente puedes agregar unos márgenes para que la imagen no parezca que se va hacia la derecha, es decir, que dé la impresión que el zoom es desde el centro, para ello agrega debajo de #header img:hover { esto:
margin-top:-10px;
margin-left:-30px;
Puedes jugar con esos valores hasta que des con los correctos.

Pero si no usas una imagen como cabecera entonces también puedes aplicar este efecto al título del blog.


Nombre de mi blog




El procedimiento es similar; agrega antes de ]]></b:skin> esto:
#header h1 {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header h1:hover {
font-size:80px; /* Tamaño del texto al pasar el cursor */
color:#FF00FF; /* Color del texto al pasar el cursor */
margin-left:-30px; /* Margen izquierdo */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
Aquí es menos complicado pues no tienes que saber las medidas de ninguna imagen, sólo debes poner el tamaño de la fuente que tendrá el título del blog al pasar el cursor. Aunque por supuesto puedes agregar ahí otras propiedades como un color diferente, y también puedes usar los márgenes para que el texto se aumente desde el centro, pero si no quieres estas dos últimas opciones puedes eliminarlas sin problema.

Y así de sencillo puedes tener tu cabecera del blog con efecto de zoom al pasar el cursor, aunque, lamento desilusionar a los usuarios de Internet Explorer pues ellos no verán ningún efecto de deslizamiento. Otra razón más para usar un navegador moderno.




219 comentarios en:

" Aumentar el título del blog o imagen de la cabecera al pasar el cursor "

  1. Hola Potro q bien que hayas compartido es truco con nosotros lo empleare en alguno de mis tanto blogs...GRACIAS por no ser egoísta y compartir ese truco con nostros...!!!Gracias eres lo máximo en Blogging....!! :)

    ResponderEliminar
    Respuestas
    1. Aplicado... www.fanaticoweb.net

      Revisad amigos y hacer sugerencias.. gracias!

      Eliminar
  2. excelente me encata buen aporte salu2 y q stes super mega genial buen dia
    bye

    ResponderEliminar
  3. Lo implementaré gracias potro! lastima por los que no actualizan sus navegadores, en fin se lo pierden :D

    ResponderEliminar
  4. me encanto el sistema!pero me gustaría en realidad aumentar el titulo del post al pasar el puntero por encima es posible? saludos amigo excelentes los trucos! se agradece desde ya.

    ResponderEliminar
  5. Buenísimo truco Potro y tu blogg esta que impresiona
    Saludos

    ResponderEliminar
  6. Algo raro, lo implemento y cuando se da el zoom todo normal, pero cuando va a regresar a su estado normal cambia de golpe y no va lento como los ejemplos, uso Chrome y tus ejemplo van normal pero con mi logo no sucede lo mismo, intente cambiar los segundo pero nada.

    ResponderEliminar
  7. Me Gusta Pero Ademas De La Imagen De Perfil Tambien Se Puede Con Otras Cierto?

    ResponderEliminar
  8. Potro VIENES REMASTERIZADO!!!

    EXCELENTE PLANTILLA
    HERMOSO BLOG
    YA PUBLICAS MAS SEGUIDO* ESO CREO


    ;D FELICIDADES Potro(; atte:

    ZoneGeek!

    ResponderEliminar
  9. Instale para titulo sin imagen pero no me funciona U.U mi web es http://smithzhito.net

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

    ResponderEliminar
  11. Gracias a ti por tu comentario Mauricio Vargas Garcia, y por supuesto que les seguiré compartiendo lo que sé y aprendo, de eso se trata este blog ;)

    ResponderEliminar
  12. Gracias Lady Pink, buen día también para ti :)

    Tú lo has dicho Delzon Perez, ellos se lo pierden, jojo :D

    ResponderEliminar
  13. Claro que se puede NOTI Q-LOS. Si quieres que este mismo efecto se aplique a los títulos de las entradas entonces el código que debes agregar antes de ]]></b:skin> es este:

    .post h3 {
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    .post h3:hover {
    font-size:30px; /* Tamaño del texto al pasar el cursor */
    color:#FF00FF; /* Color del texto al pasar el cursor */
    margin-left:-20px; /* Margen izquierdo */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }

    ResponderEliminar
  14. Gracias Potro, fantástico como siempre... ya te lo dije por facebook, pero te lo repito aquí... magnífico el cambio de look del blog, está muy muy guapo, felicitaciones amigo

    ResponderEliminar
  15. Gracias Jhonnysan, saludos!

    Juanko, ¿has colocado el código completo?, ¿en cuál blog lo has puesto?

    ResponderEliminar
  16. Jayzul El Blanco, por supuesto, el método es el mismo, lo único que cambia es el ID o nombre de la clase del contenedor de la imagen o de la imagen misma, pero en esencia es lo mismo.

    ResponderEliminar
  17. Chico del Cereal, publicaría más seguido si tuviera más tiempo, creo que terminaré clonándome :D
    El listón rojo es porque el 1 de diciembre es el Día Mundial de la Lucha contra el Sida.

    Saludos y gracias por tu comentario!

    ResponderEliminar
  18. SmiThzhiTo, es porque estos códigos son para plantillas originales de Blogger, o plantillas que conservan los nombres originales de los elementos.
    En tu caso cambia #header h1 { y #header h1:hover { por:
    .title h1 { y .title h1:hover { respectivamente.

    ResponderEliminar
  19. Muchas gracias MaGoS RaDioMuSiC, me siento muy elogiado últimamente :)
    Un abrazo!

    ResponderEliminar
  20. Bueno nada Potro otra vez por aquí, ampliando mis conocimientos en blogger gracias a ti y personas como tu, este post funcionando solo que el color no cambia le implemente este color #80FF00; y no cambia de color al pasarle el ratón, y en los títulos de los post también lo implemente queda chulo, gracias... Mirad
    The Genuine
    http://www.the-genuine.com/

    ResponderEliminar
  21. Me ha servido de nuevo Potro :), está muy bien el diseño de tu web .

    Saludos

    ResponderEliminar
  22. Genial muchas gracias!

    ResponderEliminar
  23. hola potro ha quedado impresionante ciudad blogger, te felicito eres un genio.

    ResponderEliminar
  24. Hola The Genuine,

    No hay problema, puedes forzar que se haga el cambio del color, sólo cambia esta parte:
    color:#80FF00; /* Color del texto al pasar el cursor */

    Por esta:
    color:#80FF00 !important; /* Color del texto al pasar el cursor */

    ResponderEliminar
  25. Gracias, le iba a preguntar sobre eso antes, pero veo que se ha adelantado!

    Potro Saludos!

    ResponderEliminar
  26. Jose Antonio Marin Arcas, qué gusto que ha sido útil :)

    NOTI Q-LOS, gracias a ti por tu visita!

    ResponderEliminar
  27. Gracias Potro!

    Pero tengo un Pequeño Problema...Me gustaria emplearlo, pero en los Titulos de mis entradas, y buscando y buscando en los Comentarios encontre esto: "En tu caso cambia #header h1 { y #header h1:hover { por:
    .title h1 { y .title h1:hover { respectivamente."

    Hago eso, pero reemplazo por el caso de mis Titulos y no sucede Nada =(

    Por favor Maestro, si me pudiera dar una Mano!

    Mi Web: Zonadvdlatino.net

    ResponderEliminar
  28. HOLA POTRO:
    No me funciona.
    http://franciscoadame.blogspot.com

    ResponderEliminar
  29. Nota:
    Tengo el titulo la cabecera de mi blog en otro lugar distinto a la fijada por la plantilla. No se si es posible agregar el efecto en este caso.

    ResponderEliminar
  30. Gracias lerh, pensé que a nadie le gustaría la plantilla y el nuevo logo pero parece que me he equivocado :)

    ResponderEliminar
  31. Y como se hace ese efecto del poloshit que gira en ese circulo mamai en la pagina principal de ciudadblogger, esta chulisimoooo

    ResponderEliminar
  32. Hi!
    Aiko Kimura reportándose.

    Potro, eres lo máximo. xD Así de simple. ¡Me encantó el efecto! Lo pondré en práctica pero ya.

    Hace un tiempo que estoy viendo el nuevo diseño y me encanta. Se ve... ¿moderno? Algo así. El nuevo logo me gusta, pero aún siento cierto apego por el anterior, la costumbre y todo eso; ya sabes xD.

    :3 Como siempre, gracias por todo lo que haces. ¡Ídolo, no mueras nunca! xD.

    Te cuidas y todo eso.

    Aiko-chan se retira;
    Bye!

    ResponderEliminar
  33. Muy lindo efecto!
    Una consulta Potro. En las entradas individuales de mi blog queda el icono de los comentarios: http://dl.dropbox.com/u/4349555/ocultar.PNG eso pasa en Firefox, Opera e IE. Cómo lo oculto?

    ResponderEliminar
  34. .:R.G.F:., por nada :)

    Admin, en tu caso cambia #header h1 y #header h1:hover por:
    .post h1 y .post h1:hover

    ResponderEliminar
  35. FRANCISCO, pero si tienes una imagen en lugar del título entonces no debes usar el código que es para aumentar el título, sino el código que es para aumentar la imagen.

    Xander Reyes, después, con más tiempo iré explicando todos los detalles ;)

    ResponderEliminar
  36. Perfecto Potro, este me funciona a la perfección. Este tipo de cosas no es que aporten mucho a una web, pero si que son matices que la mejoran en su diseño. Yo estoy más intrigado por el menú de categorías que pusiste o por las flechas para subir y bajar en la página que en el caso de tu web es muy útil cuando hay muchos comentarios en una entrada. Como siempre gracias por tus aportaciones, y por seguir enriqueciéndonos con tu conocimiento.

    ResponderEliminar
  37. Hola Potro:
    Ya lo hice y no ubicaba la ampliación en el lugar deseado sino en lugar que debería ir según la plantilla. La ampliación la hace en el lugar de días contabilizados.
    Tengo puesto ampliación de letras para ampliar el contador de dias y tampoco funciona.
    Un Saludo

    ResponderEliminar
  38. haz un Tutorial de como agregar la barra social, como en este blog al final de la entrada:

    http://btemplates.com/2011/blogger-template-hector/demo/

    ResponderEliminar
  39. Buen efecto. Pero, si en nuestro header tenemos texto en lugar de una imágen, ¿Se puede aplicar este efecto?

    Saludos.

    ResponderEliminar
  40. Comento dos cosas:

    Este truco no me funciona, aunque tampoco lo quiero para nada xD

    La segunda: el nuevo logo me gusta mucho, pero la plantilla no me acaba de convencer. Aunque lo importante es que te guste a ti.

    Saludos.

    ResponderEliminar
  41. La plantilla de antes era más atractiva.

    ResponderEliminar
  42. Aiko Kimura, me pasa lo mismo, como que por ratos extraño el otro logotipo, y es que tenerlo poco más de dos años sí que se acostumbra uno, pero pasará lo mismo con este, ya nos iremos acostumbrando :)
    Gracias por tu amable comentario, que tengas buen fin de semana!

    ResponderEliminar
  43. Pozo+10™, enciérralo en una condicional para que no se muestre en las entradas individuales:
    http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

    ResponderEliminar
  44. Bunbury España, concuerdo contigo, no es que sea algo útil, pero en ciertos blogs ayuda en cuanto a la presentación. Gracias por tu comentario!

    ResponderEliminar
  45. Hola potro, tengo un gadget debajo de la cabecera del blog de diferentes secciones.

    Me gustaría saber si se le puede aplicar este efecto de aumentar cada uno de los nombres al pasar el cursor.
    Si quieres echar un vistazo: revistaab.blogspot.com

    Gracias por tu atención.

    ResponderEliminar
  46. Hola, me gustaria saber si tienes un post o donde aprender a conseguir el efecto que utilizas en las entradas.
    Quiero saber como hacer para que las entradas me salgan normales, pero al darle en "Categorias" (mediante etiquetas)salga solo el titulo de la entrada y le pueda dar click para expandirla.

    Gracias

    ResponderEliminar
  47. Hola Potro, me funciona perfectamente en la página de inicio, pero cuando paso el mouse por el título tras haber pinchado una pestaña o una entrada, no funciona correctamente. Se queda como parpadeando sin parar

    Gracias again

    ResponderEliminar
  48. Felicidades por la nueva imagen, Potro :)

    Tengo que decir que este sí es más adoc a Ciudad Blogger.

    Saludos.

    ResponderEliminar
  49. Hola potro esto no es una duda. Bueno la verdad es que tengo un canal de videotutoriales voy a empezar con el tema de css y me preguntaba si puedo usar algunos codigos que tu publicas aqui en tu blog,claro yo te pondre un enlace a tu blog en la descripcion del video como agradecimiento . Bueno espero tu respuesta gracias potro.
    http://youtube.com/toditotutoriales
    PD:¡Te Felicito! Te quedo muy bnn el diseño del blog muy vanguardista principalmente el header ,hasta parece que te pusiste de acuerdo con los de youtube para remodelas sus respectivas paginas al mismo tiempo XD

    ResponderEliminar
  50. FRANCISCO, entonces ya me perdí porque no entiendo qué deseas ampliar. En el blog tienes puestos los códigos para aumentar el título del blog (en texto), pero tu blog no tiene un título en texto sino una imagen, por lo tanto debes usar el primer código, no el segundo. Si es otro texto el que deseas ampliar entonces necesito saber exactamente cuál es para así decirte qué hay que cambiar o qué se debe agregar.

    Saludos.

    ResponderEliminar
  51. sdfsdgdfg, sólo toma una tabla HTML, pones los códigos de los botones que quieres y los colocas debajo del <div class='post-footer'>

    ResponderEliminar
  52. Indeziisoow, yep, en la entrada se explica igual eso ;)

    ResponderEliminar
  53. Lluís Hoffman, las cosas no funcionan por varios motivos, por lo que sería difícil adivinar la razón sino se sabe el cómo, dónde y en qué forma se colocaron los códigos.
    Ciertamente me ha gustado la plantilla, aunque por ratos no me termina de convencer, supongo que es al costumbre ;)

    ResponderEliminar
  54. Potro como cambio el color de fondo de el blog ya que cuando hago un post,el color de la letra no concuerda con el fondo y no se miran las letras por eso kiero cambiarlo!!
    mira aqui

    dlas letras que no se miran por el fondo
    como lo cambio?

    ResponderEliminar
  55. Disculpa por tantas preguntas, espero no incomodarte. Bueno la pregunta es la siguiente, estaba leyendo tu post sobre "entradas relacionadas" y no se en que fallo que se muestra asi: http://texto-2.blogspot.com/2011/12/aqui-va-el-titulo_02.html

    Segui los pasos hasta donde entendi, pero me perdi en la ultima parte donde se agrega a:

    div class='post-footer-line post-footer-line-3
    b:if cond='data:blog.pageType == "item"'
    div class='post-footer-line post-footer-line-4'
    div id='postsrelacionados'
    script type='text/javascript'mostrarrelacionados();pt
    div
    div style='clear:both;
    div
    /b:if

    No se exactamente si hice algo mal o en que falle, podrias darme una manito. Aproposito, en tu blog tienes la opcion "Ir arriba", esto puede aplicarse a cualquier clase agregada al blog? porque por lo que veo al hacer click en este icono me manda al outer-wrapper, se puede hacer algo asi pero para los comentarios o sino un gadget de search box? otra pregunta, se puede condicionar 1 gadget dos veces? es decir que aparesca en la pagina de inicio y este mismo que aparesca en una sola etiqueta predeterminada?

    http://vagabundia.blogspot.com/2011/05/entradas-relacionadas-con-slider.html

    Muchisimas gracias.

    ResponderEliminar
  56. Potro quiero espero que estes bien espero me ayudes lo que pasa que tengo un blog y tengo para que se suscriban por medio de fedburner pero de la forma antigua bueno en si mi problema es que cuando mis entradas llegan alos suscriptores tambien llega mi correo y yo no quiero que llegue mi correo por lo tengo con el nombre real.

    lo que hice fue eliminar ese y poner uno de los nuevos pero quiero saber si las entradas les siguiran llegando amis suscritores del gatget que elimine.

    ResponderEliminar
  57. entonces como hago para que mis entradas no lleguen con mi nombre real de mi correo sera que se puede cambiar el correo o que hago

    ResponderEliminar
  58. matiasascanio, podrías hacerlo si encierras todos los enlaces en un div con un ID, por ejemplo:
    <div id="categorias">

    Y luego cambias #header h1 por #categorias a, y #header h1:hover por #categorias a:hover
    Pero, como son enlaces todos juntos, al agrandarse cualquier enlace empujaría a todos los demás, lo que causaría que se desborden y el efecto en vez de verse atractivo se verá como un completo desorden :/

    ResponderEliminar
  59. Hola Potro, me gusta tu diseño pero creo que le falta algo de chispa:algo de color... no sé qué... (critica constructiva.)
    Queria preguntarte al hilo de tu cambio de imagen que quisiera cambiar alguna cosa del mio por ejemplo la cabecera que actualmente ocupa el ancho del blog y que me gustaria que ocupase, como en el tuyo, la totalidad de lo que vemos en el monitor. Podrias indicarme las medidas adecuadas para eso? Muy agradecido como siempre
    Por cierto esas flechas de arriba/abajo como las has colocado allí?
    Priamo.

    ResponderEliminar
  60. Reno, esta es la entrada que buscas:
    http://ciudadblogger.com/2009/07/mostrar-solo-los-titulos-de-las.html

    ResponderEliminar
  61. Hola Potro, en el zoom para la imagen, viste que vos pusiste otro código para que de la impresión de que no se va para la derecha, yo lo puse pero es como que se me corta la imagen. Sabes como arreglarlo? Muchas Gracias

    ResponderEliminar
  62. Nota: Modifique los margenes, pero se me corta igual :(

    ResponderEliminar
  63. Gorka, posiblemente la plantilla cambia de encabezados cuando se trata de una entrada individual. Había que ver cuál plantilla es para ver si ese es el caso, o saber en cuál blog lo has puesto.

    ResponderEliminar
  64. Que paso POTRO no me respondiastes,mi pregunta esta antes de la de "admin!!

    ResponderEliminar
  65. mexico, claro que sí, no hay problema ;)

    ResponderEliminar
  66. Microboy90, ni siquiera había llegado con Admin, voy respondiendo conforme van llegando los comentarios, disculpa si te hago esperar pero son demasiadas preguntas en todo el blog.
    No mencionas cuál es el blog donde quieres cambiar el color de fondo, pero usualmente eso de hace dentro de los estilos del BODY, debe haber algo así:

    body {
    background:#000;
    ...
    ...
    ...
    }

    Eso que está en negrita es el color de fondo del blog, en este ejemplo es negro.
    Saludos.

    ResponderEliminar
  67. Hola Potro,

    es el blog que viste el otro día:

    www.myclase.blogspot.com

    gracias

    ResponderEliminar
  68. admin, las entradas relacionadas que has aplicado no son las que he publicado yo, es otro método completamente distinto por lo que tendrías que preguntar en el blog donde lo has tomado cualquier duda al respecto.
    Las flechas sí, pueden asignárseles el ID de cualquier otro contenedor:
    http://ciudadblogger.com/2010/01/boton-de-ir-arriba-e-ir-abajo.html

    Se pueden condicionar los elementos varias veces, siempre y cuando estas reglas no se contradigan entre sí:
    http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

    Saludos!

    ResponderEliminar
  69. videosxxx, para que no se muestre tu correo en las actualizaciones que les lleguen entra a tu cuenta de Feedburner, luego en Publicize > Suscripciones por Email > Communication Preferences, y en "Remitente" borra lo que tengas ahí, en su lugar pon:
    noreply@blogger.com

    ResponderEliminar
  70. Muy bueno Potro! Hacia tiempo que no entraba debido a examenes, aun no me acostumbro al nuevo look se ve que te lo has currado ;)
    Un fuerte abrazo!

    ResponderEliminar
  71. tengo un problema acá te lo escribo, espero y me puedas ayudar :)

    http://images.animups.com/problema.txt

    y pues aún tengo la cosa allí...
    aquí puedes ver como está

    http://www.animups.com/2011/12/el-mundo-de-justin-bieber.html

    pero como no tiene javascript no se puede cerrar la imagen, y pues espero que me puedas ayudar en eso... xq si coloco el javascript se cae mi host :(

    ResponderEliminar
  72. Hola Priamo,

    Eso es una "ilusión" pues en si lo que pareciera ser la cabecera es la imagen de fondo del blog, es decir, al fondo del blog le aplicas una imagen que parezca ser la cabecera, de esa forma parecerá que ocupa todo el ancho de la página. Aunque la cabecera en realidad sigue siendo del mismo ancho que el ancho del blog.
    Las fechas sólo hay que ajustar los valores de la imagen, debe haber en ellas un top:0; y un bottom:0; esos valores los cambias por otros por ejemplo top:250px; y top:280px;

    Saludos.

    ResponderEliminar
  73. Hola Dante Mogni,

    Entonces a la imagen, en su estado normal, aplícale un margen para cuando ésta se agrande tenga espacio para moverse:
    #header img {
    margin-left:40px;

    ResponderEliminar
  74. Solamente darte las gracias por tus indicaciones. Un saludo.

    ResponderEliminar
  75. A mí con una imagen muy grande no sirve se queda igual, y claro que he configurado para que se vea más grande.

    Saludos

    ResponderEliminar
  76. El widget que tienes de Respondones no funciona. Porque quizá no le has puesto http:// a la dirección de enlace entonces, por eso aparece, en vez de:

    http://www.respondones.com

    aparece:

    ciudadblogger.com/respondones.com

    Y recalcando anterioro mente por que quizá no contenga el protocolo http://.

    ResponderEliminar
  77. El Potro; muy buena opción de efecto. Muchas gracias!!! lo probaré en mi blog de pruebas para ver si encaja con el diseño del mío.

    Te queria comentar una cosa; en un script que había (no lo logro encontrar ahora) sobre un gadget de pestañas, siempre cuando se carga la página, el script tarda unos segundos en cargar; y se ve muy feo toda la columna. No hay forma de acelearar la ejecucion de scripts?

    ResponderEliminar
  78. Una última pregunta:

    ¿Cómo se aumenta el tamaño de la letra de sólo las entradas? No toda la letra del blog, cómo se puede hacer por el diseñador de plantillas, sino sólo de las entradas

    Al poner bordes a las imagenes, se aplican a todas las imágenes. Tambien a las imágenes de: "envía por correo electronico", "imprimir"... ¿Sabrías cómo poner bordes sólo a las imágenes de las entradas?

    Muchísimas gracias de nuevo

    ResponderEliminar
  79. Muchas gracias por tu ayuda. He conseguido crear un menu desplegable, pero ¿cómo hago para que cuando cree una entrada vaya directamente a la pestaña que quiero? Mi blog es www.risasyletras.blogspot.com. Muchas gracias de nuevo!

    ResponderEliminar
  80. Gorka, aparte de esos que has añadido agrega estos:

    #header h1 a {
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    #header h1 a:hover {
    font-size:80px; /* Tamaño del texto al pasar el cursor */
    color:#FF00FF; /* Color del texto al pasar el cursor */
    margin-left:-30px; /* Margen izquierdo */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }

    ResponderEliminar
  81. Es en este blog POTRO!! kise hacerlo como me dijistes pero hay muchos backgrounds y le cambie a todos pero aun asi no cambia!!

    http://www.peliculasyseries.org/

    ResponderEliminar
  82. Eddy, si te da ese problema mejor quítalo, porque aparte Blogger podría interpretarlo como código malicioso y causaría la eliminación inmediata del blog.
    Me parece que en Oloblogger publicaron la semana pasada una técnica que es igual para mostrar una imagen encima de otro elemento y con opción de cerrar, busca ahí.

    Saludos.

    ResponderEliminar
  83. Perfecto Potro!!! Mil gracias.

    Un saludo majo

    ResponderEliminar
  84. matiasascanio, por nada ;)

    Jose Antonio Marin Arcas, ¿una imagen de la cabecera, o de dónde? ¿y en cuál blog?

    ResponderEliminar
  85. Abraham Santos Fernández, tienes toda la razón, lleva como tres días el banner y ni cuenta me había dado :(
    Muchas gracias por el aviso!

    ResponderEliminar
  86. Jaime, alojando los scripts en la plantilla cargan más rápido, pero si de por sí el script es pesado en tamaño entonces tardará lo que tenga que tardar para que el navegador pueda leerlo. Quizá ayude también un poco si lo pones después de <head>

    ResponderEliminar
  87. Daniel García, supongo que habías usado .post:hover
    En lugar de eso usa .post-body:hover
    De esa manera sólo afecta al contenido de la entrada y no al post-footer u otras áreas.

    ResponderEliminar
  88. Gracias, por responder y sep, buscaré por allí, y gracias por el dato, me daré una vuelta por oloblogger, un saludo y que buen blog, de hecho sólo vengo a tu blog a pedir ayuda, espero no te moleste que ande preguntando alguna otra cosa después, bueno gracias suerte!!

    ResponderEliminar
  89. Hola Ana,

    Necesitas etiquetar tus entradas y enlazar estas etiquetas a tu menú. Aquí se explica cómo se hace:
    http://ciudadblogger.com/2010/06/menu-de-categorias.html

    Saludos.

    ResponderEliminar
  90. Microboy90, ahí no necesitas cambiar el fondo del blog, sólo el fondo de las entradas. Eso puedes hacerlo en esta área:
    .post {background:#222}

    Toma en cuenta que el cambio no lo verás hasta ingresar a una entrada individual.

    ResponderEliminar
  91. QUE ALUSCINANTE ESTA LA CIUDAD!!!! Felicitaciones por la nueva decoración Potro, está super Posh!!! Tal vez ya hayas publicado una nota para agregar íconos de redes sociales, como los que tenés en la esquina superior derecha. Me gustaría poner algo similar en una columna, y liberar espacio. Me pasás el link así no te molesto, porfis? Y please avisá cuando salgan a la venta las camisetas que yo posta quiero una!!! Besotes!!! XoXo :)

    ResponderEliminar
  92. Eddy, en lo absoluto, no importa cuál sea la razón que te traiga aquí, siempre eres bienvenido ;)

    ResponderEliminar
  93. Ok POTRO gracias ,ahora si ya lo cambie!! se agradece tu aporte!!!

    ResponderEliminar
  94. Muchas gracias Macarena, tendré que pensar seriamente en las camisetas porque todo mundo está pidiendo una :)
    Lo de los iconos no lo tengo, bueno, tengo una entrada que habla sobre ellos pero no son exactamente los mismos, no sé si pueda servirte:
    http://ciudadblogger.com/2011/08/agregar-botones-de-redes-sociales-en-la.html

    ¡Besos!

    ResponderEliminar
  95. Potris otra vez me salvaste! Leí tu post, pensé un rato en todos los trucos que me enseñaste acá y mirá como quedó:
    http://chicposh.blogspot.com/
    Ahora tengo un temita, cómo puedo llevar la línea bien hacia la derecha? Ya probé con padding y margin y no hay caso!
    Desde ya mil gracias como siempre!!!
    IDOOOOOLOOOOOOOOOOOOOO!!!!!
    :) XoXo

    ResponderEliminar
  96. Me encanta cómo te está quedando el blog, ahora sí que está quedando muy chic :)
    ¿Cuál línea es la que quieres mover y no se deja?

    ResponderEliminar
  97. muchas gracias potro asi el blog es mucho más fresa!

    ResponderEliminar
  98. Hola Potro, quisiera saber como insertar un menú parecido al tuyo "Inicio,Rede Sociales....." dentro de la imagen de la cabecera y no lo logro. Gracias como siempre

    ResponderEliminar
  99. KENNYFRESA, gracias a ti por tu visita!

    Priamo, después publicaré una entrada sobre ello, no te prometo que sea pronto porque aun tengo otras entradas pendientes pero lo haré ;)

    ResponderEliminar
  100. Potro lo quise aplicar y no me funciona...Me ayudas? y Me gustaria centrar la imagen que coloque de cabecera. se puede? Gracias!!!

    ResponderEliminar
  101. Una duda, ¿Cómo muevo la cabecera del blog hacia la izquierda para que no queden espacios blancos a los lados?
    ¿Cómo hago para que los gadgets no tengan tanto margen y ocupen toda la sidebar?
    Puedes mirar las dos cosas en mi blog: www.desdefondosur.blogspot.com
    Muchísimas gracias de nuevo

    ResponderEliminar
  102. Bren, con gusto pero, ¿en cuál blog lo has puesto?

    ResponderEliminar
  103. Perdon Potro, Me olvide el pequeño detalle ... La cabecera que quiero centrar y aplicarle el efecto es la de "cerquita mio".
    Graciasss

    ResponderEliminar
  104. Potro no pude ni con el titulo ni con las entradas

    Blog: postdesign.blogspot.com

    ResponderEliminar
  105. Daniel García, la cabecera ya ocupa e 100% del contenedor. Lo que puedes hacer es aplicar un margen negativo y hacer más grande la cabecera. Para ello agrega en los estilos esto:

    .header-outer {
    margin-left: -10px;
    width: 990px;
    }

    Lo de la sidebar se ve así porque por ahí estableciste un margen izquierdo que hace que le reste espacio:
    margin-left: 60px !important;

    Tienes que quitarlo para que ocupe el ancho que le corresponde.

    ResponderEliminar
  106. Muchísimas gracias, me funcionó lo de la cabecera.

    La sidebar ya sé que le tenía puesto ese margen, pero era para que se separara del borde izquierdo y de las entradas. Yo lo que me preguntaba era si se podría dejar así y hacer que los gadgets ocupen todo el espacio que hay, sin tener que quitar los márgenes.¿Se puede?

    Por cierto, cómo sabes el número exacto de px que tengo en cada sitio sólo mirando el blog? jaja qué crack! Gracias de nuevo

    ResponderEliminar
  107. Bren, la imagen está centrada, pero lo que veo es que esa no es la cabecera, sino un gadget de imagen, por eso que no te funciona. Para que te funcione cambia los dos #header del código por #Image1

    ResponderEliminar
  108. Potro la imagen que quiero que se agrande si es la cabecera. es el nombre del Blog "Cerquita MIo" No las fotos q estan abajo. Probe lo que vos me decis igual por las dudas, pero se achico la imagen de las fotos, sin embargo no se agranda al pasar el cursor. Raro no?

    ResponderEliminar
  109. Carlos Sz, es porque los títulos de tus posts no son .post h3 sino h2.title
    El de la cabecera no lo veo puesto, veo otros pero no corresponden a tu plantilla.

    ResponderEliminar
  110. Daniel García, no se puede, porque al poner el margen le restas ese espacio a los gadgets. Lo de los pixeles sí, mirando por donde sea :)

    ResponderEliminar
  111. Bren, en esta parte te has comido un espacio:
    #headerimg:hover {

    Debe ser así:
    #header img:hover {

    ResponderEliminar
  112. Gracias Potro! Pero no lo voy a aplicar al final...cambie la cabecera y ahora no va a quedar bien ese efecto me parece...

    ResponderEliminar
  113. Sí he podido ocupar todo el ancho de la sidebar, a pesar de los márgenes que tengo puestos, poniendo: p class="MsoNormal" style="margin-top: 0cm; margin-right: -30pt; margin-bottom: 7.5pt; margin-left: -21.3pt; text-indent: -0.75pt; "

    Una última duda: He puesto cómo "Leer más" una imagen, cómo hago para que cuando pasas el ratón por encima no aparezca el título de la entrada?

    Y por último: He puesto una imagen en la sidebar, pero cuando la intento enlazar a otra página web fuera de mi blog me sale la página dentro del servidor blogspot.com y claro, me dice que no existe. ¿Cómo hago para que me enlace correctamente?

    ResponderEliminar
  114. Quizá al poner la URL del enlace estás omitiendo el http:// que antecede a toda dirección Web.
    Lo del Leer más, ese es el "anchor text" del enlace, no se le puede quitar, y si se pudiera no sería nada recomendable en cuanto a posicionamiento.

    ResponderEliminar
  115. Hola potro me gustaria hacer el efecto de la imagen, pero probe con ese codigo, pero no sirvio, mire el efecto se lo quiero colocar al escudo de la parte superior derecha de esta pagina http://www.institutominca.blogspot.com, le agradezco mucho...

    ResponderEliminar
  116. Hola Javier David,

    Estos códigos son para plantillas originales de Blogger, o plantillas personalizadas que conservan los nombres originales de los contenedores.
    Quizá en tu caso funcione si cambias los #header por .art-headerobject

    ResponderEliminar
  117. NO amigo no me funciono :/, pero GRACIAS :)

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

    ResponderEliminar
  119. Pero encontre el codigo era similar, div.art-headerobject, pero se mueve a un lado xq?

    ResponderEliminar
  120. Porque sólo aplicaste un margen izquierdo, pero no cambiaste al alto y ancho de la imagen:

    margin-top:0px;
    margin-left:-190px;
    width:170px; /* Ancho de la imagen al pasar el cursor */
    height:227px; /* Alto de la imagen al pasar el cursor */

    Si te fijas son las mismas medidas que la imagen "pequeña".

    ResponderEliminar
  121. hola, me interesaria, poner una ristra de imagenes en miniatura en uno de los widgest pero no se. ¿Me puede indicar como hacerlo?

    ResponderEliminar
  122. Hola antonio, sólo agrega un gadget HTML/Javascript, ahí pon el código de las imágenes que quieres. Usa este código por cada imagen que quieras mostrar:
    <img src="URL de la imagen" />

    ResponderEliminar
  123. Hola potro te escribo por una consulta, como lo hago si quiero poner este mismo efecto en un gadget HTML/Javascript ???
    es decir, varias imágenes como un menú vertical(u horizontal, da lo mismo)que al pasar el cursor por sobre ellas se muestre el efecto de agrandar suave y deslizante, y que cada imagen te dirija a una url específica...
    disculpa la pregunta media larga pero ojalá puedas ayudarme =)
    gracias!

    ResponderEliminar
  124. Es igual, si ya tienes tu menú de imágenes sólo encierra todo en un DIV que tenga un ID, luego pon los estilos que harán que tenga el efecto:

    #menu img {
    width:200px; /* Ancho de la imagen en su estado normal */
    height:200px; /* Alto de la imagen en su estado normal */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    #menu img:hover {
    width:400px; /* Ancho de la imagen al pasar el cursor */
    height:400px; /* Alto de la imagen al pasar el cursor */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }

    De todas formas deja preparo un menú de imágenes con este efecto.
    Saludos.

    ResponderEliminar
  125. Esta genial el efecto para agregar Potro, igual antes de hacerlo queria centrar el titulo que ahora lo sistitui por una imagen.
    Lo que pasa que aunque le di alineacion centrado al header no se centra y si lo subo mas arriba se corta la img.
    No se si es que hay alguna section que esta causando ese probloema o como solucionarlo.
    Este es el blog.
    Desde ya muchas gracias Potro.

    ResponderEliminar
  126. Lo que pasa es que tienes la cabecera dividida, así que aunque lo centres se centrará al ancho que ocupa la primera cabecera.
    Si ya no usas la segunda cabecera entonces cambia el width del #header al 100%;
    Luego, aumenta el height del #header-wrapper a 140px;
    Se bajará un poco el contenido, pero será necesario para que se muestre completa la imagen.
    Saludos.

    ResponderEliminar
  127. Muchas gracias Potro ahora si, pero como puedo hacer para que el header quede mas arriba, por lo que veo hay un recuerdo por arriba de el, hay forma de eliminarlo u algo?

    ResponderEliminar
  128. Tendrías que añadir en los estilos:
    .span-16 {display:none;}

    Lo más seguro es que después de hacer eso tengas que aplicar un margen superior al #header-wrapper

    ResponderEliminar
  129. Hola potro, sabes quiero poner este efecto, pero me llevé la sorpresa de que mi plantilla no me permite poner imagenes o editar el titulo de mi blog. Quisiera saber si tu podrías arreglar esto, te mando la plantilla. http://dl.dropbox.com/u/8291345/Ricardo/plantillaLV.xml

    O bien dime qué parámetros debo incluir o modificar para poder hacerlo-.

    Saludos y gracias.

    ResponderEliminar
  130. Hola kal.nobe.kent,

    ¿A qué te refieres con que no te permite? ¿te marca algún error?
    ¿En cuál blog tienes el problema?

    ResponderEliminar
  131. Al entrar en Diseño, no tengo el cuadro típico para editar el título. El blog es http://livingvalpo.blogspot.com aquel de la plantilla que te envié.

    ResponderEliminar
  132. Lo que pasa es que esa plantilla no tiene el gadget de la cabecera, de hecho cuando la instalas te dice un aviso que dice algo como "La plantilla no contiene los siguientes artilugios..." y en entre ellos aparece el Header, indicando que la plantilla no lo tendrá.
    Lo que puedes hacer es que si quieres poner una imagen de fondo la pongas directo en la plantilla, debajo de #blogname{ por ejemplo:
    background:url(URL de la imagen) no-repeat;

    ResponderEliminar
  133. Muchas gracias quedo perfecto Potro.
    Te queria consultar como eliminar el cuadro en blanco que aparece por debajo de la columna del post como en esta entrada.
    Saludos Potro.

    ResponderEliminar
  134. Ese recuadro es de los comentarios, si en tus entradas no vas a mostrar los comentarios entonces agrega debajo de:
    #comments {

    Esto:
    display:none;

    ResponderEliminar
  135. Hola Potro te comento que me eh decidido a renovar por completo el diseño de mi blog para este comienzo del 2012 y me agrada como esta quedando pero tengo problemas en agregar este efecto porque eh colocado como indicas en las instrucciones del post pero no me sale el efecto, me ayudas para saber a que se debe?
    Visita mi Blog
    Gracias

    ResponderEliminar
  136. Hola Wmasterconsultores,

    Qué bueno que te has animado a hacerle cambios a la plantilla para iniciar el año con nueva imagen :)
    No surge efecto el cambio porque al poner los códigos has eliminado la llave de cierre de los códigos que están arriba:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    ResponderEliminar
  137. Potro despues de ver con cuidado los codigos todavia no decifro cual es el error, no me sale efecto necesito de tu ayuda.

    ResponderEliminar
  138. Tienes que fijarte bien en el código. Si miras esta parte que tienes:
    .compartir-post input {
    background:#ffffff;
    border: 1px solid #A4A4A4; /* Borde de las celdas */
    #header img {
    width:350px; /* Ancho de la imagen en su estado normal */
    height:80px; /* Alto de la imagen en su estado normal */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }

    Verás que falta una llave de cierre }
    Por lo que el código debe ser así:

    .compartir-post input {
    background:#ffffff;
    border: 1px solid #A4A4A4; /* Borde de las celdas */
    }
    #header img {
    width:350px; /* Ancho de la imagen en su estado normal */
    height:80px; /* Alto de la imagen en su estado normal */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }

    ResponderEliminar
  139. gracias Potro me quedo genial este efecto en mi blog. Saludos

    ResponderEliminar
    Respuestas
    1. Lo mismo digo Potro, gracias mil por recomendarme este buen efecto, lo apliqué a modo de acordeón. A mi me gusta, espero que a mis lectores también eh ;)

      Saludos cordiales!

      Eliminar
    2. Estoy seguro que les encantará Marcelo :)

      Eliminar
  140. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  141. Gracias, me fue de ayuda.

    ResponderEliminar
  142. Qué interesante todo por aquí. Enhorabuena y gracias por tu ayuda a los blogeros. He intentado este efecto y lo debo de hacer fatal porque la imagen del título sigue estática :( Seguiré intentándolo. Gracias!

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario rkl, ¿en cuál blog lo has puesto?

      Eliminar
  143. Hola Potro, no sabía muy bien donde preguntarte ésto.

    He visto en algunos blogs que la cabecera ocupa todo el ancho del blog, y a mí me gustaría conseguirlo en el mío también.

    ¿Cómo podría hacerlo?

    Saludos y gracias de ante mano.

    ResponderEliminar
    Respuestas
    1. Eso depende de la estructura de la plantilla, se hacen así desde el momento que son creadas las plantillas.
      Saludos.

      Eliminar
  144. Hola, Una pregunta Potro ¿podria recomendar tu web y como ejemplo una de tus publicaciones en mi blog? En el final pondria un enlace a tu web.
    Gracias

    ResponderEliminar
  145. Potro he leído casi todos los comentarios y pues no me queda claro cómo podría hacer el efecto solo en el titulo del blog es decir implementare una imagen pero estará detrás del título y lo que quiero es que el efecto sea solo en el titulo
    Espero me ayudes muchas gracias… ^_^
    anyelo-gonzalez.blogspot.com

    ResponderEliminar
    Respuestas
    1. Sigue el segundo método Anyelo, con ese tendrás el efecto en el título del blog y no en la imagen.

      Eliminar
  146. ¿¿Se puede usar este efecto con el titulo de una entrada?? Doy por supuesto que si, pero ¿como?

    ResponderEliminar
  147. Saludos, Potro mil gracias por todos los concejos. Mi esposa y yo hemos construido nuestro blog gracias a grandes aportes como los tuyos acá, nos ayudo mucho el de mapa del sitio, etiquetas, redes sociales y muchos más. Si tienes oportunidad visita nuestro blog es equipoherbal.blogspot.com nos daria gusto que alguien que conoce tanto del tema lo visite.

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Yraizarith Armas, han hecho un trabajo estupendo :)

      Eliminar
  148. Hola buenas, venia a preguntarte si me podrías ayudar, y es que tengo el problema que el titulo, al pasar el cursor, mueve toda la web.

    Hay alguna forma de "aislarlo" para que el efecto no mueva toda la pagina?

    http://netenti.blogspot.com/

    Salu2

    ResponderEliminar
    Respuestas
    1. Tendrías que ponerle una posición absoluta a todo lo cual haría desastres, lo mejor es dejarlo así, o hacer que crezca a un menor tamaño.

      Eliminar
  149. Saludos Potro,
    se puede hacer esta historia con la imagen del perfil?

    Gracias

    Jorge

    ResponderEliminar
    Respuestas
    1. Sí Jorge, el código sería así:
      .profile-img {
      width:120px; /* Ancho de la imagen en su estado normal */
      height:120px; /* Alto de la imagen en su estado normal */
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      -o-transition: all 1s;
      }
      .profile-img:hover {
      width:300px; /* Ancho de la imagen al pasar el cursor */
      height:300px; /* Alto de la imagen al pasar el cursor */
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      -o-transition: all 1s;
      }

      Eliminar
  150. OK Potro, sensacional resultado. Gracias por tu estupenda y rápida ayuda como de costumbre.

    Saludos

    Jorge

    ResponderEliminar
  151. Hola El Potro, he seguido con mucho interés una gran mayoría de tus entradas y me han sido de gran utilidad. Ésta precisamente ha despertado una idea que pensé que sería muy interesante para mi Blog. La idea es simple: conseguir que la imagen que hace de título en mi web se "anime" al mantener el cursor encima y deje de hacerlo al quitarlo.
    Pensé que sería simple hacerlo: utilizar los mismos comandos de este tutorial (#header img:hover { y #header img) y cambiar los parámetros de ancho y alto de imagen por otro que, en "#header img:hover {", cambiase la imagen principal por la segunda que efectuaría de animación (un cambio de color o algo así en la segunda imagen, únicamente, pareciendo una animación de la misma más que un cambio de imagen.
    Lo he intentado de mil maneras pero no encuentro forma de conseguir lo que quiero por más que añado comandos al parámetro "#header img:hover {". ¿Tendrías tú una posible solución?
    Muchísimas gracias por tu respuesta.
    PD: si hubiese cualquier otra forma de conseguirlo (incluso mediante una imagen gif que sólo se animase al pasar el ratón por encima) estaría aún más agradecido de conocerla.

    ResponderEliminar
    Respuestas
    1. Hola Franciscojrg, justamente lo que hace esta entrada es animar la imagen de alguna manera, ¿no es eso lo que buscas? ¿cómo la quieres animar? ¿en cuál blog quieres hacerlo?

      Eliminar
  152. Quiero animar la imagen para que una parte de ella parezca "moverse". En realidad, mi idea era que la "animación" consistiese en el cambio de esa imagen de título por otra... Muy parecida excepto por la variación que produjese el cambio. Pero... ¿Es posible de otra manera?
    El blog para el que me gustaría realizarlo, aunque todavía construcción, es este :D
    http://tinyurl.com/d8aolra
    Muchísimas gracias.

    ResponderEliminar
    Respuestas
    1. Pues si lo que quieres es que la imagen cambie por otra al pasar el cursor puedes usar un gadget en lugar de una cabecera y usar un poco de Javascript simple:
      http://ciudadblogger.com/2009/09/cambiar-imagen-al-pasar-el-mouse.html

      O bien, usar sprites, algo más complejo pero igualmente efectivo:
      http://www.oloblogger.com/2010/04/rollover-con-css-y-sprites.html

      Eliminar
    2. Me gustaría que la imagen principal lo siguiese siendo (como cabecera y no tener que sustituirlo con otro gadget) así que... ¿Como sería más o menos la creación del sprite para cambiar la imagen al pasar el cursor sobre la misma?

      Eliminar
    3. Con exactitud no sabría decirte pues nunca lo he hecho, supongo yo que (en una plantilla de las antiguas) el código sería más o menos así:

      #header {background-position: 0 0; width: 500px; height: 200px; overflow:hidden;}
      #header img:hover{background-position: 0 -200px ; width: 500px; height: 200px; overflow:hidden;}

      Pero mejor lee la entrada de Oloblogger, así entenderás el concepto y podrás experimentar con los códigos.

      Eliminar
    4. Tras mucho investigar y buscar, al final lo he conseguido!
      Por si a alguien le sirve: en realidad, la entrada que ha sido clave para conseguirlo de Oloblogger ha sido esta: http://www.oloblogger.com/2009/08/blogger-como-eliminarsustituir-la.html
      Eso permite crear el efecto con Java/HTML en el lugar exacto de la cabecera, y no como una imagen puesta encima de las entradas, que quedaba descuadrada.
      Luego, sólo es seguir esta otra entrada, con 3 posibilidades (aunque la segunda no tiene efecto de transición) y esta hecho =)
      http://css-tricks.com/fade-image-within-sprite/
      Y aquí en la cabecera el efecto conseguido: tinyurl.com/d8aolra
      ¡Muchas gracias por todo y la ayuda ofrecida, El Potro!

      Eliminar
    5. A eso me refería con que tendrías que quitar la cabecera y usar un gadget en su lugar ;)

      Eliminar
    6. Fantástico! Pues gracias a ello lo conseguí.
      Muchas gracias de nuevo! ^^

      Eliminar
  153. Potro, ¿como puedo cambiar de plantilla sin que se borre la edicion de html?

    ResponderEliminar
    Respuestas
    1. Una plantilla no es otra cosa que HTML, si cambias de plantilla se cambia el HTML.

      Eliminar
  154. no me carga el truco... lo hago todo como tu pero el titulo sigue normal... tendre que mirarlo

    ResponderEliminar
  155. Hola!! pues yo tengo una pequeña duda...cuando voy a edición html..y pongo buscar ]]> Para copiar el texto que tu nos facilitas. No me aparece ]]>, xq? Y entoncs como lo hago? Gracias! ;)

    ResponderEliminar
    Respuestas
    1. Hola Meritxell, todas las plantillas de Blogger incluyen la etiqueta ]]></b:skin>

      Eliminar
  156. Hola. Muchas gracias por el post. Me sirvió mucho y además me arregló un problema con las páginas. Hasta pronto y voy a enlazar tu blog.

    ResponderEliminar
  157. Queda muy bien pero solo se ve en la página principal. ¿Me puedes ayudar?
    Gracias

    ResponderEliminar
    Respuestas
    1. ¿En cuál blog lo has aplicado?

      Eliminar
    2. Aplícalo también con #header h2

      #header h2 {
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      -o-transition: all 1s;
      }
      #header h2:hover {
      font-size:80px; /* Tamaño del texto al pasar el cursor */
      color:#FF00FF; /* Color del texto al pasar el cursor */
      margin-left:-30px; /* Margen izquierdo */
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      -o-transition: all 1s;
      }

      Eliminar
  158. muchas gracias por el codigo del titulo del blog
    salio perfecto

    ResponderEliminar
  159. Como lo aplico a una determinada imagen en un template
    suponiendo que la ruta de la imagen es:

    img src="images/applications.png" alt="Image 01"

    ResponderEliminar
  160. me gustaría que alguien me ayude porque realmente no entiendo

    ResponderEliminar
    Respuestas
    1. Al código de la imagen agrégale un ID, por ejemplo:
      <img src="images/applications.png" alt="Image 01" id="aumentarimg" />

      Luego cambia:
      #header img {

      Por:
      #aumentarimg img {

      Y:
      #header img:hover {

      Por:
      #aumentarimg img:hover {

      Eliminar
  161. Bueno Potro muy buen post pero en mi blog me toco cambiar el margen de izquierda por 0px y le cambie el color cuando se coloca el mouse sobre el! quedo bien chevere
    www.chistesface.blogspot.com

    ResponderEliminar
  162. la quiero agrandar http://7espiritus.blogspot.com/

    ResponderEliminar
  163. Buenas tardes! cómo podría hacer para que al introucir una imagen de 900ps se me vea? ahora mismo es de 400 qua que hay lo que parece ser una columna para gadgets (el cual deseo eliminar pero no se cómo localizarlo en el código) que se pone por encima de mi foto de cabecera. Un saludo y gracias de antemano
    http://eunor.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. No he comprendido Disniruña, en tu cabecera veo una imagen de 798px y nada que la obstruya :/

      Eliminar

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.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger