Instalando Google Analytics en Blogger

 

 

Vamos a ver ésta vez una de las herramientas más útiles para nuestros blogs:

 

¿Qué es Google Analytics?
Según podemos ver en su página Google Analytics es una solución de análisis web para empresas que proporciona información muy valiosa sobre el tráfico del sitio web y la eficacia del plan de marketing. Ahora, gracias a unas funciones potentes, flexibles y fáciles de usar, podrá ver y analizar el tráfico desde una perspectiva totalmente distinta. Google Analytics le ayudará a diseñar anuncios más orientados, a mejorar sus iniciativas de marketing y a crear sitios web que generen más conversiones. Es decir y resumiendo mucho: Google Analytics es un sistema de análisis de tráfico que podremos aplicar por ejemplo a nuestro Blogger.

Gracias a ésta aplicación podremos conocer y realizar un resumen de estadísticas de nuestro blog, saber quienes son y qué hacen nuestros visitantes, qué enlaces o búsquedas han realizado, qué entradas han consultado, de dónde vienen (de que país) los visitantes, que navegador o sistema operativo usan, y otras muchas opciones.

Vamos con la instalación:

Podemos ver un vídeo realizado por oscargp86 para ElBlogEmpresarial que resume ésta instalación que veremos tambien de forma escrita:

 1 – Deberemos crear una cuenta en «Google Analytics» con un sencillo registro, que se verá simplificado si ya poseemos una cuenta gmail, en cuyo caso podemos fusionar ambas, y trabajar con el mismo login y password.

2 – Una vez dentro del sistema, lo primero que tendremos que hacer es crear una cuenta. Añadiendo un dominio, una zona horaria, y unos datos personales. Por último aceptar las condiciones de uso de Google y listo, el sistema nos mostrará un código para insertar en la web a analizar.

3 – Con éste código, nos dirigimos a nuestro entorno de administración en Blogger para insertar en la plantilla el mismo, y que asi empiece el analisis de nuestro blog, en este caso. Éste paso, que se explica de forma escrita en Analytics en éste paso, es más de lo mismo a lo que ya hemos realizado en otros ejemplos, insertar ese código en nuestra plantilla xml a la que accederemos como siempre: Personalización Diseño Edición der HTML.
Y como siempre, antes de realizar éstos cambios podemos hacer una copia de seguridad de nuestro código.

Pues ya está, ya podremos acceder a a nuestra cuenta de Google Analytics, pinchar en generar informe e investigar las multiples opciones de trabajo que nos dá.
Como detalle las primeras 24 horas generalmente, no se muestran las estadisticas, son necesarias para confirmar el estado activo de la cuenta y comenzar el recuento de visitas.

Entradas y enlaces relacionados:
http://elblogempresarial.blogspot.com/2010/02/como-instalar-google-analytics-en.html
http://www.misticyoda.com/2009/01/instalar-google-analytics-en-blogger.html
http://www.lawebdejuan.com.ar/2009/02/google-analytics-en-blog-de-blogger.html

Personalizando el blogger #4 – Editor de Plantillas

 

Como veiamos en «plantillas externas» podíamos aplicar a nuestro blog distintas plantillas de forma que mejorara el aspecto y funcionalidad de nuestro sitio. Veíamos que podíamos aplicar distintos tipos; ya fueran las predefinidas por el propio blogger o subiendo una (en formato xml) que previamente hubieramos descargado a nuestro ordenado de alguna de las páginas que nos suministran plantillas para Blogger.

 

En ésta entrada vamos a ver cómo hacer nuestra propia plantilla con algún editor de plantillas para Blogger.
Existen varias alternativas para realizar éste tipo de plantillas, como sirmpre podremos encontrar desde aplicaciones gratuitas como «Open XML Editor» a apliaciones de pago, que incluso como Artisteer  (herramienta muy completa )nos ofrecen un periodo de prueba para poder evaluar el producto (en éste caso concreto al realizar la plantilla en la versión de prueba de la aplicación se aplicará una marca de agua en ella, por lo que no nos valdría simplemente con esta versión de prueba).
Sin embargo, vamos a aprovecharnos de una reciente aplicación realizada por Google (o Blogger en éste caso) llamada «Blogger Template Designer« y que y de una forma fácil y sencilla, podremos obtener un gran número de elementos a personalizar.
Aquí un vídeo de ésta aplicación:

Como vemos en el vídeo, parece una aplicación muy chula y en la que podremos seleccionar y ajustar varias opciones. Desde si habrá o no pestañas, anchura y altura del muro del blog, transparencias y colores para cada elemento, tipos de letra y colores, etc, etc.

«Blogger Template Designer» tiene en un inicio 15 diseños diferentes altamente personalizables y cuyos cambios podremos ver en tiempo real.
Ésta herramienta todavía a día de hoy, más de un mes desde su publicación, se encuentra de manera experimental, pero podremos acceder a ella desde «Blogger in Draft» o Blogger en borrador.
Como vemos si accedemos desde éste Blogger in Draft y tras seleccionar «Diseño» poseeremos una opción que antes no teníamos. Esta opción es el «Diseñador de plantillas» tal y como se ve en la siguiente imagen:

Editado: Ésta aplicación ya está disponible a todos los usuarios, sin necesidad de hacer uso de Blogger in Draft:

Podemos destacar varios aspectos de éste Diseñador de Plantillas:

15 diseños diferentes altamente personalizables:

 Distintos diseños de columna para cada plantilla:

Cantidad y variedad de imágenes de fondo, categorizadas por estilo:

Paquetes de ajustes de colores:

Así como páginas, texturas y muchas más opciones.

En fín, una herramienta muy sencilla de uso con la que poder investigar y jugar para cambiar el aspecto de nuestro blog.

Os dejo con otro vídeo (en inglés) de un usuario haciendo uso de ésta aplicación; y recordar que podeis combinar el uso de ésta aplicación y luego cambiar el background mediante el código HTML, tal y como vimos en una entrada anterior.

Entradas y enlaces relacionados:
http://bloggerindraft.blogspot.com/2010/03/blogger-template-designer.html

Uso de blogger: personalizacion y cómo mantener tu blog

No quería dejar pasar la oportunidad de dar a conocer ésta presentación sobre el uso de blogger en el que se resumen algunas de las acciones que hemos llevado a cabo y otras que veremos en siguientes entradas (y de paso practicar sobre como incluir la presentación, :D)

Uso de blogger: personalizacion y cómo mantener tu blog

Ésta es una presentación de curso_web. Para ver más presentaciones: slideshare.

Personalizando el blogger #3 – Plantillas Externas

 

Al igual que vimos en la primera de las entradas sobre personalización del blogger, Personalizando el blogger #1 , dónde veíamos que podíamos seleccionar más plantillas y subplantillas que cuando inicialmente creabamos nuestro blog, ahora vamos a ver cómo aplicar plantillas fuera de éstas plantillas preseleccionadas por Blogger, es decir, importar Plantillas Externas.

 

Para ello, además repasamos la entrada anterior:  «Personalizando el blogger #2 Cambio de Fondo« donde encontrabamos ésta imagen:

Antes de hacer cualquier cambio, podemos hacer una copia de seguridad de la plantilla que ya tenemos, si es que hemos realizado algún cambio.

Como veiamos en la anterior entrada y podemos ver en esta imagen anterior, podemos tanto descargar la plantilla que tenemos actualmente («Descargar Plantilla Completa» en Diseño – Edición de HTML) cómo volver a subirla gracias a «Examinar» y «Subir«.

Pues ésto es básicamente lo que tenemos que hacer, mediante el botón «Subir«, poder subir alguna plantilla que hayamos descargado previamente en nuestro ordenador.
Para ello, basta con buscar plantillas para Blogger en  internet.
Existen varias páginas gratuitas de plantillas, así como de pago. Vamos a ver algunos ejemplos y más tarde un ejemplo práctico de cambio de plantilla, subiendo una que nos guste que hayamos encontrado en la red.

Además aclaro que la plantilla estará en formato .xml (mismo formato que cuando descargamos nuestra propia plantilla desde Blogger) y que éste archivo no sólo contiene la información sobre el fondo y los colores que se aplicarán a nuestro blog, sino que poseerá otro tipo de variables como el grosor de los botones, sombras para textos, tamaño de letra para títulos, para escritos, anchura y altura del blog y quizás una de las cosas más importantes y que explicaremos detalladamente más adelante: los widgets para Blogger; es decir, una de éstas plantillas nos puede ayudar mucho en la personalización de nuestro blog; sobre todo si no poseemos un conocimiento amplio sobre el tema.

Uno de éstos sitios donde encontrar plantillas es BTemplates. Ésta página me gusta porque hay un gran número de ellas, las cuales podemos seleccionar o elegir de distintas maneras:  por formato (una, dos o más columnas, etc), por estilo (elegante, callejero, fresco, etc), por color u otras opciones.

Podeis encontrar muchas y variadas páginas donde encontrar éste tipo de plantillas:

BTemplates
PlantillasBloggers
TemplatesBloggers
… Etc

Por ejemplo, vamos a probar uno de los estilos que hemos podido encontrar, concretamente éste:

 

Para ello nos dirigimos a http://btemplates.com/2010/blogger-template-phyto
y hacemos click en «Download«, gracias a lo cual, se habrá descargado en nuestro ordenador dicha plantilla*.      * Si ésta plantilla viene comprimida la descomprimimos.

Vamos a nuestro blog al apartado que comentabamos al principio de éste post: PersonalizaciónDiseño Edición de HTML. Y en el apartado «Realizar copia de seguridad/Restaurar plantilla» hacemos click en «Examinar«. Se abrirá entonces una ventana, buscaremos el archivo y una vez seleccionado elegiremos «Abrir«. Una vez seleccionado haremos click en «Subir«. En función de si hemos añadido widgets o no, o ya hubieramos aplicado otra plantilla, nos pregunatrá sobre los widgets ya instalados, podremos eliminarlos o dejarlos.
En éste ejemplo práctico, mi blog pasaría de ésto:

a ésto:

 


Como podeis observar, la apariencia del blog cambia totalmente, además dependiendo de la plantilla aplicada poseeremos unos widgets u otros (que tambien habrá que modificar más adelante).

Y si no os gusta, pues siempre podreis volver a aquel en el que estabais, gracias a haber descargado la plantilla que ya teniais.

Personalizando el blogger #2 – Cambio de Fondo

Bueno, antes de introducir alguna otra forma de personalización para nuestro blogger, no quería dejarme este paso sin señalarlo en una nueva entrada:

El cambio de Fondo o Background para nuestro blog.

Lo señalo en una nueva entrada ya que muchos usuarios sólo desean realizar un cambio como éste ya que jugando luego un poco con las opciones de Diseño que ofrece el propio blogger (Fuentes y colores, cómo se veía en otra entrada anterior) se pueden conseguir diseños personalizados muy buenos.
Para éste cambio, deberemos modificar el XML de nuestra plantilla a mano, nosotros mismos. Ésta tarea parece algo complicada cuando no estás metido en el mundillo, pero animaros a probarla, no se corre un gran riesgo ya que modificaremos apenas una línea en éste paso. De verdad, animaros que es muy fácil.
Para modificar éste XML deberemos ir a «Personalizar» «Diseño» y «Edición de HTML«.

Aquí, encontraremos una pantalla como ésta:

Distinguimos en la imagen anterior 2 apartados: A y B.

– El apartado A es el correspondiente a «Realizar copia de seguridad/Restaurar plantilla» donde disponemos de la opción «Descargar plantilla completa«, gracias a la cual podremos descargar la plantilla XML con los cambios que hayamos realizado en nuestro XML. 
Muy útil para situaciones como en la que nos encontramos, en la que haremos cambios en el código que llegado el caso, podremos invertir subiendo de nuevo éste archivo XML con la opción «Examinar» y «Subir» que tenemos disponible.


 – El apartado B es el propio código en sí. Aquí modificaremos lo oportuno en éste caso. (En la imagen anterior se ve parte de mi código; que no tiene porqué ser igual ni mucho menos con vuestro código específico).


Bien, sabido ésto, buscamos en éste código:

* — basic html elements — */ este es el codigo inicial
body {

padding: 0;
margin: 0;
fontsize: small;
color: $textcolor;
background:url( NUESTRAFOTOGRAFIA*) fixed no-repeat top left;

}
textalign: center;
}

Observamos concretamente la línea:
     background:url( NUESTRAFOTOGRAFIA*) fixed no-repeat top left;

Deberemos sustituir el texto en rojo por la dirección de nuestra fotografía.
Yo, por ejemplo, he subido una fotografía a blogger para usar como fondo, es ésta:

Por lo que sustituiré el texto en rojo por la dirección de mi fotografía, quedaría así:
background:url(http://2.bp.blogspot.com/_k-z9yPHb3Tg/S_A98VpGkeI/AAAAAAAAAOo/lkdcyRP5i78/s1600/banner+twitter2_8.jpg ) fixed no-repeat top left;

Podéis hacer distintas pruebas con imágenes que encontreis en la web, por ejemplo googleando:


O podeis subir vuestro propio fondo a cualquier sitio de almacenamiento (hosting) de imágenes e incluir la dirección en esa línea que modificabamos.

**Si no sabeis cómo realizar éste paso podeis subir imágenes de manera fácil y sencilla  a vuestro propio blogger creando una nueva entrada o post y haciendo click en «Insertar Imagen» como se observa en:

 Al hacer Click en «Insertar Imagen» se abrirá una pantalla en la que haremos click en «Examinar» para elegir la ubicación en donde se encuentra la imagen que queramos subir y «Aceptamos«, tal y como se ve en:

 Una vez subida, para conocer la dirección de ésta imagen, haremos click derecho sobre la imagen y seleccionaremos «Copiar la ruta de enlace«, y ya tendremos nuestra dirección de la imagen que acabamos de subir. Ya subida la imagen podremos cerrar ésta Nueva Entrada que acababamos de crear.

Por ejemplo, para la imagen anterior, si hacemos este procedimiento («Copiar la Ruta del enlace«) la dirección que obtendremos será:

http://2.bp.blogspot.com/_k-z9yPHb3Tg/S_FlT4EvErI/AAAAAAAAAQg/KKiTcbJa-H8/s1600/A%C3%B1adir+Una+Imagen.JPG

Tambien existe la posibilidad si ya sois un poco más manitas y manejais algún programa de retoque fotográfico, personalizar alguna imagen concreta, tal y como se ve en la imagen de fondo de mi blogger, en la que existen a los lados mi nick en varios colores, por ejemplo.

Y eso es todo, una vez cambiada ésta dirección en la línea correspondiente de nuestro XML haremos click en «Guardar Plantilla» y ya podremos ver nuestra nueva apariencia (fondo) del blog. Además, acordaros de que si algo no nos ha gustado, podemos volver a subir la plantilla que teniamos antes de los cambios y de esa manera volver al estado en que nos encontrabamos antes de éste cambio.

Entradas relacionadas:
http://cuandoeltiempoteatrapa.blogspot.com/2010/05/personalizando-el-blogger.html

Añadir la URL de nuestro blog en Google (Y otros)

Ésta entrada está muy relacionada con la anterior (ésta) y pueden realizarse ámbas para promocionar nuestro blog.

Ésta vez vamos a hacer uso de otra herramienta ofrecida por Google para poder añadir la URL o dirección del blog en los buscadores más populares. Es destacable que ésta acción que llevaremos a cabo deberá pasar por una validación de Google, por lo que el proceso puede tardar o finalmente incluso no producirse; aunque ésto último no suele ser frecuente.

Se detallan los pasos a seguir para añadir la URL de un blog a los buscadores y la metaetiqueta de verificación al blog (o verificar el blog), según los buscadores más populares.

1 – Añadir nuestra URL del blog en Google:
Deberemos acceder a la siguiente dirección: http://www.google.es/addurl/
Veremos una página como la siguiente:

Tal y como se explica detalladamente en ésta página, deberemos introducir en el campo URL nuestra página de blog pero en su nivel superior. Ésto es que bastará con introducir nuestra dirección de blog del estilo “http://tublog.blogspot.com” o, en este caso, el mío: «http://www.cuandoeltiempoteatrapa.es«.
En el siguiente campo «Comentarios» introducimos una breve descripción de nuestro sitio. Éste campo no es obligatorio.
Por último completamos la información del captcha y seleccionamos «Añadir URL» y ya está, sólo nos queda que Google haga su trabajo…

2 – Añadir nuestra URL del blog en Bing:
Como observaremos el proceso suele ser prácticamente idéntico en muchos de los buscadores.

Deberemos acceder a la siguiente dirección: http://www.bing.com/webmaster/SubmitSitePage.aspx
Veremos una página como la siguiente:

Una vez rellenados los datos y subida la información, nos mostrará un mensaje de aviso, al igual que lo hace Google, informando de que se tardará en realizar el proceso:

3 – Añadir nuestra URL del blog en Yahoo:
El proceso, es muy parecido en la mayoría de los casos. En ésta ocasión acudiremos a  https://siteexplorer.search.yahoo.com/submit para registrar nuestra página en Yahoo. Ésta vez elegiremos «Submit a Website or Webpage» , incluiremos nuestra dirección de blog del tipo http://tublog.blogspot.com” y haremos click en «Submit URL»

4 – Realizar con todos los buscadores que queramos.
En ocasiones además, nos encontraremos que el servicio no dispone de un formulario donde subir o pegar nuestra URL. En éstos casos bastará con googlear un poco para encontrar la forma.
Por ejemplo éste es el caso de Ask. Para realizar la acción de registrar nuestra URL en Ask debermos valernos de éste enlace de ejemplo:

http://submissions.ask.com/ping?sitemap=http://www.cuandoeltiempoteatrapa.es/atom.xml

Donde sustitiremos la dirección que encontramos en color rojo (mi dirección de blog en éste caso) por la dirección de vuestro blog; eso sí y cómo vemos, Ask sí necesita de un sitemap en xml, por lo que tendremos que dejar el /atom.xml de la dirección.
Además, tal y como veíamos en otras entradas, podemos añadir otros xml de nuestro blog: (por ejemplo)

http://submissions.ask.com/ping?sitemap=http://www.cuandoeltiempoteatrapa.es/rss.xml

Usar "Google Sitemaps" en tu blogger

 

Comenzamos explicanco qué es «Google Sitemaps«:Es un sistema que Google recomienda para que informemos a su robot de búsqueda sobre las páginas que tenemos en nuestro sitio web. De esta manera, Google podrá rastrear más fácilmente nuestros contenidos y podremos aparecer así en los resultados del buscador. Además, también proporciona estadísticas del acceso del robot, y resúmenes de posibles errores de rastreo.

 

¿Que ocurre si no utilizo «Google Sitemaps«, no apareceré en los resultados de Google?
No. «Google Sitemaps» es simplemente una ayuda para el robot de Google, que en muchas ocasiones tiene problemas para localizar toda la información contenida en los sitios web. Aunque no utilicemos «Google Sitemaps«, seguiremos apareciendo en los resultados de Google.

 

Uso:
Gracias al sistema que maneja Blogger y otros sistemas de gestión de contenido, usar esta herramienta es relativamente fácil. A continuación vemos cómo:
1 – Vamos a la página de Google Sitemaps (ahora llamada Google Webmasters Tools) y entramos con nuestra cuenta Google (Blogger, Gmail, etc).

2 – Seguidamente y en el botón Añadir un sitio tenemos que poner la dirección de nuestra web, para darla de alta, de tal manera que registremos nuestro sitio para google y comencemos a dar información de nuestro sitio a google, para su posterior indexación, lo que implica mejor posicionamiento en su buscador.
Aquí escribiremos la dirección de nuestro blog: “http://tublog.blogspot.com”. Por ejemplo para éste mismo blog yo añadí: «http://cuandoeltiempoteatrapa.blogspot.com»

2 – Al ingresar nuestro blog o web Google nos ofrece un Metatag, el cual lo tenemos que insertar en el código xml,html,xhtml… dependiendo de el que utilicemos, este metatag lo copiamos y lo pegamos justo después de <head>.
Para nuestro ejemplo concreto, un blog en blogger, nos situamos en Diseño>Edición de HTML, posteriormente buscamos la etiqueta <head> y justo debajo de ella lo pegamos, finalmente lo guardamos y regresamos a la web del centro de webmaster de google.
Al realizar todo este procedimiento nos tiene finalmente le tendremos que dar a verificar, para que la web se verifique y permanezca en la base de datos de google.
He de decir que no recuerdo haber realizado éste paso cuando he añadido mi blog.

3 – Una vez introducido nuestro sitio, nos situamos en el botón «Información del sitio» y posteriormente en «Sitemaps«, aquí Google nos da la opción de agregar nuestro sitemap.
Para que veamos el formato de un sitemap y conprendamos lo que es, el formato es igual a un RSS
Normalmente Blogger tiene dos tipos de RSS por defecto, uno con la terminación «rss.xml» y otro con la terminación «atom.xml».

Uno de los errores que se suelen cometer es poner los RSS en el sitemap ya que en el RSS únicamente nos vendrán las últimas entradas y no todo el contenido de nuestro sítio. Deberemos agregar las siguiente las siguientes direcciones:

• atom.xml
• rss.xml
• atom.xml?redirect=false&start-index=1&max-results=500
• atom.xml?redirect=false&start-index=1001&max-results=500
• atom.xml?redirect=false&start-index=501&max-results=500

Referencias y otros artículos sobre el tema:

http://google.dirson.com/o.a/google-sitemaps 
http://blogandweb.com/blogger/usar-google-sitemap-en-blogger/
http://homewebmaster.blogspot.com/2010/03/sitemap-completo-para-la-indexacion-en.html

Personalizando el blogger #1

 

Es el siguiente paso, obligado por ti mismo, tras crearte un blog u otro espacio: personalizarlo.
Algo tan personal como un blog u otro sitio donde expondrás parte de tus ideas, tiempo, opiniones, etc; parte de ti a fin de cuentas, no puede ser insulso y «Predefinido» o «Predeterminado» sino único y personal.

Es por ello que me propuse personalizarlo y busqué información sobre cómo hacerlo.

Lo primero y más fácil que encontré fu el propio personalizador que ofrece Blogger.
Éste personalizador tambien es accesible cuando creas el propio blog, pero después de haberlo creado muestra plantillas y subplantillas que antes no mostraba.
Para ir hasta él basta con hacer click en «Personalizar» en tu barra de blogger. Y más tarde en «Seleccionar Plantilla Nueva» tal y como se ve en la siguiente imagen:

Nos mostrará entonces una serie de plantillas y subplantillas:

Además al seleccionar cada una de ellas podremos ver su previsualización en la misma imagen o al hacer clic en «Vista Preliminar de la plantilla«, donde se abrirá una nueva ventana con una previsualización de nuestro blog (u otro) con ese formato de plantilla.

Por ejemplo, éste blog con distintas plantillas de éste tipo:

Ejemplo 1: Plantilla Thisaway Blue
Ejemplo 2: Plantilla Tekka
Ejemplo 3: Plantilla Scribe

Y así de sencillo es de ésta forma, basta con elegir la plantilla y seleccionar «Guardar Plantilla» y ya está, tendremos un blogger personalizado con unos sencillos pasos.

Además, si alguno de los detalles de la plantilla elegida no nos gusta, podremos cambiar bastantes cosas, como las fuentes y colores principales, de una forma tan sencilla como la anterior. Podemos hacer ésto haciendo click en «Fuentes y Colores», como se observaba en la imagen:

Además, tal y como se observa en la imagen anterior, la pantalla se dividirá en dos para mostrarnos la previsualización de nuestro blog con éstos detalles que estamos cambiando.