CSS

Menús CSS desplegables sin javascript

Publicado por Claudia en junio 20, 2009


Janko (Janko at Warp Speed) nos muestra una interesante técnica para crear menús desplegables sólo con un poco de CSS y HTML, pero sin javascript:

#menu { height:120px; position:relative;
background: transparent url(header_bkg.png) repeat-x scroll top center;}
#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px; 
position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }

Es posible notar la inclusión del carácter “>” en tres selectores, que hace posible el efecto “dropdown” con categorías hijas.

*Nótese que he cambiado el nombre del selector principal (header) por “menu”, para prevenir que el header o el menú de mi blog tomen propiedades indeseadas.

Después de añadir el código CSS, el respectivo código HTML del menú sería el siguiente:

<div id="menu">
            <ul id="nav">
 
            <li><span>Menu 1</span>
                <ul>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
               </ul>
            </li>
 
            <li><span>Menu 2</span>
                <ul>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
               </ul>
            </li>            
            <li><span>Menu 3</span>
 
                <ul>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
               </ul>
            </li>
        </ul>
 
    </div>

Luego de añadir el menú, estamos en condiciones de modificar el código CSS para que éste tenga las propiedades deseadas. Pueden ver el demo en el sitio de Janko, o la modificación del menú que hice en mi blog de pruebas en Blogger.

Lo que me gusta de esta técnica, es que resulta muy fácil de incorporar y que no hay que preocuparse por los problemas de compatibilidad con distintos navegadores (salvo IE6, que no lee el caracter > en los selectores). Además, al no necesitar javascript es más liviana que una pluma.

Tags:
Blogger

Blogger Buddy para Vista: Postea desde tu escritorio

Publicado por Claudia en junio 16, 2009

Blogger Buddy es un gadget para Windows Vista (y Windows 7) desarrollado por BuildaGadget, que permite acceder directamente a tu panel de control de Blogger sin necesidad de utilizar ningún navegador, manejar múltiples cuentas y crear posts en formato HTML.

Su interfaz es sencilla y amigable, y en su sección de ayuda muestra enlaces a páginas de HTML básico y Blogger Help (en inglés). Su autor admite que quizás sea el gadget sea un poco básico por ahora (para mi gusto, le hace falta al menos un campo adicional para añadir categorías bajo los posts), pero es un gadget muy curioso y bien hecho, que podría incorporar nuevas y útiles características en sus próximas versiones.

Vía | Webup8

Tags: , , ,
Microblogging

Twitter Follow Badge Generator – Generador de badges

Publicado por Claudia en junio 15, 2009

Orli Yakuel (Go2Web20) acaba de lanzar un generador de badges de Twitter, para incitar a nuestros visitantes a que se conviertan en nuestros “followers“. El badge flotante, recién en fase alfa, admite algunas opciones de configuración y personalización, como por ejemplo: cambio de color, distancia con respecto al top del blog, lado donde quieres que se muestre (izquierdo, derecho) y etiqueta (“Follow me”, “Follow us”, “Follow”, “My Twitter”).

El código el badge generado ha de añadirse antes del cierre de la etiqueta “body”. Es muy simple, pero muy útil, y puede integrarse casi a cualquier sitio web.

Enlace | Twitter Follow Badge Generator

Tags: , ,
Iconos

Watercolor Icons

Publicado por Claudia en junio 13, 2009

Watercolor Icons

Vi este pack de íconos en Tutorial9 (diseñado por ILoveColors), y no pude resistir la tentación de descargarlos. Son íconos que parecieran estar pintados con acuarela, y hechos por un niño.  Su fondo semi-transparente hace que parezca que realmente están pintados sobre papel (o sobre el blog). A simple vista, son ideales para algún diseño infantil o para quien tenga alma de niño (“yo los quiero, mami!”).

Son 36 íconos distintos de 256×256 píxeles en formato *.png, que pueden ser usados para fines personales y comerciales (sin atribución).

Enlace | Watercolor Free Icon Pack

(La ternura el pajarito Twitter me deja francamente sin palabras).

Tags:
Blogger

Contador de vistas/lecturas de posts para Blogger

Publicado por Claudia en junio 12, 2009

Una pregunta que he visto en varios lugares es cómo mostrar en Blogger las veces que un post es visto o leído, tal y como haríamos en WordPress. Buscando un poco en Google, encontré una excelente manera de hacerlo: usando un hit counter que corre con PHP, y que se muestra con condicionales en cada post individual.

Como ya sabemos, en Blogger es imposible usar PHP (o bueno, casi). La única manera de utilizar el contador es usando un hosting externo, pero por el momento no hay problema con eso: su autor ha alojado este contador php en un hosting gratuito y permite el hotlinking, por lo cual añadir el código a la plantilla será sólo cuestión de copiar y pegar.

El código

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span id='hit-counter'>
<font color='#999999'><script src='https://wizom.net/counter.php' type='text/javascript'/> lecturas</font>
</span></b:if>

Puedes modificar el color del texto (font-color) para que se integre con tu plantilla, y el texto “lecturas” por el que más te acomode.

Puedes pegar el código bajo el título del post, o bajo el cuerpo de la entrada, de la siguiente manera:

  • Debajo del título
<div class='post-header-line-1'/>
Código
  • O al final del post
<div class='post-footer-line post-footer-line-1'>
Código

Considera que:

  • Para añadir el código debes tener los artilugios de la plantilla expandidos.
  • El archivo counter.php (todavía en fase experimental) podría dejar de funcionar de aquí a mediano plazo, por lo cual podría ser necesario realojarlo. Sin embargo, hasta ahora su autor se ha preocupado de cambiar el hosting, y de ofrecer el archivo para descarga libre desde su blog, bajo Licencia GPL. Eso sí, es necesario tener conocimientos avanzados en PHP para hacer las modificaciones correspondientes.
  • El contador será visible sólo en los posts individuales (por eso lleva condicionales). De otro modo, mediría las estadísticas del blog completo, en vez del número de lecturas de cada uno de los posts.

Otra posible alternativa, en caso de cualquier traspie, es añadir un contador de visitas usando un hit counter clásico (de imagen), como muestra Web Upd8.

Tags: ,