MDULO 3: BLOGGER

EL TEMARIO
WEBLOGS DE QU HABLAMOS CUANDO
HABLAMOS DE BLOGS? 2H HERRAMIENTAS Y CONCEPTOS 2H BLOGGER 14H WORDPRESS 14H OTRAS PLATAFORMAS 5H CAJN DE SASTRE 3H

MDULO 3: NDICE
CREAR UN BLOG EL ESCRITORIO DE BLOGGER DISEO DEL BLOG APROVECHAR AL MXIMO EL BLOG CONFIGURAR UN DOMINIO PERSONALIZADO TRABAJAR CON IMGENES CONFIGURAR UNA TIENDA EN EL BLOG SOLUCIN DE PROBLEMAS

Chrome

YouTube

Picasa

Maps

Alertas

Gmail

UNIVERSO GOOGLE

CREAR UN BLOG

CREAR UN BLOG
Cuenta en GMAIL.

CREAR UN BLOG

CREAR UN BLOG
Perl de Blogger Google+ Perl limitado

CREAR UN BLOG

CONCURSO
FINAL DE CURSO 10 JUNIO

Blogs gratuitos Presentacin de Ideas Votacin popular Valoracin Diseo Contenido Estructura
Premio?

PRCTICA

Pensamos un nombre para el blog Lo abrimos y lo apuntamos en la hoja.

EL ESCRITORIO

EL ESCRITORIO
Perl conectado con Google+ Nueva entrada Listado entradas Crear nuevo blog Men Ver blog

Blogs que sigues

EL ESCRITORIO
GOOGLE +: La importancia de tener el perl perfectamente actualizado

EL PERFIL

EL ESCRITORIO

EL PERFIL

Kit-kat Google+

GOOGLE +

GOOGLE +

GOOGLE +

GOOGLE +

GOOGLE +

GOOGLE +

GOOGLE +

GOOGLE +

GOOGLE +
Inicio = Muro de Facebook. Actividad de tus Crculos. Pginas = Pginas de Facebook Comunidades = Grupos de Facebook Perl = Nuestro perl Explora: Descubrir nuevos contenidos. Fotos: Picasa Encontrar personas Local = Google Places Hancouts = Skype Juegos

EL ESCRITORIO

EL PERFIL

Perl no conectado con Google+ http://www.blogger.com/edit-prole.g

EL ESCRITORIO

EL PERFIL

Perl no conectado con Google+ http://www.blogger.com/edit-prole.g

PRCTICA

Editamos al mximo nuestro perl

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

PRCTICA

Congurar las opciones del blog. Crear una pgina (de prueba) y hacerla visible.

13 Mayo

PUBLICAR UNA ENTRADA

LAS ENTRADAS
Son la esencia del blog Publicarlas segn un calendario de contenidos y
regularmente. NO PLAGIAR CONTENIDOS Citar siempre la fuente Publicar contenido relevante para el usuario y nunca en formato web.

LAS ENTRADAS

Igual que un procesador de textos:

aadir fotos, enlaces, formato al texto, alinearlo, vietas, entrecomillado.... Interesante Salto de Lnea (no entradas completas en index) Eliminar formato. Para cuando copiamos y pegamos texto. HTML. Para embeber contenido como vdeos en YouTube (app), presentaciones en slideshare...etc. Tambin para acciones que no podemos hacer con el men de cabecera.

LAS ENTRADAS
Tengo la entrada. Revisada y lista para publicar. Y ahora?

PRCTICA

Editar nuestra primera entrada en el blog.

14 Mayo

DISEO DEL BLOG

DISEO: ELEMENTOS DE LA PGINA

DISEO: ELEMENTOS DE LA PGINA

LA BARRA DE NAVEGACIN

PRCTICA

ADAPTAMOS LA BARRA DE NAVEGACIN A NUETROS BLOGS.

DISEO: ELEMENTOS DE LA PGINA

FAVICON

DISEO: ELEMENTOS DE LA PGINA

Los gadgets ocupan la mayor parte del diseo del blog. En particular la columna lateral. Los gadgets no le deben restar protagonismo a los post y han de adaptarse al propsito del blog. Seleccionamos slo los necesarios.
GADGET

DISEO: ELEMENTOS DE LA PGINA

PGINAS ADSENSE SEGUIDORES CUADRO DE BSQUEDA HTML/JAVASCRIPT IMAGEN PRESENTACIN LISTA DE ENLACES ETIQUETAS ENLACES DE SUSCRIPCIN PERFIL ARCHIVO DEL BLOG CABECERA DE LA PGINA

GADGET

DISEO: ELEMENTOS DE LA PGINA

Cada Gadget, tiene sus opciones

GADGET

DISEO: ELEMENTOS DE LA PGINA

CUADRO DE BSQUEDA
Permite a los visitantes buscar con rapidez en nuestro blog, sin tener que desplazarse ni visitar muchas etiquetas para intentar localizar lo que est busacando. Aadir: Elementos de la pgina: Aadir un gadget. (Arriba en la columna lateral derecha) Lo bsico Cuadro de Bsqueda. Seleccionamos este blog. Seleccionamos el ttulo del gadget Guardar Colocar en la posicin correcta (si no lo est)

GADGET

DISEO: ELEMENTOS DE LA PGINA

CUADRO DE BSQUEDA

GADGET

DISEO: ELEMENTOS DE LA PGINA

ENLACES DE SUSCRIPCIN
Permite a los visitantes, suscribirse a las entradas o comentarios del blog, informndoles de nuevas actualizaciones. Aadir: Aadir Gadgets Lo bsico: enlaces de suscripcin (seguir por correo electrnico) Aadimos la URL de FeedBurner Cambiamos el ttulo Guardar.
Lo veremos en detalle.

GADGET

PRCTICA
Aadimos el Gadget de Bsqueda Aadimos el Gadget de Suscripcin (previa conguracin Feedburner automtico-)

DISEO: ELEMENTOS DE LA PGINA DISEO

ETIQUETAS

Antes de nada. Comprobamos que hemos aadido varias etiquetas a la entrada de prueba. Aadimos el gadget como los anteriores.

GADGET

DISEO: ELEMENTOS DE LA PGINA DISEO

LISTA DE ENLACES

Enlaces que recomendamos a nuestros lectores. Se van de nuestra pgina, porque el enlace se abre en la misma ventana. Lista de enlaces, no de blogs.

Aadimos tres enlaces. Uno de ellos, el blog del curso: http://bloggerprofesionalgijon.blogspot.com.es

GADGET

15 Mayo

DISEO: ELEMENTOS DE LA PGINA DISEO

CALENDARIO
Conguramos Google Calendar Creamos un nuevo calendario Aadimos los eventos que queramos. Conguracin: Debajo Mis calendarios - Conguracin Compartir este calendario Hacer el calendario pblico Conrmar. Compartido: editar conguracin. Pestaa detalles del calendario, botn HTML. Herramienta de conguracin. Anchura: 180 o 220 px. Copiamos el cdigo y lo aadimos en el Gadget.

Vamos a intentarlo!

GADGET

16 Mayo

DISEO: ELEMENTOS DE LA PGINA DISEO

Cabecera de la pgina. Banner diseado en forma grca que ocupa el lugar del texto en la zona de la cabeceera. Podemos hacer que aparezca detrs del ttulo (si es una imagen de fondo) o en lugar del ttulo y la descripcin. Diseo: Editar cabecera.
CABECERA

DISEO: ELEMENTOS DE LA PGINA DISEO

AADIR BANNER

CABECERA

DISEO: ELEMENTOS DE LA PGINA DISEO

AADIR BANNER

CABECERA

DISEO: ELEMENTOS DE LA PGINA DISEO

Nos permite aplicar un diseo seleccionado: Plantillas. Personalizar el fondo. Imagen de fondo y gama de colores principal. Personalizar el diseo. Diseo del cuerpo del blog, del pi de pgina y ajustar el ancho. Avanzado. Elementos de la pgina (texto, fondos, enlaces, ttulos de entrada...) Colores y Fuentes. Cdigo CSS
PLANTILLAS

DISEO: ELEMENTOS DE LA PGINA DISEO

PLANTILLAS

DISEO: ELEMENTOS DE LA PGINA DISEO

FONDO Y GAMA DE COLORES PRINCIPALES

DISEO: ELEMENTOS DE LA PGINA DISEO

DISEO Y ANCHO

DISEO: ELEMENTOS DE LA PGINA DISEO

Modicar el color y la fuente de elementos especcos del blog (Texto de pgina, Fondos, Enlaces, Ttulo del blog, Ttulo de la entrada...)

AVANZADO

PRCTICA

Personalizamos nuestro blog.

20 Mayo

APROVECHAR AL MXIMO EL BLOG

AUMENTAR TRFICO
1. Suscripciones por Email de FeedBurner 2. Contenido de las entradas y palabras clave 3. Metaetiquetas 4. Ttulo y descripcin del blog 5. Enlaces de retroceso 6. Lista de blog 7. Gadget Add This

AUMENTAR TRFICO
Permitir a los visitantes suscribirse a nuestro blog por correo electrnico. feedburner.google.com Creamos una nueva fuente (pegamos la direccin de nuestro blog) Siguiente
1. FEEDBURNER

AUMENTAR TRFICO

1. FEEDBURNER

AUMENTAR TRFICO

1. FEEDBURNER

AUMENTAR TRFICO

1. FEEDBURNER

AUMENTAR TRFICO
PASO 1

1. FEEDBURNER

AUMENTAR TRFICO
PASO 2

1. FEEDBURNER

AUMENTAR TRFICO
El contenido no tiene que tratar slo de nuestro producto o servicio. Temtica amplia Las entradas deben tener una buena redaccin. Contener palabras clave sobre nuestro negocio (o proyecto personal) en la redaccin y en el ttulo. Sin pasarnos. El 2 o 3% del contenido total deben ser palabras clave (si no, nos catalogan de Spam) Ortografa!! Periodicidad.
2. CONTENIDO

AUMENTAR TRFICO
Lnea de cdigo HTML que describe nuestro sitio Web. Se suelen colocar en la parte superior de la pgina: Title, keywords y descripcin. Son para los motores de bsqueda.
3. METAETIQUETAS

AUMENTAR TRFICO
Aadimos Metaetiquetas al Blog: Escritorio - Plantilla - Edicin HTML Buscamos <head> Escribimos <head> <meta name=keywords content=aqu ponemos nuestras palabras clave separadas por coma y entrecomilladas/> <meta name=description content=hacemos una descripcin breve de nuestro blog/> Guardar plantilla

3. METAETIQUETAS

AUMENTAR TRFICO

3. METAETIQUETAS

PRCTICA

AADIMOS KEYWORDS Y DESCRIPCIN AL BLOG

21 Mayo

AUMENTAR TRFICO
Diseo - Editar Cabecera.

4. TTULO Y DESCRIPCIN DEL BLOG

AUMENTAR TRFICO
Enlaces de retroceso - Backliks Pingback Wordpress Lo activamos en Conguracin Entradas y comentarios - Backlinks Mostrar. Nos aparecern los enlaces que otras personas han hecho a nuestro post
5. ENLACES DE RETROCESO

AUMENTAR TRFICO
Contenido complementario a nuestro blog. Recomendaciones Mejora el posicionamiento web. Aadimos aplicacin, opciones y blogs.
6.LISTA DE BLOGS

AUMENTAR TRFICO

6. LISTA DE BLOGS

AUMENTAR TRFICO

6. LISTA DE BLOGS

PRCTICA

AADIMOS EL BLOG DEL CURSO (Y ALGN OTRO) A NUESTROS BLOGS

6. AADIMOS LISTA DE BLOGS

AUMENTAR TRFICO
Ofrecemos la posibilidad a los lectores de compartir de forma rpida y fcil nuestras entradas. El objetivo: aumentar el trco al blog. www.addthis.com y nos registramos
7. GADGET ADDTHIS

AUMENTAR TRFICO

7. GADGET ADDTHIS

AUMENTAR TRFICO
Problema: salen duplicados porque blogger los tiene ya activados. Solucin: Borrarlos del HTML.
Quita de Edicin HTML de Blogger y expandiento privilegios primero, lnea: <b:include data='post' name='shareButtons'/>

7. GADGET ADDTHIS

AUMENTAR TRFICO

AADIMOS EL GADGET A NUESTRO BLOG

7. GADGET ADDTHIS

22 Mayo

Anexo. TWITTER

PERO QU ES TWITTER EXACTAMENTE TWITTER?

Un microblogging : 140 caracteres Herramienta para compartir no slo qu ests haciendo, sino tambin contenido interesante y relevante. (Links) Representa los valores de la web social: Innovacin, creatividad, libertad, meritocracia, comunicacin, participacin, co-creacin y colaboracin. Open innovation (los usuarios redenen constantemente sus usos) Multidimensional (diferentes tipos de relacin) Herramienta No es un blog ni un chat, ni un sitio donde slo contar qu ests haciendo.

@gijon2013

TWITTER. Tipos de relacin

Sigo y no me siguen Me siguen y yo no les sigo Nos seguimos los dos (amigos) Nos nos seguimos pero podemos ver sus actualizaciones (bsquedas)

@gijon2013

TWITTER: Terminologa
Avatar: Es la imagen de cada usuario. Block: Es el acto de evitar que un usuario pueda ser tu seguidor, tampoco aparecern tus Twets en su Timeline y no aparecers en su lista de Followings Direct Messages (DM): Son los Mensajes Directos privados, y para poder enviar un DM a un usuario, ste debe de ser tu seguidor Favoritos: Tweets favoritos y marcados con una estrella. Followear: Accin de seguir a alguien. Follower: Es cada uno de los usuarios que te sigue en Twitter. Cada vez que tu "Twittees" algo, aparecer en su timeline y podrn leerlo. Home: pgina de usuario es el centro de tu actividad en Twitter va web. Menciones: Son cada uno de los Tweets en los que se incluye (menciona) tu nombre de usuario. Es importante no confundir menciones con Replys, ya que en el segundo caso, se reere a aquellos Tweets que comienzan con @Nombreusuario. Followfriday (#FF): Accin realizada en viernes y por la que un usuario de twitter recomienda seguir a otro usuario, por algn motivo. Following: Usuarios a los que sigues. Todos sus tweets los vers en tu Timeline. Hashtag (#): Sirve para etiquetar los Tweets que tratan sobre temas especcos y facilitar su bsqueda en Twitter. Pueden introducirse en cualquier parte del texto.

@gijon2013

TWITTER: terminologa
Timeline: Es la pgina donde se muestran los Tweets que tu escribes y los de los usuarios a los que sigues. Trending Topics: (Temas Populares) : Son los temas ms populares en cada momento en Twitter. Segmentado por pas. Tweet: Es cada uno de los mensajes de un mximo de 140 caracteres que se pueden enviar a travs del servicio de Twitter. Twittear: Accin de emitir Tweets en Twitter. Unfollowear: Acto contrario a Followear, es decir, se deja de seguir a un usuario en Twitter. Sus Tweets no aparecern ms en tu Timeline. Username: Es el nombre de cada usuario en Twitter.
Perl: Es la parte de cada cuenta que es pblica y visible para el resto de los usuarios y para cualquier navegante. Puedes acceder al perl de cualquier usuario utilizando la frmula http://twitter.com/ NombreUsuario en tu navegador. Reply (@): Es un Tweet enviado directamente a ti. Para enviar una Reply utiliza la frmula @NombreUsuario + tweet a enviar y el usuario de destino la recibir en sus Menciones. Retweet (RT): Son una forma de republicar un Tweet de alguno de los usuarios a los que sigues y que consideras especialmente interesante. Dos formas de hacer el tweet:
Automtico: avatar y user del tweet original Editado: RT @user texto texto

Modied Tweet. (MT). Es un RT pero modicado.

@gijon2013

TWITTER: las listas

Son la forma de organizar a tus followers por temtica. Imprescindibles en tu cuenta de twitter. Datos:
Nombre de la lista Descripcin Privacidad
Pblica (todo el mundo puede verla e incluso seguirla) Privada 100% incluso para la gente que agregues a ella)

@gijon2013

TWITTER: usos USOS DE TWITTER

Posicionamiento.Posicionar tu marca o producto en diferentes temticas Generacin de Branding. Generacin de Lealtad.Al darte a conocer y estar interactuando con las personas en la red de forma continua, vas a generar un vnculo, van a conar en tu empresa o marca y producir que seas la marca de referencia. Atencin al cliente.Atencin inmediata, en tiempo real. Investigacin de mercado.Twitter es un estudio de mercado viviente. Es un termmetro del sentir y pensar de la gente, puedes explorar diferentes temas y extraer informacin relevante de lo que se dice de stos, puedes conocer el comportamiento de las personas, qu genera reacciones, conocer tendencias, incluso hasta podras hacer propuesta de productos o servicios y ver la aceptacin de las mismas con tu comunidad.

http://www.dosensocial.com/2012/04/06/uso-de-twitter-para-empresas-ganadoras/

@gijon2013

TWITTER: usos USOS DE TWITTER

Encontrar oportunidades de negocio. Hacer Networking y crear relaciones. Acceder a nuevos mercados. Monitorear la reputacin de tu marca. Monitorear a la competencia. Generacin de trco para tu sitio web. Convertirse en lder de opinin. Aprender del nuevo marketing. Dar a conocer temticas de tu empresa. Promocin.

http://www.dosensocial.com/2012/04/06/uso-de-twitter-para-empresas-ganadoras/

@gijon2013

Anexo. BIT.LY

BIT.LY

BIT.LY
Podemos usarlo registrados (recomendado) o sin
registrar Acortar enlaces. Ahorrar espacio y mejor aspecto visual. ESTADSTICAS: Nmero de clics por hora Origen de los tweets Distribucin geogrca Cdigo QR asociado Histrico de enlaces compartidos.

BIT.LY

23 Mayo

INTEGRACIN DE LAS REDES SOCIALES

INTEGRACIN DE LAS REDES SOCIALES

Obtener el widget Twitter.com Conguracin Widgets Selecciono: Cronologa de usuarios, favoritos, lista, buscar. Conguro opciones. Guardar
TWITTER

INTEGRACIN DE LAS REDES SOCIALES

TWITTER

INTEGRACIN DE LAS REDES SOCIALES

TWITTER

PRCTICA
Colocamos un widget de twitter en nuestro blog. Si no tenis cuenta de twitter: Usuario: papracticar Pass: cursogijon
TWITTER

INTEGRACIN DE LAS REDES SOCIALES

FEEDBURNER. Automatizar twitter #consejopersonal NO lo hagis

INTEGRACIN DE LAS REDES SOCIALES

INTEGRACIN DE LAS REDES SOCIALES

INTEGRACIN DE LAS REDES SOCIALES

Obtener el widget http://developers.facebook.com/docs/ plugins/ Elegimos el Plugin que queramos Conguramos las opciones. Copiamos el cdigo (IFRAME)
FACEBOOK

INTEGRACIN DE LAS REDES SOCIALES

FACEBOOK

INTEGRACIN DE LAS REDES SOCIALES

FACEBOOK

PRCTICA
Colocamos el plugin like box en nuestro blog. www.facebook.com/ PGINAQUEQUERAMOS Opcin: /CursoCMUCJC
TWITTER

27-28 Mayo

GOOGLE ANALYTICS

ANALYTICS
Instalar Analytics 1. Entramos en Google Analytics 2. Aadimos el blog. Administrador Nueva Cuenta. 3. Completamos formulario 4. Copiamos el ID de seguimiento. 5. Insertamos en HTML antes de </head>

ANALYTICS

ANALYTICS

ANALYTICS
ANALYTICS BLOG Entradas: Pginas vistas Fuentes de trco: URL, sitios de referencia, Palabras clave Pblico: Paises, navegadores, sistemas operativos

ANALYTICS
ANALYTICS.COM

ANALYTICS ALGUNAS MTRICAS

Pginas Vistas: Pginas distintas que se han visto Visitas. Sesiones nuevas. (Ms de 29 minutos, sesin nueva) Visitantes nicos. Dispositivos nicos que se conectan (un mismo usuario en tres dispositivos, 3 visitantes) Tiempo de estancia en el sitio web. (Excepto la ltima pgina, que no contabiliza. Tasa de Rebote. Visitas que estuvieron pocos segundos y slo miraron una pgina.

ANALYTICS ALGUNAS MTRICAS

EL ORIGEN DE LAS VISITAS Buscadores. Orgnico y pagado Referrals. Enlaces de otros sitios web. Campaas. Otros etiquetados. Trco directo. (Url, favorito...)

ANALYTICS ANLISIS DEL COMPORTAMIENTO

Por dnde entran? De dnde nos visitan? Por dnde salen? Donde hicieron un clic? Qu producto visitaron? Cunto tiempo se quedaron? Cuntas pginas vieron? Qu chero se descargaron? Qu buscaron en el buscador interno?

29 Mayo

ADSENSE

ADSENSE
PROS Y CONTRAS DE INSTALARLO Valoracin negativa por antivirus Publicidad que no te interesa, incluso de la competencia (contenido) No lo controlas, es automtico. A veces est mal visto por usuarios.

ADSENSE

ADSENSE
Google AdSense est totalmente integrado en Blogger Es muy sencillo registrarte en Blogger y crear bloques de anuncios: solo tienes que hacer clic en la pestaa Ingresos de tu panel. Una vez que te hayas registrado, indcanos dnde quieres que mostremos los anuncios y empezaremos a hacerlo en cuanto se apruebe la solicitud. AdSense muestra anuncios relevantes en tus blogs AdSense se encarga de buscar anuncios de texto e imgenes adecuados para tu blog en funcin de su contenido y de sus visitantes. Los anuncios los crean y pagan anunciantes que quieren promocionar sus productos. Contina creando contenido de calidad Si dedicas tiempo a mejorar el contenido de tu blog, optimizars el uso de AdSense. Regstrate en AdSense para obtener las noticias, los consejos y las sugerencias ms recientes.

ADSENSE

ADSENSE

ADSENSE

ADSENSE

ADSENSE
Accedemos a nuestra cuenta de adsense Creamos un nuevo bloque de anuncios Obtenemos el cdigo Pegamos en un HTML Pestaa ingresos activamos la publicidad. Esperamos a que nos aprueben la cuenta de Adsense y el contenido del blog para ver los anuncios publicados.

DOMINIO PERSONALIZADO

DOMINIO PROPIO
TERMINOLOGA Nombre de dominio. Dominio. La terminacin .com / .es /.gov /.edu /.net /.org Registradores de dominios: GoDaddy, Google Aps, GoDaddy, Netrms, 1&1, Red Corua...

DOMINIO PROPIO
REGISTRAR Y USAR UN DOMINIO CON GOOGLE APPS

Conguracin / Lo bsico / Aadir un dominio personalizado /elegir nombre/ comprobar disponibilidad. Coste 10 dlares Libro.

DOMINIO PROPIO
REGISTRAR Y UTILIZAR UN DOMINIO CON OTRO CLIENTE. Conguracin / Lo bsico / Conguracin avanzada Conguracin de las DNS del dominio.

TRABAJAR CON IMGENES

PICASA
EDITOR DE FOTOS

PICASA
Todas las imgenes que subimos al blog, se suben a un lbum de Picasa. Tambin podemos usar la subida de imgenes sin que sean necesariamente para usar en el blog. Si eliminamos una imagen del blog, no se elimina de picasa. Si subimos una imagen duplicada, se almacenar dos veces.

PICASA
PRESENTACIN FOTOS
Incrustar proyeccin de diapositivas

PICASA
SUBIR FOTOS DE GRAN TAMAO Flickr (1T) Skydrive (7GB) Google SITES
Aadir imagen como URL o como HTML

30 Mayo

DISEO AVANZADO

DISEO AVANZADO
LO PRIMERO DE TODO Crear una copia de seguridad Escritorio-Plantilla- crear/restablecer copia de seguridad - Descargar plantilla completa. Almacenamos un archivo XML en el ordenador. Si alguna vez hay que restaurarla, simplemente subimos dicho archivo en la misma pantalla que estamos ahora.

DISEO AVANZADO

DISEO AVANZADO
THE CUTEST BLOG ON THE BLOCK

Diseos gratuitos de blogger.

DISEO AVANZADO
THE CUTEST BLOG ON THE BLOCK Para poder usarlos , primero hemos de cambiar la plantilla de blogger a Sencillo Vamos a la pgina, seleccionamos el fondo Background que nos guste. Copiamos el html y lo pegamos en un gadget del blog Ponemos como ttulo del gadget : <!--background--> Listo!!

DISEO AVANZADO
THE CUTEST BLOG ON THE BLOCK

DISEO AVANZADO
eBlog Templates / Blogger Templates Free INSTALACIN DE PLANTILLAS Escogemos plantilla Guardamos el archivo en formato zip. Guardamos una copia de seguridad de nuestro blog. Subimos el archivo xml (dentro del zip) al HML. Seleccionamos mantener widgets y conguramos nuestras opciones (cabecera, lugar de los gadgets..) Listo!!!

DISEO AVANZADO
eBlog Templates / Blogger Templates Free INSTALACIN DE PLANTILLAS

DISEO AVANZADO
INSTALAR UN FONDO Necesitamos la URL de una imagen subida a un servidor propio o a Google Sites. Google Sites es una herramienta de Google para crear pginas WEB. Nos registramos y creamos cuenta slo para usarla de servidor (En principio) Paso 1: Creamos el fondo y lo subimos a Google Sites Paso 2: Copiamos la URL de la imagen Paso 3: modicamos el cdigo HML del blog

DISEO AVANZADO
INSTALAR UN FONDO

1. Creamos Google Sites 2. Subimos nuestro fondo a imgenes

sites.google.com/site/gijon201314/system/app/pages/admin/attachments)

(https://

3. Copiamos la URL: https://sites.google.com/site/gijon201314/FONDO (Eliminamos Attredirects=0)

DISEO AVANZADO
INSTALAR UN FONDO
EDITAMOS EL HTML
Sustituimos: body { background : $bgcolor; Por:

body { background: URL; background-position: top center; Background-repeat: not repeat;

URL QUE HEMOS COGIDO DE GOOGLE SITES

ALINEACIN CENTRADA

NO REPETICIN

DISEO AVANZADO
CAMBIAR A UN FORMATO DE TRES COLUMNAS CON HTML PGs 130-136 del blog. Se puede hacer automtico desde el diseador de plantillas...

DISEO AVANZADO
PERSONALIZAR DISEO DE LAS ENTRADAS Aadir un separador a las entradas Subimos la imagen a Google Sites y copiamos la URL En cdigo HML, buscamos post-footerline 3 Insertamos la imagen en el cdigo HTML

DISEO AVANZADO
PERSONALIZAR DISEO DE LAS ENTRADAS Pgina 137
<div class= post-footer-line post-footer-line-3 > >span class= post-location> <b : if cond=data : top.showLoction> <b : if cond = data : post.loccation> <data:postLocationLabel/> <a expr: href= data: post.location.mapsUrl taget=_blank><data:post.location.name/ ></a> </b : if> </b : if> </span> <div align= center> <img src=http://sites.google.com/site/imagen/separador-entradas.jpg/> </div> </div>

DISEO AVANZADO
Imagen de Fondo en una barra lateral
Libro, pgina 138-139

CONFIGURAR UNA TIENDA EN EL BLOG

TIENDA EN EL BLOG
LO PRIMERO DE TODO Nos creamos una pgnia para colocar todo lo que vamos a ver en este captulo. La llamamos Productos

TIENDA EN EL BLOG
UTILIZAR PAYPAL Servicio para recibir pagos en lnea. Los compradores no necesitan crear PayPal para utilizar esa opcin de pago (Los vendedores s :D) Comisin de venta entre un 1,9 y un 2,9% (Variable)

TIENDA EN EL BLOG
EJERCICIO
PARTE 1 . AADIR LA TABLA DE PRODUCTOS

En la pgina que hemos creado de productos, copiamos el HTML de la pgina 146 (Tabla) en la pestaa HTML Editamos, en la pestaa RedactarItem name, Description y Price.

TIENDA EN EL BLOG

TIENDA EN EL BLOG
EJERCICIO
PARTE 2 . BOTONES DE PAYPAL

Creamos o accedemos a la cuenta de Paypal Creamos un botn de compra para cada producto carro de la compra Hacemos el botn y copiamos el HTML que nos da. Lo insertamos (etiqueta html) despus del precio correspondiente y despus de poner un <BR> (salto de lnea).

TIENDA EN EL BLOG

TIENDA EN EL BLOG
AADIR BOTN DE COMPRAR AHORA Los mismos pasos que antes, pero copiamos otro html de paypal, el de comprar ahora

SOLUCIN PROBLEMAS

SOLUCIN DE PROBLEMAS
ERRORES COMUNES HTML Desaparece columna derecha: Hemos aadido HTML incorrrecto. Suelen ser las etiquetas </div> o >/p> que faltan, que son las que cierran la seccin y el prrafo respectivamente.

SOLUCIN DE PROBLEMAS
ERRORES COMUNES HTML Falta ; en el cdigo CSS: Todas las lneas de cdigo terminan con ; excepto los comentarios que estn delimitados por /*y*/

SOLUCIN DE PROBLEMAS
ERRORES COMUNES HTML Cdigo CSS mal escrito: http://www.w3schools.com/html/ http://www.w3schools.com/css/

SOLUCIN DE PROBLEMAS
ERRORES EN LAS IMGENES Colocar una imagen: Para colocar una imagen a la derercha o la izquierda, tiene que tener un ancho de 300 px o menos, para que no se amontone con el texto.

SOLUCIN DE PROBLEMAS
ERRORES EN LAS IMGENES Tamao de la imagen: Lo aconsejable es entre 400 y 500 px si lo queremos centrar. Si la queremos poner en un lateral de la entrada lo aconsejable es 200-250px. Tamaos recomendados: Libro pg 163-164

BIBLIOGRAFA

www.bloggerstop.net www.bloggingtips.com www.bloggertipsandtricks.com www.blogussion.com www.dailyblogtips.com www.seomoz.org/blog www.blogherald.com www.threecolumnblogger.com www.tips-for-new-bloggers.blogspot.com

FIN DEL MDULO