11/5/16

Cómo personalizar el contador de visitas blogger

Seguro que sabéis ya que Blogger, tiene un gadget llamado "Estadísticas" que muestra el número de páginas vistas que lleva nuestro blog hasta el momento. Es una idea estupenda... si no fuera porque especialmente mono no es.

Por otro lado, hay muchos widgets de contadores online que se pueden añadir, pero no me gustan por dos cosas: a) suelen ser muy horteras, con colorines, pijadas, etc, y b) porque cuando pinchas en ellos, sacan al visitante de tu blog para llevarlo a su página.

Por eso yo pienso que lo ideal, es modificar un pelín el de blogger.

Para esto deberéis elegir el que ofrece como primera opción:


Y después añadir un código en css en la cajita de añadir css de blogger.

Hay infinitas maneras de personalizarlo, y podéis aprender a darle el estilo que queráis, literalmente, haciendo el curso de html y css.

Podéis ponerle un cualquier imagen de fondo, podéis ponerle unas flores, podéis ponerle un subrayadito mono... ¡lo que queráis! Pero yo os voy a dar ya algunos formatos pensados :)

No quiero poneros aquí ninguno con demasiadas florituras, porque dependiendo del diseño del blog, os irán bien unos diseños u otros, de forma que es mejor hacer algo sencillito que podáis modificar según necesitéis:

Modelo 1: básico

Código:

.Stats .counter-wrapper {
font-family: "Open Sans";
margin-left: 130px;
color: #fdaaae;
}

Ejemplo:

Tal cual está esto quedaría así:


Yo lo tengo así en mi blog solo que en gris.

Cambios:

Donde dice Open Sans podéis cambiarle la fuente si queréis y donde dice color #fdaaae podéis poner el color que queráis.

El 130px es para centrarlo. Dependiendo de vuestro número de visitas necesitaréis un número u otro. Utilizar la zona de previsualización de blogger para ver cuánto moverlo.

MODELO 2: decorado

Código:

.Stats .counter-wrapper {
font-family: "Josefin Sans";
font-weight: lighter;
color: #D4C3B0;
background-color: #FFF3E9;
border: 1px solid #D4C3B0;
box-shadow: 0 0 5px 3px #FFF3E9;
display: block;
text-align: center;
margin-left: 50px;
padding: 10px;
}

Ejemplo:

Tal cual está esto quedaría así:


Cambios:

font-family: podéis cambiar la fuente Josefin Sans por otra que queráis

color: es el color del texto/número, yo he puesto ese beige-marroncito, pero podéis cambiarlo

font-weight: lighter hace la fuente un poco más fina de lo habitual, si os parece muy fina, podéis borrar esta línea entera. Si la queréis más gruesa, podéis cambiar el lighter por bold.

background-color: es el color rosa de fondo, podéis cambiarlo por el color que queráis

border: el número tras el hashtag es el color del rebordecito marrón,  podéis cambiarlo por el color que queráis. El 1px es el grosor, si lo queréis más grueso podéis ponerle 2 o 3px. Y solid es porque el reborde es liso, recto; podéis ponerle dashed si queréis que sean guioncitos o dotted si queréis que sean puntitos.

box-shadow: es la sombra que hay alrededor del reborde marroncito. Podéis cambiar el color rosa, que yo aconsejo que sea el mismo color que el fondo (background-color) o podéis quitarla entera.

MODELO 3: washi

Código:

.Stats .counter-wrapper {
background-image: url(http://bit.ly/23BUKkb);
height: 55px;
font-family: Pacifico;
color: white;
font-size: 32px;
font-weight: 500;
display: block;
text-align: center;
margin-left: 50px;
padding-top: 2px;
}

Ejemplo:

Tal cual está esto quedaría así:



Cambios:

background-image: podéis cambiar la url http... por otra imagen que tengáis, ese es el washi rosa.

height: ahí deberéis poner el alto que mida vuestra imagen. La mía mide 55 px

font-family: ahí podéis poner el nombre de otra fuente, yo he puesto Pacifico

color: sería el color del número, yo he puesto blanco

font-size: es el tamaño, yo le he puesto 32

font-weight: lo he puesto para hacer la fuente un poco más finita, porque Pacifico es una fuente muy gordota. Podéis quitar esa línea entera si queréis la fuente normal, y podéis poner font-weight: bold, si queréis que salga en negrita.

Si no os cuadra el texto en la imagen, podéis jugar un poco con el padding, pero en cualquier caso, si no controláis un poquitín de css, para que os funcione mejor el tutorial, recomiendo que creéis una imagen con las mismas dimensiones que la mía: 55 de alto y 215 de ancho.

Espero que os haya gustado, que os sea útil, y recordad que si queréis saber hacer cualquier cosa o cambio en vuestro blog, y no estar limitadas a las opciones que yo os pueda dar en cada tutorial, podéis hacer el curso fácil de html y css.

No puede ser más fácil de seguir y entender, os lo aseguro, y creo que como bloggers o pequeñas emprendedoras, es algo básico. Igual que el inglés nos abre mil puertas, esto también, pues nos permitirá hacer modificaciones en nuestro blog o web, en una una futura tienda online (bigcartel, shopify...), etc.

Tenéis toda la información aquí:


Mil millones de besos y aunque ya se han acabado los posts y tutoriales, os escribiré pronto un post contandoos cositas :)

¡Muaaaaah!

Blogger | Email  | RSS Bloglovin' | Feedly 
Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

20 comentarios

  1. Muchas gracias por el tutorial, está muy chulo

    ResponderEliminar
  2. Hola Blanca.
    Que gusto de volver a leer tus posts... me ha gustado el primero, le puse el color rosa y lo he centrado, queda genial, bonito y muy limpio.
    Muchas gracias. Tengo que buscar el modo de aligerar la carga de mi blog, he leido que tiene que cargarse en 2 seg y el mio tarda 5 seg.

    Un saludo.

    ResponderEliminar
  3. MIL gracias me ha encantado el post. Como siempre. G
    Gracias Blanca

    ResponderEliminar
  4. Gracias por tu publicación pero no me quedo claro en donde encuentro la cajita de añadir el css, podrías decirme en donde o como lo hago??

    ResponderEliminar
    Respuestas
    1. En el diseñador de plantillas. Zona diseño - diseñador de plantillas (link arriba a la derecha) - y ahí, en avanzado

      No lo pongo ya porque como lo he contado en muchos otros tutoriales, pensé que todas ya lo sabíais

      Lo puedes ver más detallado en este post o en este otro

      Si estás algo pez con esto de blogger, en cualquier caso, te recomiendo mi curso de iniciación, es muy baratito y te dará la base para poder seguir cualquier tutorial o cualquier cosa!

      Un abrazo,

      Eliminar
  5. Me encantan tus tutoriales, a mi me sirvieron mucho para personalizar mi blog :)

    ResponderEliminar
  6. Hola!! Muchas gracias! Lo aplicaré! Se te echa de menos...;)

    ResponderEliminar
  7. siempre es bienvenido un post tuyo.
    gracias

    ResponderEliminar
  8. ¡Hola! Muchas gracias por el tutorial (:
    Pero una preguntita... ¿Si agrego ese código se borrarán las visitas que llevo hasta ahora...? Me refiero a que si supongamos tengo 10 visitas y quiero agregar el modelo 3, cuando lo ponga, el contador seguirá diciendo 10 visitas o comenzara desde cero?
    ¡Gracias y besos!

    ResponderEliminar
  9. awww me encanto ahora puedo editarlo en serio no me gustaba su apariencia gracias linda

    ResponderEliminar
  10. Hola si Porfa hablanos del HTML y CSS, y si consigues cursos de estos para hacer.. seria estupendo!!!
    Gracias

    ResponderEliminar
  11. Hola! Tengo una duda, yo ya puse un contador de visitas distinto del predeterminado de Blogger, pero ya no me sale para elegir el que venia por defecto, como puedo ponerlo de nuevo para llevar a cabo estos pasos?

    ResponderEliminar
  12. Hola! Tengo una duda, yo ya puse un contador de visitas distinto del predeterminado de Blogger, pero ya no me sale para elegir el que venia por defecto, como puedo ponerlo de nuevo para llevar a cabo estos pasos?

    ResponderEliminar
  13. Faça uma consultoria SEO com a Agência Hina e tenha resultados de posicionamento garantidos nos primeiros lugares do Google. Orçamento SEO . Visite nosso site. Consultoria SEO

    ResponderEliminar
  14. De verdad, mil gracias. Amo tu blog y te debo la vida por estos tutoriales. Un besote. ♥

    ResponderEliminar
  15. Hola! No lo consigo de ninguna manera, creo que he seguido completamente todos los pasos que indicas pero me sigue saliendo el contador normal de Blogger :( Alguna recomendación? Muchas gracias!

    ResponderEliminar
  16. Gracias por el post, muy chulos los contadores =)

    ResponderEliminar
  17. Manténgase conectado de forma no parada gracia nuestros paquetes ofrecen créditos entre
    individuos disponible día y noche tiene una tasa de interés del 2%
    A partir de 191 euros de correo electrónico solo. contacto: duroumarcel@gmail.com

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.