Tutoriales

Cómo añadir Google Fonts en tu blog de Blogger o WordPress

Publicado por Claudia en agosto 31, 2011

Añadir fuentes personalizadas es una tendencia en diseño web que quizás nunca pase de moda: está muy en voga, le da un toque personal a tu blog y permite mejorar su estética. Y a la hora de hacerlo, Google Fonts es una de las mejores opciones, porque es fácil y rápido de incorporar y cuenta con una numerosa cantidad de familias de fuentes (actualmente, 247 y creciendo).

google web fonts

Cómo hacerlo, paso a paso:

1. Selecciona una fuente

Ve a Google Fonts y elige la fuente que más te agrade. Si a primera vista no logras decidirte, puedes añadir varias fuentes a tu colección (pulsando el botón “Add to collection“). Una vez que has escogido, haz click en “Use” o “Quick-use“.

2. Obtén el código

Hay fuentes con 1, 2 ó más estilos. Naturalmente, una fuente con más estilos te permite más opciones: normal, negrita, cursiva, etc.

Yo elegí la fuente “Droid Serif“, y seleccioné los 4 estilos que tiene.

El sitio me entregará un código como el siguiente:

1
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

Dicho código debe ser incorporado exactamente después de <head>. En WordPress, en tu header.php, en Blogger, en Diseño/Edición de HTML (al inicio de tu plantilla).

Antes de guardar, no olvides añadir un slash (/) de cierre antes del signo “mayor que“, de modo que el código a añadir quede de la siguiente forma:

1
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>

3. Modifica los encabezados en tu hoja de estilos

Busca los lugares donde hay encabezados (h1, h2, h3, etc.), e incorpora el nombre de la fuente como normalmente lo harías con cualquier otra fuente, usando la propiedad “font-family“.

Ejemplo:

h1 { 
font-family: 'Droid Serif', Arial, serif; 
font-weight: 400; 
}

Nótese que aquí también se utiliza la propiedad “font-weight“. En este caso, así como en el de muchas otras fuentes, “400” es normal y “700” es bold o negrita.

También puedes cambiar el estilo a cursiva (o itálico) con la propiedad “font-style“:

h1 { 
font-family: 'Droid Serif', Arial, serif; 
font-weight: 400; 
font-style: italic;
}

Finalmente, aquí hay otro ejemplo, que incorpora además la propiedad “text-shadow“:

#header h1 {
font-family: 'Droid Serif', Helvetica, arial, sans-serif;
color: #000;
font-size: 40px;
font-weight: 700;
font-style: italic;
text-shadow: 2px 2px 0 #E5E0D0;
}
Tags: , , ,
Redes y marcadores sociales

Actualiza Facebook y Twitter desde tu Google Plus

Publicado por Claudia en agosto 31, 2011

Sin necesidad de utilizar ninguna aplicación, puedes permitir que tu status en Google Plus se publique en forma automática en tu muro de Facebook. Para hacerlo, debes utilizar la cuenta de e-mail generada automáticamente for Facebook para publicar desde tu móvil. Esa cuenta debe ser incluida como un contacto en un nuevo círculo de Google+, al cual podemos nombrar “Actualizar mi Facebook“. A la hora de publicar, debemos incluir dicho círculo entre los contactos que verán nuestra publicación, y tildar la opción de “enviar un correo electrónico“.

Para actualizar tu cuenta Twitter desde Google Plus, el procedimiento es casi el mismo, salvo un detalle: para obtener el mail que debes ingresar en tu círculo de Google+ al que puedes llamar “Actualizar mi Twitter“, debes ir a Twitter Mail, y permitir el acceso de la aplicación a tu cuenta Twitter. Una vez allí, puedes el nombre de usuario que quieres usar, ejemplo, “claudia” (por defecto, es numérico, pero Google+ lo lo admite).

Vía | Tech Fanatic Blog

Tags: , ,
Fondos, texturas y patrones

Subtle Patterns: Patrones de fondo gratuitos para tu sitio web o blog

Publicado por Claudia en agosto 30, 2011

Subtle Patterns, proyecto de Atle Mo, es un sitio donde ofrecen una colección de 75 patrones de fondo repetibles para tu actual o tu próximo proyecto web. La gracia de estos patrones en particular es que son simples, pero de alta calidad, y puedes utilizarlos tanto para fines personales como comerciales.

Todos los patrones están disponibles en formato *.png (listos para usar), pero además puedes descargar el archivo *.pat para incluirlos en tu Photoshop y hacer nuevas producciones en base a ellos.

Por si fuera poco, se van añadiendo fondos semana a semana, y cuenta con un bookmarklet para obtener una vista previa de los patrones en cualquier sitio, además en un Plugin para WordPress 3.0+.

Vía | Wwwhat’s New

Tags:
Herramientas, Wordpress

Sencilla opción para proteger los enlaces del diseñador en Temas WordPress

Publicado por Claudia en agosto 28, 2011

Una de las razones para diseñar temas WordPress gratuitos, o bien comprar enlaces en temas que luego serán distribuidos gratuitamente es obtener enlaces entrantes. Para proteger los créditos, encriptar los enlaces del footer parece ser un mal necesario.

Encriptación PHP Base64

Tomando como referencia algunos códigos encriptados, me di cuenta de que tenían una codificación base64.

Cómo realizar la encriptación:

1. Usa un encriptador base64 online como el de Motobit.

2. Reemplaza el output en el siguiente código:

1
2
3
4
<?php
$str = 'OUTPUT';
echo base64_decode($str);
?>

Es todo. Puedes ingresar parte de tu footer.php (enlaces o zonas que quieras proteger), o tu footer.php completo, con cuidado y previo respaldo.

Conclusiones:

  • No sé si sea el mejor método, pero es sencillo y gratuito (en internet ofrecen software interesante, pero hay que pagar).
  • El método sirve tanto para encriptar como para desencriptar códigos base64.
  • Encriptar enlaces nunca da seguridad de que el usuario del tema no se las ingenie de alguna manera para

  • removerlos, aunque suene obvio.
Tags: ,
Blógsfera

KiroBlog te regala alojamiento web

Publicado por Claudia en agosto 24, 2011

KiroBlog es un nuevo blog que habla de blogging, tutoriales para WordPress y posicionamiento en buscadores. Para promocionarlo, Marc Coll (su autor principal) sortea 5 hostings gratuitos durante 5 meses en Hostgator, con las siguientes características:

  • 1000 MB de espacio en disco
  • 10000 MB de transferencia mensual
  • Bases de datos ilimitadas
  • Instalación de WordPress

La idea es dar un impulso inicial a nuevos bloggers, especialmente a aquellos que quieren dar el salto a WordPress.

Para participar, necesitas suscribirte a su blog (hay plazo hasta el 31 de agosto), y dejar un comentario. Para más información, visita KiroBlog: Promoción para nuevos blogs.

Tags: