Google Fonts en WordPress

Standard

Hace tiempo descubrí lo que era Google Fonts, me pareció muy copado y pensé algún día implementarlo en algún proyecto. Como actualmente estoy modificando un theme para este blog, decidí hacerlo, por ende les traigo una sencilla guiá para hacerlo andar en WordPress.

¿Que es Google Fonts?

Básicamente, es un directorio de fuentes web básicas, que proporciona un servicio a través de su API para que cualquiera pueda poner tipografías de calidad a sus páginas web, independientemente de las que son consideradas por defectos en los navegadores más populares.

Todas las fuentes que se encuentran en Google Fonts, son fuentes Open Source.

Empezemos

Eligiendo la fuente

Primero tenemos que elegir del directorio de fuentes de Google la que mas nos guste, yo elegí en este caso Fredericka the Great.

Implementando la fuente

Para utilizar la fuente, hacemos click en Quick-use, esto nos llevara a una nueva pagina con mas instrucciones.

Encontraremos mas abajo el código para poner en nuestro archivo header.php. Utilizaremos la forma estándar (a gusto del consumidor).

<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>

Ahora ingresamos al panel del Administrador de nuestro blog de WordPress (/wp-admin), nos dirigimos a Apariencia -> Editor y elegimos en el panel de la derecha la plantilla Cabecera (header.php).

Pegamos el código que obtuvimos anteriormente antes de la etiqueta (importante) y le agregamos esta clase para poder utilizarla donde queramos…

<style>.googlefontfredericka{
    font-family: 'Fredericka the Great', cursive;
}</style>

Pueden utilizar cualquier nombre, yo elegí googlefontfredericka

Utilizando la fuente

Listo, solo queda utilizar la clase en alguna etiqueta html y hacer tu blog la envidia del barrio. :D

<div class="googlefontfredericka">Zarpele Linux & Software Libre!</div>
Zarpele Linux & Software Libre!

Saludos…

Como agregar botón Facebook y Twitter en WordPress!!!

Standard

Si bien en un principio me negaba a socializar el blog, hoy en día creo que es necesario utilizar estos botones para mayor difusión de las entradas y mayor interacción con el usuario.

Los nuevos Themes en su gran mayoria, ya implementan estos, pero si ya se acostumbraron a un tema que no lo tenga y no querés cambiarlo, no te preocupes aquí el código para agregarlos…

Facebook
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:20px; text-align:right"></iframe>
Twitter
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="horizontal" data-lang="es">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Ahora donde pongo el código?, en nuestro panel de administración nos dirigimos a Apariencia -> Editor seleccionamos el fichero Main Index Template (index.php) y ubicamos nuestro codigo a paciere.

Lo mismo hacemos con el fichero Single Post (single.php)

Y listo ya tenemos los botones Oficiales en nuestro Blog, yo por ejemplo lo puse en postmetadata pero lo pueden poner donde sea.

Saludos…

Texto Parpadeante en HTML – Blink

Standard

Bueno visto que estoy realizando un trabajo particular y necesitaba un texto parpadeante, empeze a buscar un banner ya echo para ponerlo en la web, pero encuentro esta posibilidad que nos ofrece html para que nuestro texto parpedee.

Nuevo Parpadea.

Nuevo No Parpadea.

Solo tiene que agregar estas pocas lineas…

1
2
<!-- By Zarpele.com.ar-->
<blink>Nuevo Parpadea.</blink>

Con color utilizamos como siempre font:
Nuevo Parpadea Rojo.

1
2
<!-- By Zarpele.com.ar-->
<font color="#FF0000"><blink>Nuevo Parpadea Rojo.</blink></font>

Esto solo anda para firefox, para el despreciable IE no.
Si no ven el codigo esperen un poco hasta que se cargen los script de lenguajes.
Saludos…