Ejemplo de estilo para tu contador del blog

Publicado en July 12, 2009 by Damian

En este tutorial les voy a mostrar como crear un simple contador de comentarios o comments counter como se suele decir en ingles. Con un HTML muy básico y un poco de CSS vas a poder dar un nuevo aire a tu blog.
counter

Estructura:

La estructua HTML es muy simple.

counter2

Tenemos un DIV principal que incluye un elemento <span>( con la clase “count”) que es donde se va a mostrar el número de comentarios, y más abajo un texto con la palabra “comments”. El código HTML seria el siguiente:

<div class="bubble">
<span class="count">... contador ...</span>
comments
</div>

Para el globo usamos una imagen que vamos a aplicar como fondo del DIV

bubble

El código CSS que aplicamos es el siguiente:

.bubble{
background:url(img/bubble.png) left top no-repeat;
color:#575553;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
height:68px;
margin-right:20px;
padding-top:7px;
text-align:center;
width:70px;
}
.bubble .count{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#CC6600;
}
//Añadimos un poco más de código para el texto
h1, p{margin:0; padding:0; border:0;}
p{
font-size:16px;
color:#666666;
font-family:Georgia, "Times New Roman", Times, serif;
}
h1{
margin-bottom:8px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
}

Y ya esta! con eso tendriamos todo.
Como siempre acá tienen el EJEMPLO ONLINE

Descargar Ejemplo

Comparte este artículo: