viernes, 9 de octubre de 2015

7 elementos para borrar de tu plantilla Blogger y cómo hacerlo

A continuación os explico cómo eliminar 7 elementos de tu plantilla web que suelen estropear el diseño de la página.

1. Elimina la barra de navegación: navbar

Empezamos con el más tonto de todos. No hay ningún agujero de seguridad ni ninguna razón de peso por la que eliminar la barra de navegación de Blogger sólo es por mera estética.
Sigue estos pasos para borrarla:

Ve a la página principal de Blogger y selecciona la pestaña "Diseño". En uno de los elementos (gadgets) del diseño de tu web verás la opción "Barra de navegación" o "navbar" haz clic en "Editar" y selecciona "NO". Después, guarda los cambios.

En el caso de que no quieras borrarla, puedes cambiar el color de la barra de navegación navbar siguiendo esos mismos pasos.


Clic para ampliar




2. Elimina elementos del footer de la entrada.

En el footer o pie de página de la entrada de tu blog, blogger añade un montón de cosas innecesarias como el autor, fecha de publicación...
Puedes eliminar cualquiera de esos elementos de la siguiente manera:

Ve a la página principal de blogger y pincha en la pestaña "Diseño" ahí encontrarás un elemento (gadget) llamado "Entradas del blog".
Haz clic en editar y se abrirá una ventana emergente en la que podrás eliminar o configurar los elementos de pie de página de las entradas de tu blog.


3. Elimina el mensaje "Mostrando entradas con la etiqueta x"

Este mensaje aparece en la página que se carga tras pulsar una etiqueta en concreto de tu blog.
Es feo de narices así que puedes borrarlo de la siguiente manera:
Ve a "Plantilla" presiona "Editar HTML". Haz clic en cualquier sitio del código y pulsa Ctrl + F para abrir la caja de búsqueda.
Busca el siguiente código:

<b:includable id='status-message'>
   
  

Cuando lo encuentres pulsa la flecha pequeña a su izquierda y borra todo este código:

 <b:includable id='status-message'>
      <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
        <div class='status-msg-border'>
          <div class='status-msg-bg'>
            <div class='status-msg-hidden'><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style='clear: both;'/>
      </b:if>
    </b:includable>
   
  
en su lugar, pega el siguiente código:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
   
  



4. Borra los bordes blancos alrededor de las imágenes.

Es cuestión de gustos pero si deseas eliminar los bordes blancos de las imágenes tendrás que editar el código CSS de tu plantilla
Ve al Dashboard o página principal de Blogger y pulsa sobre la etiqueta "Plantilla" y presiona "Personalizar" después elige "Avanzado" y busca la opción "Añadir CSS".

Ahí pega el siguiente código:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}
   
  



5. Elimina la línea discontinua sobre "powered by Blogger" y entre Entradas nuevas, home, entradas viejas.

Sigue los pasos del punto 4 para editar código CSS pero añade este código:

.footer-outer {
border: none;
}

.blog-pager {
background: none;
}
   
  



6. Elimina el mensaje "Suscribirse a entradas Atom" que se encuentra al final de la página.

Ve a "Plantilla" presiona "Editar HTML". Busca y borra la siguiente línea de código:

<b:include data='feedLinks' name='feedLinksBody'/>
   
  



7. Elimina comentarios en las páginas About y Contacto.

Normalmente no se quieren comentarios en estas páginas así que eliminaremos la opción de comentar en ellas.
Ve a "Páginas" y haz clic en la página en cuestión. En el menú de la derecha pulsa "Opciones" y en la sección "Comentarios" haz clic sobre "No permitir, ocultar los publicados"







martes, 12 de mayo de 2015

Cómo agregar Google Analytics en Blogger


A más de uno nos mata la curiosidad por saber si alguien visita nuestra web, de dónde viene, si usa móvil, tablet o pc y cuánto tiempo está en la página...

Es cierto que existen unas estadísticas de Blogger que son fiables pero entonces, ¿por qué usar Analytics en lugar de las analíticas de Blogger?
Porque son superficiales, muy poco completas y, parece que tienes más visitas de las que en realidad tienes porque cada página vista cuenta como un visitante (la verdad es que tus páginas vistas no son tus visitas, lo siento).

Afortunadamente podemos abrir una cuenta con Google Analytics y crear un código de seguimiento que pegaremos en nuestra web y todos nuestros deseos de cotillear al visitante, se cumplirán.
(Otra de las opciones que tenemos es crear una cuenta de Google WebMasters pero eso lo trataremos en otro post).


analytics registro
Registra tu cuenta



Para comenzar, crea tu cuenta, rellena los datos que el Sr. Google te solicite (no son muchos):
Completa los campos necesarios debajo de los títulos "Configuración de la propiedad web" y "Configuración de cuenta". En este paso es donde debes introducir información relacionada con tu sitio web, como el nombre y el URL del sitio.


agrega tu blogger a analytics
Paso 1 del registro. Clic para más resolución.



registro paso 2
Paso 2 del registro. Clic para más resolución.




Pincha la opción "Obtener ID de seguimiento". Aceptas condiciones de uso para continuar.
Obtendrás el código o ID que necesitarás pegar en tu sitio web y será algo así:

       
 
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-30000000-2', 'tuweb.es');
  ga('send', 'pageview');
 
</script>
 
 
 
       
  


Ahora qué hacemos con el código

Hay varias formas de implementar el código de seguimiento de Google Analytics en tu blog Blogger.
  • Una de ellas es ir a "Plantilla" > "Editar HTML".
  • Pincha sobre el código y presiona Ctrl+F
  • Busca </head>
  • Pega justo encima de el código de seguimiento,
  • También puedes pegarlo justo encima de la etiqueta </body>
  • A continuación, pulsa "Guardar Plantilla"


agrega codigo seguimiento a plantilla blogger
Recuerda guardar los cambios.



Otra opción menos rigurosa:
  • Ve a tu blog, a la pantalla de "Diseño".
  • Pulsa la opción "Añadir un Gadget".
  • Busca el que pone "HTML JavaScript".
  • Pega el código de seguimiento.


analiticas a través de gadget
Pincha Diseño > Añadir un Gadget


paso dos del tutorial
En el siguiente cuadro pega tu código de seguimiento.



Por último, confirma que el código insertado corresponde con tu ID:
Ve a tu blog "Configuración" > "Otros" y en el cuadro donde pone Google Analytics
ID de propiedad web de Google Analytics
pega tu ID.


tutorial seguimiento analytics
Pega tu ID de Analytics y tendrás tu Blogger configurado




Comprobación

Ahora ve a tu cuenta de Analytics, a la pestaña Administrador, selecciona la Propiedad que has creado y pincha en Información de Seguimiento y a continuación, pincha en Código de seguimiento.
Ahí podrás ver el estado de tu ID: "Estado: recibiendo datos" o "Estado: seguimiento no instalado".

Atención, ya sé que además de curiosos somos impacientes, pero, me temo que el código de seguimiento tarda unas horas (hasta 48 horas) en empezar a funcionar. Hasta entonces verás "Estado: seguimiento no instalado" y no se tratará de un error.
Paciencia, si en 24-48 horas, la cosa sigue sin rular y continúa el famoso mensaje "Estado: seguimiento no instalado", deberás intentar solucionar el error. Más abajo explico cómo hacerlo con una extensión de Google Chrome.



Comprobar que todo está correcto con Chrome

Si navegas en Chrome, puedes descargar la Extensión "Tag Assistant". Una vez instalada, reinicia el navegador y mira el icono que aparece.
Si la etiqueta está de otro color que no sea verde (rojo, azul...), es que ha habido algún problema.

error codigo de seguimiento no instalado
Error, código analytics mal implementado.


En cambio, si el dibujo sale en verde, estás de enhorabuena, todo funciona correctamente.

seguimiento blogger instalado


Una lista de errores típicos sería:

No tienes el código de Google Analytics en tu Web.
El código de Analytics está duplicado
El código de Analytics está fuera de la etiqueta ()
Tienes 2 versiones de Google Analytics instaladas



Otra información sobre Analytics

Si quieres añadir más blogs a tu cuenta de Analytics deberás entender un poco del funcionamiento o JERARQUÍA:

Cuenta: Es el nivel más alto de la organización. Ejemplo: puedes tener varias cuentas; una de uso personal y otra cuenta para uso profesional.
Propiedad: Puede ser un sitio web, un blog o una aplicación móvil. Puedes tener varias propiedades (blogs) dentro de un mismo nivel de cuenta (Máximo de 100 webs).
Vista: Es el punto de acceso a los informes. Es muy recomendable dejar la vista creada por defecto a modo de copia de seguridad y crear otra como "Vista de trabajo" para comenzar a trabajar.


¿No recuerdas dónde se encuentra tu código de seguimiento de Analytics?

Entra en Google Analytics y pulsa sobre "Administrador" ve a "PROPIEDAD". Haz click sobre "INFORMACIÓN DE SEGUIMIENTO" y después sobre "CÓDIGO DE SEGUIMIENTO".

Todo lo que está dentro de las etiquetas es el código de seguimiento de Google Analytics.



¡Eso es todo!
Por último, si tu blog es nuevo, no te recomiendo que mires con frecuencia las estadísticas o te deprimirás mogollón. De primeras, confórmate con saber que están ahí y concéntrate en escribir y dar a conocer tu blog.
¡Suerte!

sábado, 25 de abril de 2015

¿Qué son los gadgets o Widget de Blogger y cuáles son los mejores?


Hasta ahora hemos empleado con regularidad una palabra para muchos desconocida: gadget o Widget.

¿Pero qué son los gadgets?

Se podría decir que los Gadgets son una serie de complementos que puedes añadir a secciones concretas del blog para realizar una función específica. Entre sus objetivos están los de dar fácil acceso a funciones frecuentemente usadas y proveer de información visual.

Pros:
Puedes añadir código sin modificar la plantilla.
Puedes agregar contenido sin saber de código.

Contras:
Muchos gadgets pueden ralentizar la velocidad carga del blog.
También puede quedar recargado y quizá anti-estético (según temática y a quién va dirigido el blog).


A lo largo de esta serie de tutoriales hemos usado gadgets (o widgets) para editar el "Diseño" como poner una imagen al título, favicon, pie de página...

Sin embargo, puedes hacer más, muucho más (y colocarlos en el sidebar, la barras a los lados de la entrada, o prácticamente donde desees).


¿Cómo se usan?

Antes que nada, vas al panel de control "Diseño" y eliges dónde quieres colocar el gadget. En este ejemplo lo colocaremos en el sidebar o barra lateral del blog:
Pulsamos sobre "Añadir Gadget"

como agregar un widget a blogger


Se abrirá una ventana con una serie de Gadgets Básicos a elegir.

gadgets de blogger

¿Cuál uso?

Personalmente recomiendo los siguientes:
Traductor: para aquellos que quieran cambiar el idioma del blog.
Seguir por correo electrónico: Para que se envíe un mail avisando de entrada nueva a las personas que así lo elijan.
Entradas populares: Muestra un listado con tus entradas más populares ampliando así la posibilidad de que sean vistas por un nuevo visitante.
Adsense: si tu blog tiene una serie de visitas al mes y quieres rentabilizarlas.
Cuadro de búsqueda: para facilitar la búsqueda de contenido dentro del blog
HTML/Javascript: para agregar código personal como por ejemplo código de seguimiento de analíticas, tus iconos sociales, posts relacionados...
Archivo del blog: muestra tu actividad de forma cronológica. Tus usuarios pueden ver rápidamente tus épocas de mayor actividad y el título de las entradas.


Elige los que más te gusten y agrégalos a tu blog (no es necesario que agreges todos estos gadgets; sólo he puesto los que recomiendo).

miércoles, 25 de febrero de 2015

5 herramientas y todos los detalles para crear un Favicon

¿Qué es un Favicon?

Favicon viene del inglés: favorites icon y se trata de una pequeñísima imagen (icono) por la que se asociará la página web y así podrá ser identificada fácilmente de entre un conjunto de pestañas abiertas, barra de marcadores, favoritos, historial, lector de noticias...
Normalmente este icono suele ser el logo de la web o algo que represente la marca.
marca personal
Con este pequeño icono estás atrayendo la atención del lector haciendo resaltar tu web de entre cientos que tienen la B de Blogger o nada más que el nombre de la página abierta.

El favicon nació con Internet Explorer 5. Si colocabar un archivo llamado favicon.ico en el directorio raíz de tu web, se creaba automáticamente, sin necesidad de HTML, un pequeño icono de 16x16 píxeles en la barra de direcciones y en los favoritos.
En la actualidad, los favicones no sólo se usan en el diseño web sino también en app móviles, iconos de programas, smartTVs...



¿Por qué usar Faviconos?

Reconocimiento de Marca: Lo dicho; los faviconos conllevan facilidad para reconocer la marca del sitio y que se quede grabada en la mente del usuario final.

Fácil Navegación: si las pestañas tienen estos pequeños iconos y un usuario tiene abiertas varias, el favicon le ayudará a navegar entre ellas sabiendo en todo momento cuál está escogiendo.

Marcadores: Por la misma razón que con las pestañas; si un usuario tiene muchos marcadores sabrá distinguir tu web de entre las demás con un golpe de vista al favicon.

Aspecto y sentimiento: Es muy importante cuidar todos los detalles de tu web para causar buena sensación a los visitantes. Una web completa, produce una sensación de profesionalidad difícil de olvidar.

Nota: En los inicios del favicon, este icono se usaba para calcular el tráfico de la web contando el número de visitantes que lo agregaban a sus marcadores.



¿Cómo puedo crear un favicon?

Este icono que vas a crear preferiblemente será llamado favicon, tendrá la extensión .ico y será transparente. Antiguamente sólo se podía usar .ico y era algo difícil de conseguir. La mayoría de las páginas que ofrecían servicio de almacenamiento de imágenes no reconocían la extensión y, si no dabas con alguna de ellas o tenías un alojamiento contratado, acababas con un buen dolor de cabeza.
En la actualidad es fácil ya que se pueden usar diversas extensiones: .gif, .png y .ico...
  1. Extensión .ico: El archivo con esta extensión será el mejor soportado por los navegadores. También es el único formato que el navegador detectará sin usar el elemento . Soporta transparencia alpha.
  2. Extensión .png: No requiere ninguna herramienta especial para su creación y soporta transparencia alpha.
    Internet Explorer no lo soporta, sólo lee ICO.
  3. Extensión .gif: El archivo GIF y GIF animado no ofrece mucha más ventaja que el ser soportado por todos los navegadores, incluso los más antiguos. También es la extensión que se suele usar (junto con ICO) para hacer un icono animado eso sí, siempre teniendo en cuenta que estos suelen ser un poco irritables. Haz una animación sutil y lenta.
  4. Extensión .jpg: Mejor no uses este formato, no tiene definición y al comprimir lía los colores.
  5. Extensión .svg: demasiado nueva, sólo Opera la lee pero sería la extensión ideal y probablemente acabe convirtiéndose en la norma.


¿De qué tamaño tiene que ser?

Los tamaños de favicon que puedes crear son los siguientes (en píxeles).
16x16 Compatible con todos los navegadores. Se mostrará en la barra de direcciones y marcadores.
24x24 Pinned Site en Internet Explorer 9.
32x32 Nueva pestaña en Internet Explorer. Safari and Chrome leerán este icono pero lo mostrarán en el tamaño 16x16 creando algo ilegible.
128x128 Chrome Web Store
195x195 Opera Speed Dial
Se pueden crear varios tamaños y añadirlos con el elemento o si prefieres, puedes crear un ICO con todos los tamaños con un programa como Iconbuilder.



Existen multitud de sitios online donde puedes crear un favicon y también programas de edición.

¿Dónde puedo crear online el favicon?

  1. ­ http://www.shaheeilyas.com/favicon/ Es una herramienta simple y concisa, sin muchas opciones. Crea un favico de 16x16 con unos colores predeterminados. Tampoco tiene goma para borrar y el lienzo es blanco no transparente. La opción guardar está un poco escondida. Se trata de un botón que dice "Save" y descarga automáticamente (y con la extensión.ico) lo que hayas dibujado.
  2. ­ http://favicon­generator.org/editor/ Herramienta un poco más completa que la anterior en cuanto a color ya que tienes plena elección sobre él. También tiene fondo transparente, goma de borrar, vista previa del icono en su tamaño real y la posibilidad de subir un archivo y editarlo.
    Para descargar el favicon pulsa el boton "Create favicon" y te dirigirá a una página en la que te explica cómo descargarlo y configurar tu blog.
    Además, puedes ver los alucinantes iconos que ha hecho la gente en su galería.
  3. http://www.favicon.cc/ Muy parecido al anterior pero más completo aún porque tienes la opción de crear un favicon animado y previsualizarlo.
    animar favicon
    Para guardar pulsa el botón "Download favicon" que se encuentra bajo la vista previa.
    Si prefieres crearlo con algún programa de edición


¿Con qué programa crear un favicon?

  1. Photoshop: Necesitarás descargar un plugin para crear un archivo con extensión .ico
    Descarga este archivo. Descomprímelo y guarda ICOFormat.8bi en la siguiente ruta: “C:\Archivos de Programa\Adobe\Adobe Photoshop\Plugins\Formato de Archivos”
    También puedes descargar la extensión Iconbuilder de Iconfactory (también válida para Fireworks). Con esta extensión puedes crear un ICO con múltiples resoluciones.
  2. Illustrator: puedes exportar el archivo final como PNG y convertirlo en ICO con alguna herramienta online como
    http://www.animatedfavicon.com
    http://www.favicongenerator.org
  3. Cualquier otro editor de imagen. Por ejemplo, puedes crear una imagen PNG y renombrar el archivo a .ico


Implementación

Coloca el elemento dentro de de tu plantilla(en header.php de tu tema o manualmente en cada página).
Para saber cómo implementarlo en un blog Blogger sigue este tutorial
  1. Extensión ICO:
    Con poner el archivo nombrado favicon.ico en el directorio raíz de tu sitio los navegadores lo leerán sin poner ninguna línea de código en la plantilla. Sin embargo, si quieres renombrar el archivo de otra manera o colocarlo en una ruta distinta necesitarás este código:
    <link rel="shortcut icon" type="image/x-icon" href="ruta/favicon.ico"/>
  2. Extensión PNG:
    <link rel="icon" type="image/png" href="/ruta/favicon.png" />
  3. Extensión JPG:
    <link rel="icon" type="image/png" href="/ruta/favicon.jpg" />
  4. Gif animado: Usaremos estas dos líneas de código (una con un archivo ICO y otra con el GIF) porque muchos navegadores no leen gifs
    <link rel="shortcut icon" href="http://www.tusitio.com/favicon.ico" />
    <link rel="icon" type="image/gif" href="http://www.tusitio.com/favicon.gif" />
  5. Opera Speed dial: Opera muestra un icono en lugar de una miniatura de la web en su página Speed dial:
    opera speed dial
    <link rel="icon" type="image/png" href="195x195imagen.png"/>
  6. Implementarlo a través del archivo functions.php de tu tema en lugar de en header.php o página por página.
     function my_favicon() {
    echo '';
    }
    add_action('wp_head', 'my_favicon');
    Puedes usar otros formatos en lugar de ICO

  7. Nota: existen algunos plugins para Wordpress como:
    Favicon Rotator
    All In One Favicon
Y eso es todo. Espero que te sea de utilidad y ¡que me enseñes los iconos que has creado!

viernes, 13 de febrero de 2015

Cambiar Pie de Página (Footer) en Blogger


Tener un blog es para muchos un medio para un pequeño negocio o aumentar tu presencia pública; captar nuevos clientes y comunicarte con ellos.
Tanto si este es tu caso como si no, Blogger permite customizar o personalizar tu blog para que puedas expresar con él lo máximo posible con un sólo golpe de vista.
Por eso es importante que cuides hasta el último detalle y, precisamente el último que ve el visitante, es el footer o pie de página.

¿Qué es el footer o pie de página?

Es la parte donde la página llega a su fin que suele usarse para mostrar información adicional como año de creación, avisos legales, correo de contacto...

Ejemplo para página seria:

primer ejemplo pie de pagina


Ejemplo para página original:

segundo ejemplo pie de página


Ejemplo término medio:

tercer ejemplo de pie de página


¿Cómo personalizo el pie de página?

Accede al panel de control de Blogger, a la sección "Diseño" y haz clic en Editar "Reconocimiento":

editar footer


Se abrirá una ventana emergente donde puedes escribir tu nombre de autor, fecha, email, etc:

copyright

(No olvides pulsar "Guardar" para conservar los cambios realizados).

Puedes agregar hasta 3 columnas al pie de la página a través de "Plantilla", "Personalizar", "Diseño": Diseño de pie de página:


(¡Pulsa "Aplicar los cambios" para que se guarden!)

Tu plantilla se verá así en el panel principal de Blogger, en "Diseño":

cambiar diseño del footer en blogger

Y podrás agregarle los gadgets que consideres apropiados (Enlaces de interés, archivo del blog, una imagen...)

footer con gadgets

En tutoriales más avanzados, cuando hayamos visto algo de programación HTML básica, nos centraremos en aspectos más concretos como ¿Cómo elimino, oculto o cambio el footer por un diseño mejor?

viernes, 23 de enero de 2015

Modificar el pie de entrada del blog Blogger

¿Te gustaría quitar el "Publicado por" o cambiarlo por otra frase?
¿No te interesa que salga la fecha de publicación de las entradas?
¿No te gusta que salgan las etiquetas?
Pues todo esto y más, tiene solución:
Los elementos del pie de entrada pueden ser modificados a través del panel de "Diseño" de blogger, sin necesidad de utilizar código HTML o PHP de diseño.


A través de esta sección, puedes cambiar rápidamente los elementos de pie de entrada:


Opciones de la página principal
Número de entradas en la página principal:
Texto del enlace de la página de entrada:

Opciones de la página de entrada
Cambiar formato de Fecha
Cambiar el texto en "Publicado por"
Cambiar el texto "en" y formato de hora
Cambiar el texto en x "comentarios"
Mostrar u ocultar las etiquetas
Mostrar u ocultar "edición rápida" (hará que no se muestre el icono del lápiz)
Mostrar u ocultar botones para compartir
Mostrar u ocultar anuncios
...
Sólo tienes que desmarcar las opciones que no quieras mostrar.

También podrás recolocar los elementos y decidir en qué orden serán mostrados.