Guardar resultados de busqueda de Google CSE

Luego de varios días sin actualizar, un poco de culpa la tiene el terremoto en chile, se me ocurrió hacer esto.

La idea era utilizar el motor de busqueda de Google, Google Busqueda Personalizada (Google Custom Search o CSE para los entendidos), para un sitio que no utiliza base de datos para guardar los datos, de esta forma podía tener un buscador interno de forma sencilla y rápida.

Al lograr hacer que el buscador funcionará de forma correcta (fue difícil, ya que las páginas no estaban indexadas en Google), quise hacer algo para conocer que era exactamente lo que buscan los usuarios, para eso necesitaba conocer los datos del buscador, algo que Google no nos deja hacer.

Pero encontré una solución, rápida y efectiva de hacer esto, utilizando una base de datos para guardar las busquedas realizadas y cuantas veces fué buscado algún término. Con esto se puede hacer un sitio muy completo y lo mejor es que tengo todos los datos que quería desde un principio.

Seguir Leyendo esta Entrada

Limitar tamaño de imágen automáticamente

La mayoría de las veces cuando quiero utilizar una imagen para un post es necesario reducir su tamaño, algo que es muy simple con WordPress y su editor de imágenes, pero aún así es un fastidio tener que hacerlo cada vez que publicamos una imagen.

Aquí en el blog hemos escrito algunos artículos sobre CSS y las imágenes, como por ejemplo el efecto cargando e imágenes transparentes.

Para arreglar esto tan sólo debemos agregar una líneas de código a nuestra hoja de estilos CSS y listo.

Con este truco lo que haremos será lo siguiente:

  1. El ancho de la imagen será fijo, tu decides que tan ancho será, en este caso es de 530px.
  2. La altura de la imagen será automática, quedando de un tamaño proporcional al ancho estipulado.

Este es el código:

.entry img {max-width:530px; height:auto}

Eso es todo, pero debemos aclarar que el efecto sólo se verá dentro del sitio, si, por ejemplo, leemos desde un lector de feeds, la imagen se verá de tamaño completo.

Listar últimos posts de un autor

WordPress es uno de esos CMS's que nos permiten hacer muchas cosas, cómo listar los últimos post de un autor determinado.

Para hacerlo, tan solo debemos copiar este código en el lugar que deseemos de nuestro blog, normalmente va ubicado en sidebar.php.

<div id="ultimos-posts">
    <h2>Ultimos Posts de JuanK</h2>
    <?php query_posts('showposts=5&author_name=juank'); ?>
    <?php while (have_posts()) : the_post(); ?>
    <li>
    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permalink para'); ?> <?php the_title(); ?>"><?php the_title(); ?></a>
    </li>
    <?php endwhile;?>
</div>

Lo que hace este código es mostrar los últimos 5 posts del autor determinado en "author_name". Ahí debemos escribir el nombre del escritor que deseemos, muy útil si queremos mostrarlo como el "escritor destacado del mes" (es sólo un ejemplo, pero sería bueno).

Para darle estilos, sólo debemos agregar "#ultimos-posts" a nuestra hoja de estilos y listo.

Efecto Cargando con CSS

Cargando

¿Te gustaría mostrar tus imágenes con este efecto, hasta que terminen de cargar?

Para hacerlo es muy simple y como siempre nos ayudaremos con nuestro amigo CSS.

Para generar este truco sólo debemos agregar la imágen como background, de modo que cuando la imágen termine de cargar, esta quede debajo y no sea visible.

Utilizaremos la class "entry", que es la clase por defecto en WordPress, si usas otro sistema, sólo deberás cambiarla.

El CSS necesario para el efecto es este:

.entry img {background: url(http://img130.imageshack.us/img130/2134/ajaxloader.gif) no-repeat center center}

Ahora, sólo debes entrar a alguna entrada donde tengas imágenes que pesen harto, para que puedas observar el efecto, si quires un ejemplo, entra aquí.

Ejemplo CSS cargando.