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 ED

Profesor: Juan Carlos Araujo Herrera Página Numero 2

SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG ED

Profesor: Juan Carlos Araujo Herrera Página Numero 3

SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG ED

Profesor: Juan Carlos Araujo Herrera 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 outer-wrapper aquí es donde la mayoría de veces encontramos la imagen de fondo o background, main-wrapper 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-wrapperLo 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* FooterCuando 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.

Profesor: Juan Carlos Araujo Herrera Página Numero 5

SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG ED

Modificar la cabecera: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.

Profesor: Juan Carlos Araujo Herrera Página Numero 7

SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG ED

Podemos poner también otro tipo de letra por ejemplo Verdana, Lucida Sans o Arial. Seleccionamos Guardar Plantilla   (o vista previa).

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.

Profesor: Juan Carlos Araujo Herrera Página Numero 9

SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG ED

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.

 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.

Profesor: Juan Carlos Araujo Herrera Página Numero 10

SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG ED

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 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 nombre. Seleccionamos “Labels” y cambiamos el titulo.Cambiar la vista de archivo.

Profesor: Juan Carlos Araujo Herrera Página Numero 11

SISTEMA DE VENTAS Y COMERCIO ELECTRÓNICO – EDITAR BLOG ED

Actualmente está la vista “Jerarquía”Para cambiar la vista archivo elegimos el elemento y editamos.

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