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:
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;Puedes jugar con esos valores hasta que des con los correctos.
margin-left:-30px;
Pero si no usas una imagen como cabecera entonces también puedes aplicar este efecto al título del 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.
Ciudad Blogger
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....!! :)
ResponderEliminarAplicado... www.fanaticoweb.net
EliminarRevisad amigos y hacer sugerencias.. gracias!
excelente me encata buen aporte salu2 y q stes super mega genial buen dia
ResponderEliminarbye
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.
ResponderEliminarBuenísimo truco Potro y tu blogg esta que impresiona
ResponderEliminarSaludos
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.
ResponderEliminarMe Gusta Pero Ademas De La Imagen De Perfil Tambien Se Puede Con Otras Cierto?
ResponderEliminarPotro VIENES REMASTERIZADO!!!
ResponderEliminarEXCELENTE PLANTILLA
HERMOSO BLOG
YA PUBLICAS MAS SEGUIDO* ESO CREO
;D FELICIDADES Potro(; atte:
ZoneGeek!
Instale para titulo sin imagen pero no me funciona U.U mi web es http://smithzhito.net
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarPorque elliston rojo Potro? D:
ResponderEliminarGracias 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 ;)
ResponderEliminarGracias Lady Pink, buen día también para ti :)
ResponderEliminarTú lo has dicho Delzon Perez, ellos se lo pierden, jojo :D
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:
ResponderEliminar.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;
}
Gracias Jhonnysan, saludos!
ResponderEliminarJuanko, ¿has colocado el código completo?, ¿en cuál blog lo has puesto?
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.
ResponderEliminarChico del Cereal, publicaría más seguido si tuviera más tiempo, creo que terminaré clonándome :D
ResponderEliminarEl 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!
SmiThzhiTo, es porque estos códigos son para plantillas originales de Blogger, o plantillas que conservan los nombres originales de los elementos.
ResponderEliminarEn tu caso cambia #header h1 { y #header h1:hover { por:
.title h1 { y .title h1:hover { respectivamente.
Muchas gracias MaGoS RaDioMuSiC, me siento muy elogiado últimamente :)
ResponderEliminarUn abrazo!
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
ResponderEliminarThe Genuine
http://www.the-genuine.com/
Me ha servido de nuevo Potro :), está muy bien el diseño de tu web .
ResponderEliminarSaludos
Genial muchas gracias!
ResponderEliminarhola potro ha quedado impresionante ciudad blogger, te felicito eres un genio.
ResponderEliminarHola The Genuine,
ResponderEliminarNo 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 */
Gracias, le iba a preguntar sobre eso antes, pero veo que se ha adelantado!
ResponderEliminarPotro Saludos!
Jose Antonio Marin Arcas, qué gusto que ha sido útil :)
ResponderEliminarNOTI Q-LOS, gracias a ti por tu visita!
Gracias Potro!
ResponderEliminarPero 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
HOLA POTRO:
ResponderEliminarNo me funciona.
http://franciscoadame.blogspot.com
Nota:
ResponderEliminarTengo 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.
Gracias lerh, pensé que a nadie le gustaría la plantilla y el nuevo logo pero parece que me he equivocado :)
ResponderEliminarY como se hace ese efecto del poloshit que gira en ese circulo mamai en la pagina principal de ciudadblogger, esta chulisimoooo
ResponderEliminarHi!
ResponderEliminarAiko 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!
.:R.G.F:., por nada :)
ResponderEliminarAdmin, en tu caso cambia #header h1 y #header h1:hover por:
.post h1 y .post h1:hover
Potro Excelente!
ResponderEliminarFRANCISCO, 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.
ResponderEliminarXander Reyes, después, con más tiempo iré explicando todos los detalles ;)
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.
ResponderEliminarHola Potro:
ResponderEliminarYa 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
haz un Tutorial de como agregar la barra social, como en este blog al final de la entrada:
ResponderEliminarhttp://btemplates.com/2011/blogger-template-hector/demo/
Buen efecto. Pero, si en nuestro header tenemos texto en lugar de una imágen, ¿Se puede aplicar este efecto?
ResponderEliminarSaludos.
Comento dos cosas:
ResponderEliminarEste 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.
La plantilla de antes era más atractiva.
ResponderEliminarAiko 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 :)
ResponderEliminarGracias por tu amable comentario, que tengas buen fin de semana!
Pozo+10™, enciérralo en una condicional para que no se muestre en las entradas individuales:
ResponderEliminarhttp://ciudadblogger.com/2010/03/condicionales-de-blogger.html
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!
ResponderEliminarHola potro, tengo un gadget debajo de la cabecera del blog de diferentes secciones.
ResponderEliminarMe 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.
Hola, me gustaria saber si tienes un post o donde aprender a conseguir el efecto que utilizas en las entradas.
ResponderEliminarQuiero 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
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
ResponderEliminarGracias again
Felicidades por la nueva imagen, Potro :)
ResponderEliminarTengo que decir que este sí es más adoc a Ciudad Blogger.
Saludos.
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.
ResponderEliminarSaludos.
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'>
ResponderEliminarIndeziisoow, yep, en la entrada se explica igual eso ;)
ResponderEliminarLluí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.
ResponderEliminarCiertamente me ha gustado la plantilla, aunque por ratos no me termina de convencer, supongo que es al costumbre ;)
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!!
ResponderEliminarmira aqui
dlas letras que no se miran por el fondo
como lo cambio?
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
ResponderEliminarSegui 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.
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.
ResponderEliminarlo 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.
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
ResponderEliminarunhidalgo, cuestión de gustos ;)
ResponderEliminarmatiasascanio, podrías hacerlo si encierras todos los enlaces en un div con un ID, por ejemplo:
ResponderEliminar<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 :/
Hola Potro, me gusta tu diseño pero creo que le falta algo de chispa:algo de color... no sé qué... (critica constructiva.)
ResponderEliminarQueria 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.
Reno, esta es la entrada que buscas:
ResponderEliminarhttp://ciudadblogger.com/2009/07/mostrar-solo-los-titulos-de-las.html
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
ResponderEliminarNota: Modifique los margenes, pero se me corta igual :(
ResponderEliminarGorka, 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.
ResponderEliminarQue paso POTRO no me respondiastes,mi pregunta esta antes de la de "admin!!
ResponderEliminarPepée Pilato, gracias!
ResponderEliminarmexico, claro que sí, no hay problema ;)
ResponderEliminarMicroboy90, 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.
ResponderEliminarNo 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.
Hola Potro,
ResponderEliminares el blog que viste el otro día:
www.myclase.blogspot.com
gracias
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.
ResponderEliminarLas 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!
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:
ResponderEliminarnoreply@blogger.com
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 ;)
ResponderEliminarUn fuerte abrazo!
tengo un problema acá te lo escribo, espero y me puedas ayudar :)
ResponderEliminarhttp://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 :(
Hola Priamo,
ResponderEliminarEso 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.
Hola Dante Mogni,
ResponderEliminarEntonces 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;
Solamente darte las gracias por tus indicaciones. Un saludo.
ResponderEliminarBuen truco, gracias
ResponderEliminarA mí con una imagen muy grande no sirve se queda igual, y claro que he configurado para que se vea más grande.
ResponderEliminarSaludos
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:
ResponderEliminarhttp://www.respondones.com
aparece:
ciudadblogger.com/respondones.com
Y recalcando anterioro mente por que quizá no contenga el protocolo http://.
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.
ResponderEliminarTe 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?
Una última pregunta:
ResponderEliminar¿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
Me leen?
ResponderEliminarMuchas 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!
ResponderEliminarGorka, aparte de esos que has añadido agrega estos:
ResponderEliminar#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;
}
Josemi, suerte con los estudios :)
ResponderEliminarEs en este blog POTRO!! kise hacerlo como me dijistes pero hay muchos backgrounds y le cambie a todos pero aun asi no cambia!!
ResponderEliminarhttp://www.peliculasyseries.org/
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.
ResponderEliminarMe 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.
Perfecto Potro!!! Mil gracias.
ResponderEliminarUn saludo majo
matiasascanio, por nada ;)
ResponderEliminarJose Antonio Marin Arcas, ¿una imagen de la cabecera, o de dónde? ¿y en cuál blog?
Abraham Santos Fernández, tienes toda la razón, lleva como tres días el banner y ni cuenta me había dado :(
ResponderEliminarMuchas gracias por el aviso!
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>
ResponderEliminarDaniel García, supongo que habías usado .post:hover
ResponderEliminarEn 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.
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!!
ResponderEliminarHola Ana,
ResponderEliminarNecesitas 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.
Microboy90, ahí no necesitas cambiar el fondo del blog, sólo el fondo de las entradas. Eso puedes hacerlo en esta área:
ResponderEliminar.post {background:#222}
Toma en cuenta que el cambio no lo verás hasta ingresar a una entrada individual.
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 :)
ResponderEliminarEddy, en lo absoluto, no importa cuál sea la razón que te traiga aquí, siempre eres bienvenido ;)
ResponderEliminarOk POTRO gracias ,ahora si ya lo cambie!! se agradece tu aporte!!!
ResponderEliminarMuchas gracias Macarena, tendré que pensar seriamente en las camisetas porque todo mundo está pidiendo una :)
ResponderEliminarLo 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!
Potris otra vez me salvaste! Leí tu post, pensé un rato en todos los trucos que me enseñaste acá y mirá como quedó:
ResponderEliminarhttp://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
Me encanta cómo te está quedando el blog, ahora sí que está quedando muy chic :)
ResponderEliminar¿Cuál línea es la que quieres mover y no se deja?
muchas gracias potro asi el blog es mucho más fresa!
ResponderEliminarHola 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
ResponderEliminarKENNYFRESA, gracias a ti por tu visita!
ResponderEliminarPriamo, después publicaré una entrada sobre ello, no te prometo que sea pronto porque aun tengo otras entradas pendientes pero lo haré ;)
Esperaré.Un saludo
ResponderEliminarPotro lo quise aplicar y no me funciona...Me ayudas? y Me gustaria centrar la imagen que coloque de cabecera. se puede? Gracias!!!
ResponderEliminarUna duda, ¿Cómo muevo la cabecera del blog hacia la izquierda para que no queden espacios blancos a los lados?
ResponderEliminar¿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
Bren, con gusto pero, ¿en cuál blog lo has puesto?
ResponderEliminarPerdon Potro, Me olvide el pequeño detalle ... La cabecera que quiero centrar y aplicarle el efecto es la de "cerquita mio".
ResponderEliminarGraciasss
Potro no pude ni con el titulo ni con las entradas
ResponderEliminarBlog: postdesign.blogspot.com
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:
ResponderEliminar.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.
Muchísimas gracias, me funcionó lo de la cabecera.
ResponderEliminarLa 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
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
ResponderEliminarPotro 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?
ResponderEliminarCarlos Sz, es porque los títulos de tus posts no son .post h3 sino h2.title
ResponderEliminarEl de la cabecera no lo veo puesto, veo otros pero no corresponden a tu plantilla.
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 :)
ResponderEliminarBren, en esta parte te has comido un espacio:
ResponderEliminar#headerimg:hover {
Debe ser así:
#header img:hover {
Gracias Potro! Pero no lo voy a aplicar al final...cambie la cabecera y ahora no va a quedar bien ese efecto me parece...
ResponderEliminarSí 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; "
ResponderEliminarUna ú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?
Quizá al poner la URL del enlace estás omitiendo el http:// que antecede a toda dirección Web.
ResponderEliminarLo 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.
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...
ResponderEliminarHola Javier David,
ResponderEliminarEstos 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
NO amigo no me funciono :/, pero GRACIAS :)
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarPero encontre el codigo era similar, div.art-headerobject, pero se mueve a un lado xq?
ResponderEliminarPorque sólo aplicaste un margen izquierdo, pero no cambiaste al alto y ancho de la imagen:
ResponderEliminarmargin-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".
hola, me interesaria, poner una ristra de imagenes en miniatura en uno de los widgest pero no se. ¿Me puede indicar como hacerlo?
ResponderEliminarHola 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:
ResponderEliminar<img src="URL de la imagen" />
Hola potro te escribo por una consulta, como lo hago si quiero poner este mismo efecto en un gadget HTML/Javascript ???
ResponderEliminares 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!
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:
ResponderEliminar#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.
Esta genial el efecto para agregar Potro, igual antes de hacerlo queria centrar el titulo que ahora lo sistitui por una imagen.
ResponderEliminarLo 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.
Lo que pasa es que tienes la cabecera dividida, así que aunque lo centres se centrará al ancho que ocupa la primera cabecera.
ResponderEliminarSi 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.
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?
ResponderEliminarTendrías que añadir en los estilos:
ResponderEliminar.span-16 {display:none;}
Lo más seguro es que después de hacer eso tengas que aplicar un margen superior al #header-wrapper
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
ResponderEliminarO bien dime qué parámetros debo incluir o modificar para poder hacerlo-.
Saludos y gracias.
Hola kal.nobe.kent,
ResponderEliminar¿A qué te refieres con que no te permite? ¿te marca algún error?
¿En cuál blog tienes el problema?
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é.
ResponderEliminarLo 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á.
ResponderEliminarLo 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;
Muchas gracias quedo perfecto Potro.
ResponderEliminarTe queria consultar como eliminar el cuadro en blanco que aparece por debajo de la columna del post como en esta entrada.
Saludos Potro.
Ese recuadro es de los comentarios, si en tus entradas no vas a mostrar los comentarios entonces agrega debajo de:
ResponderEliminar#comments {
Esto:
display:none;
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?
ResponderEliminarVisita mi Blog
Gracias
Hola Wmasterconsultores,
ResponderEliminarQué 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
Potro despues de ver con cuidado los codigos todavia no decifro cual es el error, no me sale efecto necesito de tu ayuda.
ResponderEliminarTienes que fijarte bien en el código. Si miras esta parte que tienes:
ResponderEliminar.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;
}
gracias Potro me quedo genial este efecto en mi blog. Saludos
ResponderEliminarLo 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 ;)
EliminarSaludos cordiales!
Estoy seguro que les encantará Marcelo :)
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarGracias, me fue de ayuda.
ResponderEliminarQué 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!
ResponderEliminarGracias por tu comentario rkl, ¿en cuál blog lo has puesto?
EliminarHola Potro, no sabía muy bien donde preguntarte ésto.
ResponderEliminarHe 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.
Eso depende de la estructura de la plantilla, se hacen así desde el momento que son creadas las plantillas.
EliminarSaludos.
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.
ResponderEliminarGracias
Claro que sí Azulejo :)
EliminarPotro 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
ResponderEliminarEspero me ayudes muchas gracias… ^_^
anyelo-gonzalez.blogspot.com
Sigue el segundo método Anyelo, con ese tendrás el efecto en el título del blog y no en la imagen.
Eliminar¿¿Se puede usar este efecto con el titulo de una entrada?? Doy por supuesto que si, pero ¿como?
ResponderEliminarSí, mira el comentario #14
EliminarSaludos, 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.
ResponderEliminarGracias por tu comentario Yraizarith Armas, han hecho un trabajo estupendo :)
EliminarHola 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.
ResponderEliminarHay alguna forma de "aislarlo" para que el efecto no mueva toda la pagina?
http://netenti.blogspot.com/
Salu2
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.
EliminarSaludos Potro,
ResponderEliminarse puede hacer esta historia con la imagen del perfil?
Gracias
Jorge
Sí Jorge, el código sería así:
Eliminar.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;
}
OK Potro, sensacional resultado. Gracias por tu estupenda y rápida ayuda como de costumbre.
ResponderEliminarSaludos
Jorge
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.
ResponderEliminarPensé 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.
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?
EliminarQuiero 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?
ResponderEliminarEl blog para el que me gustaría realizarlo, aunque todavía construcción, es este :D
http://tinyurl.com/d8aolra
Muchísimas gracias.
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:
Eliminarhttp://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
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?
EliminarCon 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í:
Eliminar#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.
Tras mucho investigar y buscar, al final lo he conseguido!
EliminarPor 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!
A eso me refería con que tendrías que quitar la cabecera y usar un gadget en su lugar ;)
EliminarFantástico! Pues gracias a ello lo conseguí.
EliminarMuchas gracias de nuevo! ^^
Muchas gracias che!! muy bueno!!
ResponderEliminarPotro, ¿como puedo cambiar de plantilla sin que se borre la edicion de html?
ResponderEliminarUna plantilla no es otra cosa que HTML, si cambias de plantilla se cambia el HTML.
Eliminarno me carga el truco... lo hago todo como tu pero el titulo sigue normal... tendre que mirarlo
ResponderEliminar¿En cuál blog lo has puesto?
EliminarHola!! 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! ;)
ResponderEliminarHola Meritxell, todas las plantillas de Blogger incluyen la etiqueta ]]></b:skin>
EliminarHola. 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.
ResponderEliminarQué gusto que te haya sido útil Juan, saludos!
EliminarQueda muy bien pero solo se ve en la página principal. ¿Me puedes ayudar?
ResponderEliminarGracias
¿En cuál blog lo has aplicado?
EliminarEn Satorre.net
EliminarAplícalo también con #header h2
Eliminar#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;
}
muchas gracias por el codigo del titulo del blog
ResponderEliminarsalio perfecto
Como lo aplico a una determinada imagen en un template
ResponderEliminarsuponiendo que la ruta de la imagen es:
img src="images/applications.png" alt="Image 01"
me gustaría que alguien me ayude porque realmente no entiendo
ResponderEliminarAl código de la imagen agrégale un ID, por ejemplo:
Eliminar<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 {
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
ResponderEliminarwww.chistesface.blogspot.com
la quiero agrandar http://7espiritus.blogspot.com/
ResponderEliminarSigue las indicaciones de la entrada.
EliminarBuenas 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
ResponderEliminarhttp://eunor.blogspot.com.es/
No he comprendido Disniruña, en tu cabecera veo una imagen de 798px y nada que la obstruya :/
EliminarBuenas el potro, como siempre agradecerte todo el trabajo que haces. He estado buscando una cosa pero no he encontrado y no sabia donde ponerlo asi que te lo dejo aqui que podria ser una entrada que tenga un poco de relacion.
ResponderEliminarLo que necesito es hacer que una imagen que tengo en el header se alinee con el body. Lo he alineado a la perfeccion con el margin y el padding, pero solo funciona en mi resolucion. Si veo otra resolucion no queda alineado. Tampoco me funciona poniendo tanto por cierto (%) en la posicion. Estoy seguro que es algo muy sencillo. POdrias darme una pista??
Saludos y muchas gracias.
Buenas el potro, como siempre agradecerte todo el trabajo que haces. He estado buscando una cosa pero no he encontrado y no sabia donde ponerlo asi que te lo dejo aqui que podria ser una entrada que tenga un poco de relacion.
ResponderEliminarLo que necesito es hacer que una imagen que tengo en el header se alinee con el body. Lo he alineado a la perfeccion con el margin y el padding, pero solo funciona en mi resolucion. Si veo otra resolucion no queda alineado. Tampoco me funciona poniendo tanto por cierto (%) en la posicion. Estoy seguro que es algo muy sencillo. POdrias darme una pista??
Saludos y muchas gracias.
Buenas El potro como siempre un placer. Intentare hacerte la pregunta lo mas facil posible. Temgo una imagen en el Header, y quiero que siempre quede alineada con el body. Lo que hecho con el padding y el margin pero claro al cambiar la resolucion no esta centrado. Tiene que ser algo muy sencillo, como lo que se utiliza en otros lenguajes de programacion en el que puedas decir que el principio de la imagen del header coincida con el principio del cuerpo, donde estan las noticias y demas. Muchas gracias de antemano. Saludos
ResponderEliminarHolaa, yo no puedo poner lod e agrandar la imagen porque en mi plantilla no me aparece ]]> solamente me aparece y por más que pongo delante el código nada, y otro no hay >_<.
ResponderEliminar