Una pregunta muy común es cómo alinear elementos o gadgets del blog, ya sea centrarlos o alinearlos hacia un lado específico.
En la mayoría de las plantillas tanto los textos como los elementos se alinean automáticamente hacia la izquierda, pero esto no significa que no podamos cambiar su posición.
Para alinear los elementos (imágenes, videos, contenedores, etc) vamos a encerrar el código de cada uno entre un contenedor div y ahí usaremos la propiedad align para alinearlos hacia el lugar deseado.
Centrar
<div align="center">
Aquí va lo que se quiere centrar
</div>
A la izquierda
<div align="left">
Aquí va lo que se quiere a la izquierda
</div>
A la derecha
<div align="right">
Aquí va lo que se quiere a la derecha
</div>
Sólo se agrega donde se indica, el código del elemento que queremos alinear, ya sea algo que esté dentro de una entrada o un gadget de la sidebar.
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Unirse en Facebook
Enviar un correo
Iconos RSS.PNG)
Música JPZ
42 comentarios:
Heeeee potro muy bueno este post.
Saludos!
Graciaas!! me sera muy util ;)
Saludos!
Genial!
Genial!
Gracia a ustedes, ojalá les pueda servir al momento de personalizar la plantilla.
Saludos.
Muy bueno.
Respecto a lo de las imagenes que se arrastran.
No se si asi se entienda:
Recuerdas que en Office 2003 aparecia un muñeco en el lado superior izquierdo, que te decia si querias guardar el documento, es mas o menos asi, pero que este diga que hay un nuevo post en mi blog, como un feed.
Saludos.
Uhhhhhh...como habré renegado con esto!! Excelente aporte bro!
Un abrazo!!!!
Esto es una de las opciones que más usamos al crear un post con alguna imagen, pero muchos no nos damos cuenta de la codificación que esto tiene ya que usamos los simples botones, pero no siempre tenemos botones, por ejemplo, en los gadget html. Un saludo
El Venado, ummm, pues no sé si usando el feed y una imagen se pueda, habría que hacer las pruebas para ver qué tal. Saludos.
brother, no eres el único, es muy común que a varios no haya dado dolores de cabeza. Un abrazo!
Ascesino96, cierto, en la sidebar o cualquier otro gadget tendremos que recurrir a escribir el código tal cual. Saludos.
Muy bien potro
hasta que lo colocas
por que fastidia de vez en cuando el estar buscando gracias
POTRO
Ahora podrás memorizarlo, en sí está muy sencillo el código.
Saludos.
Perfecto.
¿Es posible alinear por pixeles modificando este código?
Mil gracias.
Tu ayuda es de verdad invaluable.
Claro ABRIL, puedes usar la propiedad margin para mover el elemento hacia la derecha o hacia la izquierda:
<div style="margin-left:30px;">
Aquí lo que se quiere alinear
</div>
Sólo modifica los pixeles del margin-left, a mayor número que pongas, más hacia la derecha se acomodará.
Saludos.
Hola Potro
Hoy no voy a preguntar nada.
Sólo quiero agradecerte por tu buena disposición y tu gran amabilidad.
Que la pases rebien este resto de año y mucho mejor en el 2010.
Ya te seguiré molestando de a poco el próximo año.
Mil gracias por todo!!!
Muchísimas gracias ABRIL, que también tengas un excelente año este que viene y todos los próximos.
Será un placer leerte por aquí.
Saludos!
Como siempre utilísimo el tutorial. Gracias.
Que tengas unas Felices Navidades y que se cumplan todos tus deseos para el 2010.
Un abrazo, Asun y Ricardo
Muchas gracias Ricardo, mis mejores deseos para ustedes en esta Navidad y que el próximo año esté lleno de bendiciones para ustedes y los suyos.
Abrazos!
Hola. Solo una consulta: Con el editor anterior de entradas de blogger podía alinear fácilmente las imágenes(dentro del modo redactar) de manera que quedaran una al lado de la otra (principalmente presentándolas en "tamaño pequeño"). Solo había que seleccionar "ninguna", en cuanto al tipo de alineación de la imagen al subirla. Pero el "Editor actualizado" solo permite las opciones izq., derecha y centrada.
Tengo muchos problemas con el nuevo editor para alinear una imagen al lado de otra(como una tira, en una misma línea)en las entradas; y cuando paso del editor nuevo al antiguo, se me desconfiguran y desalinean las imágenes que ya tengo posteadas en mi entrada, sin nisiquiera haber empezado a trabajarlas. Qué me recomiendas?
Hola Vicky,
No entiendo bien. Si las imágenes ya están publicadas no deberían alterarse al cambiar el editor, es decir, ya tienen un código HTML definido y a menos que lo edites no debería modificarse.
Por otra parte, para poner una imagen en línea (una de tras de otra) se puede seguir haciendo con ese editor, sólo usas "centrar" y sin usar saltos de línea (es decir, sin presionar ENTER) subes una y luego otra. De este modo deberán quedar una seguida de otra (en línea).
Saludos.
hola, mi duda es si se puede centrar el titulo del gadget porque solo puedo hacerlo en el elemento de imagen
Hola Antonio F. Lara,
Para centrar los títulos de los gadgets busca esta parte:
.sidebar h2 {
Abajo de eso agrega esto:
text-align: center;
Saludos.
Hola, El Potro. No sabía que así como tú dices (con alineación centrada, sin salto de línea) las imágenes se podían alinear una tras otra, en una misma línea, en una tira. Ya lo probé y sí me resultó. Algo tan simple y yo no lo sabía (¡qué cosas de la vida!). Como dicen, cada día se aprende algo nuevo. Muchas gracias y saludos.
Gracias a ti por tu visita.
Saludos!
hey potro buen codigo me sirvio mucho muchas gracias.
Qué bueno que te fue útil ;)
Holaaa,
y se puede aliear solo el titulo de los Gadgets o de algunos gadgets? eso... Saludos y espero respuesta ;)
Hay una parte en la plantilla que dice:
#sidebar h2 {
Ahí en esos atributos se puede cambiar la alineación de los títulos de los gadgets.
Saludos.
hola Potro! tengo una pregunta! habra un truco para poder ir leyendo las entradas del blog ir bajando y que las colunmas laterales no se muevan y se queden fijas para que cuando vayan bajando x ejemplo si el post es algo largo se pueda apreciar a los costados las barras y no se oculten cuando bajen... espero dejame entender! me avisas! gracias
Saluos
Puedes poner la sidebar de forma "flotante" para que no se mueva cuando se baje la página.
Para hacerlo busca esta parte:
#colRight {
width:240px;
float:left;
padding-left:3px;
position:relative;
Cambia lo que está en negrita por fixed luego agrega debajo esto:
left:40px;
Si queda muy separado o pegado cambia el valor de left por otro hasta que se ajuste.
Saludos.
Hola ; muy buenas:
he insertado varias imagenes en una entrada, quedan todas perfectamente alineadas en vertical, pero separadas por una franja blanca, hay alguna forma de eliminar esta franja y que las imagenes queden seguidas completamente.
de nuevo te felicito por tu ayuda. Un saludo.
Hola Santi Amaro,
Después del div agrega esto:
style="padding:0px;margin:0px;"
Saludos.
Hola Potro!
no sé muy bien donde pegarlo, en la edición de entradas o en edición de htlm? podrías indicarmelo con más precisión?
no sé lo que es el div.
Gracias y un saludo.
Eso depende, si lo que quieres alinear está dentro de la entrada pues entonces se pone ahí, si quieres alinear el contenido de un elemento HTML/Javascript entonces se pone en el gadget.
Saludos.
saludos potro
me gustaria saber como puedes poner 4 imagenes en la sidebar y cada una con enlaces independientes, por ejemplo en el tuyo, el primero recuadro hay 4 imagenes formando un cuadrado
gracias de antemano.
Mira esta entrada, ahí está la explicación.
Saludos.
muchas gracias por el dato potro
saludos
http://todoespoker.blogspot.com
Potro como podria alinear al centro el buscador de google que se encuentra en mi blog, no hago moverlo de donde esta :\
Debería alinearse del mismo modo, ¿en cuál blog y dónde está el buscador?
en mi blog http://myestilodeyo.blogspot.com y el buscador entrando se ve :D pero como lo personalize a mi manera no parece de google.
Podrías poner antes de ]]></b:skin> esto:
#CustomSearch1 {
float:right;
}
Potro en el comentario 28, me explicabas como poner un sidebar flotante, pero si yo deseo poner el que elijo como por ejemplo Seguidores deseo que se quede flotando cada vez q baje leyendo el post! como lo hago? gracias
No sé si funcione, pero puedes tratar poniendo antes de ]]></b:skin> esto:
#Followers1 {position:fixed; bottom:0; right:0;}
pucha Potro no me funcionó, gracias"""
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.