[ un desarrollo de PATAGONIA CREATIVE ]
  • 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:

    1. Descargamos el Plugin FeedCount
    2. Descomprimir el fichero
    3. Subir el contenido de la carpeta a /wp-content/plugins/
    4. 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:

    1. <?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.

    1. .feedcountdiv p{
    2. margin-top:5px;
    3. font-size: 20px;
    4. }
    5. .subscribers {
    6. font-family: Georgia, "Trebuchet MS";
    7. font-size:35px;
    8. padding:-5px;
    9. margin: 0px;
    10. line-height:8px;}
    11. .feedcount {font-size:20px;
    12. line-height:12px;color:#F7E0A9;
    13. }
    14. .contador {
    15. background: #3B2F23;
    16. margin-bottom: 10px;
    17. position: relative;
    18. padding: 10px 10px;
    19. font-size:11px;
    20. }
    21. .contador a {
    22. color:#BFE3DA;
    23. }
    24. .contador .rssicon {
    25. float: left;
    26. background: url(images/feedicon48x48.gif) no-repeat ;
    27. width:48px;
    28. height:48px;
    29. padding-right:5px;
    30. }
    31. .contador .Contador_link {
    32. font-size:12px;
    33. }

    Llamada

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

    Descarga Icono Utilizado en el ejemplo.

    Actualización

    feed

    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

    1. #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}
    2. #rss_c div{padding-top:11px}
    3. #rss_c span{font-size:xx-small;position:relative}
    4. #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}
    5. #rss_c a:hover{color:#F37421}

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

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

  • Diseño

    28 /08 / 2007 - 11:31 pm

    Publicado por Nikko.

    • 2
    • 808

    Social Link

    Se comienzan a ver los primeros diseños del concurso de Mister Wong

    Hace unos días hablamos del lanzamiento del concurso para diseñar el nuevo logo de Mister Wong, como premio 6.000 dólares. A partir de ahora ya podremos comenzar a ver los primeros 127 diseños que comienzan a competir. Hay varios muy creativos y bellos, lo que hace pensar que será muy difícil elegir aun único ganador. Si tú aun no haz presentado tus diseños, aun estas a tiempo, la fecha límite para presentar tus diseños es hasta el de 8 de Septiembre del 2007. Mientras podrás ir viendo los diseños con los cuales deberás de competir. A ser creativos y a participar. Por cierto, mucha suerte.

    Enlace a los primeros 127 diseños compitiendo en el concurso

  • Fotografia

    28 /08 / 2007 - 10:32 pm

    Publicado por Nikko.

    • 1
    • 1.170

    Social Link

    FotoFlexer, Editor online de imágenes que se integra a Flickr, Picassa, etc

    FotoFlexer es otra aplicación online que podremos agregar a la gran lista de editores online de imágenes que ya hemos ido descubriendo. Bajo su bonita interfaz realizada en flash nos permite corregir nuestras imágenes de una forma sumamente sencilla, entre las opciones encontraremos para ajustar color, distorsionar nuestras imágenes, realizar varias mejoras, insertar textos y varias herramientas avanzadas con las cuales jugar. Un dato interesante de FotoFlexer es que mas haya que nos permite subir fotos desde nuestro ordenador también permite una completa integración con servicios como Flickr, MySpace, Picassa y Facebook para la importación y exportación de imágenes, lo que básicamente nos permitirá corregir todas nuestras imágenes siempre trabajando en línea. A esto sumarle que podremos realizar capturas de imágenes con nuestra webcam o buscar imagenes utilizando el buscador de yahoo. FotoFlexer es sin duda una buena opción para tener en cuenta, si deseas trabajar de forma online corrigiendo tus imágenes almacenadas en servicios populares.

    Enlace FotoFlexer – Via Genbeta

  • Yahoo UI Lightbox, Otra bonita forma de crear nuestros Lightbox

    The code central nos deja una bonita alternativa par crear fácilmente lightbox usando Yahoo UI. Para este lightbox se han incorporado muchas características nuevas que lo harán aun mas agradable, entre ellas un preloader de imagen, la opción de escalar imágenes grandes para encuadrarlo a la ventana de browser, se ha agregado un botón de maximizar imágenes escaladas, también permite ocultar el lightbox convenientemente clickeando en la imagen, y varias opciones mas a descubrir.

    DemoDescargaThe code central

    Codigo completo

     

    1. <html>
    2. <head>
    3. <link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/container.css" />
    4. <script type="text/javascript" src="js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
    5. <script type="text/javascript" src="js/yui/dragdrop/dragdrop-min.js"></script>
    6. <script type="text/javascript" src="js/yui/container/container-min.js"></script>
    7. <script type="text/javascript" src="js/lightbox/Lightbox.js"></script>
    8. <script type="text/javascript">
    9. //defer the instantiation of Lightbox. Call when the page has finished loading.
    10. init = function(){
    11.    //creating a data source object
    12.   var dataSource = {
    13.     image1:{url:"photos/rocks.jpg", title: 'Rocks'},
    14.     image2:{url:"http://thecodecentral.com/yui.jpg"}
    15.   };
    16.  
    17.   //Instantiate a Lightbox object
    18.   var lightbox = new YAHOO.com.thecodecentral.Lightbox({
    19.     imageBase:'js/lightbox',
    20.     dataSource: dataSource
    21.   });
    22. }
    23. YAHOO.util.Event.on(window, 'load', init);
    24. </script>
    25.  
    26. </head>
    27. <body>
    28. <img src="photos/rocks-small.jpg" id="image1"/>
    29. <img src="http://thecodecentral.com/yui-small.jpg" id="image2"/>
    30. </body>
    31. </html>

  • Iconos

    28 /08 / 2007 - 9:24 pm

    Publicado por Nikko.

    • 1
    • 778

    Social Link

    Iconos monitores flat Dell

    ¿Estas utilizando un monitor plano Dell E196FP? Vikiworks acaba de crear estos iconos que son la replica exacta de estos bonitos monitores.

    Enlace Descarga vikiworks

  • Loadinfo.net, Loader generator

    Loadinfo.net es otra sencilla aplicación online que nos permite generar imágenes “loading”. Podremos elegir entre 28 imágenes diferentes. Una vez que seleccionamos una de ellas, podremos configurar los tonos que llevara, optar por transparencias, y elegir un tamaño que podrá ser de 16×16, 24×24, 48×48. Sencillo, pero útil.

    Enlace Loadinfo.net

    Via infectedfx

  • Fuentes

    28 /08 / 2007 - 2:36 am

    Publicado por Nikko.

    • 14
    • 9.832

    Social Link

    Colección: 566 fuentes píxel

    Algo en lo que todos estamos de acuerdo es que todo diseñador debe tener su colección de fuentes listas para ser utilizadas en sus proyectos. Si hablamos de diseños profesionales, siempre existe un lugar donde poner una fuente píxel. Sin duda podremos encontrar bellos sitios de donde descargar, pero hoy, solo por hoy, te facilitare las cosas. Te dejare este pack de 566 fuentes pixel para que puedas usar en tus proyectos web, diseños digitales, etc. ¿te serán útiles? Apuesto que si.

    DESCARGAR

    (Colección 566 fuentes píxel)