Tutorial: Cómo hacer un layout de dos columnas en LJ.
This is a LJ layout tutorial in spanish!
He visto que muchos de ustedes tienen problemas entendiendo como hacer un layout de dos columnas asi que hice este tutorial para hacerles la tarea más fácil! Ojalá que les resulte!!
Como todos andan en la onda de hacer sus propios layouts para LiveJournal (y como veo que hay varios pidiendo auxilio) he decidido hacer este tutorial.
ESTE TUTORIAL ESTÁ ESCRITO PARA PAINT SHOP PRO 7.0 (PUEDE ADAPTARSE FACILMENTE A PSP 8.0 Y A OTRAS VERSIONES INFERIORES).
1) En PSP 7.0 abre una nueva imagen de aproximadamente (esto puede variar según gusto) 250 x 500 y en ella crea el header (imagen que quieres que aparezca en la cabecera de tu página. Yo no puedo ir paso por paso enseñando como crear una imagen como la que voy a usar de ejemplo, pero no es nada del otro mundo, con un poco de práctica se logra todo). [ESTA ES MI IMAGEN]
2) Para lograr el efecto de fusion entre el header que has creado con el background (imagen de fondo) debemos hacer lo siguiente:
- Una vez que ya tienes lista tu imagen, haz click aqui -->
y aquí -->
, selecciona los colores que tu crees combinan mejor con tu imagen.
Ahora dibuja dos rectangulos en la imagen de la siguiente manera:
Una vez que tengas eso listo ve (en la barra de herramientas superior) a: Layers >> Merge >> Merge All (Flatten) (esto hace que todas las capas de tu imagen se junten en una sola)
- Con el Selection Tool (
) selecciona una pequeña parte de tu imagen de esta manera:
Copia la seleccion y pégala (
) como una imagen nueva. Esta porción de imagen será tu background (imagen de fondo) la cuál se repetirá creando el efecto de dos rectángulos continuos en tu LJ (donde pondrás la información de tu blog). Guárdala.
-Sube las imágenes a Photobucket.com o al server que tu prefieras.
OK. La parte de PSP 7.0 está terminada. Ahora vamos a trabajar con el código en LJ.com.
3) Vé a http://www.livejournal.com/modify.bml (por supuesto que debes hacer Log In antes) y concentra tu atención en este espacio:
[NOTA: OCUPA EL ESTILO "GENERATOR"]
Dónde debes poner el siguiente código (crédito total del código a carriep63). Seleccionalo todo y pégalo en tu espacio de Overrides. En esta parte debes prestar mucha atención a cada parte del código, un error que cometas afectará todo. Al final del código en colores diferentes está la explicación de como posicionar tu LJ en tu layout.
IMPORTANTE: PARA QUE ESTE CÓDIGO FUNCIONE DEBES TENER UN SITIO WEB LISTADO EN TU PÁGINA DE INFORMACIÓN, NO IMPORTA QUE NO SEA TU PROPIO SITE, LISTA CUALQUIERA, SINO NO FUNCIONARÁ.
[NOTA: REEMPLAZA SÓLO LO INDICADO]
LASTN_WEBSITE<=
position:absolute; top:300; left: 480; width: 275; height: 100%; visibility: visible; id="
scroll3"="scroll3"" class="side">
LO QUE QUIERAS QUE SE VEA EN LA COLUMNA IZQUIERDA DE TU LAYOUT
![]()
src="http://LA DIRECCION DE TU IMAGEN DE CABECERA/HEADER"
class="x" scroll="no">
<=LASTN_WEBSITE
LASTN_HEAD<=
Your title
<=LASTN_HEAD
Cambia estos números para mover tus tables/marcos (donde aparecen las entradas en tu LJ) a la derecha o a la izquierda. Mientras más alto el número, más a la derecha se moverá.
Cambia estos números para mover tu columna izquierda (donde antes pusiste texto, imágenes etc. al principio del código).
Ejemplo: top:300 (este número especifica que tan lejos del margen superior de la pantalla quieres que aparezca tu columna izquierda. Mientras más alto sea el número, más lejos del margen superior estará); left: 480 (Este número especifica que tan lejos del margen izquierdo de tu pantalla quieres que esté tu columna izquierda. Mientras más alto sea el número, más lejos estará del margen izquierdo); width: 275 (Este número específica el ancho de la columna izquierda de tu layout. Generalmente sirve para adaptar el tamaño de la columna a tu layout.)
Cambia estos números para hacer que tus tablas/marcos sean más anchos o más angostos. No cambies ni un numero más.
Cambia estos números para mover tus tablas de arriba a abajo.
Estos números te ayudarán a posicionar el header (imagen de cabecera) en tu layout
No olvides cambiar los colores, como te plazca, en la sección de colores que todos deberíamos conocer.
Y voilá, tu layout debería estar listo, cualquier duda deja un comentario en este post!
Buena suerte!
He visto que muchos de ustedes tienen problemas entendiendo como hacer un layout de dos columnas asi que hice este tutorial para hacerles la tarea más fácil! Ojalá que les resulte!!
Como todos andan en la onda de hacer sus propios layouts para LiveJournal (y como veo que hay varios pidiendo auxilio) he decidido hacer este tutorial.
ESTE TUTORIAL ESTÁ ESCRITO PARA PAINT SHOP PRO 7.0 (PUEDE ADAPTARSE FACILMENTE A PSP 8.0 Y A OTRAS VERSIONES INFERIORES).
1) En PSP 7.0 abre una nueva imagen de aproximadamente (esto puede variar según gusto) 250 x 500 y en ella crea el header (imagen que quieres que aparezca en la cabecera de tu página. Yo no puedo ir paso por paso enseñando como crear una imagen como la que voy a usar de ejemplo, pero no es nada del otro mundo, con un poco de práctica se logra todo). [ESTA ES MI IMAGEN]
![[ESTA ES MI IMAGEN]](http://img78.photobucket.com/albums/v339/xkiki_87/x_wallpaper_lupintut.png){kind=link}
2) Para lograr el efecto de fusion entre el header que has creado con el background (imagen de fondo) debemos hacer lo siguiente:
- Una vez que ya tienes lista tu imagen, haz click aqui -->
y aquí -->
, selecciona los colores que tu crees combinan mejor con tu imagen.
Ahora dibuja dos rectangulos en la imagen de la siguiente manera:
Una vez que tengas eso listo ve (en la barra de herramientas superior) a: Layers >> Merge >> Merge All (Flatten) (esto hace que todas las capas de tu imagen se junten en una sola)
- Con el Selection Tool (
) selecciona una pequeña parte de tu imagen de esta manera:
Copia la seleccion y pégala (
) como una imagen nueva. Esta porción de imagen será tu background (imagen de fondo) la cuál se repetirá creando el efecto de dos rectángulos continuos en tu LJ (donde pondrás la información de tu blog). Guárdala.
-Sube las imágenes a Photobucket.com o al server que tu prefieras.
OK. La parte de PSP 7.0 está terminada. Ahora vamos a trabajar con el código en LJ.com.
3) Vé a http://www.livejournal.com/modify.bml (por supuesto que debes hacer Log In antes) y concentra tu atención en este espacio:
[NOTA: OCUPA EL ESTILO "GENERATOR"]
Dónde debes poner el siguiente código (crédito total del código a carriep63). Seleccionalo todo y pégalo en tu espacio de Overrides. En esta parte debes prestar mucha atención a cada parte del código, un error que cometas afectará todo. Al final del código en colores diferentes está la explicación de como posicionar tu LJ en tu layout.
IMPORTANTE: PARA QUE ESTE CÓDIGO FUNCIONE DEBES TENER UN SITIO WEB LISTADO EN TU PÁGINA DE INFORMACIÓN, NO IMPORTA QUE NO SEA TU PROPIO SITE, LISTA CUALQUIERA, SINO NO FUNCIONARÁ.
[NOTA: REEMPLAZA SÓLO LO INDICADO]
LASTN_WEBSITE<=
position:absolute; top:300; left: 480; width: 275; height: 100%; visibility: visible; id="
scroll3"="scroll3"" class="side">
LO QUE QUIERAS QUE SE VEA EN LA COLUMNA IZQUIERDA DE TU LAYOUT
src="http://LA DIRECCION DE TU IMAGEN DE CABECERA/HEADER"
class="x" scroll="no">
<=LASTN_WEBSITE
LASTN_HEAD<=
Your title
<=LASTN_HEAD
Cambia estos números para mover tus tables/marcos (donde aparecen las entradas en tu LJ) a la derecha o a la izquierda. Mientras más alto el número, más a la derecha se moverá.
Cambia estos números para mover tu columna izquierda (donde antes pusiste texto, imágenes etc. al principio del código).
Ejemplo: top:300 (este número especifica que tan lejos del margen superior de la pantalla quieres que aparezca tu columna izquierda. Mientras más alto sea el número, más lejos del margen superior estará); left: 480 (Este número especifica que tan lejos del margen izquierdo de tu pantalla quieres que esté tu columna izquierda. Mientras más alto sea el número, más lejos estará del margen izquierdo); width: 275 (Este número específica el ancho de la columna izquierda de tu layout. Generalmente sirve para adaptar el tamaño de la columna a tu layout.)
Cambia estos números para hacer que tus tablas/marcos sean más anchos o más angostos. No cambies ni un numero más.
Cambia estos números para mover tus tablas de arriba a abajo.
Estos números te ayudarán a posicionar el header (imagen de cabecera) en tu layout
No olvides cambiar los colores, como te plazca, en la sección de colores que todos deberíamos conocer.
Y voilá, tu layout debería estar listo, cualquier duda deja un comentario en este post!
Buena suerte!