Los 10 mejores servicios de hosting

Hosting Publicado por Claudia en agosto 27, 2009

WP Designer revisó los servicios de hosting más populares y seleccionó a los “top 10“, basándose en aspectos como la disponibilidad del servidor (uptime), precio, soporte, garantía de devolución de dinero, panel de control y soporte técnico.

Es una lista actual, confiable, detrás de la cual hay un exhaustivo review que da cuenta de la reputación de cada uno de estos servicios, y que ayuda a tomar la mejor decisión precio-calidad.

El top 1 es Bluehost (uno de los más recomendados por WordPress), seguido por un prometedor JustHost.  Que no te extrañe no ver en la lista a Dreamhost.

Vía | Espreson

Cómo crear dos columnas de posts en Blogger

Blogger, Tutoriales Publicado por Claudia en agosto 22, 2009

Este mini-tutorial nace a partir de una pregunta vía e-mail. No se trata de dividir un post en dos columnas, sino de mostrar dos columnas de posts en vez de una. Puede ser muy útil para cambiar la forma en que se muestran los posts en la página principal y, en especial, para crear la base de una plantilla tipo Magazine como Turnoutmag.

posts-blogger

Empecemos con el experimento:

1. Lo primero, es añadir el script “leer más con thumnails” y guardar los cambios. Como siempre, es recomendable descargar y realojar el archivo summary-post-v20-test.js. Si no, podría dejar de funcionar en cualquier momento.

2. Configura las opciones del script del siguiente modo: summary_noimg = 300; summary_img = 230; img_thumb_height = 60; y img_thumb_width = 60. En realidad, puedes elegir las proporciones que quieras pero, para este experimento, yo elegí éstas.

3. Amplía los contenedores de tu blog: el #main-wrapper debe tener al menos 580 píxeles de ancho, y el #outer-wrapper debe tener como ancho mínimo la suma del ancho del #main-wrapper con la del #sidebar-wrapper. Seguramente, también vas a tener que ampliar los contenedores #header-wrapper y #footer-wrapper para que sigan en concordancia con el diseño.

4. Ahora, busca la siguiente sección en tu plantilla:

]]></b:skin>

Justo debajo, añade:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
 
.post {
border:1px solid #BFBFBF;
float:left;
height:300px;
width:260px;
margin:7px;
padding:0px 5px 5px 5px;
overflow:hidden;
}
 
</style>
</b:if></b:if>

Lo anterior corresponde a estilos condicionales para la página de inicio. Se trata simplemente de especificar el alto y el ancho de los posts. En esta sección, también puedes añadir más estilos condicionales para el home (puedes ayudarte de la chuleta que creó Francisco). Así, por ejemplo, puedes cambiar el color del título de los posts o modificar el tamaño del texto en las entradas.

5. Detalles adicionales

a) Seguramente, vas a necesitar limpiar la flotación de los links de navegación:

#blog-pager {
clear: both;
}

b) Puedes adornar con CSS el enlace “Leer más”:

.rmlink {
background: #CA8398;
padding: 2px 5px;
}
.rmlink a:link, .rmlink a:hover, .rmlink a:visited{
color: #FFF;
}

c) En Formato, necesitas cambiar el número de entradas a mostrar a un número par (idealmente 8, 10 ó 12).

Consideraciones finales:

Es una técnica muy sencilla, que puedes adaptar a tus necesidades y “adornar” con un poco de CSS y HTML:

  • Puedes modificar los metadatos (fecha, autor, enlace de los comentarios), cambiándolos de lugar, añadiendo o quitando texto, o utilizando íconos para destacarlos.
  • Seguramente, notarás que la fecha queda flotando arriba de uno o varios posts, por lo cual puede ser algo molesto y poco estético. Opta por ocultarla desde la sección Elementos de la Página, y usa en su lugar el fomato de la hora. También puedes moverla manualmente desde la edición de HTML, aunque puede ser más complejo si no estás familiarizado con la estructura de una plantilla Blogger.
  • Si amplías más los contenedores de la plantilla, y reduces el tamaño de los posts en la página principal, puedes crear tres o más columnas de posts sin necesidad de retocar nada más. Inclusive, puedes llegar a crear galerías de imágenes modificando las propiedades del script.
  • Si antes del contenedor #main-wrapper añades un plugin jQuery para crear slideshows, y complementas la técnica poniendo columnas en el footer y arreglando tu sidebar con widgets y más columnas, puedes tener una perfecta plantilla tipo magazine. Todo está en entreverse a jugar y experimentar un poco.

FreshPick: Template para Blogger

Free Blogger Templates Publicado por Claudia en agosto 20, 2009

FreshPick es un diseño limpio, fresco, minimalista creado por Styleshout. Según Erwin de Styleshout, está pensado en pequeños sitios de negocios, aunque para mí es más apto para blogs personales.

La versión para Blogger fue creada para ChicaBlogger por Francisco (a raíz de una apuesta que hicimos hace un par de meses). Podría decir que la adaptación es netamente de Fran, salvo algunos pequeños detalles que añadí, como la sección para “Featured Posts“.

FreshPick

DEMO| DESCARGA

Características de la plantilla:

  • Dos columnas
  • Áreas “widgetizadas” en sidebar y footer
  • Variables para la personalización de fuentes y colores
  • Buscador interno incluido
  • Menú personalizable
  • Sección para “featured posts” (posts destacados).
  • Compatible con la mayoría de los navegadores (sino todos)

Considera que:

  • La sección “Featured” es un widget editable desde la sección “Elementos” que puedes configurar a tu gusto (no es un post automático como en WordPress). Es un accesorio que añadí a la plantilla para que quedara como el diseño original, y que es útil para incluir el contenido de algún post destacado.
  • Las instrucciones básicas de configuración, están incluidas en el paquete de descarga (Español e Inglés). Si usas un dominio personalizado, lo más probable es que necesites realojar las imágenes de la plantilla.
  • Puedes añadir el widget de Flickr desde Blogger in Draft (buscando por “Flickr”).

Si te gustó el diseño pero usas WordPress, también puedes ver la versión para WP hecha por ThemeLab.

jQuery FontEffect: añade afectos al texto sin imágenes

jQuery Publicado por Claudia en agosto 18, 2009

FontEffect es un plugin jQuery que añade efectos a textos delimitados con HTML, sin imágenes, y sin necesidad de usar CSS. En su versión 1.0 (que pesa sólo 7kb) permite añadir 4 efectos distintos: borde (outline), sombra, gradiente y reflejo (mirror).

jqueryfonteffect

Puedes añadirlo en tres pasos:

1) Cargas la librería y el plugin (tomando en cuenta que requiere jQuery 1.3.2):

<script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery-FontEffect-1.0.0.min.js"></script>

2) El CSS:

#ejemplo{ font-family: Georgia,'Times New Roman', serif; font-size:3.0em; color:#ff0080; font-weight:bold; margin-bottom:10px;}

3) HTML y efectos:

<div id="ejemplo">ChicaBlogger</div>
 
<script type="text/javascript">
$(&quot;#ejemplo&quot;).FontEffect({shadow:true});
</script>

Puedes combinar los efectos como quieras, y ver ejemplos en la página de Alejandro Uliana.
Es un plugin curioso, ideal para encabezados generados dinámicamente (ejemplo, el título de los posts). Lo mejor, es que funciona en la mayoría de los navegadores conocidos, incluyendo el favorito de todos: IE6.

Vía | Queness

Tags: , ,

Iconos sociales de gominola

Iconos Publicado por Claudia en agosto 18, 2009

jellysocial

Revolviendo un poco el gallinero, encontré en el blog de Helen Gizi (Pink Mustache), un set de originales íconos sociales que tienen nada más y nada menos que la forma de ositos de gominola (me recordaron la canción “osito gominola“). Son entre tiernos y frikis, y pueden ser descargados en formato PNG y EPS desde el blog de Helen. Según cuenta su autora, vienen con cepillo y pasta de dientes incluidos, aunque bien se dice por ahí que los ositos de gominola ayudan a prevenir las caries en los niños.

Tags: ,