-->
Cargando...
BIENVENIDAS A MI BLOG DE AYUDA

Como cambiar el ancho de la plantilla de tu blog

Hola, si son como yo que les gusta andar cambiando y cambiando la apariencia de nuestro blog les explicaré como cambiar las medidas del mismo ya que muchas veces cuando cambiamos de plantilla ó el fondo del mismo, el espacio de nuestras entradas es muy pequeño ó no queda bién y nuestro blog se vé mal, al igual que el espacio del sidebar, título, etc.

Antes de moverle a nada, por favor saquen una copia del contenido de su blog, se van al diseño de su blog y se dirigen a la pestaña que dice edicion de HTML, copian todo el código de adentro y lo guardan, ahora si empezamos.

Estando en la pestaña de HTML vas a teclear juntas ctrl mas f y en la parte de abajo se te abrira una pequeña ventanita ésto es para poder localizar los códigos en nuestra plantilla, en ése cuadrito le pondrás

#outer-wrapper en la plantilla se te pondrá de color verde y así facilmente encontramos lo que queremos.

el outer-wraper es como quien dice, el ancho del blog en si, dentro del blog esta el espacio para las entradas y la sidebar, si queremos ensanchar estas ultimas, primero debemos hacer espacio en el blog para que luego entren sin problemas. La primera linea debajo de:#outer-wrapper es width: 660px;Cambiaremos esa línea por width: 850px; (width significa ancho y el numero es la cantidad de pixeles que le estamos dando)

Ahora vayamos a ensanchar el espacio de entradas (main), si buscamos mas abajo de lo anterior debemos encontrar: #main-wrapper ( y al igual que antes cambiamos la línea del width (ancho) por esta: width: 500px;)

Un poco más abajo vemos #sidebar-wrapper, ahí es donde modificaremos el ancho de nuestra sidebar con el mismo sistema que antes, cambiando la línea del width (ancho) por esta otra: width: 250px;)

Ahora vayamos a ensanchar el titulo para lograr una mejor estetica en nuestro blog, para eso dejemoslo del mismo ancho que el resto del blog. Para hacer este cambio buscamos (hacia arriba) esta parte: #header-wrapper ( y cambiamos la línea del width por width:850px;) (el mismo ancho que el cuerpo del blog), así la cabecera ocupará el mismo espacio que las entradas y la sidebar juntas. Bajamos ahora por el código de la plantilla, hasta encontrar el #footer ( y le ponemos también el mismo ancho que el blog: width:850px;)
de esta forma nuestro blog logra una imagen uniforme.

Las medidas que les he dado son las más comunes, ya si quieres cambiarlas tienes que tomar en cuenta que la suma del ancho de las entradas con el de la sidebar, debe ser menor o igual a el ancho del blog para una correcta vizualizacion.

Ahora cruza los dedos y vete a VISTA PREVIA que se encuentra hacia abajo y si todo lo hiciste bién se te abrirá el blog, si te gustó como se ve con las medidas nuevas GUARDAS LOS CAMBIOS si no modifícalas nuevamente hasta que quede de tu agrado.


Si te ayudó mi explicación, porfis déjame tu comentario, gracias


11 comentarios:

sofik dijo...

Gracias chicas por visitar mi blog y dejar su comentario, besos

Cloud-ia dijo...

Sip, si me sirvió mucho, ahora ya sé como irle cambiando las medidas según me vaya gustando, te debo una.

jmaza37 dijo...

por favor diganme como hago..le doy ctrl mas f y me sale la barrita, luego pongo #outer-wrapper pero no se donde tengo que darle para que entre , le doy a enter y no pasa nada..gracias

sofik dijo...

Hola jmaza37 una discupa por mi tardanza en responderte, en cuanto a tu duda, cuando le das enter en la barrita de abajo se te tiene que poner de color verde ésa parte que estás buscando, en la parte de arriba, lo hacemos para facilitar nuestra búsqueda y efectuar los cambios necesarios más facilmente, si acaso no se te pone verde entonces búscalo manualmente, tiene que estar ésa parte debajo del /* Header, espero haya respondido a tu duda, gracias

jmaza37 dijo...

Gracias, ahora si ya entendi..muy amable

CreacionesCaro dijo...

Querida Sofik, hace días que quiero entrar para felicitarte por el aniversario de tu blog. He andado con poco tiempo en general, y tengo muchas cosas pendientes. Entre ellas el curso de creación de kits jeje No me des tirón de orejas!!!
Espero todo ande muy bien, tan bien como tu blog.
Un beso grande teacher!!!
nos vemos
Caro

J.M dijo...

hola. Pues la verdad es que a mi no me ayudo se que es efectivo ese metodo pq me lo comentaron pero yo por ejemplo baje una plantilla y lo que quiero es que sea mas estrecho el margen derecho para que asi el sitio donde se escribe y suben las fotos y me cojan las fotos a gran tamaño mi blog es http://thelastwaves.blogspot.com/ si puede echale una ojeada y si puedes ayudarme te lo agradeceria.
por cierto en los primeros pasos no me venia width y lo edite yo
no note cambios ni errores por ahora.
saludos y muxas gracias

klaudio dijo...

Gracias muy claro lo tuyo y mesirvio mucho es la primer ayida externa que recibi, se agradece.
Un saludo y las opinione constructivas no me molesta psa cundo quieras saludos

ideasweb dijo...

gracias. me gusto mucho tu ayuda. el dise;o de tu blog esta super bacano... visita mi blog ideaswebmedellin.blogspot.com
te cuidas mucho

Maria Belen dijo...

Gracias Sofik!! YA pude acomar el ancho jejej

Estoy buscando laopcionpara dejar el cuadro con comentarios a un ladito, tendras el codigo por ahi??

Universitaria de Hoy dijo...

Hola!

Necesito ayuda ne mi blog, espero puedas verlo y decirme como solucionar o corregir la imagen de la cabecera para que se vea centrada y que mi blog se vea bien y completo, porque aparecen unas barras de desplazamiento y la imagen se ve alineada a la derecha.

Gracias...

GRACIAS POR TUS COMENTARIOS

 

Photobucket
 
ir arriba