SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG
ED
Modificar la plantilla de Blog •
Abrir el Blog
Ingresamos a la ventana de código de HTML
Profesor: Juan Carlos Araujo Herrera
Página Numero 1
SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG
Profesor: Juan Carlos Araujo Herrera
ED
Página Numero 2
SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG
Profesor: Juan Carlos Araujo Herrera
ED
Página Numero 3
SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG
Profesor: Juan Carlos Araujo Herrera
ED
Página Numero 4
SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG
ED
Modificar una Plantilla de Blogger
La plantilla esta dividida en secciones y cada una tiene un encabezado o descripción, por ejemplo “post-footer” sabemos que lo que vamos a modificar es el formato del “pie del post”. Las secciones comunes son (No en todas es igual): * Header: Se puede modificar el banner, color y tamaño de fuente del titulo, ancho y alto de la imagen, etc. * Outer-Wrapper: Esta parte es como el cuerpo de la plantilla generalmente se divide en outerwrapper aquí es donde la mayoría de veces encontramos la imagen de fondo o background, mainwrapper es la parte en que aparece los post , y sidewrapper son las columnas, si es de 2 columnas estará sidewrapper-left y sidewrapper-right. Lo rojo: Outer-wrapper Lo amarillo: Sidewrapper Lo azul: main-wrapper
* Headings: Aquí se le da formato a los encabezados. * Posts: Aquí se especifica el formato de los post. * Comments * Footer Cuando tenemos cuenta de Google, nos da la posibilidad de crear mas de un blog, podemos crear uno para practicar y después modificar el “oficial”. Voy a tomar como ejemplo la plantilla “Anime Music”, no todas las plantillas son iguales, pero si parecidas en cuanto a las descripciones, si no se encuentra el código exactamente como aquí, puede estar de otra manera pero nos indica lo mismo.
Modificar la cabecera:
Profesor: Juan Carlos Araujo Herrera
Página Numero 5
SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG
ED
Esto se puede hacer por código, pero para hacerlo más sencillo se usa la herramienta de Blogger. Nos vamos a Diseño y seleccionamos Elementos de Pagina. Donde dice “Cabecera “seleccionamos editar.
Aquí cargamos la imagen que queremos de cabecera, Podemos poner donde dice “Titulo de Blog”, o podemos omitirlo y crear nuestro propio banner. En este caso selecciono la imagen y en “Ubicación” seleccionar “En lugar del título y descripción”. Si quieres ponerle título encima de la imagen selecciona “Detrás del título y descripción”. Algo muy importante aquí es que la imagen tenga el mismo tamaño que la actual, en el código está el tamaño, sino, podemos verlo guardando la imagen actual y ver el tamaño y trabajar nuestro banner con esas medidas, aunque también se puede modificar las medidas en el código, pero si el banner nuestro es más pequeño tendríamos que modificar el ancho de toda la plantilla algo que es fácil en unas plantillas pero complicado en otras. En este caso el ancho debe ser 980px de ancho por 333px de alto
Para modificar por medio de código: Nos vamos a Diseño-----> “Edición HTML” Ubicamos el “Header” y editamos el código que se muestra en rojo y azul.
Profesor: Juan Carlos Araujo Herrera
Página Numero 6
SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG
ED
En rojo: donde empieza “Http://…………gif”, esa es la dirección del banner que trae las plantillas por defecto, aquí podemos sustituirla y subir nuestra imagen a un servidor como tinypic o imageshack y poner la url aquí. Si hemos puesto el banner por medio de la vista de diseño de blogger, borra esta url, desde donde empieza “http:// “ hasta “.gif” (o .jpg, .png, según sea el caso) porque aunque hemos puesto nuestra propia imagen, la original sigue atrás. En azul: Aquí podemos modificar el ancho y alto del banner, si modificamos aquí tenemos que modificar el ancho de todo así que por el momento lo dejamos así. (O podríamos modificar solo el alto del banner, en “Height”) Seleccionamos Guardar Plantilla (o vista previa).
Modificar el tipo de letra. Ubicamos en el código siguiente: Generalmente esta al principio. Donde dice “BODY” esta parte establece el formato global de la página. (Puede estar diferente en cada plantilla)
En rojo: El 80% representa el tamaño de la letra esto lo podemos cambiar a pixeles ya que estamos más familiarizados con establecer así el tamaño de la fuente. Podemos poner también otro tipo de letra por ejemplo Verdana, Lucida Sans o Arial. Seleccionamos Guardar Plantilla (o vista previa).
Profesor: Juan Carlos Araujo Herrera
Página Numero 7
SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG
ED
Y quedaría así:
Cambiar el color de enlaces: Generalmente abajo de lo anterior, dentro de BODY se encuentra el código para cambiar el color de los links. Ubicamos dentro de Body: A:link= el color que tendrá el link. a:hover= el color del link al pasar el mouse.
Podemos cambiar el a:visited y ponerle el mismo código que le pusimos en a:link para que se vea mejor. El color de enlaces era Gris, y le voy a cambiar por celeste. Para consultar códigos de colores esta pagina es muy buena: CODIGOS DE COLORES HTML. Cuando ya tenemos el código del color que nos gusta lo copiamos y pegamos.
Profesor: Juan Carlos Araujo Herrera
Página Numero 8
SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG
ED
Cambiar el color de encabezados. Aquí vamos a cambiar el color de los encabezados de la barra lateral. En esta caso lo que está en rojo. En este caso ubicamos la sección “Heading” (los encabezados) y dentro”Sidewrapper”, cuando veamos la palabra “sidewrapper” se refiere a las propiedades de las columnas laterales.
Aquí cambiamos el tamaño, donde dice Font-size lo cambiamos a pixeles (16px por ejemplo), y cambiamos el color que actualmente es rojo.
Cambiar el tipo de letra de los elementos del post. Por ejemplo la fecha, el pie de post donde vemos por ejemplo “Publicado por” etc. El color de letra de la fecha es rojo: Empecemos con la fecha, buscamos la sección “Post” y “Date Header” y cambiamos el código siguiente: Le ponemos el tamaño y color de letra que nos guste.
Color de letra de pie de post. Esta parte es la siguiente (lo que esta en rojo): Código: Siempre dentro de la sección Post, buscamos el Post Footer y cambiamos la letra.
Profesor: Juan Carlos Araujo Herrera
Página Numero 9
SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG
ED
Cambiar el color de letra de los comentarios. Buscamos el código dentro de la sección Comments
En rojo: Este es el encabezado de los comentarios, donde generalmente vemos el numero de comentarios de la entrada por ejemplo “1 Comentarios”. En azul: El formato del comentario publicado. Así se ve antes de modificarlo, color de letra blanco para el encabezado y comentario. Luego que cambiamos los colores, encabezado naranja y comentario rosado, (disculpas por la combinación de colores)
Quitar la sección de créditos: Si quieres puedes dejar la imagen de “Skin Corner”, en este caso, pero si quieres quitarla ubica el código “Credits”.
Esto lo podemos encontrar en la parte de abajo de todo el código, es una
Profesor: Juan Carlos Araujo Herrera
Página Numero 10
SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG
ED
DIV o sección que casi siempre se llama “Credits”. Sino esta así, busca donde diga por ejemplo “Template By” , así esta el código es este caso: Elimina desde donde empieza el “DIV Class Credits“ hasta “End credits”. Así quitas la imagen de los créditos. Aunque es recomendable que dejes los créditos que abajo, en el pie de pagina, (si los hay).
Ordenando los elementos de la pagina: Nos vamos a Diseño--->Elementos de pagina y organizamos los elementos como nos guste. Aquí es donde podemos insertar códigos HTML
en
las
barras
laterales como reproductores, videos,
encuestas,
etc.
y
ordenarlas. Si en la plantilla viene por defecto
“Labels”
podemos
cambiarlo a “Categorias” o ponerle
otro
Seleccionamos
nombre. “Labels”
y
cambiamos el titulo.
Cambiar la vista de archivo. Actualmente está la vista “Jerarquía”
Para cambiar la vista archivo elegimos el elemento y editamos.
Profesor: Juan Carlos Araujo Herrera
Página Numero 11
SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG
ED
Titulo: Podemos ponerle cualquier titulo por ejemplo “Archivo de mi blog”. Estilo: Aquí es donde seleccionamos como se vera, la que esta por defecto es jerarquía, podemos cambiar a menú desplegable, o lista y quedaría así.
Lista Menú Desplegable
Para añadir gadgets nos vamos a “Añadir Gadget” Seleccionamos el que queremos o lo mas común que es “Código HTML / Javascript”. En este ejemplo voy a poner un chat y un elemento flash. Ponemos título y pegamos el código del elemento que queremos insertar.
Profesor: Juan Carlos Araujo Herrera
Página Numero 12
SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG
ED
Estos son algunos códigos para cambiar más que todo, el tipo y color de letra de la página, para modificar otras cosas por ejemplo el fondo o el ancho depende de cada plantilla.
Profesor: Juan Carlos Araujo Herrera
Página Numero 13