Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más » contadores http://www.masquewordpress.com Tutoriales y recursos web sobre JQuery , PHP, Wordpress , twitter. Aprende diseño web y programación Fri, 03 Feb 2012 19:33:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Ejemplo de estilo para tu contador del blog http://www.masquewordpress.com/ejemplo-de-estilo-para-tu-contador-del-blog/ http://www.masquewordpress.com/ejemplo-de-estilo-para-tu-contador-del-blog/#comments Sun, 12 Jul 2009 16:26:01 +0000 Damian http://masquewordpress.com/?p=186 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:

1
2
3
4

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.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

]]> http://www.masquewordpress.com/ejemplo-de-estilo-para-tu-contador-del-blog/feed/ 0