Personalizar nuestro contador de suscripciones para lograr un estilo agradable

FeedCount es un bonito plugin wordpress que nos permitirá seguir la cantidad de usuarios suscriptos a nuestros feed pero dándole un poco mas de personalización a nuestro contador. Básicamente remplazaremos el tradicional contador para usar este nuevo personalizado mediante CSS.
Instalación:

Descargamos el Plugin FeedCount
Descomprimir el fichero
Subir el contenido de la carpeta a /wp-content/plugins/
Activar desde el menú administrador

Configuración:
Necesitaremos configurar el plugin para que siga la cantidad de usuarios suscriptos a nuestros feed, entonces debemos:

Dirigirnos a “Opciones” en nuestro panel de control.
Dentro de estas opciones seleccionaremos la Opción "Feed Count"
Aquí nos encontraremos con el cuadro que figura arriba, que posee dos casilleros importantes para rellenar. En el primero deberemos ingresar la URL de nuestro feed y en el segundo casillero el link de ha donde deseamos sean dirigidos los usuarios al hacer click sobre nuestro contador. La mejor idea aquí, es poner en ambos casilleros la Url de nuestro feed. Esto con la idea de seguir aumentando la suscripciones.

Llamada al contador:
Para que nuestro contador se muestre necesitaremos ingresar una pequeña línea de código, donde deseamos que aparezca nuestro nuevo contador: Ej en tu Sidebar. El código tradicional es el siguiente:

PLAIN TEXT

PHP:

<?php if (function_exists('fc_feedcount')) fc_feedcount(); ?>

Personalizar nuestros contadores mediante CSS:
Si bien los pasos detallados arriba nos permitirán ya estar visualizando nuestro contador, la idea es que nosotros mismo creemos nuestros propios contadores personalizados mediante CSS, aquí les dejo un ejemplo para lograr el siguiente diseño.

PLAIN TEXT

CSS:

.feedcountdiv p{
margin-top:5px;
font-size: 20px;
}
.subscribers {
font-family: Georgia, "Trebuchet MS";
font-size:35px;
padding:-5px;
margin: 0px;
line-height:8px;}
.feedcount {font-size:20px;
line-height:12px;color:#F7E0A9;
}
.contador {
background: #3B2F23;
margin-bottom: 10px;
position: relative;
padding: 10px 10px;
font-size:11px;
}
.contador a {
color:#BFE3DA;
}
.contador .rssicon {
float: left;
background: url(images/feedicon48x48.gif) no-repeat ;
width:48px;
height:48px;
padding-right:5px;
}
.contador .Contador_link {
font-size:12px;
}

Llamada

PLAIN TEXT

HTML:

<div class="contador">
<div class="rssicon" onClick="location.href='http://feeds.feedburner.com/webxyberneticos/'"></div>
<div class="Contador_link"><a title="RSS feed" href="http://feeds.feedburner.com/webxyberneticos/">Suscriptos por feed </a></div>
<div class='feedcountdiv'><?php if (function_exists('fc_feedcount')) fc_feedcount(); ?></div></div>

Descarga Icono Utilizado en el ejemplo.

Actualización

En viciao2k3 podrán descargar un bonito estilo con una imagen de fondo que me ha gustado bastante. La descarga incluye los CSS, e imágenes utilizadas.
Los pasos son exactamente los mismos, descargamos el plugin personalizado esta vez, el cual incluye las imágenes.
Incluimos en nuestra hoja de estilo los CSS para personalizar

PLAIN TEXT

CSS:

#rss_c{font-family:Arial,Helvetica,sans-serif;background:url('images/boto_fons.gif') left top no-repeat;width:120px;height:60px;text-align:center}
#rss_c div{padding-top:11px}
#rss_c span{font-size:xx-small;position:relative}
#rss_c a{background:url('images/rssp1.gif') no-repeat left center;padding-left:28px;font-weight:bold;font-size:22px;text-decoration:none;color:#000}
#rss_c a:hover{color:#F37421}

Luego simplemente incluimos la llamada donde deseamos se muestre nuestro nuevo contador de feed.

PLAIN TEXT

PHP:

<?php if (function_exists(’fc_feedcount’))fc_feedcount(); ?>

Compartelo

Ariel H. said,

Wrote on August 30, 2007 @ 10:28

Otro exelente y util plugin para wordpress.
En cuanto tenga la oportunidad, lo pruebo.
Gracias!
joshua said,

Wrote on August 30, 2007 @ 16:12

muy bueno el tutorial

ya pude cambiar esa imagen

gracias
peloton69 said,

Wrote on August 31, 2007 @ 11:15

Pues yo llevo aquí dos horas volviéndome mico y no consigo ponerlo.
links for 2007-09-04 — Vidablog said,

Wrote on September 4, 2007 @ 2:29

[...] Personalizar nuestro contador de suscripciones Plugin WP para darle diseño al contador de FeedBurner (tags: feedburner plugins wordpress feed design) Marcadores [...]
Vidablog | Internet y tecnología said,

Wrote on September 4, 2007 @ 3:00

[...] Personalizar nuestro contador de suscripciones Plugin WP para darle diseño al contador de FeedBurner (tags: feedburner plugins wordpress feed design) 0 Comentarios Marcadores | Christian [...]
Hernan said,

Wrote on September 6, 2007 @ 15:02

Como andas Nikko. Se ve que el blog te saco de la "vida social"

Solo queria consultarte si tenes el codigo de la primer imagen del post, claro esta el contador de la derecha.

Si se puede tener, me gustaria. Ya tenes mi Email.

Sino, igual gracias.

Salu2.
Nikko said,

Wrote on September 6, 2007 @ 17:53

no es el blog hernan, ojala lo fuera,..la verdad es que trabajo en 5 proyectos para terceros, el trabajo actual que demanda varias horas de oficina y muchas horas en la pc, otro trabajo q hago desde casa para una editorial todos los dias, mas diseños varios, y cosas de la universidad...mmmm puffff y un poco mas de todo...Ojala fuera solo el blog ^_^ la verdad es que soy muy activo...aprovecho cada segundo tanto en lo personal como profesional.. ^_^…
En cuanto a tu consulta, no tengo el codigo, de la primer foto, ya q a veces suelo borrar algunas cosas, y en este caso como luego puse el otro diseño modifique el código. Pero si lo miras es re sencillo de conseguir, simplemente cambia los tonos, y pon el texto superior en la parte inferior...
MontoGeek said,

Wrote on March 15, 2008 @ 22:44

Es muy bueno el plugin y aun mejor el tutorial. Pero este no estara en blogger. Seria muy bueno que tambien se pudiera en blogger.