Personalización de Blogs Idea guardada 2 veces
Sé la primera persona en valorar esta idea Valorar

Cómo personalizar el contador de visitas blogger

Señoras y señores... ¡otro post que tenía preparado y para no echarlo a perder! Os lo contaba el lunes, y este os otro que tenía, pero ya no tengo más... :(

Tenía uno de la técnica Pomodoro, pero no tengo ni dos párrafos, así que tendría que escribirlo de cero como quien dice jaja, y luego otro sobre 10 razones por las que aprender html y css, que si queréis, lo publico, decírmelo en los comentarios :)

--

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 varias razones:

suelen ser muy horteras, con colorines, pijadas, etc.

cuando pinchas en ellos, sacan al visitante de tu blog

Por eso, 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!

Yo 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í:
Quiero saber más sobre el curso fácil de html y css

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

Fuente: este post proviene de Personalización de Blogs, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Etiquetas:

Recomendamos

Relacionado

Programacion css programacion ...

Programar una página web con HTML5 y CSS

¿Creamos una página web con HTML y CSS y que sea chula?, que mole, que entres y digas… Dios es la página de las páginas. Cómo programar una web en html5 y css Pues ya vimos cómo podemos crear nuestra web con HTML5 y CSS, pero si es cierto que aunque bonita le falta ese punto de dinamismo, ese movimiento en la página que le haga estar viva. Crear un dinamismo con CSS Pues sí querido lector (c ...

general

Cómo quitar los dos puntos de los comentarios en blogger y/o cómo personalizar el texto

Hoy vengo con un tutorial facilito y extra rápido, ¡pero espero que muy útil! Últimamente he notado que tengo muy pocos comentarios. Como bloggers entenderéis la importancia que esto tiene. Por un lado nos motiva, pues si bien una ve sus estadísticas y visitas, a pesar de ello, a mi si no me dejan comentarios me da un poco la sensación de que hablo sola. Y por otro nos guía a la hora de saber sobr ...

general curso blogger desde cero

Conoce el CSS de tu blog.

Si estás siguiendo de cerca el curso "Blogger desde cero", sabrás que la promesa de publicación para este sábado era profundizar en un tema referente al mundo del diseño de blogs. Ofrecerte una información útil de aproximación a los códigos inverosímiles que observamos -entre el estupor y el pánico- cuando nos proponemos modificar la plantilla de nuestro blog. Con este fin, tengo el abs ...

general tutoriales web ...

Como combinar declaraciones de estilo>CSS

Si tienes ya conocimiento de las declaraciones de CSS, este tuto te sera aburrido e irrelevante, te aconsejo te prepares unos Naños de carne asada que son deliciosos. Pero si tienes poco conocimiento o nada, y deseas aprender algo hoy, entonces quedate, lo intentare hacer lo mas sencillo y fácil posible. Iniciemos por saber que es el css, como lo definen en Maestros de la Web CSS (Cascading Style ...

Tutorial

Personalizar un formulario en Blogger

Tener una lista de suscripción es muy importante en el camino de convertirse en un Blogger de éxito, sin embargo muchos piensan que una vez hecha la lista vale todo el resto, por lo que nos encontramos páginas con campos de formulario que se presentan con el aspecto predeterminado que les da el navegador, evitar esta catástrofe en WordPress es sencillo, ya que contamos con plugins que nos facilita ...

Nuevo curso de html y css

Después de mucho pedírmelo.... ¡¡¡el curso de html y css está aquí!! Siento haber tardado tanto en lanzarlo, pero preparar un curso de html no es como preparar un curso sobre promocionar un blog. Al fin y al cabo, todo aquello que os enseño en cómo promocionar o en otros de mis cursos, no deja de estar en vuestro idioma. El html es un lenguaje nuevo. Ya no vale copiar y pegar como hacíamos en los ...

general diseño

Cómo poner la primera letra del texto distinta al resto en blogger

Alguien me dejó un día en el formualrio una petición para que explicara, por favor, cómo poner la primera letra del texto de manera distinta en Blogger. Así: Supongo que querrá imitar el estilo revista. Aparentemente vio un tutorial por ahí pero no lo entendió y quería que yo lo explicara con mis palabras. Para que te quedes tranquila de todos modos, yo tampoco lo entendí. Vamos, en mi opinión no ...

CSS: Nivel B1

Personalizar un formulario de suscripción

Tener una lista de suscripción es muy importante para captar seguidores más fieles que los que captaríamos en cualquier red social como Twitter o Facebook, sin embargo muchos piensan que una vez hecha la lista vale con pegar el código que nos da nuestro proveedor de e-mail marketing y ya nos lloverán los suscriptores, por lo que nos encontramos páginas con campos de formulario que se presentan con ...

general diseño

Ajustar las imágenes automáticamente al tamaño de nuestro blog con CSS

Han sido varias personas ya las que me han preguntado cómo hacen en el blog Los Tragaldabas para poner las fotos de esa manera: Así que he querido hacer un post explicandolo, así como otro sobre cómo hacerlo para ajustar las imágenes de manera autómatica por si puedo ayudar a más personas. Primero vemos cómo lo hacen ellos, y luego cómo hacerlo de manera automática. Eso sí, lo primero que quiero a ...

CSS: Nivel B2

Estiliza las listas de tu web

Hacia mucho que quería escribir este artículo, ya que es un tema del que puedes encontrar muy poca información en internet. Se trata de las listas. Ese elemento que utilizamos tanto en nuestros artículos pero que tan poquito sabemos estilizar. Y es que no tenemos que utilizar los puntos y los números obligatoriamente, podemos utilizar desde cuadrados hasta iconos pasando por números romanos o el a ...