29 septiembre 2011

La Mala Suerte en Facebook

Y no me refiero precisamente a una mala racha en esa red social, no, sino a la campaña publicitaria muy bien pensada que no hace mucho lanzó la compañía de seguros Allstate en los Estados Unidos, y en donde es muy claro su propósito de dar directo a las emociones del consumidor.

Seguramente varios al ver el comercial corrieron a ponerle aseguranza a su carro, ¿fuiste tu uno de ellos?

Ahora puedes ver a la mala suerte haciendo de las suyas, claro, aquí si es opcional que lo veas ;)



Ha sido tanto el éxito que, existe un club de fans de la mala suerte en Facebook, y hasta ahora ya cuenta con 63,655 fans, el doble de fans que tiene en sí AllState, un número nada mal para tratarse de la mala suerte ¿no lo crees?, tal parece que la mala suerte tiene buena suerte en Facebook.




27 septiembre 2011

7 Nuevas Plantillas para tu blog: Las nuevas Vistas Dinámicas de Blogger ya están Disponibles

Hace apenas unas horas Blogger a incorporado 7 nuevas plantillas llamadas vistas dinámicas, que ya habían anunciado antes, y que estaban en periodo de prueba.




Si ingresas a Blogger Buzz en español o Blogger Buzz en inglés puedes verlas en acción, ya que desde hoy ambos blogs las usan, además, en las siguientes semanas o meses otros blogs como "Gmail Blog", "LatLong Blog" y "Docs Blog", también usarán las vistas dinámicas, según nos dicen.

Las características de las vistas dinámicas 

Estas nuevas plantillas permiten explorar el contenido de manera dinámica e interactiva, y tienen muchos efectos creados con lo último en tecnología web, como CSS3, HTML5, y Ajax, por lo que solo funcionan en navegadores modernos (no en Internet Exporer 7), también anunciado antes.

Al usarlas, no podrás ingresar a la Edición de HTML de la plantilla, (no se si esto sea definitivo) pero si podrás agregar CSS personalizado desde añadir CSS, así como también puedes cambiar el fondo desde el Diseñador de Plantillas para que se vea más personalizado.


Cómo usarlas

Para probarlas, solo necesitas ir a Plantilla en el Nuevo diseñador de Plantillas y seleccionar la vista predeterminada que tendrá tu blog, luego, el usuario de tu blog podrá elegir entre el resto de las otras plantillas, para que pueda ver el contenido como más le agrade.

vistas dinámicas de Blogger

También, puedes elegirlas desde el Diseñador de plantillas tanto en la nueva interfaz, como en la anterior.

Puedes  enviar todos sus comentarios sobre estas nuevas plantillas a Blogger, a través de la encuesta que han hecho.


Opinión personal

Blogger me ha sorprendido con estas nuevas plantillas, ya que son muy novedosas tomando en cuenta lo que otras plataformas gratuitas ofrecen, son interactivas, ya que le dan al usuario cierto control al poder elegir como ver el contenido del blog.

Definitivamente habrá blogs a los que le vaya muy bien esa apariencia o presentación, y estén muy animados a usarlas, como los blogs de fotografía.

Probablemente otros verán esto con la apariencia no de un blog, sino muy similar a la interfaz de un programa, XD ¿o exagero?

Otro asunto que habrá que tener en cuenta es la compatibilidad con los navegadores, sobre todo en países donde los usuarios todavía usan navegadores antiguos como Internet Explorer 7.

Y ¿a ti te gustan las vistas dinamicas?

P.D. Si te animas a usarlas, no dudes en decírnoslo para ir a ver que tal luce tu blog :).

ACTUALIZACIÓN: Si te preocupa la compatibilidad de las vistas Dinámicas con Navegadores antiguos como IE7 (Internet Explorer 7), debo decirte que no todo está perdido, si usas las vistas dinámicas y alguien te visita usando IE7, u otra versión antigua de cualquier otro navegador que no las soporte, aparecerá este mensaje, en donde viene un enlace para que el usuario pueda ver tu blog, y este se muestra con la plantilla sencillo.

Vistas Dinamicas Blogger

Twitter permite gestionar tu seguridad: HTTPS

El otro día platicaba con una amiga y expresábamos nuestra preocupación en lo que a seguridad se refiere al navegar en la red. Hablábamos como los hackers cada vez son mas hábiles para infiltrarse en nuestros sistemas y apropiarse de información valiosa como información de cuentas bancarias, nuestras contraseñas y otros datos personales; espero que nunca hayas tenido una experiencia de ese tipo.

Me comentaba que no sabía que Twitter permite configurar desde tu cuenta, la opción para que te conectes siempre a través del protocolo HTTPS, y de esa forma, facilitar la navegación segura. Tal vez si eres usuario nuevo de Twitter, o no estabas enterado, sería bueno que lo tomaras en cuenta.

twitter mas seguro


De hecho,  hace tiempo que Twitter permite ingresar a la cuenta de manera más segura, para ello, deberías de ingresar de este modo:

https://twitter.com

y no así:

http://twitter.com

Si te fijas, la http cambia a https.

Si nunca has escuchado hablar sobre protocolo HTTPS, esta, es es la versión segura del protocolo HTTP,  donde se pueden transferir datos de una forma más segura en la web (valga la redundancia).

Generalmente se utiliza en Bancos, servicios como Paypal, y algunas redes sociales como Facebook, incluso Gmail lo usa, por lo que puedes estar más tranquila (o) por la seguridad de los datos que puedes manejar en tu cuenta.

https gmail


Para identificar que usas ese protocolo, en las páginas que visitas (siempre y cuando cuenten con esa certificación), debes observar la barra de tu navegador, y ahí ver que aparezca el protocolo HTTPS, en la dirección de la página, y que de manera característica aparece de color verde, al lado del icono de candado (esto último varía según el navegador):

twitter mas seguro


Aunque Twitter ya permitía navegar de manera segura si accedias desde https://twitter.com, como te lo mencionaba antes, recientemente permite elegir la conexión HTTPS de forma predeterminada desde tu cuenta.

Para elegir esa opción, basta con ir configuración:

twitter https

...y luego en las opciones que presenta, marcar la casilla de Usar siempre HTTPS, que aparece como ultima opción.

twitter https


Guardas los cambios y listo, ya no será necesario que escribas https://twitter.com en la barra de tu navegador cada vez que ingreses a Twitter.

Referencias:
David Diaz de la Cruz
Desde el blog de twitter: Twitter más seguro:https

22 septiembre 2011

El lightbox de Blogger anulado temporalmente

Según anuncia Brett, empleado de Google, en un comentario publicado en el Foro de Ayuda de Blogger, decidieron anular el lightbox temporalmente, mismo que fue recientemente implementado y anunciado oficialmente hace solo dos días, esto, después de discutirse todas las preocupaciones expuestas por distintos usuarios de Blogger, y según explican, será mejorado y luego relanzado lo cual anunciarán debidamente en su blog.

Así que ahora tendremos que esperar, a que dichos mejoramientos sean implementados, y ver si ahora se habilita para que pueda ser usado a elección del usuario.

Seguramente esto quedará como un precedente, para que Blogger la piense dos veces antes de implementar cualquier característica, sin que pase primero por un periodo de prueba en Blogger in Draft (como normalmente hacen)  o bien, que pase sin ser optativo.

Así están las cosas, ¿qué tal?.

Gracias Jazz Andre por pasar el dato de esta nueva resolución ;).

Increíble Generador de Patterns en Base64

Patterniffy, es otro de esos sitios cool, me quedo corta, está "súper", ahí, puedes dibujar tu propio pattern con estilos tipo pixelado que están muy de moda, lineales, entre otros estilos, retocando pixel por pixel, dentro de los 10 x10 pixeles de espacio que dispone, y luego te generará el código del pattern para que puedas usarlo inmediatamente donde quieras.

Olvídate de usar la imagen para este tipo de patterns, sólo necesitarás copiar el código que te genera, ponerlo donde necesites y listo. También te generá una URL única para que puedas compartir el pattern que hayas creado.




¿Cómo usar el código de la imagen generado?

Simplemente lo copias y lo pones en la parte donde debería ir la URL de la imagen, por ejemplo:
.mi_clase{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAJXLl35zwjjgzg6ejqMYAEYB8RmROaABAD+MQ9+5Els9gAAAABJRU5ErkJggg==) repeat;}


...y listo.


Tienes que probarlo ;)

*Actualizado.

20 septiembre 2011

Blogger anuncia oficialmente nueva función en las imágenes del blog

Anteriormente les había comentado que blogger había implementado de manera sorpresiva un sistema para ver las imágenes en tamaño completo al hacer click sobre estas (tipo ventana modal), y además se podían ver las imágenes miniatura al fondo de la ventana, como si se tratara de una galería.

El día de ayer, finalmente se dió a conocer la noticia en su blog, y fue titulada como:

Tus imágenes nunca se vieron mejor
"Your images never looked so good"

Algunos estarán de acuerdo con esto, algunos otros no. Personalmente, como lo he dicho desde un principio, me gusta esta nueva característica, pienso que es mejor que salirse de la página donde te encuentras cuando se hace click sobre la imagen, crea una impresión de modernidad y es más interactivo.

Otra ventaja del lightbox que blogger a agregado, es que te ahorras mucho tiempo, y en muchos casos, dolores de cabeza para implementar algo como esto, sin embargo, después de oír las quejas de varios usuarios diciendo que esto les traía problemas, o simplemente no les gustaba,  pienso que esto pudo haberse tomado en cuenta por el equipo de Blogger para mejorar esta función, y facilitarlo para que cada uno decidiera si lo agrega o no.

Definitivamente en algunos blogs esto sea la mejor opción (me incluyo) pero hay que pensar también en la otra parte de personas que no les gusta esto, por ello, sería mejor que se pudiera decidir si lo usas o no, como lo haces con una plantilla.

Si eres de los que prefieren que las imágenes se vean como antes, o bien tienes instalado otro visor de imágenes o ventana modal, y esto te afecta, entonces, puedes optar por eliminarlo, y en las páginas de Vagabundia y Lo sé así,  facilitan un script para esto.


Limitaciones
Por otro lado, si eres de los que está feliz, y brincando de alegría con la nueva característica, debes saber que si la imagen tiene un enlace para que te lleve a otro sitio web o página, o la subes desde otro editor como Windows Live Writter,  desde Flickr, etc, la imagen no se verá en el visor, y esto lo puedes comprobar a continuación:

Imagen que se sube desde el editor de Blogger, sin editar nada



Si la imagen la subes desde el editor de Blogger, pero eliminas el enlace, también la verás...





Si subes la imagen desde Windows Live Writter no funcionará

pastel-con-girasoles


Tampoco si la Imagen tiene un enlace a otra página 





Entonces, ¿te gusta o no te gusta?.


Enlaces Relacionados
Anunciado Oficialmente el Nuevo lightbox para Blogger...

ACTUALIZACION, sept/22/11: Esta característica ha sido anulada temporalmente.

19 septiembre 2011

Todo sobre las Páginas Estáticas de Blogger Incluyendo Nueva Característica

Atención. En Febrero 27 del 2014, Blogger hizo cambios importantes en la sección de configuración de páginas estáticas, por lo que te recominedo echarle un vistazo a esta entrada que explica con detalle esos cambios.

Anteriormente ya había publicado sobre las páginas estáticas de Blogger pero pensando en que hay nuevas características desde que tenemos la nueva interfaz, pensé que sería bueno retomar el tema y de paso explorar las nuevas características provistas en esta interfaz, en lo que a las paginas estáticas se refiere.

¿Qué son las páginas estáticas de Blogger?

Las páginas estáticas son páginas independientes de tu blog, que al publicarlas, no aparecen como una entrada nueva, y para que puedas verlas, necesitas tener un enlace a éstas.

Los enlaces de las páginas estáticas aparecen en el gadget de páginas estáticas, que puedes agregar a tu blog fácilmente, con la opción de "Añadir gadget", yendo a la pestaña "Diseño" del panel de Blogger.

¿Cómo crear páginas estáticas?

Si ya usas la nueva interfaz de Blogger seguirás estos pasos:

Paso 1: Desde Inicio (donde aparece la lista de tus Blogs), selecciona la opción Páginas del menú desplegable:
Paginas estaticas de blogger

...o bien, desde inicio (donde aparece la lista de tus blogs) haz click en el nombre de tu blog, y selecciona Páginas desde la columna lateral izquierda:

Paginas estaticas de blogger

Paso 2: Hecho ésto, despliega las opciones de Página Nueva, y elige la opción de Página en blanco:

Paginas estaticas de blogger



Paso 3: Luego aparecerá en el editor, en el que podras agregar la informacion que quieres que aparezca en la pagina y darle el formato deseado usando las herramientas disponibles en el panel, al igual que lo haces con tus entradas. Una vez que termines de agregar tu contenido, la publicas, haciendo click en Publicar.


editor de paginas estaticas de Blogger

¿Dónde aparecen los enlaces de las páginas estáticas?

Los enlaces de las páginas estáticas tienes que agregarlos por medio del widget de las Páginas que ofrece Blogger, y para ello, desde Inicio, despliega las opciones del menú y selecciona la opción Diseño:

Paginas estaticas de blogger


O bien, desde el Inicio, haz click en nombre de tu blog , y selecciona Diseño, en la columna lateral izquierda:

Paginas estaticas de blogger

Estando en Diseno, haz click en "Agregar gadget", luego añade el widget de Páginas


Finalmente, guardas los cambios en Guardar disposición.

Nota: Si es la primera vez que publicas páginas, al empezar verás  las opciónes para que decidas donde ponerlas dentro de tu plantilla. 

Como puedes ver, en esta Nueva interfaz, existen dos maneras de acceder a todas las opciones disponibles.


¿Cuál es la ventaja de usar las páginas estáticas?

Como las páginas estáticas no se publican al igual que tus entradas, son muy útiles para crear páginas como:
  • Acerca de ti o sobre tu blog 
  • Una página de "contacto" con un formulario o información de contacto
  • Página con "Productos" (si por ejemplo vendieras algo en tu blog)
  • Una página sobre la "política de privacidad de tu blog" 
  • Una página sobre los "términos de uso de tu contenido"
...entre otras, en donde lo que se pretende, es que no aparezca como una publicación o entrada, siguiendo un orden cronológico.


¿Puedo agregar otros enlaces a las páginas estáticas?nuevo

Desde un principio podíamos agregar otros enlaces a las páginas estáticas yendo a la edición de HTML de la plantilla y agregando ahí el enlace.

Ahora, con la nueva interfaz, es más sencillo, ya que sólo tienes que ir a Páginas, y seleccionar la opción Dirección web:



Luego, en el campo, simplemente pegas el enlace y escribes el texto de dicho enlace:




Guardas esto en Guardar, y guardas los cambios en Guardar disposición.

¿Puedo tener dos widgets de páginas estáticas en mi plantilla?

Si, esto puede se útil, para repartir los enlaces de las páginas que hayas creado en tu plantilla; hace tiempo Blogger permitía agregar este widget más de una vez, según me consta, luego, lo cambió, y actualmente sólo lo puedes agregar una vez, si lo haces desde Diseño, y  añades el gatget. 

Para ageragar un segundo widget, necesitas ingresar a la edición de HTML de la plantilla y colocar el código del widget marcado de rojo, en una sección, cambiando el número del widget de 1 a 2.

Por ejemplo,

Arriba de la columna principal: 

 <b:section class='main' id='main' showaddelement='no'>
<b:widget id='PageList2' locked='false' title='Páginas' type='PageList'/>
...

...o agregarlo en sección nueva que hagas para ese propósito.

¿Cómo edito las páginas?

Puedes editar el contenido de las páginas o configurar la lista de páginas.

Para configurar la lista de páginas, ingresas a tu cuenta, vas a tu blog, y editas el widget desde la página principal, haciendo click en el icono de herramienta.

Luego, configuras las opciones:

En donde:

1. Puedes seleccionar si los enlaces de las entradas se publican automáticamente en la lista de enlaces del widget.

2. Puedes seleccionar cuales enlaces mostrar y cuales no seleccionando o no la casilla de la página.

3. Puedes cambiar el orden de las páginas arrastrándo los bloques de cada una.

Para editar el contenido de las páginas, vas a Páginas (de cualquiera de las dos formas mencionadas arriba),


...y haces click en "Editar" en el bloque que correponde a la página, luego editas el contenido y haces click en Actualizar.

También en Páginas, puedes:
  • Cambiar el orden de las páginas, arrastrando los bloques de cada página.
  • Cambiar a borrador una página que ya hayas publicado, en "Restablecer como borrador
  • Eliminar la página en "Suprimir"
  • Ocultar una o varias páginas arrastrando el bloque hacia "Oculto"

¿Puedo crear un blog que sólo muestre páginas estáticas?

Claro, puede darse el caso en el que se quiera publicar un blog con el propósito de dar a conocer algún negocio pequeño o mediano, y colocar ahí los datos del negocio, así como los servicios que se ofrecen etc.

Por ejemplo supongamos que tienes un negocio de repostería, y quisieras agregar ahí un catálogo, entre otra información  sin que se tenga que estar publicando, pero si actualizando las páginas, con la ventaja de usar el editor.

Esos detalles lo veremos en otra entrada ;)

Referencias:
Acerca de las páginas estáticas

15 septiembre 2011

Ventana Modal en las imágenes de tus entradas sin hacer nada


Esto no es ningún tutorial, aquí ustes no tendrán que hacer nada, simplemente disfrutar (tu y tus usuarios) de las imágenes en las entradas, al ser vistas en una ventana modal, y es que Blogger acaba de habilitar una nueva función, en donde al hacer click sobre la imagen, esta y todas las imágenes que están en la entrada, pueden ser vistas en una ventana modal...

¿Ventana modal?, si, oíste leíste bien, ventana modal en las imágenes, además muestra todas las imágenes miniaturas al fondo; simplemente haz click sobre la imagen y verás lo que pasa...

Me sorprendió bastante, me acabo de dar cuenta por accidente, y la verdad es que en un principio pensé que se trataba de algún software estilo cooliris que se descargo en conjunto con alguna cosa de las muchas que descargo, pero el código fuente dice claramente que viene de Blogger, ¿qué tal!?.

No encuentro nada oficial que hable del asunto, así como tampoco sé si ya todos disponen de esto pero, he probado en varios Blogs y parece ya funcionar, ¿ya funciona esto en tu blog?.

Esto parece no funcionar en imágenes que han sido subidas desde Windows Live Writter, según compruebo, aunque luego veré ese dato.

Me encanta esta nueva característica!, me ha sorprendido Blogger, si que están trabajando mucho para que nosotros trabajemos menos en lo que a diseño se refiere :), solo espero que luego no me vayan a salir con que siempre no y que todo se trataba de un error...


Cómo personalizar los enlaces de navegación de Blogger con botones + 3 sprites gratis

Hoy vamos a ver cómo personalizar los enlaces de navegación de Blogger, me refiero a los enlaces que  que dicen: Entradas Antiguas, Página Principal y Entradas más Recientes, usando botones.

Enlaces de Navegacion de Blogger

Es muy sencillo, ya lo verás, lo vamos a hacer usando un poco de CSS, aunque si necesitarás ir a la edición de HTML de la plantilla, pero no te asustes, que lo que harás ahí es mínimo y muy fácil,  además yo te voy a decir cómo hacerlo ;)

Los botones que les tengo preparados son en 3D, tendrán efecto "push"  es decir, parece que los presionas, y eso lo logramos con el cambio de imagen en en enlace activo (cuando haces click sobre éste) y además crearemos efecto hover (cuando pones el puntero del ratón sobre en botón).

Usaremos sólo una imagen que tendrá los tres botones, en lugar de las 3 que necesitaríamos, claro que si estos botones no se adaptan al diseño de tu plantilla, puedes usar otros.

Puedes verlos en acción en la DEMO, y si esto te cierra el ojo, y quieres probarlo en tu blog, veamos cómo hacerlo:

Cómo poner los botones paso a paso


Paso 1: Elige la imagen que quieras con los botones, bájala a  tu computadora, y luego la subes a Blogger para obtener la URL:

Opción 1
Opción 2
Opción 3
botones sprite
botones
botones sprite

Paso 2: Ve a Diseño  Diseñador de plantillas  Avanzado  Añadir CSS, o si usas la nueva interfaz, ve a Plantilla  Personalizar Avanzado  Añadir CSS, y en el campo pega este código CSS:
a.home-link, a.blog-pager-newer-link, a.blog-pager-older-link { 
display: inline-block;
width: 113px;
height: 35px;
overflow: hidden;
padding: 0;
margin: 0;
font-size: 17px;
color: #494949 !important; /*el color del texto*/
line-height: 190%;
text-align: center;
text-decoration: none;
background: url(URL_de_la Imagen) no-repeat 0 0;
}
a.home-link:hover, a.blog-pager-newer-link:hover, a.blog-pager-older-link:hover {
background-position: 0 -36px;

a.home-link:active, a.blog-pager-newer-link:active, a.blog-pager-older-link:active {
background-position: 0 -71px;
}
Nota: Agrega la URL de la imagen que vas a usar, y recuerda dar enter después de una llave de cierre "}" por ejemplo, para que el código sea interpretado. También puedes cambiar el color del texto marcado de rojo , o agregar sombras usando: text-shadow: 1px 1px 0px #00000; (opcional).

Paso 3: Ve a la edición de HTML de la Plantilla, marcas la casilla de expandir plantilla de artilugios, y con la ayuda de ctrl F, busca esto ( pon en el campo la primera linea de código que puse de azul)...

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>


 ...y cámbialo por esto:
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Siguiente<span style='padding: 0 0 0 3px;'>&#187;</span></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><span style='padding: 0 3px 0 0;'>&#171;</span>Anterior</a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'>Inicio</a>

Si te fijas en ese código, solo estamos cambiando:

<data:newerPageTitle/> por:  Siguiente<span style='padding: 0 0 0 3px;'>&#187;</span>

<data:olderPageTitle/> por:  <span style='padding: 0 3px 0 0;'>&#171;</span>Anterior

...y <data:homeMsg/> por:  Inicio

De ese modo el texto de los enlaces será: Siguiente en lugar de: Entradas más Recientes, Anterior en lugar de: Entradas Antiguas e Inicio en lugar de: Página Principal. Estamos agregando padding, para separar los caracteres del texto "« y »",que agregué en siguiente y anterior respectivamente, si quieres, puedes quitarlos.

Si te resulta más sencillo, puedes sustituir las lineas anteriores para cada enlace en el código.

Paso 4: Checa en vista previa y si todo luce bien guarda los cambios.

Cómo cambiar el orden de los botones (opcional)


Hasta ahí, ya verás los botones, y el enlace de Anterior se muestra a la derecha y el de Siguiente a la izquierda, si quisieras cambiar esto, para que se vea como lo tengo en el DEMO y en la imagen arriba, necesitas buscar esta parte que ya traen algunas plantillas, (aunque no todas sobre todo en las nuevas)...

#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center; 
}

y cámbiarlo por esto:
#blog-pager-newer-link {
float: right;
}
#blog-pager-older-link {
float: left;
}
#blog-pager {
text-align: center;
}
Tip: Si no lo tienes, ya que algunas plantillas nuevas no lo traen, te recomiendo que lo pegues desde el Diseñador de plantillas en añadir CSS, para que no pierdas la opción de editar desde ahí todo el código CSS que has agregado.

De ese modo, el enlace de siguiente se verá a la derecha y el de anterior a la izquierda, personalmente me gusta mas así, pero, tu decides si lo haces o no.

Cómo juntar los botones (opcional)


Si quieres juntar los botones, entonces tenemos que darles margen. Para eso, tomarás en cuenta el botón que tienes a tu derecha para darle margen a la derecha, y mandarlos hacia la izquierda, o si lo quieres hacia la derecha tomarás en cuenta el botón que tienes a la izquierda, o si los quieres todos al centro, tendrás que darle el mismo margen a los botones de Anterior y Siguiente.

Ejemplos:

Caso 1. Supongamos que tienes el enlace de Anterior a la derecha (como aparece por defecto), y quieres mandar todos los botones hacia la izquierda, entonces en: #blog-pager-older-link Agregas:
margin: 0 180px 0 0;
Ajusta el margen cambiando el valor de 180.

Caso 2. Supongamos que tienes el de Siguiente a la derecha (que los invertiste como menciono arriba), y quieres que los botones estén hacia la izquierda, entonces en: #blog-pager-newer-link Agregas:
margin: 0 180px 0 0;
Edita el valor de 180 según tus necesidades.

Caso 3. Si los quieres juntar pero que todos los botones estén al centro, y pensando que el botón de Siguiente está a la izquierda (como aparece por defecto) entonces en: #blog-pager-newer-link Agregas:
margin: 0 0 0 90px; /*margen a la izquierda*/
...y en: #blog-pager-older-link Agregas:
margin: 0 90px 0 0; /*margen a la derecha*/
Edita los valores marcados de rojo, según tu necesidad. Recuerda que el margen se lee: arriba, derecha, abajo, izquierda, y listo, ya tienes botones en los enlaces de navegación con efecto de push!!.


Crédito por los botones: Weboxeur

13 septiembre 2011

150+ texturas de papel de alta calidad

12 septiembre 2011

Como poner una cajita flotante con botones de: Me gusta de Facebook, twitter y Google +1

boton de facebook twitter y google flotantes
Antes habíamos visto la forma de agregar botones para compartir las entradas usando una sola imagen. Hoy vamos a ver otra forma de facilitarle a tus usuarios compartir las entradas o artículos de tu blog, usando botones de: Me gusta de Facebook, Twitter y Google +1, dentro de una cajita flotante

Yo no sé quien fue el primero al que se le ocurrió ésto, (meterlos en una caja flotante) pero es muy popular, y páginas como Mashable, Naldz Graphics, por mencionar algunas,  lo usan.

¿Qué vamos a hacer?

Para conseguir que los botones se mantengan fijos o floten, y tengan la apariencia que queramos, lo que hacemos, es declarar algunas reglas de estilo en el CSS para la cajita que los contiene, y posicionamos los botones dentro de la cajita por medio del margen, con la clase que creamos para poder mover los botones.

Por tu parte, puedes personalizar el color de la cajita contenedora a tu gusto, el borde, y el mensaje arriba de los botones;).

¿Cómo poner la cajita con los botones?

Paso 1. Ve al Diseñador de plantillas  Avanzado  Añadir CSS y en el campo a la derecha, pega este código:
#caja-botones{
width: 90px; /*el ancho de la caja*/
height: 240px; /*el alto de la caja*/
position: fixed; /*para que la caja se mantenga fija*/
top: 200px; /*movemos la caja de arriba*/
left: auto;
margin: 80px 0 0 -120px; /*los margenes que puedes editar*/
background-color: #ffffff; /* el color de fondo de la barra*/
border: 1px solid #cccccc; /*el color del borde*/
}
#caja-botones p {
margin: 4px 0;
padding: 0;
text-align: center;
font-size: 12px;
color: #0d72fb; /*el color del texto*/
font-weight: normal;
letter-spacing: 0em; 
}
.b-entradas {
margin: 6px 0 7px 9px;
padding: 0;
}
.b-google {
margin: -2px 0 0 16px;
padding: 0;
}
Importante: 
Con el margen negativo, arriba marcado con rojo (-120px) hacemos que la caja siempre se mantenga en la misma posición, sin importar la resolución de pantalla del usuario, ya que de no ser así, en resoluciones de pantalla pequeñas, la caja se va a ir encima del contenido, o en resoluciones muy grandes, se va a ir hasta el extremo. Esto no sería necesario si por ejemplo usáramos un diseño fluido y declaráramos en porcentajes los márgenes o superpusiéramos el contenido sobre la caja, pero ese es otro rollo.
Esto quiere decir que resoluciones de 1024 pixeles o menos, no verán la caja con los botones, a menos que se use un ancho del blog completo menor de 800 pixeles.

Paso 2: Ve a la edición de HTML de la plantilla, marca la casilla de expandir plantillas de artilugios, y con la ayuda de Ctrl F busca: <data:post.body/> (el primero de arriba hacia abajo) e inmediatamente después pega esto:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='caja-botones'><p>&#161;Compártelo!</p>
<div class='b-entradas'>
<a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
    </div>
<div class='b-entradas'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=80&amp;height=65&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:65px'/>
    </div>
<div class='b-google'>
<g:plusone size='tall'/>
</div>
  </div>
    </b:if>
Puedes cambiar: &#161;Compártelo! por otro mensaje corto que quieras que aparezca arriba de los botones.

 &#161; es el código del signo de admiración inicial: ¡.

El texto del 
botón de Facebook siempre se mostrará en Español: "Me gusta".

Paso 3: Con la ayuda de Ctrl F, busca: </body> y justo antes, pega el script del botón +1 de google:

<!-- Place this render call where appropriate -->
<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
Nota: Si ya tienes el script pegado ahí, porque usas los botones para compartir tu blog, incluyendo el de +1, entonces no lo pongas.

Paso 4: Internet Explorer 6 tiene problemas con la posición
fixed, cuando esta no se usa en el body (background o fondo de la plantilla), pensando en eso,  tenemos tres opciones: (1)ignorarlo, (2)hacerlo funcionar, o (3) evitar que se vea, eligiendo la última opción, tendrías que agregar esto después de ]]></b:skin> 
<!--[if IE 6]>
<style type="text/css"
>
#caja-botones{
display: none;
}
</style>
<![endif]-->
Con el código anterior, estamos condicionando, para que no se muestre la caja en IE6 (Internet explorer 6).

*Otra opción es usar un hack, en el que se puede declarar cualquier propiedad para IE6 y solo lo al CSS del Paso 1:

* html #caja-botones {
    display: none;
}

Paso 5: checa en vista previa y si todo luce bien, guarda los cambios. La caja con los botones aparecerán al estar dentro de cada post o artículo.

Notas:
  • Puedes agregar otros botones, solo tienes que aumentar el tamaño del alto de la caja (height) 
  • Siempre es bueno ir a obtener los códigos de los botones en las respectivas páginas, para no perderse de actualizaciones, etc.
  • Esta caja flotante, no debería ser la única opción para compartir entradas,  ya que en resoluciones pequeñas no se verá, por ello, es aconsejable, usar la caja + los botones ya sean los de Blogger para compartir entradas u otros personalizados dentro del mismo post.
ginas oficiales de los botones:
Facebook
Twitter
Google



Referencias:

También puedes ver como hacer funcionar la posicion fija en IE6:
fixed positioning in IE6


Puedes echarle un vistazo a la caja en distintas resoluciones de pantalla en test size.

[*Actualizado: Oct/07/2011]

09 septiembre 2011

Cómo crear tu propio header o cabecera con estilo + 10 ejemplos de headers super cool

Cuando queremos personalizar nuestro blog, sin tener que tocar ningún código de la plantilla, o casi ninguno, la opción perfecta, fácil, y de resultados espectaculares, es: crear una imagen para la cabecera o header.

Crear o hacer una imagen para la cabecera, no es algo muy difícil, el principal elemento que necesitamos es la "imaginación o creatividad", y yo se que tú la tienes, también, manejar un programa de edición de imágenes como Photoshop en cualquiera de sus versiones, aunque también sirven paint.net, Gimp, u otro similar, tiempo, paciencia, y seguir un plan, mismo que hoy te voy a compartir. ¿Lista (o)?, entonces, veamos de que se trata:

Paso 1: La Planeación del diseño

Punto 1: El Concepto
Para empezar, deberás pensar en que es lo que quieres trasmitir,  ¿qué va a proyectar tu blog?, para ello tomarás en cuenta el tema de tu blog, y que matiz o sentido le vas a dar a dicho contenido.

Esto servirá para poder crear una cabecera que comunique la esencia o identidad de tu blog.

Un punto a favor, es que el título y el concepto que formes trabajen juntos, en adición a la imagen de la cabecera y las demás partes de la plantilla, de hecho, el título es parte del concepto en sí. Esta es una parte difícil y sencilla a la vez. Fácil, cuando se tiene bien definido que quieres proyectar, y difícil cuando tu blog aún no tiene identidad, pero no te preocupes, sólo hay que buscarla o crearla,  ¿en qué piensas?...

Punto 2El estilo
Dicho de una manera simple, es el look que tendrá mi cabecera.
Por ejemplo, si quiero que luzca con aspecto antiguo: estilo vintage, si quiero que luzca moderno, grunge, etc.

Puedes ver algunos ejemplos de páginas web con estilo "Vintage retro".
Puedes ver  30 ejemplos de páginas web con estilo grunge.

Esto servirá a la hora de eligir los elementos gráficos, tipo de fuentes y colores.

Punto 3Los colores
Esta es otra parte importante, cuando empezamos a crear nuestra imagen para la cabecera, y lo que deberías preguntarte es: ¿qué colores voy a usar y que hagan armonía con el color de fondo o background que ya uso?, o  ¿qué colores le dan a mi blog una apariencia de antiguo? (pensando en los estilos). Si vas a hacer un cambio total incluyendo el fondo o background, entonces tienes que pensar en una buena integración de esas partes o secciones de tu blog, de tal manera que todo armonice.

Hay muchos sitios en la red que te permiten crear paletas ricas y que armonicen como:
En el úlimo sitio que te menciono, puedes explorar entre millones de paletas ya existentes y seleccionar alguna.

Con lo que respecta a los colores y como estos influyen en las emociones de las personas,  puedes echar un vistazo a esta infografía donde de forma breve y concisa, habla de la psicología del color, y cómo aplicarla al diseño web.

Punto 4: Los elementos gráficos y texturas, entre otros 
Por otro lado, necesitas buscar los elementos gráficos y texturas etc, es decir todas aquellas imágenes que tienen forma, color y/o textura y entre ellos puedes usar:
Puedes escoger varios, y guardarlos todos en una carpeta de tu computadora, para que luego puedas probarlos en el programa que vayas a usar.

Tip: Si eres buen dibujante y tienes tiempo, considera crear tus propios gráficos, los escaneas para luego crear tus propios vectores, o pinceles. Eso le daría un toque único a tu blog.

Punto 5: Las fuentes
Fuentes que combinen crearán una buena integración del diseño,  puedes incluir algunas de diseñador en algunos textos que vayas a incluir, o en el título y la descripción, si es que lo vas a incluir en la imagen. También puedes usar las nuevas fuentes de Blogger, recientemente han agregado fuentes de diseñadores muy cool, aunque en Google Web Fonts, hay muchas mas.

También llévate varios tipos de fuentes a una carpeta, instálalas, para luego probarlas sobre la imagen en el editor.

Otros sitios con fuentes gratis son:
Punto 6: Las medidas
Necesitas saber el ancho del blog completo del blog, ya que es el punto de referencia para empezar a trabajar en el editor de imágenes. En las nuevas plantillas, eso lo puedes saber yendo al Diseñador de plantillas y viendo la medida en pixeles, que viene en ancho del blog completo.

Te recomiendo usar como referencia esa medida, para que ocupe bien el espacio que tienes en el Header o cabecera.

Para ciertos estilos, en donde la imagen es más grande que el ancho del blog completo, entonces, la mejor opción es colocar la imagen como fondo de la plantilla o background. (ver ejemplos 4,8,y 10)

Paso 2: Ponte en Acción
Ok!, perfecto, si ya tienes todo lo anterior, lo que sigue es ponerse en acción en el editor de tu preferencia,  echa  a volar tu imaginación, ponte jugar con todos tus elementos gráficos, texturas y pinceles, sé creativo, y tómate tu tiempo, que las cosas con prisa nunca salen bien, (mmjm, bueno, hay algunas excepciones) .

Paso 3: Poner la cabecera
Una vez que hayas hecho la imagen de la cabecera, tendrás que subirla a tu blog, y para ello, puedes seguir estos pasos y recomendaciones. Tienes que estar abierto a cambiar detalles que no pudieran armonizar.

Como ya lo había mencionado antes, en  los casos donde la imagen sea más ancha que el ancho del blog completo, una buena opción, es poner la imagen en la sección del body de la plantilla.

Otros Tips y Recomendaciones:
  • Nunca copies el diseño de una cabecera existente, sé creativo, y una vez que tengas todos los elementos gráficos y demás,  juega con ellos en el editor, verás que puedes obtener resultados únicos y muy originales
  • Si no te sientes inspirada (o), no te forces a crear la cabecera en ese momento, mejor, sal de casa, ponte en contacto con la naturaleza, lee un libro, o una revista,  la inspiración llegará cuando tenga que llegar.

Ejemplos de Headers con estilo

ejemplo header creativo



2.Fran Fernandez

ejemplo header creativo


3.Noel Nieto

ejemplo header creativo


4.Belzebu de saia

ejemplo header creativo


5.Pienternet

ejemplo header creativo

6. Kitschen Sink

ejemplo header creativo


7.Childrens Day

ejemplo header creativo


8. Media Efects

ejemplo header creativo


9. Kid 81 Blog

ejemplo header creativo

10. dquinn.net

ejemplo header creativo


Conclusiones:

El header, como primer elemento visible en un blog o página web, puede causar un impacto visual enorme, por ello es conveniente crear una cabecera agradable, y mejor aún, que sea capaz de proyectar la esencia o el concepto de la página.

Crear una imagen en la cabecera que proyecte la esencia de nuestro blog, en un logro importante, aunque el hecho de no tenerla y usar un logo en su lugar, o un diseño minimalista que no utilice ilustraciones en esa sección, no quiere decir que sea malo, o peor, es simplemente cuestión de estilos, gustos y preferencias.