Ejemplo de estilo para tu contador del blog
Categories: Tutoriales - Tags: contadores, css, diseño webEn 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.
Estructura:
La estructua HTML es muy simple.
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
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
