Chica Blogger » Tutoriales

Crea tu correo profesional con Google Apps con tu dominio de Blogger

Claudia — Sat, 07 Jan 2012 20:20:35 +0000

Hace dos años tengo un correo del tipo contacto@minombre.com. Lo doy porque es más fácil de deletrear, y es mucho más profesional que un correo hotmail o un gmail lleno de letras y números raros. A veces me preguntan cómo tengo ese correo. Es simple, respondo: Sólo tienes que comprar un dominio por unos US$8 al año.

Al final, tener un correo con tu nombre o el de tu organización, es mucho más sencillo y barato de lo que el común de la gente piensa. Yo tengo WordPress, y creo mis correos de contacto desde el CPanel, porque es más simple, pero cualquier persona que haya comprado un dominio puede tener un correo con su dominio usando Google Apps fácilmente.

¿Eres usuario de Blogger.com y tienes tu propio dominio? A continuación, te explicamos cómo crear tu correo @tudominio gratis, usando Google Apps.

Crea tu correo en Google Apps

El primer paso, es ir a la versión gratuita de Google Apps, que te permite crear hasta 10 correos electrónicos sin costo alguno.

Una vez allí, presionamos el botón “Cómo empezar“. Suponiendo que queremos usar un dominio ya existente, que hemos comprado previamente, ingresamos nuestro nombre de dominio sin www. Ejemplo: tipsdecocina.net. Presionando el botón “Empezar ahora”, veremos un formulario de registro, donde tendremos que completar los campos indicados.

Completando todos los datos, incluyendo un correo electrónico de referencia (ya existente, que podamos revisar posteriormente), hacemos click en “Continuar“, y saltamos al tercer paso de configuración de nuestro nuevo correo. Si resides en Chile, antepone un “9″ a tu número de celular (son 9 dígitos en total).

Ahora podemos elegir el nombre de usuario y contraseña de nuestro correo. Yo elegí hola@tipsdecocina.net. Aceptando los términos del servicio de Google Apps, seremos redireccionados a un panel de opciones de escritorio, donde veremos las aplicaciones que podemos usar: Email, Google Calendar, Google Docs, etc. Tu correo está casi listo para ser usado.

El último paso: verifica tu dominio

Para comenzar a usar el nuevo correo creado, necesitas verificar que el dominio en cuestión es tuyo. Para ello, necesitas hacer click en el enlace “Verify your domain” que aparece bajo el ícono de Email en tu escritorio, o ir a la opción Setup/Verify domain ownership
. Haciendo click en el botón “Next“, tendrás que ingresar con tu nuevo correo electrónico y contraseña.

Si usas Blogger, para verificar que eres dueño de tu dominio, en la pestaña “Alternate methods“, puedes elegir una de estas tres opciones: añadir una meta tag en tu plantilla, usar tu cuenta de Google Analytics (si ya tienes), o modificar tus registros DNS en la configuración de tu dominio. Recomiendo la primera alternativa, porque es más simple: sólo será cosa de copiar el código dado bajo la etiqueta en la edición de HTML de tu plantilla.

Una vez hecho esto, hacemos click en “Verify“, y podremos acceder a nuestro nuevo correo en 5 a 10 minutos (por lo general, inmediatamente).

En Setup/Users and groups, tenemos la opción de crear correos para los demás miembros de nuestro equipo.

Ingresa a tu nuevo correo

Una vez que has creado tu correo y verificado tu dominio, podrás acceder:

Desde http://mail.google.com/a/tudominio, ingresando tu nombre de usuario y contraseña
O desde Gmail.com, ingresando tu correo completo (ej. hola@tipsdeconina.net) y contraseña.

Consideraciones finales

Si ya tienes una cuenta de Gmail, puedes revisar tu nueva cuenta de correo @tudominio desde tu viejo correo (es algo que veremos en otro tutorial).
Tener un correo con tu dominio, le dará más profesionalismo y lo que haces y ayudará a promocionar tu blog o página web. Si ya tienes tu propio dominio, ¿qué esperas para crear tu correo?

Posts relacionados

Optimizar imágenes para la web con PhotoFiltre

Claudia — Thu, 05 Jan 2012 04:43:35 +0000

Quienes comienzan con un blog, generalmente omiten un paso fundamental para mejorar el rendimiento y la carga de su blog: la optimización de imágenes para la web. Optimizar las imágenes es especialmente útil para mejorar la usabilidad de nuestro sitio y reducir el porcentaje de rebote de los visitantes. Usualmente, cuando hablamos de optimización para la web, nos referimos a la compresión de imágenes, esto es, la reducción de su tamaño y peso, sin afectar visiblemente la calidad del archivo original.

¿Qué formato usar?

En general, prefiero usar *.PNG para el diseño del blog, y *.JPG para las imágenes de las entradas. Hay quienes prefieren usar *.GIF pero, dependiendo del caso, me quedo sólo con los formatos antes mencionados para garantizar la calidad de las imágenes sin que ello perjudique el tiempo de carga del blog.

Reduciendo el tamaño y peso de tus fotos con PhotoFiltre

Uso Photoshop, y también Gimp para editar imágenes, pero considero que son programas algo complejos (y de lenta carga) para una tarea tan simple como la optimización de imágenes para la web, especialmente para quienes no están familiarizados con este tipo de programas. Por ello, uso PhotoFiltre para este tipo de tareas.

PhotoFiltre es un software de edición de imágenes para Windows del cual podemos obtener una versión completamente gratuita y legal (Descarga PhotoFiltre). La versión en inglés pesa 4MB comprimida, y cuenta con archivos de traducción a distintos idiomas que se ponen en la carpeta de instalación del programa. Por ejemplo, si quieres traducir PhotoFiltre al español, deberás copiar el archivo TranslationES.plg en C:\Archivos de programa\PhotoFiltre, quitando el archivo de traducción al inglés. También hay una versión portable para que lleves en tu memoria USB a todas partes.

Podrás notar que el programa se abre inmediatamente, sin tiempos de espera, y que es muy sencillo de usar. En él, hay cuatro herramientas que uso frecuentemente: Tamaño de Imagen y Tamaño de Lienzo (ambos en el menú Imagen); Cortar, que aparece al presionar el botón derecho del mouse luego de seleccionar una porción de la imagen ;y Compresión, que aparece al momento de guardar las imágenes.

Ejemplo de optimización con PhotoFiltre

Tomé una imagen de Sxc.hu (beautiful woman with sunflowers) de 3888×2592 píxeles y 6,36MB de peso. Sería una locura subirla tal cual y redimensionarla desde el editor de la entrada. Lo ideal es reducir su tamaño desde Tamaño de Imagen, hasta lograr el tamaño que efectivamente vayamos a usar en nuestro blog. Si la columna principal de mi blog tiene 600 píxeles de ancho, ese será el tamaño de referencia al momento de redimensionar.

Personalmente, prefiero usar siempre imágenes de no más de 500px de ancho. Por ello, cambié el tamaño original de la mujer con girasoles a 500×333 píxeles, con un peso de 200kb. Como 200kb aún es mucho, vamos a Archivo/Guardar como y bajamos la Compresión de 100 a 80 o menos, dejando las demás opciones por defecto (el formato a guardar debe ser *.JPG). La misma imagen, con un 75% de compresión, pesará 62kb en vez de 200kb, y la diferencia será apenas perceptible.

A modo de experimento, podemos seguir comprimiendo para probar cuál es el mínimo peso al que podemos llegar sin perder calidad de imagen.

Consideraciones finales

PhotoFiltre tiene un montón de herramientas que podrás probar para mejorar tus imágenes (filtros y marcos, por ejemplo): ofrece lo esencial para quienes comienzan en el mundo del retoque fotográfico.
Para ahorrar tiempo, prefiere comprimir las imágenes JPG en PhotoFiltre a un 80%, y sólo evaluando si la calidad y el peso son los adecuados, considera comprimir más o menos.
Cabe preguntarse cuál es el peso ideal para una imagen de una entrada de blog. David Cantone piensa que lo ideal es que las imágenes pesen entre 20 y 40kb, pero buscando siempre el equilibrio entre peso y calidad.

Posts relacionados

Añadir Nivo Slider en Blogger

Claudia — Tue, 03 Jan 2012 05:07:33 +0000

Nivo Slider es uno de los sliders jQuery más increíbles: es liviano (la versión comprimida pesa 12kb), tiene 16 efectos de transición, control de navegación y títulos HTML. Además, es completamente gratuito y configurable.

A continuación verás cómo incorporar Nivo Slider en pocos pasos en cualquier plantilla Blogger.

1. Carga Nivo Slider en tu plantilla

Primero carga la última versión de jQuery desde Google antes del cierre de :

Estarás añadiendo la versión 2.3 comprimida de Nivo Slider (experimenté problemas con la 2.7.1), con efectos de transición aleatorios.

Los estilos CSS del slider

Ahora, añade los estilos justo antes de ]]> en las plantillas antiguas de Blogger o en Diseño/Avanzado/Añadir CSS en el Diseñador de las nuevas plantillas Blogger:

/* NIVO SLIDER STYLES */
 
#slider-container {
margin-bottom: 50px;
}
 
.nivoSlider {
position:relative;
}
 
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
 
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
 
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
 
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background: #000;
color:#fff;
opacity:0.8;
width:100%;
z-index:89;
}
 
.nivo-caption p {
padding:5px;
margin:0;
font-size: 14px;
color: #FFF;
text-align: center;
}
 
.nivo-caption a {
display:inline !important;
color: #FFF;
}
 
.nivo-html-caption {
display:none;
}
 
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
 
.nivo-prevNav {
left:0px;
}
 
.nivo-nextNav {
right:0px;
}
 
.nivo-controlNav a {
position:
relative;
z-index:99;
cursor:pointer;
}
 
.nivo-controlNav a.active {
font-weight:bold;
}
 
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
 
#slider {
position:relative;
width:560px;
height:280px;
background: #000 url(http://1.bp.blogspot.com/-F80SiDnYNs0/Ts0P4xXGd5I/AAAAAAAACp0/xA5AuZGzqEg/s1600/loading.gif) no-repeat 50% 50%;
}
 
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
 
#slider a {
border:0;
display:block;
}
 
.nivo-controlNav {
position:absolute;
left:210px;
bottom:-30px;
}
 
.nivo-controlNav a {
width:22px;
height: 22px;
background: url(http://1.bp.blogspot.com/-eVJeiVODCBI/Ts0P4-z2c6I/AAAAAAAACpo/31BXBfAbyP8/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:7px;
float:left;
}
 
.nivo-controlNav a.active {
background-position:0 -22px;
}
 
.nivo-directionNav a {
display:block;
width:30px;height:30px;
background:url(http://1.bp.blogspot.com/-MKlz8mA0xb4/Ts0P5ZLkoKI/AAAAAAAACp8/_DAgu3iSJWM/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
 
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
 
a.nivo-prevNav {
left:15px;
}
 
.nivo-caption {
text-shadow:none;
}
 
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}

Habrás notado que las dimensiones del slider son 560px de ancho por 280px de alto. Puedes modificar dichas dimensiones a tu gusto, así como otras propiedades que estimes conveniente.

3. Añade el HTML del slider en tu plantilla

Puedes poner el slider en la columna principal, justo antes de los artículos. En las plantillas viejas de Blogger, esto es justo bajo

, y en las nuevas, bajo

Este código con condicionales mostrará el slider sólo en la página principal, con 5 diapositivas. Puedes quitar o añadir más, aunque no es recomendable tener más de 6 porque puede retardar demasiado la carga de tu blog.

Para el código de cada diapositiva, tienes que modificar: (1) el enlace que dirige al post que quieras destacar; (2) el título (title) de dicho post; (3) El enlace directo (URL) a la imagen que quieras poner, que debe ser acorde a las dimensiones del slider (560×280 en este caso).

Consideraciones finales

Esta es la utilización básica de Nivo Slider en Blogger. Puedes hacer todas las modificaciones que quieras, en especial si tienes conocimientos de CSS y HTML.
Puedes cambiar las opciones y efectos como indica su autor: Nivo Slider jQuery Plugin Usage.
Recuerda optimizar para la web las imágenes que uses en tu slider: no deben ser demasiadas (5 a 6 como máximo), ni muy pesadas o de gran tamaño.
Finalmente, aunque las ventajas de Blogger como plataforma gratuita de blogs, son múltiples, hay cosas que siempre deberemos hacer de forma manual. En este caso, la única manera de hacer que tu slider funcione es modificando los códigos de las diapositivas manualmente, de acuerdo a los posts que quieras ir destacando temporalmente.

Posts relacionados

Menú desplegable con jQuery Superfish en Blogger

Claudia — Sun, 30 Oct 2011 04:27:41 +0000

Tiempo atrás les hablaba de un tutorial para crear menús desplegables sólo con CSS. Para algunos funcionó bien, pero para otros no. Por eso, veremos otra alternativa simple de implementar, basada en los menús desplegables de las plantillas de Premium Blogger Templates. Este menú usa el plugin jQuery Superfish, y debiese funcionar bien para todos.

Agregando un menú desplegable a tu plantilla Blogger, paso a paso

1. Carga la última versión de jQuery

Si no tienes jQuery en tu plantilla, puedes cargarlo directamente desde Google, incluyendo la siguiente línea de código en la Edición de HTML de tu plantilla (todos los cambios se harán allí mismo), justo antes de :

3. El CSS

Pega, justo antes de ]]>, los estilos del menú. Podrás notar que no hay ninguna imagen, así que sólo será cosa de cambiar los colores hexadecimales a tu gusto (y quizás una que otra propiedad) una vez que hayas incluido el menú.

/* SUPERFISH MENU */
 
.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;}
.menus ul{position:absolute;top:-999em;100%;}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-secondary-wrap{padding:0;margin:0;position:relative;height:40px;z-index:300;background: #F1F1F1; width: 100%;}
.menu-secondary{height:40px}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#1B1A1A;padding:13px 15px 12px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif; border-right: 1px solid #FFF;}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background: #C3C3C3;outline:0;}
.menu-secondary li li a{color:#fff;background:#969696;padding:10px 15px;text-transform:none;font-weight:normal; border-right: 0;}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#fff;background:#B4B4B4;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:10px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:6px 13px 0 0}

4. El HTML

Copia el siguiente código bajo la cabecera de tu blog, o antes de ésta. Para copiar bajo la cabecera, debes buscar en las plantillas nuevas y poner el códijo justo debajo. En las plantillas más antiguas, deberás poner el código justo antes de



Home
Business

Internet
Market
Stock


Downloads

Dvd
Games
Software

Office





Parent Category

Child Category 1

Sub Child Category 1
Sub Child Category 2
Sub Child Category 3


Child Category 2
Child Category 3
Child Category 4


Featured
Health

Childcare
Doctors


music
politics

Ahora sólo queda modificar los enlaces manualmente, reemplazando los textos ancla y los signos gato (#) por tus links con http://.

Finalmente…

Puedes hacer las modificaciones que quieras en el CSS y el HTML de tu menú. No es muy complicado, y sólo depende de tu creatividad.
Lo bueno de un menú desplegable con jerarquías, es que logra una mayor organización en tu blog. Lo único malo que tiene, es que para que funcione en Blogger todos los cambios los tienes que hacer de forma manual.

Posts relacionados

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

Claudia — Thu, 01 Sep 2011 00:39:31 +0000

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).

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:

Dicho código debe ser incorporado exactamente después de . 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:

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;
}

Posts relacionados

Blogger: Cómo dividir el widget de etiquetas en dos columnas

Claudia — Tue, 10 Nov 2009 06:42:36 +0000

Cuando tienes muchas etiquetas y una barra lateral lo suficientemente ancha, siempre tienes la opción de dividir el widget de etiquetas en dos o más, por una cosa de orden y estética.

Hace un tiempo, Cebong mostraba una forma de crear un widget de etiquetas multicolumnas añadiendo una nueva sección en el footer o la sidebar.

En realidad, es mucho más simple de lo que parece: no es otra cosa que determinar anchos (%) para las listas de esa sección. En otras palabras, puedes hacer lo mismo si ya añadiste un widget de etiquetas a tu sidebar, pero con un código CSS simplificado a ser añadido antes de ]]>:

#Label1 ul li{
float: left;
width: 45%;
}

A considerar:

El ancho (width) va a depender de cuántas columnas quiera incluir, y no siempre es exacto, porque el widget de etiquetas va a heredar el padding de las listas de la sidebar (.sidebar ul li o similar). En este caso, 45% está bien para dos columnas; para 3 columnas, quizá ande bien con 30 ó 33%.
El selector #Label1, puede variar. Por defecto, el widget de etiquetas (si tienes sólo uno), debiera ser Label1; pero, si tienes dos, tendrías un widget de ID Label1, y otro Label2.
Puedes dividir cualquier widget de lista (ejemplo, lista de enlaces) de la misma forma, averiguando su ID.

Posts relacionados

Leer más en Blogger… ¡al fin!

Claudia — Thu, 10 Sep 2009 02:59:45 +0000

Hace tres meses veíamos la inyección de “sospechosos” códigos en las pantillas de Blogger que nos hacían pensar la posibilidad de la inclusión de “leer más” por defecto. Hoy ya es posible, y sin tener que añadir javascript o preocuparse por la velocidad de carga del blog o el hosting del script *.js.

Se activa de dos maneras:

1) Cambiando al nuevo editor de texto enriquecido WYSIWYG, desde Blogger in Draft (Configuración / Básico / Configuración global / Editor actualizado), y seleccionando el ícono “Insertar salto de línea” del editor.

2) Manualmente, y sin necesidad de ir a Blogger in Draft ni cambiar al editor actualizado:

Texto a mostrar texto a ocultar

Adicionalmente, puedes cambiar el texto del enlace (por defecto “Más información”) en en elemento de Entradas del blog, desde la Edición de elementos.

Incorporando en plantillas antiguas

Si tienes una plantilla creada antes de junio, y no logras que se corten las entradas, lo más probable es que a tu plantilla le haga falta la siguiente pieza de código:

Añádela entre el cuerpo y el pie de las entradas (post-footer), como en la siguiente imagen:

Un poco de CSS para estilizar el enlace

Con CSS, puedes adornar en enlace “leer más” o agregar un botón. Por ejemplo:

.jump-link {
background: #FF0084;
padding: 1px 5px;
border: 1px solid #FF0000;
width: 70px;
}

.jump-link a {
color: #FFF;
text-decoration: none;
font-weight: bold;
}

.jump-link:hover {
background: #FF0050;
border: 1px solid #FF0000;
}

.jump-link a:hover{
}

Si quieres que el botón quede flotando a la derecha, puedes hacerlo con la propiedad “float:right”:

.jump-link {
float: right;
}

Y limpiando la flotación con HTML, pegando bajo el código que hace posible el corte de las entradas:

Finalmente, si seguiste algún tutorial para poner excerpts en Blogger y prefieres incluir el “leer más” de esta forma, es cosa de retroceder los pasos uno a uno y añadir el código correspondiente al jump-link.

Más en: Blogger Buzz | Vía: Vagabundia

Posts relacionados

Cómo crear dos columnas de posts en Blogger

Claudia — Sat, 22 Aug 2009 06:33:24 +0000

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.

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:

]]>

Justo debajo, añade:

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.

Posts relacionados

Blogger: el primer post con un estilo diferente II

Claudia — Mon, 06 Jul 2009 16:20:05 +0000

Guti me pedía que explicara un poco más acerca de cómo mostrar el primer post con un estilo distinto en Blogger (viene de acá), utilizando el nuevo código condicional que aparece en las plantillas.

En general, es posible hacer modificaciones básicas añadiendo estilos condicionales bajo el cierre de “b:skin“, y justo antes del cierre de la etiqueta “head“, de la siguiente manera:

Lo anterior va a definir estilos para el primer post, que son distintos a los de los posts individuales. En el ejemplo, puse un color distinto para el cuerpo de los posts (post-body). No obstante, añadir condicionales para el primer post es algo más complejo que eso. No recomiendo su uso para quienes no están familiarizados con la estructura de las plantillas de Blogger, porque podrían sufrir un gran dolor de cabeza.

Hace unos días, Ro Zanchetta escribió una entrada de cómo usar la nueva etiqueta “isFirstPost” en Blogger, con un ejemplo concreto para plantillas tipo revista, utilizando un hack para “leer más”. Para quienes son arriesgados y quieren “lanzarse directamente a los leones”, el post de Ro es una lectura obligada. Por mi parte, voy a explicar el mecanismo para usar condicionales para el primer post, de acuerdo a mis propios experimentos.

Ahora bien: Al expandir los artilugios de las plantillas, es posible encontrar la siguiente código:


Código-post

Lo que llamé Código-post son muchas líneas de código, las cuales en una plantilla muestran: el título de un post, el cuerpo del post, y el footer del post, donde aparecen los meta-datos: autor del post, hora, comentarios, etiquetas y otros.

Entonces, el procedimiento a seguir es el siguiente: copiar el código de los posts (debe mostrarse dos veces en total) utilizando distintos condicionales, de la siguiente manera:


Código-post con clases distintas para el primer post

Código-post

El “Código-post” es el código completo, íntegro, sin cambios. Sin embargo, el “Código-post con clases distintas para el primer post” debe tener algunos cambios. Por ejemplo:

En vez de “div class=’post-entry‘”, voy a usar “div class=’post-entry-first‘”
En vez de “div class=’post-body entry-content‘”, voy a usar “div class=’post-body-first’“

Y así sucesivamente, definiendo mis propios selectores para esa sección. Preferí usar selectores similares a los de la plantilla Mínima, agregando “-first” a cada uno, para que sean más fáciles de recordar.

Hecho este procedimiento, sólo queda definir las propiedades para cada selector antes del cierre de “b:skin”, como en la siguiente imagen (sólo es un ejemplo, porque puedes hacer mucho más):

Voilá! Eso es todo. Probablemente, la etiqueta “isFirstPost” dé para una nueva entrada de este tipo, sobre cómo añadir hacks. A mí, por ejemplo, me gustaría poner un hack “leer más” automático en el primer post, y un hack “leer más” no-automático para los siguientes. Es cosa de seguir experimentando…

Posts relacionados

Comparte tus URLs cortas al estilo Techcrunch

Claudia — Tue, 30 Jun 2009 05:02:37 +0000

Hace algún tiempo, Techcrunch comenzó a usar su propio acortador de direcciones, con un dominio distinto al principal. Tener un acortador de URLs propio no es cosa difícil, especialmente si usas WordPress e instalas un plugin como Link Shortcut. Pero lo que me llamó la atención, fue la cajita que utiliza Techcrunch para compartir sus URLs cortas, las cuales se generan automáticamente para cada post.

Pienso que mostrar tus enlaces permanentes ayuda a que se difundan tus posts, especialmente si muestras URLs cortas para compartir en Twitter o Facebook. Una URL corta debería significar mayor difusión, porque les ahorra a tus visitantes el tener que ir a Bit.ly (u otro acortador), si es que no usan alguna extensión para Firefox o algún bookmarklet que les permita hacer esto con un click.

Aquí comparto la forma que encontré para mostrar tus URLs cortas al estilo Techcrunch y facilitar que compartan tus enlaces. Probablemente exista una manera distinta, más simple y hasta mejor de hacerlo, pero quise mostrar una vía “casera” que sí funciona (pueden ver el resultado de mi “experimento” al final de este post).

Un poco de javascript

Partiendo por lo general, lo primero fue buscar la manera de seleccionar todo el texto (la URL, en este caso) al hacer click con el mouse. Algo básico, pero necesario. De esta forma, utilicé un script que produce este efecto, y que puedes encontrar en Javascript Array o en Wallpaperama. Cualquiera de las dos versiones me va a permitir mostrar las cajitas para mis URLs, cambiando el valor (value) del input.

Buscando el plugin idóneo

En WordPress, hay varios plugins para generar URLs cortas, pero me decidí por “La Petite URL“, que hace este prodecimiento por sí mismo, instantáneamente.

Este plugin tiene opciones de configuración básicas: eliges el largo de tus URLs y el tipo de caracteres que quieres usar (letras minúsculas, mayúsculas y/o números). Luego de su instalación y configuración, sólo queda encontrar la función que me permita mostrar una URL corta para cada post, en el archivo single.php. La función que utilicé fue la siguiente:

Dicha función muestra sólo los caracteres aleatorios de mi URL (ejemplo, “abcde”), por lo que antes tengo que añadir la dirección de mi blog (http://chicablogger.com/). Por lo tanto, procedí así:

1. Copié el siguiente código (el script) antes del cierre de la etiqueta “body“:

2. Puse este código en mi single.php, antes de los comentarios:

Ahora, para mostrar la URL completa (en vez de la versión acortada), el código deberá ser como el anterior, pero cambiando el valor (value) por este:

A considerar: El plugin funciona sólo para posts nuevos. Si quieres que genere URLs cortas para tus posts antiguos, deberás volver a guardarlos.

Una alternativa simple para Blogger

1. Pega antes del cierre de la etiqueta “body“.

2. Busca el siguiente código:

Y pega debajo:


<data:post.url/>

El código anterior no genera URLs cortas, pero sí muestra tus URLs para trackbacks.