Chica Blogger

Movie Show Blogger Template

Claudia — Sat, 28 Jan 2012 06:54:52 +0000

Movie Show es una adaptación para Blogger de un diseño que hice para WordPress. Es ideal para blogs de películas.

DEMO | DESCARGA Movie Show (70)

Características de la plantilla:

Tres columnas
Nivo slider incorporado
Script para resúmenes automáticos con miniatura de imagen
Comentarios de autor destacados
Compatible con las últimas versiones de IE, Chrome y Firefox
Incluye logo PSD y favicon

Instructions – Instrucciones

1. Setting up the slideshow
Configurando el slider

Go to Design/Edit HTML and find the following code:
Ve a Diseño/Edición de HTML y encuentra el siguiente código:

You may replace all image links by yours and set up your post descriptions and links.
Puedes reemplazar los enlaces por tus propias imágenes y configurar las descripciones de tus posts y links.

Posts relacionados

Angry Birds Blogger Template

Claudia — Fri, 27 Jan 2012 05:55:05 +0000

“Angry Birds” es una plantilla basada en el popular juego de Rovio del mismo nombre; diseñada originalmente para WordPress y ahora disponible para Blogger. La plantilla es gratuita para uso personal, siempre y cuando se respeten los créditos.

DEMO | DESCARGA Angry Birds Blogger (248)

Características de la plantilla:

Dos columnas
Nivo slider incorporado
Columnas inferiores (bottombar)
Script para resúmenes automáticos con miniatura de imagen
Comentarios de autor destacados
Compatible con las últimas versiones de IE, Chrome y Firefox
Incluye logo PSD y favicon

Instructions – Instrucciones

1. Setting up the slideshow
Configurando el slider

Go to Design/Edit HTML and find the following code:
Ve a Diseño/Edición de HTML y encuentra el siguiente código:

You may replace all image links by yours and set up your post descriptions and links.
Puedes reemplazar los enlaces por tus propias imágenes y configurar las descripciones de tus posts y links.

2. Setting up the social media icons.
Configurando los botones social media.

Go to Design/Edit HTML, click on “Expand widget templates” and find the following code:
Ve a Diseño/Edición de HTML, click en “expandir plantillas de artilugios y encuentra el siguiente código:

Blog Subscription

 
      
 
        

        Follow me
        You can follow my updates on Twitter
 
      
 
      
 
        

        Posts RSS
        Read my full posts on your favorite feed reader
      

 
        

        Facebook
        Become a fan of our blog on Facebook

Puedes modificar los textos a tu antojo. Para cambiar los textos del buscador, utiliza CTRL+F para encontrar en tu plantilla las palabras que desees modificar.

Posts relacionados

30+ sitios adonde enviar tus plantillas Blogger

Claudia — Tue, 24 Jan 2012 07:22:22 +0000

Además de comprar (o intercambiar) enlaces de texto o espacios publicitarios, comprar enlaces en temas de WordPress, Joomla u Blogger que se distribuyen gratuitamente es una buena inversión para conseguir enlaces entrantes para nuestro blog y rankear mejor. A la hora del linkbuilding, todo es válido; pero a veces no es necesario gastar dinero si aprovechas tus habilidades y creatividad.

Si buscas mejorar tu pagerank y obtener más visitas para tu blog y eres bueno diseñando plantillas exclusivas para Blogger (o haciendo adaptaciones CSS de temas diseñados para otras plataformas) o tienes alguna que quieras compartir con todo el mundo, te dejo un listado de más de 30 directorios para enviar tus templates.

http://www.allblogtools.com/
http://www.bestbloggertemplates.net/
http://besttheme.net/
http://www.bietemplates.com/
http://www.bloggertemplatesblog.com/
http://bloggertemplateshub.com/
http://www.bloggertipz.com/
http://www.bloggertricksandtoolz.com/
http://www.blogspottemplate.net/
http://blogtemplate4u.com/
http://www.blog-zone.info
http://borneotemplates.com/
http://btemplates.com
http://www.btemplates4u.com/
http://www.btheme.info/
http://csstemplates.net/
http://www.coolbthemes.com/
http://www.denidi.net/
http://www.dhetemplate.com
http://javatemplates.com
http://www.mybloggerthemes.com/
http://www.mytemplatez.com/
http://www.newbthemes.com
http://www.premiumbloggertemplates.com/
http://www.premiumbtemplates.com/
http://www.probloggertemplate.com
http://www.raytemplates.com/
http://www.templatebloggers.com
http://www.templategator.net/
http://www.templates-blogger.com/
http://freethemes4all.com/
http://thetemplatebank.com/
http://www.zoomtemplate.com/

Algunas recomendaciones prácticas:

Procura que tu template se vea limpio, y tenga una mínima calidad para que sea aceptado en los distintos directorios. Plantillas más bonitas, que sirven para múltiples nichos y con más características suelen tener más descargas.
Incluye instrucciones precisas.
Busca algún servicio de hosting seguro para subir tus plantillas, si no dispones de hosting propio. Por ejemplo, Box.net.
Incluye los scripts en la misma plantilla (si usa), y hospeda las imágenes en Blogger o álbumes web de Picasa (no photobucket ni imageshack, porque el ancho de banda es limitado).
No olvides incluir un enlace a tu sitio en el footer, indicando la licencia de la plantilla.

Posts relacionados

Blogger habilita los comentarios anidados

Claudia — Thu, 12 Jan 2012 21:08:20 +0000

Los usuarios de Blogger tienen cada vez menos que envidiarle a WordPress, al menos en su versión gratuita. Hace algunas horas, en Blogger Buzz se dio a conocer la nueva característica incorporada a la popular plataforma de blogs: los comentarios anidados.

Esta nueva mejora el sistema de comentarios de Blogger funciona automáticamente en nuevas plantillas y sin necesidad de entrar en Blogger in Draft, siempre y cuando el usuario, en su Panel de Control, haya elegido las siguientes opciones:

En Configuración/Otros/Permitir feed del blog: Completo
En Configuración/Entradas y comentarios/Ubicación de los comentarios: Debajo de la entrada

Lo positivo de los comentarios anidados, es que al incluir el botón “Responder”, facilitan la interacción entre los visitantes, permitiendo identificar claramente cuándo hacen comentarios generales o cuándo están respondiendo a alguien en particular. No obstante, los comentarios anidados funcionarán sólo en las nuevas plantillas Blogger lanzadas en año pasado y en instalaciones recientes de las plantillas de diseño de 2006.

Quienes hayan instalado plantillas diseñadas por terceras partes o hecho modificaciones en el código, deberán “Restablecer plantillas de artilugios a los valores predeterminados“, en la Edición de HTML del blog y previo respaldo de la plantilla por si algo no llegara a funcionar bien.

Vía | Way2Blogging, Google Operating System

Posts relacionados

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

Photophin: Fotos gratuitas con licencia Creative Commons para bloggers

Claudia — Sat, 07 Jan 2012 03:27:46 +0000

A menudo los bloggers necesitamos imágenes de calidad para complementar nuestros posts. ¿Cómo encontrarlas sin violar las licencias? ¿qué servicio usar?

A la larga, el mejor banco fotográfico termina siendo Flickr. Lo que no me gusta de Flickr, es que resulta un lío buscar fotos cuyas licencias nos permitan usarlas libremente y, más aún, dar con la imagen adecuada que ilustre apropiadamente eso de lo cual hablamos.

Photopin, buscador de imágenes con Creative Commons, nos facilita enormemente el trabajo. Utilizando principalmente el motor de búsqueda de imágenes de Flickr, nos ofrece fotos de gran calidad relacionadas con nuestros términos de búsqueda, las cuales podemos descargar en distintos tamaños (y sin necesidad de registro) para evitar tener que redimensionarlas posteriormente.

Al tratarse de fotos con licencia Creative Commons, no debemos olvidar incluir el respectivo link en nuestras entradas si queremos usarlas gratuitamente con fines personales o comerciales. En ese sentido, el sitio también nos facilita el trabajo al entregarnos el respectivo código HTML para copiar y pegar.

Enlace: PhotoPin | Vía: Pc Digital

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

Coloca un botón compartir de Facebook en tus entradas de Blogger

Enrique — Mon, 02 Jan 2012 19:13:49 +0000

Seguro que has visto en algunas entradas de blogs de noticias u otros tipos, que en la esquina del blog está el botón de Facebook que dice “Compartir“. ¿Lo quieres poner en tu blog? Pues este es el lugar correcto para aprender. Veamos este blog de prueba. ¿Puedes ver el enlace compartir? Veamos como se hace.

Hay 3 estilos para este botón.

Primer estilo

El primero es “button”, este botón sólo presenta la imagen compartir sin contar cuantas veces se ha compartido la entrada. Para colocarlo vamos al editor HTML de blogger a expandir artilugios y buscamos:

[Podemos buscar mas fácil poniendo presionando Ctrl + F]

Y Justo debajo de eso ponemos:



Compartir

Y Guardamos.

Segundo estilo

Ahora para poner el estilo numero 2 este es el mismo botón compartir pero presenta cuántas veces ha sido compartido. Buscamos:

Y Justo debajo ponemos:



Compartir

Tercer estilo

O, para el tercer estilo en vez de poner el código de arriba ponemos éste:



Compartir

Este presentará la caja de las veces que se ha compartido más grande.

Espero que esto les haya servido, deje un comentario para saber como le ha ido.

Posts relacionados

Christmas Vector: Vectores navideños gratuitos

Claudia — Wed, 14 Dec 2011 18:41:42 +0000

Hay un sitio que encontré el año pasado, y que les puede ser de utilidad. Se llama “Christmas Vector“, y está dedicado únicamente a la recopilación de vectores navideños. Allí puedes encontrar más de 160 imágenes vectoriales que puedes descargar gratuitamente y usar en tus proyectos.

Enlace: ChristmasVector

¿Qué tal unas lindas tarjetas de navidad con esos vectores? Puedes combinar distintos materiales (fotos, papeles, cintas, etc.) para obtener resultados originales. En Etsy hay mucho material para que te inspires.