Esta es una de las plantillas que nos llevará algo más tiempo, puesto que además de agregar el código, hay que eliminar una de las dos barras laterales que vienen por defecto colocadas a la derecha en esta plantilla.En primer lugar, antes de hacer cualquier modificación como siempre hacemos la copia de seguridad de la plantilla.
Una vez hecha la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos, dentro del apartado Page Structure, el siguiente código:
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Éste es el código de la barra que tenemos a la derecha de la pantalla. Copiamos este código y lo pegamos justo debajo cambiando el nombre por newsidebar y la alineación (float) por el valor $startSide.
Antes de seguir con el siguiente código, aprovechando que estamos en el apartado Page Structure, nos fijaremos los anchos que tenemos definidos tanto para el blog como para las columnas laterales y la central.
Como podemos ver en el código, el ancho del blog (outer-wrapper) está definido en 740 píxeles, la columna central (main-wrap1) en 485 píxeles y cada barra lateral (sidebar-wrap y newsidebar-wrap) en 240 píxeles.
Si sumamos los 485 px y los 480 px de ambas barras podemos comprobar que el ancho de 740 px del blog se queda corto, por lo que modificaremos este ancho a 990 píxeles.
Modificado el ancho del blog, vamos a eliminar una de las dos barras laterales que tenemos creadas por defecto en este blog.
Para ello, accedemos al cuerpo de la página (body) y buscamos el siguiente código:
<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div></div>
<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
</b:section>
</div></div>
</div>
Éste es el apartado donde están creadas ambas barras, la de arriba que está identificada como sidebartop-wrap y la de abajo como sidebarbottom-wrap1.
Eliminaremos la barra inferior, por lo que tenemos que borrar el siguiente código:
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
</b:section>
</div></div>
Una vez eliminado, agregaremos la barra lateral izquierda al blog. Para ello, insertamos el siguiente código antes de la línea
<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='newsidebar'>
</b:section>
</div></div>
</div>
Guardamos los cambios y, mediante la opción Elementos de la página, agregamos a la nueva barra un gadget para poder apreciar los cambios realizados.
Guardamos de nuevo los cambios y comprobamos el resultado que debería ser algo así:
Si queremos aumentar un poco el espacio que hay entre la columna izquierda y la central, introduciremos el siguiente código en el apartado Page Structure de la nueva columna (newsidebar):con lo que el resultado final será este:
Si queréis arreglar un poco la zona del encabezado o incluso si habéis modificado las dimensiones de las barras laterales, tendréis que editar las imágenes que aparecen en la parte superior e inferior, puesto que son las causantes que ambos objetos, encabezado y columnas, tengan esa forma redondeada en las esquinas.
25 comentarios:
hola de nuevo,
con esta plantilla, tampoco me sale. En vez de ponerme:
#sidebar-wrap {,
me pone:
#sidebar-wrapper {.
Pero bueno, puedo continuar.
Pero donde pones:
div id='sidebar-wrap'
div id='sidebartop-wrap'>div id='sidebartop-wrap2'>
a mi, me pone:
div id='sidebar-wrapper'>
b:section class='sidebar' id='sidebar' preferred='yes'>Y ahí me atasco, porque no puedo continuar con lo siguiente.
Mi plantilla es la 'Minim' (creo, es decir, la primera que aparece, que por cierto te 'las saltao'!)
En fin, que no atino, me pierdo un poco con esto.
saludos
Omito algunos '<', porque me da error el comentario al interpretarlos como html.
Hola José,
si tienes aplicada la primera plantilla de las que aparecen en blogger, es ésta la entrada que tienes que consultar puesto que sirve para las plantillas Mínima, Mínima Dark, Mínima Blue, Mínima Ochre, Mínima Lefty, Mínima Stretch y Mínima Lefty Stretch.
no me funciona
¿podrían poner como quedaria porfavor?
Hola alex-yorki,
intenta realizar de nuevo los pasos y comprueba si es ésta la plantilla que tienes aplicada.
espectacular muchas grácias!
De nada, saludos.
Que tal master!! muchas gracias por esta data, me resultó con la rounders 4! veo que está usando la misma, tengo una duda si!, me quedó como esta pero el encabezado me quedó chico, me refiero a esa parte donde tenés ''blog de la informática'' y la descripción, cómo puedo dejarla así?- Gracias-
Hola Aquarius,
las dimensiones del encabezado depende de la imagen que tengas aplicada.
De todas formas, si quieres modificar los márgenes del encabezado accede a la opción Edición de HTML de tu plantilla y busca el apartado Blog Header.
Hola Jose M. antes que nada gracias por los datos.
Pero cuando hago los cambios se crea el espacio de la columna, pero al querer guardar me da un error de sintaxis html y me dice algo de tag-end, revise la sintaxis varias veces y está bien no se que hacer..
gracias.
Por cierto josé, en la locura por la tercera columna no había visto bien tu blog, muy bueno!!
Hola Fernando,
acabo de ver tu blog y te aconsejo varias cosas:
No cambies a esta plantilla el ancho de las columnas, dado que la forma redondeada son imágenes y tendrías que modificar éstas con Photosop o similar para conservar ese aspecto redondeado de los bordes.
También te comento que sería bueno tener un blog de pruebas que solo uses justamente para eso, para realizar pruebas antes de aplicarlo al blog real.
Por lo demás, no te debería dar ningún error, y si te aparece ese error de sintaxis es porque no has copiado correctamente el código o has eliminado alguna etiqueta de cierre.
Espero que lo puedas solucionar y si no, intenta de nuevo preguntar en esta entrada para ver cómo te puedo ayudar, pero te aconsejo eso, créate un blog nuevo con la misma plantilla para pruebas y cuando lo tengas perfecto ese blog, aplícalo al otro.
Saludos.
Gracias José ya agregué la tercer columna solo que no sé como cambiar el color de fondo. Agradezco mucho tu ayuda, veo que sos un maestro en esto..
Hola de nuevo Fernando,
ya he visto el email que me has enviado desde el formulario de contacto, te envío ahora la respuesta con el código que debes agregar.
Saludos.
Gracias José y disculpá te moleste tanto es que soy nuevo en esto y quiero que quede lo mejor posible, además como habras visto la descripción del blog me queda fuera e la imagen y no puedo centrarla. me gustaría poner un link de tu blog en mi pagina si no te molesta. Ya que es muy util. Abrazo.
ya te he enviado el email con la respuesta, saludos.
gracias!
de nada :)
José me mandé una macana y no se como arreglarla, se me fue hacia abajo de las entradas la 3º columna!!
hola Fernando,
acabo de ver tu blog, y creo que ya lo has arreglado porque yo lo veo bien :S
Hola, Jose M. Muy bueno esto de la columna lateral, me ha ayudado mucho. Pero tengo varias cosas: 1.- ¿Por qué eliminar la segunda barra lateral derecha? ¿No se puede mantener? 2.- Si se puede colocar una barra lateral a la izquierda, se podrían colocar unas cuantas más, tanto a derecha como a la izquierda. ¿Me equivoco? En su caso, ¿cómo hacerlo? 3.- La "irregularidad" en el encabezado y en la barra inferior se puede corregir eliminando las direcciones webs que hay en "header wrapper , header, footr-wrap2 y footer". A mí me ha funcionado. Gracias por tu ayuda, me ha servido mucho.
Hola Loquito con esto
en primer lugar, se agradece que te haya servido.
En cuanto a tus preguntas, paso a contestarlas:
1- ¿Por qué eliminar la segunda barra lateral derecha? ¿No se puede mantener?
No es que se elimine la segunda barra lateral derecha sino que la he alineado a la izquierda para que queden una a cada lado.
Si te gustan más las dos a la derecha las puedes mantener sin ningún problema, lo único que no debes modificar la propiedad "float" que es la que hace referencia a la alineación de la columna.
2 - Si se puede colocar una barra lateral a la izquierda, se podrían colocar unas cuantas más, tanto a derecha como a la izquierda. ¿Me equivoco? En su caso, ¿cómo hacerlo?
Se pueden poner todas las que quieras, lo único que tienes que tener en cuenta la resolución de pantalla, a menor, el navegador mostrará barras de desplazamiento y, a mayor, se podrá visualizar todo el ancho del blog sin necesidad de barras de desplazamiento.
¿Cómo debes hacerlo? De la misma forma que haces una, haces todas lo único que si la primera se llama sidebar la siguiente la puedes (esto a tu gusto si te gusta otro nombre pues otro da lo mismo) llamar sidebar2, a la siguiente sidebar3 ... y así sucesivamente.
3 - La "irregularidad" en el encabezado y en la barra inferior se puede corregir eliminando las direcciones webs que hay en "header wrapper , header, footr-wrap2 y footer"
Esa irregularidad es a la que me refiero en el último párrafo de esta entrada.
En esta plantilla a diferencia de otras, tanto la parte superior como la inferior del encabezado del blog, barras laterales e incluso el pie, la forma una imagen que hace al apartado en cuestión tener esa apariencia redondeada.
Lo único que debes hacer es editar esa imagen con Photoshop o programa similar y retocarla de forma que se ajuste a la anchura que has definido en el blog.
Gracias de nuevo por tu comentario y si hay alguna duda más o algo que no te haya quedado claro, lo puedes volver a preguntar aqui.
Un saludo :-)
Saludos, Jose M. Gracias por tus indicaciones porque me han servido para colocar dos barras a derecha y a izquierda (ni yo mismo me lo creo). No fue fácil, pero sí que le dediqué unas cuantas horas al asunto (quien la sigue la consigue). Ahora tengo otra duda. Quiero añadir la tercera barra lateral tanto a izquierda como a derecha, debajo de la blanca pero con el color verdoso. Veamos...
1. ¿Tengo que añadir el código #sidebar-wrap (float: endside) y #newsidebar (float: startside) o los dejo tal cual, sin tocarlos?
2. Antes de la línea <div id: main-wrap1....,añado <div id: nombre nueva columna derecha o nombre columna izda izquierda, sin tocar nada? En estos puntos me he liado un poco y no consigo ver dónde puede estar el error. Recuerda que soy profano en esto y lo que he hecho ha sido por pura casualidad, aunque tu ayuda ha sido determinante.
Nuevamente, gracias y un saludo.
Hola Loquito con esto
para recuperar la barra lateral que aparece debajo de las anteriores, debes recuperar el código sidebarbottom ... que se elimina en esta entrada del blog. Con esto tendrás la barra que aparece debajo de la otra solo en la parte derecha.
1. El código que insertamos en el apartado Page Structure queda exactamente igual, ni hay que añadir ni modificar ni quitar nada.
2. Lo único que, en el apartado body, tienes que pegar el mismo código div id='sidebarbottom-wrap1' ... justo antes de la línea, como bien indicas, div id='main-wrap1' ...
Eso sí, antes de guardar los cambios, ten en cuenta que no puede haber dos barras con el mismo nombre, por lo que tendrás que cambiar el id que pone dentro de la etiqueta b:section y que no pueden estar agregados los mismos gadgets en ambas barras, por lo que tendrás que eliminar algunos dentro del código de una y dejarlo en la otra.
Y como siempre digo, antes de hacer algún cambio crea una copia de seguridad de la plantilla del blog o bien estos cambios antes de aplicarlo al "blog real" realízalo en uno de pruebas y cuando lo tengas claro lo aplicas al otro.
Espero que lo consigas, un saludo :-)
Nuevamente, muchas gracias, Jose M. Me he liado un poco con esto pero sigo intentándolo, que así aprendo algo más. De todas formas, quisiera preguntarte otra cosa aunque sé que esta no es la sección indicada. Verás... Quiero poner en mi blog los títulos de las secciones que quiero que tenga, al igual qiue lo tienes tú ("mis otras webs", "ayuda a Janire" (muy bueno esto para sensibilizar) y otros). ¿Lo haces por medio de tablas en html o, por ejemplo, en paint? He visto en otras webs cómo hacer tablas pero es un lío. Cuando tengas tiempo, ¿podrías hacer un tutorial? Lo digo porque explicas lo que hay que hacer de una forma muy sencilla para el profano y eso es algo que te agradezci mucho, al igual que todos los que visitamos constantemente este fantástico blog. De nuevo, muchas gracias por tu gran ayuda.
Hola Loquito con esto
los títulos de las secciones? se ponen en el nombre del gadget ... o te refieres a la imagen (rectángulo con bordes redondeados) que aparece de fondo?
El contenido de algunos gadgets (por ejemplo directorios, sígueme ...) sí tienen una tabla HTML para poder organizar correctamente las imágenes que llevan.
Tutorial sobre cómo hacer una tabla? bueno no está muy desarrollado, pero mira a ver si te sirve lo que hay en la entrada Agregar gadget Sígueme en redes sociales
Si no te sirve, lo comentas y algo una entrada completa dedicada al tema.
Un saludo :-)
Publicar un comentario
Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.