compartidísimo

Formulario de Contacto de Blogger en una Página Estática del Blog

noreply@blogger.com (Karla Castañeda) — Fri, 17 May 2013 02:26:00 +0000

Pues ya tenemos juguetito nuevo, me refiero al formulario de contacto que tantos usuarios echaban de menos en Blogger, y ahora, las dudas e inquietudes surgen, pues al ser un widget, el código que viene en la plantilla no se puede incrustar en una página estática tal y como aparece.

La buena noticia es que, con algunos trucos o chapuzas, podemos hacer que el formulario de contacto aparezca en una página estática.

Básicamente, este truco que te mostraré, consiste en condicionar el formulario de contacto para que se muestre en una página estática que crearemos para este propósito. De ese modo, el formulario se cargará y aparecerá en dicha página. Veamos entonces cómo hacerlo.

Antes de comenzar con ésto, te recomiendo guardar una copia de respaldo de tu plantilla, y para ello, vas a la pestaña Plantilla, y haces click en el botón que dice: "Crear-Restablecer copia de seguridad" y descargas la plantilla completa.

Cómo lograrlo paso a paso

Crea una página, yendo a la pestaña Páginas, luego, en la lista desplegable que dice Página nueva, seleccionas Página en blanco, y ahí agregas el texto que desees que aparezca arriba del formulario.
Una vez que hayas creado la página, haz click en la opción "Ver" para que accedas a la página, y copia la URL de ésta, que aparece en la barra de direcciones.
Copia el siguiente código, y edita lo que resalté de rojo. Donde dice 350px, es el ancho máximo del formulario, edítalo poniendo el mismo valor, en las dos veces que aparece. En font-size:16px, puedes cambiar el tamaño del texto.
<b:widget id='ContactForm1' locked='false' title='' type='ContactForm'> <b:includable id='main'> <b:if cond='data:blog.url == "URL_DE_LA_PAGINA_ESTATICA"'> <style type="text/css"> .contact-form-widget { max-width:350px; font-size:16px; } .contact-form-name, .contact-form-email, .contact-form-email-message { max-width:350px; } .post-footer{ display:none; } .home-link{ display:none; } .feed-links { display:none; } </style>  <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p/> <data:contactFormNameMsg/> <br/> <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/> <p/> <data:contactFormEmailMsg/> <span style='font-weight: bolder;'> * </span> <br/> <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/> <p/> <data:contactFormMessageMsg/> <span style='font-weight: bolder;'> * </span> <br/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> <p/> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </div> </form> </div> </div> <b:include name='quickedit'/> </b:if> </b:includable> </b:widget>
Luego, vas a la pestaña Plantilla, después a Editar HTML y en la lista desplegable "Ir al widget", selecciona "Blog1", para que te lleve al código del widget de las entradas. Ahí ubícate antes de </b:section> tal y como puedes ver en la imagen.
Ya que estés ubicad@ exactamente "antes" de dicha linea, pega el código del paso 3, mismo que ya editaste.
Verifica en vista previa y si todo luce bien, guarda los cambios.

¡Y listo!, ahora el widget con el formulario de contacto aparecerá en una página estática de tu blog. ;)

Puedes ver la demostración en esta página estática.

Otra truco para lograr esto, ya se ha publicado en Oloblogger.

Notas finales

El código que resalte de azul en el paso 3 es el que hace que aparezca el titulo del formulario. Puedes eliminarlo, si es que no tienes ninguna intención de que aparezca, ya que, la pagina estática mostrará el tátulo. Ahora está comentado, por eso no se interpreta por el navegador.

Última actualización:

00/00/00.

Nuevo widget en Blogger: Formulario de Contacto

noreply@blogger.com (Karla Castañeda) — Thu, 16 May 2013 07:00:00 +0000

Hace apenas unas horas, Blogger a incorporado un nuevo widget. Se trata de un formulario de contacto que podrás agregar a tu blog fácilmente.

Para ponerlo en tu blog, solo tienes que ir a la pestaña Diseño, luego haces click en agregar gadget en la sección que quieres que aparezca, por ejemplo, en la columna lateral. Después, seleccionas la pestaña Más gadgets y luego lo agregas.

Características:

El formulario de contacto de Blogger, cuenta con las siguientes características:

Campo para el nombre del usuario
Campo para el correo electrónico
Campo para el mensaje (textarea)
Botón para enviar

El diseño es sencillo, y los colores del texto los heredará de la sección donde lo agregues. Por el momento, este widget no cuenta con opciones de configuración, ni está disponible para las vistas dinámicas.

Los mensajes que se envíen, los recibirás a la cuenta de correo electrónico que tengas en Blogger, según comprobé.

Fuente: Página oficial de Blogger en Google+

8 Trucos Sencillos para Personalizar la Plantilla "Magazine" de las Vistas Dinámicas

noreply@blogger.com (Karla Castañeda) — Tue, 07 May 2013 07:00:00 +0000

En la comunidad Todo Blogger en español, se ha estado preguntado cómo cambiar ciertas cosas en el diseño de la plantilla "Magazine" de las vistas dinámicas.

A raíz de estar probando en distintos navegadores algunas cosas, me di cuenta de algunos detalles que hoy veremos cómo mejorar/cambiar, y también pensé en otras cosas que pudieras estar interesado en personalizar si usas las vistas dinámicas y hoy las voy a compartir contigo.

Aunque la mayoría de los trucos son para la plantilla "Magazine", algunos de ellos afectan al resto de las vistas dinámicas.

Todo el código CSS que facilito, lo vas a pegar en el diseñador de plantillas de Blogger, en la opción Añadir Css.

Veamos de qué se trata cada truco ;)

Truco #1. Ampliar el ancho de la entrada de la tercera sección.

La plantilla "Magazine" muestra primero una entrada que ocupa todo el ancho, luego, debajo, cuatro entradas lineales en forma horizontal, y debajo, el resto de las entradas que ocupan mas o menos dos terceras parte del ancho completo. Esa es la parte que vamos a ampliar, para que ocupe el ancho completo.

Para lograrlo, solo vas a la pestaña Plantilla, luego a Personalizar > Avanzado > Añadir CSS, y ahí pegas lo siguiente:

#fold .item {

width: 97.5% !important;

}

#fold .has-thumbnail .story {

width: 630px !important;

}

Luego, guardas los cambios en Aplicar al blog. Puedes ver el resultado en la siguiente imagen. :

Esta imagen, muestra también el texto del título en mayúsculas, y el texto del sumario más grande y más separado (ver truco #4)

Truco #2. Hacer visible los iconos de cada gadget.

Las vistas dinámicas, muestran algunos gadgets en unas pestañas que están a la derecha, en la ventana del navegador, y tienes que poner el puntero del ratón encima para que sean visibles.

Lo que haremos entonces es que, el icono de la pestaña siempre sea visible. En la siguiente imagen puedes ver el antes y después de implementar el truco.

Para lograr ésto, solo tienes que ir a la pestaña Plantilla, luego a Personalizar > Avanzado > Añadir CSS, y ahí pegas lo siguiente:

#gadget-dock {

right: 0 !important;

}

Luego, guarda los cambios en "Aplicar al blog".

Nota: Este es un truco que afectará a todas las vistas, y en la vista Mosaico, los iconos quedan arriba de las imágenes a la derecha, en la vista "Mosaico".

Truco #3. Hacer que el texto de la última linea sea visible...

La plantilla Magazine, como te lo mencionaba, muestra las entradas en tres secciones distintas. En la segunda sección, donde se muestran cuatro entradas lineales en forma horizontal, la última linea de texto no se ve completa en algunos navegadores como Internet Explorer, cuando el título de la entrada es largo.

El texto se ve incompleto cuando el título es largo.

En la imagen a la derecha, hemos forzado a que el título ocupe solo una linea. La letra se muestra en mayúsculas, ver truco #5. y la fuente del sumario es más grande ver truco #4.

La solución más sencilla, es forzar al título a que ocupe una sola linea, y separar el texto de los resúmenes, tal y como ocurre en la vista "Timeslide".

Para hacer lo anterior, haces click en pestaña Plantilla del panel de Blogger, luego vas a Personalizar > Avanzado > Añadir CSS, y ahí pegas lo siguiente:

.item .title {

white-space: nowrap;

}

#feature .story {

line-height: 19px;

}

Luego, guarda los cambios en "Aplicar al blog".

Con el CSS del primer bloque, estamos forzando al texto para que no de el salto en linea. Por defecto, las vistas dinámicas traen consigo otro CSS que hace que se corte la linea del título para que no se desborde, y agrega tres puntos al final (...).

Con el segundo bloque, estamos dando una altura a la linea de texto, para que se separe, y esto evitará que vea incompleto el texto en algunos navegadores como Internet Explorer.

Truco #4 Separar todas las lineas y cambiar el tamaño de la fuente del texto de los sumarios

Por defecto, el texto de los sumarios es de 13 pixeles y el texto se ve algo pegado entre cada linea. Podemos cambiar ésto, y apara ello, vas a la pestaña Plantilla, luego a Personalizar > Avanzado > Añadir CSS, y ahí pegas lo siguiente:

.summary.entry-summary{

font-size: 14px; /*El tamaño del texto*/

 line-height: 19px; /*la altura de linea*/

}

Luego, guardas los cambios en "Aplicar al blog".

Con font-size:14px,cambiamos el tamaño de la fuente.

Con line-height: 19px, separamos las lineas de texto de los sumarios.
El valor que uses, dependerá de el tamaño de la fuente que uses. Este no debe ser mayor al valor asignado a line-height, para obtener resultados satisfactorios. Tú puedes probar y ver los resultados ;)

Truco #5 Cambiar el color del título de la entrada, al poner el puntero del ratón encima de éste.

Desde el diseñador de plantillas, podemos cambiar el color que muestra el título de la entrada, pero no el color al poner el puntero encima de éste (:hover).

Para personalizar el color del texto al poner el puntero del ratón encima, agregas lo siguiente, haces click en la pestaña Plantilla, luego vas Personalizar > Avanzado > Añadir CSS, y ahí pegas lo siguiente:

.item .title:hover, .item .title a:hover{

 color:#8A0829; 

}

La regla de CSS anterior, hará que cambie el color del título de la entrada al poner el puntero del ratón encima, y además los puntos al final de ésta (...), pensando en que has aplicado el truco #3. El color es: #8A0829. Para poner el color que quieras, consulta esta tabla de colores.

Truco #6. Transformar el texto del título de la entrada a mayúsculas

Podemos hacer que el título de la entrada se muestre en mayúsculas (ver imagen del truco 3) y para ello, ve a la pestaña Plantilla > Personalizar > Avanzado > Añadir CSS

.item .title {

text-transform: uppercase; 

}

Luego, guarda los cambios en "Aplicar al blog".

Si ya usaras el truco #3, solo agrega la linea que resalte de azul, al primer bloque de CSS. Entonces dicho bloque quedaría así:

.item .title {

white-space: nowrap;

text-transform: uppercase;

}

Truco #7. Cambiar el color de los listones, al poner el puntero del ratón sobre éste (:hover)

Si bien es posible cambiar el color de fondo del listón, así como el color del texto desde el diseñador de plantillas yendo a Plantilla, luego a Personalizar > Avanzado > Cinta de fecha, no es posible cambiar el color del listón cuando pones el puntero del ratón encima del listón, desde el diseñador de plantillas.

Por defecto, el fondo cambia al poner el puntero encima. Este color es como marrón, es este que ves de fondo.

Para cambiar el color de fondo, y el color de texto, haces click en la pestaña Plantilla, luego vas a Personalizar > Avanzado > Añadir CSS, y ahí pegas lo siguiente:

a.ribbon:hover .ribbon-piece {

background-color: #aaa; /*color de fondo*/

color: #fff; /*Color del texto*/

}

Luego, guarda los cambios en "Aplicar al blog".

Truco #8. Personalizar el borde y sombra del blog y evitar que se desborde el fondo en Firefox.

En la plantilla Magazine de las vistas dinámicas, la segunda sección muestra 4 imágenes lineales, esa sección en Firefox, se desborda el fondo en ambos lados, no es muy notorio, pero, al desbordarse no se ve ningún borde, como en el resto de la plantilla.

Lo que haremos entonces es poner un borde a todo el contenido, anular el borde que ya tiene esa vista y no se ve en dicha sección, y poner sombra en el contenido. Para ello, haces click en la pestaña Plantilla del panel de Blogger, luego vas a Personalizar > Avanzado > Añadir CSS, y ahí pegas lo siguiente:

#content {

border-image: none !important;

border: 1px solid #ddd; /*El color del borde*/

-moz-box-shadow: 0 0 5px #ddd; /*Las sombras*/

-webkit-box-shadow: 0 0 5px #ddd;

box-shadow: 0 0 5px #ddd;

}

Luego, guarda los cambios en "Aplicar al blog".

En border: 1px solid #ddd, cambias el color del borde. #ddd es el color que tiene. Puedes consultar esta tabla de colores. Lo mismo para las sombras, todos los valores de la sombras deben quedar igual como se muestra.

Puedes ver todos los cambios hechos en este blog.

Espero sea útil, y no olvides compartirlo con tus amigos, solo toma unos segundos ;)

Crédito por las imágenes en los posts de la demostración y que se muestan en este tutorial: nonsen sesociety.

7 Puntos Básicos para Ganar Credibilidad y Confianza con las Entradas del Blog

noreply@blogger.com (Karla Castañeda) — Wed, 01 May 2013 23:52:00 +0000

Ganar credibilidad y confianza por parte de quienes visitan nuestro blog, es crucial cuando empezamos a forjar una audiencia que nos siga.

Algunos pequeños detalles y que no tomamos en cuenta, pueden hacer que perdamos posibles lectores. Como no queremos que eso pase, tenemos que ser muy cuidadosos al redactar las entradas del blog.

Veamos cuáles son aquellos detalles que generan confianza y credibilidad por parte de nuestros lectores, enfocándonos en el contenido que compartimos.

1. Ser claro en la idea que exponemos. Al redactar nuestras entradas, debemos esforzarnos por ser claros en el tema que estamos exponiendo, y para lograrlo, en gran parte, hay que conocer y entender bien el tema que estamos tratando. Para ello, es necesario informarnos lo mejor posible.

Informarse bien sobre un tema, y comprenderlo del todo, hará que lo abordemos con más claridad y seguridad, misma que proyectaremos a nuestros lectores. No olvides que todo lo nuevo que puedas aportar, añadirá valor a tu publicación.

Investiga si hay actualizaciones importantes que debas tomar en cuenta, aunque siempre elige fuentes de información fiables.

2. Ser objetivo. Cuando redactamos una entrada, a veces es muy difícil no involucrar sentimientos, ideologías o intereses personales. Hay que evitar en lo posible entremezclar opiniones y el hecho de una noticia.

Si bien a las personas nos gustan los consejos y/o recomendaciones, inclinarse demasiado a favor o en contra de algo, sin mencionar todos los aspectos que permitan una valoración más completa, puede hacer que el artículo pierda credibilidad.

Si referimos un hecho opinable, es importante sustentar con argumentos razonables y verificables, la información que exponemos.

Cuando la información parte de un conocimiento exacto y cierto, de una reflexión consciente y de una rectitud intachable de intenciones "en esto consiste la imparcialidad, o la absoluta objetividad", sentencia Luka Brajnovic.

3. Citar la fuente. Siempre que usamos contenido de terceros, porque se nos ha permitido, es importante citar la fuente mediante un enlace. De ese modo un lector podrá saber cuál es el origen de nuestra noticia o publicación. Esto generará confianza en el lector, y si éste ve el mismo contenido en otro lado, tendrá claro que nosotros solo "compartimos/difundimos" dicho contenido.

4. Agregar referencias bibliográficas y más información sobre un tema. Aunque parezca que es lo mismo que mencionar la fuente, no lo es del todo. La fuente representa el sitio de donde obtuvimos la información que estamos compartiendo y se aplica más a entradas del tipo noticioso, aunque tampoco se limita a éstas. Por otro lado, las referencias bibliográficas, son todas aquellas fuentes de donde se pudo haber derivado nuestra entrada, o bien, que complementan la información que estamos dando.

Nosotros podemos usar las referencias para darle al lector más información relativa al tema de la entrada, y/o reforzar el contenido de la misma. También, ésto hará que un lector pueda ahondar en un tema que le interese, y facilitará que la información pueda ser verificable, entre otras cosas.

5. Cuidar la ortografía. Seguro que a todos se nos va por ahí, una que otra metida de pata en la ortografía. Lo ideal es que tuviéramos un editor profesional que verifique el contenido pero, no siendo posible, hay que esforzarnos por escribir las palabras correctamente.

Si usas el editor de Blogger, puedes auxiliarte de la herramienta que comprueba la ortografía, y aunque no identifica todas palabras para que sean rectificadas, sí es de gran ayuda.

6. Agregar la fecha de publicación. Hace algún tiempo, +Olmo Axayacatl quien es autor de diversos blogs, comentaba que cuando él lee un post o entrada, siempre se fija en la fecha de publicación, de ese modo, se da cuenta si la entrada es actual o no. También decía que de no tenerla ya no regresaba al sitio. El que como lectores hagamos eso, tiene mucho sentido, ya que se entiende que estamos en constante cambio en todos los ámbitos, y muchos temas, pueden verse afectados por actualizaciones.

Al poner la fecha, un lector tendrá una idea más clara sobre si es o no una publicación en la que pueda confiar o pudiera ser obsoleta. Hay temas en los que estamos más obligados a hacerlo, sobre todo aquellos en los que está implicada la tecnología. Así que, habilitemos la fecha de las entradas;)

7. Ser respetuoso. Esto se refiere a la forma en que manejamos la información de terceros y que referimos en nuestra publicación para opinar sobre ésta. Siempre hay que hacerlo con respeto y consideración.

También, hay que cuidar los términos o palabras que usamos en nuestras publicaciones. Recordemos que la información estará disponible para cualquiera en la red.

+1 Relájate, sé tu mismo. ¡Disfruta todo el proceso de creación de la entrada!. Si bien hay que ser cuidadosos en la redacción, no le des demasiadas vueltas al asunto buscando la perfección, ya que ésta no existe. Usa el sentido común y dirígete a la audiencia como te gustaría que se dirigieran a ti.

Conclusiones.
Todos esos aspectos hablan por sí mismos de nosotros y crean una imagen nuestra, en los lectores del blog. Ganar o no credibilidad y confianza, dependerá de nuestro desempeño en el blog.

Es imposible no cometer errores, y éstos, al final de cuentas pueden hacer que mejoremos ;)

¿Qué haces para ganar la credibilidad y confianza de tus lectores? Ya me contarás...

Imagen obtenida de Social Media Network

Widget para que te sigan y recomienden tu blog al final de las entradas + Bloque de publicidad de AdSense

noreply@blogger.com (Karla Castañeda) — Mon, 29 Apr 2013 01:35:00 +0000

¡Hola!, ¿qué tal? En una entrada anterior, te decía como agregar un widget para que sigan y recomienden tu contenido. Hubo un par de preguntas que coincidieron, donde me decían que querían poner este elemento al final de las entradas. Hoy te diré cómo hacerlo y además, pensando en aprovechar bien todos los espacios, agregaremos un bloque de publicidad de AdSense a un lado, pensando en que ya usas este programa de publicidad en tu blog.

La cajita para que sigan y recomienden tu contenido + el bloque de publicidad de AdSense se verá así:

Todo esto aparecerá al ingresar a las entradas y esta estará al final del post, arriba del mensaje de los comentarios.
Puedes ver la cajita en acción, y cómo quedaría el bloque de publicidad (uso una imagen como ejemplo, ya que en ese blog, no puedo tener publicidad), en la demostración:

Demostración

Muy bien, pues ya sabiendo de lo que se trata, ahora veamos cómo lograrlo. Este tutorial a considerado como ejemplo para todos los pasos, las plantillas del diseñador de plantillas de Blogger.

Pasos

Antes de comenzar con ésto, te recomiendo guardar una copia de respaldo de tu plantilla, y para ello, vas a la pestaña Plantilla, y haces click en el botón que dice: "Crear-Restablecer copia de seguridad" y descargas la plantilla completa.

Primero, vas a la pestaña "Plantilla" del panel de Blogger, luego a: Personalizar > Avanzado > Añadir CSS, y ahí agregas el siguiente CSS:

/* Caja Redes */

ul#caja-redes{

width:275px;

padding:0;

margin:0;

list-style:none;

background:#f7f7f7;

border:1px solid #dcdcdc;

overflow:hidden;

}

ul#caja-redes strong, li.c-rss{

color:#848484;

font-size:12px;

}

ul#caja-redes li{

overflow:hidden;

}

li.cg-plus{

height:108px;

padding-bottom:6px;

border-right:1px solid #dcdcdc;

border-bottom:1px solid #dcdcdc;

margin:0 -1px 0 -5px;

}

li.c-fb{

border-bottom:1px solid #dcdcdc;

padding:8px 3px 2px;

margin:5px;

}

li.c-tw, li.c-mail{

margin:5px;

padding:6px 3px 0;

}

li.c-rss{

float:left;

margin:5px;

padding:0 4px 4px;

}

a.c-rss {

background:url(http://2.bp.blogspot.com/-c0cyucnLJqo/UQpGV9dhS1I/AAAAAAAAL5I/xORlp1k-A4M/s1600/rss1.png) no-repeat 25% 40%;

display:inline;

padding:0 0 1px 26px;

color:#848484;

}

input[type="text"].campo, input[type="submit"].enviar {

border:1px solid #dcdcdc;float:left;color:#848484;display:block; height:20px;font-size:11px;}

input[type="text"].campo{text-indent:3px;width:145px; margin-right:-3px;}

input[type="submit"].enviar {height:24px;cursor:pointer;text-shadow:0 1px 0 #fff;

background:-webkit-linear-gradient(top,white,#d8d8d8);

background:-moz-linear-gradient(top,white,#d8d8d8);

background:-ms-linear-gradient(top,white,#d8d8d8);

background:-o-linear-gradient(top,white,#d8d8d8);
}
#seccionf{
width:560px; /*el ancho de los dos elementos + margen derecho de la cajita con botones*/
height:330px;
margin:0 0 14px 0; padding:0;
}
#misredes{
margin: 0 18px 0 0;
width:49%;
float:left;
}
#publi
width:49%;
float:right;
}

Deberás tomar en cuenta el ancho que tienes definido para los posts. La cajita + el bloque de publicidad + margenes deben ser igual o menor que el ancho que hay en la columna principal o main.
Luego, copia todo este código y ponlo en una nota de tu computadora, para que lo edites con tus datos. Debajo del código menciono cómo editarlo.

<ul id="caja-redes"><li class="c-fb"><iframe src="//www.facebook.com/plugins/like.php?locale=es_ES&href=http%3A%2F%2Fwww.compartidisimo.com&send=false&layout=standard&width=260&show_faces=false&font&colorscheme=light&action=like&height=42" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:42px;" allowtransparency="true"></iframe> </li> <li class="c-tw"><a href="https://twitter.com/compartidisimo" class="twitter-follow-button" data-dnt="true" data-lang="es">Seguir a @compartidisimo</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </li> <li class="cg-plus"><div class="g-plus" data-width="286" data-href="//plus.google.com/109627432877953314897" data-rel="publisher"></div>  <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> </li> <li class="c-mail"> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=compartidisimo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><strong>Compartidísimo directamente a tu e-mail</strong><p><input class='campo' name='email' placeholder='ingresa tu e-mail' type='text'/></p><input name='uri' type='hidden' value='compartidisimo'/><input name='loc' type='hidden' value='es_ES'/><input class='enviar' type='submit' value='Suscríbete'/></form> </li> <li class="c-rss">O suscríbete por otras vías:<a class="c-rss" href="//feeds.feedburner.com/compartidisimo" title="Vía RSS" target="_blank">RSS</a></li> </ul>
Edita los datos de arriba hacia abajo tomando en cuenta que en:
- www.compartidisimo.com pones la URL de tu blog, omitiendo el http:// pondrías por ejemplo nombre_del_blog.blogspot.com, pensado que usas subdominio.
- compartidisimo ahí pones el nombre de usuario de Twittter.
- Seguir a @compartidisimo es el texto del botón de twitter.
- 109627432877953314897 ahí pones el ID de tu página de Google+, o el del perfil. Para conseguir ese número tienes que ir a la página en Google+, y copiar la numeración que aparece en la barra de direcciones de tu navegador. Por ejemplo esta es la de mi página en Google+, y la numeración la he resaltado de rojo:
  
  https://plus.google.com/109627432877953314897/posts
- compartidisimo ahí pones la URI de FeedBurner. Puedes obtenerla accediendo a la página de FeedBurner,y luego haces click en el icono de RSS que está a un lado del nombre de tu blog, luego se abrirá una ventana. El nombre de la URI es el texto que aparece después de la barrita diagonal "/" en la barra de direcciones.
- Compartidísimo directamente a tu e-mail ese es el texto que aparece antes del campo para que ingresen el e-mail para la suscripción del blog.
- compartidisimo otra vez pones la URI de FeedBurner.
- O suscríbete por otras vías: este es el texto que esta antes del icono de RSS.
- compartidisimo ahí va de nuevo la URI de FeedBurner.
Luego, ingresa a tu cuenta de AdSense y crea un bloque de anuncios yendo a la pestaña de "Mis anuncios". Recuerda tomar nota del ancho disponible de la sección del post. Este, debe ser mayor al del bloque + el ancho de la cajita con las redes sociales + el margen, Yo usé un bloque de 250 x 250 pixeles en mi prueba.
Luego ve a esta página y convierte el código del anuncio que creaste.
Una vez editado el código de la cajita, y el código del anuncio, vas o poner todo junto como se indica:

<b:if cond='data:blog.pageType == "item"'>
<div id='seccionf'>
<div id='misredes'>
El código de la cajita del Paso 2
</div>
<div id='publi'>
El código del bloque con publicidad
</div>
</div>
</b:if>
Teniendo todo el código listo, vas a la pestaña "Plantilla", luego ingresas al editor en "Editar HTML", haces click en "Plantilla de formato", y presionas las teclas Ctrl + F, y ahí en el campo de búsqueda (search:) pegas la siguiente linea de código:

class='post-footer-line post-footer-line-3
Una vez localizada esa linea, te desplazas hacia abajo, y pega el código del paso 5 ya editado, antes de </b:includable> como puede apreciarse en la imagen arriba. De ese modo, la cajita quedará fuera de la sección llamada post-footer (donde normalmente están las etiquetas, botones para compartir, etc), aunque, dentro de los posts, al finas de los mismos.
Verifica en vista previa y si todo luce bien, guarda los cambios en "Guardar plantilla". Aunque no verás los elementos agregados, te asegurarás que todo luzca bien, por lo menos en la página principal.

¡Y listo!, habrás agregado la cajita para que te sigan y recomienden tu blog, y además un bloque de publicidad de AdSense ;)

Notas finales y + información sobre el programa de AdSense:

No agregues ningún texto arriba del bloque como "haga click", "te recomendamos que visites:" es decir, nada que incite a hacer click sobre el bloque de publicidad.
En una página sólo se puede mostrar tres bloques de anuncios.
Para obtener mas información sobre la creación de bloques de anuncios dirígete a esta página de Google.
También, puedes consultar las directrices de calidad para webmasters de AdSense, para informarte sobre las prácticas recomendadas del programa.

Explorando las Nuevas funcionalidades del Editor HTML de Blogger

noreply@blogger.com (Karla Castañeda) — Thu, 11 Apr 2013 01:55:00 +0000

Me quedé sorprendida con las mejoras que Blogger a implementado al editor HTML de la plantilla. Ahora es más intuitivo, y funcional. Lo han dotado de características que están orientadas a mejorar la legibilidad del código fuente de la plantilla, permitiendo tanto a programadores web, como a administradores del blogs, editar el código fácilmente.

Estas son las principales características que han sido añadidas:

Coloreado de sintaxis. Resalta la presentación del código con diferentes colores y fuente distinta, lo que permite que éste se más legible, ya que podrás identificar entre otras cosas, etiquetas, atributos y valores fácilmente.
Soporta numeración de lineas, por lo que podemos identificar la ubicación de un error, al estar haciendo un cambio o verificando el código.
Auto-indentación, que en cristiano (perdón por el modismo) quiere decir que separa el código de la izquierda en cierto orden, para que sea más fácil identificar visualmente su estructura.
Acceso rápido al código de los widgets. Ahora, es posible acceder al código de los widgets fácilmente solo seleccionándolo, desde la lista desplegable denominada "Ir al Widget".
Código plegable. Característica que permite mostrar en forma selectiva ciertas secciones de código, haciendo que la exploración de éste sea más rápida, permitiendo así su edición.
Carga la vista previa de la plantilla dentro del editor. Ahora sin necesidad de salir de la página, es posible ver cómo luce la plantilla, cuando estamos editando el código.

¿Qué tal? Bueno, pensando en que hay usuarios nuevos que desconocen cómo funciona el editor de Blogger, y que tenemos nuevas características, exploremos el editor y hablemos de sus funciones ;)

El Editor HTML de la plantilla, y sus características

El editor HTML de la plantilla te permite realizar cambios en la plantilla, para lograr la apariencia que desees darle al blog. Claro que hay que tener conocimiento de programación para lograrlo, aunque con algunas nociones de programación o con la ayuda de algunos tutoriales, también puedes hacer cambios, que hacen grandes diferencias en el diseño.

Para ingresar al editor de HTML, como antes, usamos la pestaña "Plantilla" del panel de Blogger, luego, hacemos click en el botón "Editar HTML".

Hecho lo anterior, verás al editor de HTML de la plantilla, en vivo y a todo color, listo para empezar a hacer cambios en el código de la plantilla ;)

A primera vista, podemos ver que el código de la plantilla está coloreado, que como puedes apreciar, lo hace más legible.

A la izquierda, podemos ver que las lineas están numeradas, y también podemos ver este simbolito: "►", que indica que se puede desplegar el código de determinada seccion de la plantilla, como el CSS de la plantilla, que se encuentra en <b:skin>...</b:skin>, y el código de los widgets.

Al desplegar el código de los widgets, estarías expandiendo plantillas de artilugios, función que como recordarás, se encontraba anteriormente en el editor.

Arriba, se encuentran los botones con las funciones, que, siguiendo un orden de izquierda a derecha, son los siguientes:

Atrás nuevo. Te permite salir del editor, para regresar a las opciones que se encuentran en la pestaña "Plantilla".
Guardar Plantilla. Sirve para guardar los cambios que se hayan hecho en el código de la plantilla.
Ir al Widget nuevo. Lista desplegable que contiene todos los widgets que tenga agregados la plantilla (sus Ids, que es como Blogger los ha definido), y que al seleccionarlo, te enviará directamente al código de éste.

Si quisieras ver el código completo del widget, tendrás que desplegarlo haciendo click en: "►" que aparece a la izquierda donde está la numeración, en la linea de código donde empieza el widget.
Editar plantilla nuevo. Te permite regresar al código fuente de la plantilla, cuando estás viendo la "vista previa de la plantilla".
Vista previa de la plantillacambió. Esta función ya existía anteriormente, aunque ahora la vista previa se carga dentro del editor, sin salir de la página. Sirve para visualizar cómo luce la plantilla cuando estamos haciendo un cambio.
Restablecer plantillas de artilugios a los valores predeterminados. Esta función también ya existía aunque tenía otra ubicación. Ahora es más visible, porque aparece con el resto de los botones. Sirve para resetear o restaurar la plantilla. Dicho muy simple, sirve para que la plantilla tenga la condición que originalmente tenía antes de hacer cambios en los widgets, y ésta tendrá los valores que por defecto agrega Blogger. Esto es especialmente útil, cuando se ha editado mal la plantilla provocando problemas en el funcionamiento del blog, como cuando no funcionan los comentarios anidados de Blogger. Hay que tener en cuenta que, al usar esta función, estaremos borrando todos los cambios hechos en los widgets de Blogger. El código CSS que hayas agregado, no se elimina.
Plantilla de formatonuevo. Esta nueva opción, permite mostrar o no indentación en la plantilla, que es la separación u ordenación del código que sirve para identificarlo fácilmente. Si quieres buscar algo usando Ctrl + F, deberás primero hacer click en esta opción, y luego usar dichas teclas para hacer la búsqueda, si es que no has seleccionado ir al código del widget, desde "Ir al widget".
Revertir los cambios. Limpia o elimina el código que hayas añadido y que no ha sido todavía guardado en "Guardar plantilla".

Por último si deseas remplazar cualquier cosa que se repita en la plantilla, de forma automática, puedes usar las teclas Ctrl + Shift + R. Por ejemplo, si quieres cambiar la forma en que has identificado un menú: .menu_aburrido por .menu_divertido, y lo hará, sin que tu tengas que teclear el texto uno a uno ¿qué pasada verdad? :)
Ctrl + Shift + F. Encuentra y remplaza texto uno a uno. (corrección :)

Conclusiones

Tengo que decir que recibo con agrado estas mejoras. El código es más legible, por lo que será más fácil y rápido editarlo, o explorarlo. Y a ti, ¿te gustan los cambios?

Referencias: Blogger Buzz

Pagar con un tweet contenido recibido del blog

noreply@blogger.com (Karla Castañeda) — Tue, 26 Mar 2013 07:00:00 +0000

Pay with a tweet o "pague con un tweet" traducido al español, es un sistema de pago social, con el cual es posible ofrecer un producto a cambio de un tweet, aunque opcionalmente también funciona con una publicación en facebook.

Este servicio se inició hace algún tiempo y goza de cierta popularidad. Es utilizado en sitios web para la difusión de cualquier tipo de contendido que pueda ser descargado, como imágenes, e-books, música, y otros archivos. Esta misma idea ya ha sido materializada por la compañia Kellogg's, en donde era posible recibir una caja de sus productos a cambio de un tweet, en una tienda que fue creada para ese propósito.

Cómo funciona Pay with a tweet

Es simple, una vez que se haya enviado el tweet o publicación a Facebook, usando el botón que se facilita en la página, se recibe automáticamente el link de descarga del producto que se está promocionando.

Desde las opciones de configuración, puedes agregar el texto que llevará el tweet, limitar la cantidad de personas que pueden enviar un tweet, así como también establecer una fecha de vencimiento para tu campaña "pague con un tweet".

Quién puede usarlo

En general, cualquier persona que tenga un sitio web y que quiera difundir su contenido. Si eres por ejemplo diseñador gráfico y estás ofreciendo a la venta un set de iconos, podrías ofrecer una porción de éstos a cambio de un tweet. Igualmente puedes ofrecer un e-book de recetas de cocina, consejos de belleza, o cualquier otra cosa de valor que pueda ser descargada y que quieras promover.

Cómo obtener el botón de Pay with a tweet

Es fácil, para obtenerlo solo sigue estos pasos:

Vas a la página de Pay with a tweet.
Haz click en el botón que dice "Crea un botón de pago".
Rellena todos los campos del formulario, y selecciona las opciones que quieres que tenga el botón.
Acepta los términos y condiciones (una vez que los leas), y obtén el código en "Crear mi botón".

Una vez conseguido el código del botón, puedes agregarlo a la página donde mostrarás el contenido que vas a ofrecer para ser descargado.

Y listo, ya habrás obtenido un botón para empezar tu campaña de pague con un tweet ;)

Conclusiones

Pay with a tweet representa un medio muy efectivo para promocionar contenido, donde las dos partes involucradas se ven beneficiadas.

Del mismo modo que puedes utilizar la dirección web del archivo para descargarse, una vez que se haga el tweet, podrías por ejemplo agregar la dirección de una página estática, donde tuvieses material exclusivo.

Únete y participa en la comunidad: "Todo Blogger en español"

noreply@blogger.com (Karla Castañeda) — Fri, 15 Mar 2013 10:39:00 +0000

Todo Blogger en español, es una comunidad en Google+ que nace motivada por la idea de crear un lugar dónde compartir ideas, experiencias y recursos, sobre la plataforma de Blogger.

Esta comunidad ha sido creada con el firme propósito de unir a las personas con intereses comunes, dando lugar a un ambiente propicio para la conversación, la cooperación, y toda participación que pueda ser enriquecedora a beneficio de todos sus miembros.

Hoy me complace hacerte una atenta invitación para que te unas a la comunidad, y participes en ella ;)

Al ser parte de la comunidad, podrás:

Compartir tu blog con todos los miembros y conocer otros blogs
Colaborar con otros miembros, aportando nuevas ideas que puedan ser útiles para mejorar el blog
Aprender sobre distintos temas relacionados a la plataforma de Blogger a través de los debates, o las referencias de publicaciones en blogs, etc.

La iniciativa de crear la comunidad, fue ideada y organizada por +Jesús González autor de Iniciablog.com, quien cordialmente me invitó a formar parte del equipo de moderadores. Además de una servidora, existen otros miembros que también forman parte del equipo de moderadores y que a continuación te presento.

El equipo de moderadores

Como en toda comunidad de Google+, existen los moderadores, quienes tienen la responsabilidad de velar por el orden de la comunidad. He aquí la lista completa del equipo de moderadores de la comunidad:

+Jesús González autor de Iniciablog.com
+Víctor Calderón, autor de Ayuda-Bloggers.info
+Oloman autor de oloBlogger.com
DanielGarcia, autor de GadgetsBlogger.com
+Hayder Juvinao autor de miltrucosblogger.info
y una sevidora +Karla Castañeda.

La dinámica: Categorías en la comunidad

Al ser miembro de la comunidad, podrás hacer comentarios y publicaciones libremente. Para llevar un orden en las publicaciones, es necesario elegir la categoría en la que harás tu publicación, de ese modo la comunidad estará bien organizada ;)

Hacer publicaciones siguiendo un orden es sencillo, simplemente selecciona la categoría del menú que aparece en el cuadro para compartir la publicación, antes de que la publiques, ¿fácil verdad?

Podrás publicar sobre distintos temas relacionados a Blogger, por ejemplo, puedes compartir tu blog a todos los miembros de la comunidad usando la categoría "Presenta tu blog". Si tienes alguna duda o inquietud sobre la plataforma de Blogger o algún tema relacionado, puedes hacer una pregunta desde la categoría "Debates"; en fin, puedes participar en cualquiera de las categorías o temas que han sido creadas y por supuesto, también puedes comentar en cualquiera de las publicaciones.

Si lo deseas, puedes sugerir la apertura de otro tema o categoría que pueda ser de interés para la comunidad ;)

Así que no esperes más y colabora, comparte y aprende en la comunidad pensada en beneficiar a blogueros como tú ;)

¡Te esperamos!. Por último, si deseas saber más sobre las comunidades de Google+, también te invito a echarle un vistazo a la página de Google, donde podrás ver toda la información al respecto.

Widget para que sigan y recomienden tu blog. Incluye: Botones de Twitter, Facebook, Insignia de Google+ y RSS

noreply@blogger.com (Karla Castañeda) — Thu, 31 Jan 2013 18:34:00 +0000

Creo que todos estamos de acuerdo en la importancia que tiene el tener en nuestro blog las vías que permitan estar en contacto con nuestros lectores/seguidores a través de las distintas redes sociales que usamos. Por ello, ponemos botones de Twitter, Facebook y Google+, de ese modo cualquier usuario puede acceder a nuestras páginas en dichas redes sociales, seguirnos o recomendarnos.

Pensado en eso y en alternativas efectivas para que puedas poner en tu blog, y así facilitarle a tus usuarios que sigan y/o recomienden tu contenido, vamos a integrar todos esos botones en una cajita contenedora para que todas las opciones estén siempre accesibles.

Esta cajita contendrá:
1. El botón de seguir de "Twitter para que te puedan seguirte desde ahí, sin tener que ingresar a tu página de Twitter".
2. El botón de Facebook, para que los usuarios recomienden tu blog.
3. La insignia standar de Google+, para que puedan agregarte a un círculo y hacer +1 a tu blog.
4. Agregaremos también la vía para que se suscriban al blog, pensando en que usas FeedBurner. También un icono para que puedan suscribirse usando algún agregador, de los muchos disponibles.

Tal y como la puedes ver a continuación:

Cómo agregar la cajita

Notas: Para la cajita tenga la apariencia que puedes ver, he hecho ajustes claves. En el caso de la insignia de Google+ por ejemplo, el ancho de ésta es mayor al ancho de la cajita contenedora, ésto para que no se vea una caja dentro de otra caja (la de la insignia dentro del contenedor).

El ancho de la cajita contenedora, es de 275 pixeles, por lo tanto, tu columna lateral deberá tener un ancho mayor a éste. Se puede reducir la cajita y hacer los ajustes para que todo se vea bien proporcionado, pero ésto lo recomiendo a usuarios que ya sepan algo de CSS y además hay que considerar que casi todos los botones e insignia, requieren un ancho mínimo para que se muestren con sus características.

Bien, pues dicho lo anterior, ahora veamos cómo agregaras la cajita, y como ya todo está integrado, tú sólo tendrás que agregar los códigos a tu blog, y editarlos con tus datos.

Primero, agregas el CSS de la cajita, yendo a Plantilla > Personalizar > Avanzado > Añadir CSS. De ese modo, podrás hacer cambios y ver el resultado desde ahí. No olvides aplicar los cambios en Aplicar al blog.

CSS

/* Caja Redes */
ul#caja-redes{
width:275px;
padding:0;
margin:0;
list-style:none;
background:#f7f7f7;
border:1px solid #dcdcdc;
overflow:hidden;
}
ul#caja-redes strong, li.c-rss{
color:#848484;
font-size:12px;
}
ul#caja-redes li{
overflow:hidden;
}
li.cg-plus{
height:108px;
padding-bottom:6px;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
margin:0 -1px 0 -5px;
}
li.c-fb{
border-bottom:1px solid #dcdcdc;
padding:8px 3px 2px;
margin:5px;
}
li.c-tw, li.c-mail{
margin:5px;
padding:6px 3px 0;
}
li.c-rss{
float:left;
margin:5px;
padding:0 4px 4px;
}
a.c-rss {
background:url(http://2.bp.blogspot.com/-c0cyucnLJqo/UQpGV9dhS1I/AAAAAAAAL5I/xORlp1k-A4M/s1600/rss1.png) no-repeat 25% 40%;
display:inline;
padding:0 0 1px 26px;
color:#848484;
}
input[type="text"].campo, input[type="submit"].enviar {
border:1px solid #dcdcdc;float:left;color:#848484;display:block; height:20px;font-size:11px;}
input[type="text"].campo{text-indent:3px;width:145px; margin-right:-3px;}
input[type="submit"].enviar {height:24px;cursor:pointer;text-shadow:0 1px 0 #fff;
background:-webkit-linear-gradient(top,white,#d8d8d8);
background:-moz-linear-gradient(top,white,#d8d8d8);
background:-ms-linear-gradient(top,white,#d8d8d8);
background:-o-linear-gradient(top,white,#d8d8d8);}
Luego, Vas a "Diseño" y seleccionas un gadget en la sección de la columna lateral, con la opción de HTML/Javascript, y pones el siguiente código que tendrás que editar con tus datos. Una vez editados, guarda los cambios.

<ul id="caja-redes"><li class="c-fb"><iframe src="//www.facebook.com/plugins/like.php?locale=es_ES&href=http%3A%2F%2Fwww.compartidisimo.com&send=false&layout=standard&width=260&show_faces=false&font&colorscheme=light&action=like&height=42" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:42px;" allowtransparency="true"></iframe> </li> <li class="c-tw"><a href="https://twitter.com/compartidisimo" class="twitter-follow-button" data-dnt="true" data-lang="es" data-dnt="true">Seguir a @compartidisimo</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </li> <li class="cg-plus"><div class="g-plus" data-width="286" data-href="//plus.google.com/109627432877953314897" data-rel="publisher"></div>  <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> </li> <li class="c-mail"> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=compartidisimo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><strong>Compartidísimo directamente a tu e-mail</strong><p><input class='campo' name='email' placeholder='ingresa tu e-mail' type='text'/></p><input name='uri' type='hidden' value='compartidisimo'/><input name='loc' type='hidden' value='es_ES'/><input class='enviar' type='submit' value='Suscríbete'/></form> </li> <li class="c-rss">O suscríbete por otras vías:<a class="c-rss" href="//feeds.feedburner.com/compartidisimo" title="Vía RSS" target="_blank">RSS</a></li> </ul>

de arriba hacia abajo

en:

www.compartidisimo.com pones la URL de tu blog, omitiendo el http:// pondrías por ejemplo miblog.blogspot.com, pensado que usas subdominio.
compartidisimo ahí pones el nombre de usuario de Twittter.
Seguir a @compartidisimo es el texto del botón de twitter.
109627432877953314897 ahí pones el ID de tu página de Google+, o el del perfil. Para conseguir ese número tienes que ir a la página en Google+, y copiar la numeración que aparece en la barra de direcciones de tu navegador.
compartidisimo ahí pones la URI de FeedBurner. Puedes obtenerla accediendo a la página de FeedBurner,y luego haces click en el icono de RSS que está a un lado del nombre de tu blog, luego se abrirá una ventana con tus feeds. El nombre de la URI es el texto que aparece después de la barrita diagonal "/" en la barra de direcciones.
Compartidísimo directamente a tu e-mail ese es el texto que aparece antes del campo para que ingresen el e-mail para la suscripción del blog.
compartidisimo otra vez pones la URI de FeedBurner.
O suscríbete por otras vías: este es el texto que esta antes del icono de RSS.
compartidisimo ahí va de nuevo la URI de FeedBurner.

¡Y listo!, ya habrás agregado una cajita con todos los elementos para que sigan y recomienden tu blog ;)

Notas finales:

El código que esta de morado es de los scripts de Twitter y Google+ respectivamente (de arriba hacia abajo) Si ya usas algunos de esos elementos, no vuelvas a agregar el script, y asegúrate que esté colocado hacia abajo después del último botón.
En el caso de la sección de facebook, no vayas a disminuir el alto en el código (si usas el mismo ancho) , ya que hasta ahora, se muestran distintas leyendas si has o no ingresado a tu cuenta de Facebook.

Ah!, a propósito de facebook, hace mucho que quité el botón para que hagas me gusta al blog, agradezco a quienes compartieron el enlace sin que yo tuviese el botón. Todos los me gusta se perdieron al hacer el cambio de dominio, así que si te gusta el blog, no olvides compartirlo en Facebook haciendo "Me gusta" ;)

¿Quieres ver la cajita en acción?, entonces echa un vistazo a la demostración.

Demostración

Importante: Si vas agregar la insignia usando el perfil, y no una página de Google+, necesitarás cambiar el alto del espacio reservado para la insignia, (ya que ahí no se muestran los avatares, y por lo tanto, ésta es menos alta). Lo haces en esta parte del CSS (del paso 1)

li.cg-plus{
height:108px;
...

Cambia 108px, por 52px. Ten cuidado de no borrar el punto y coma al final.

Enlaces de las páginas de las distintas redes sociales, con los botones oficiales
Botón de Seguir de Twitter
Botón de Me gusta de Facebook
Insignia de Google+

8 Tutoriales +1 para mejorar/personalizar las entradas de tu blog que no te puedes perder

noreply@blogger.com (Karla Castañeda) — Tue, 29 Jan 2013 12:00:00 +0000

Gracias a la dedicación y al trabajo de diferentes blogueros que les apasiona todo lo relacionado a Blogger, podemos encontrar a nuestra disposición una gran cantidad de tutoriales que nos permiten personalizar el diseño del blog así como optimizarlo. A continuación una recopilación de interesantes y útiles tutoriales que te permitirán personalizar o mejorar las entradas de tu blog ;)

Sumarios automáticos sin javascript para Blogger. Una entrada interesante que nos comparte +Oloman Oloman, con la cual podrás crear resúmenes automáticos para tus entradas sin usar Javacript, lo cual puede repercutir positivamente en la carga de tu blog.
Resúmenes tipo Mosaico Un artículo interesante de +Jorge Vilá, que te permitirá crear resúmenes en las entradas tipo mosaico (al estilo Pinterest).
Mostrar el primer post de forma diferente. Personaliza la primer entrada de tu blog, para que ésta se vea diferente al resto de tus entradas, con la ayuda de este sencillo tutorial que nos comparten desde +Ciudad Blogger.
Entradas relacionadas en las entradas con imagen miniatura, de +Ayuda Bloggers, donde conseguirás agregar una sección de entradas relacionadas con imagen miniatura en tus entradas, lo cual puede tener un impacto positivo el tráfico de tu blog.
Personalizar las entradas de Blogger según las etiquetas. Una entrada de +Emilio Cobos Álvarez, donde comparte una técnica que te permitirá darle la apariencia que desees a tus entradas, tomando en cuenta las etiquetas.
Información del autor en las entradas. Otra entrada interesante de +Julia Yuste, que permitirá darle un toque más personal a tu contenido, mostrando información relevante del autor (es) de la entrada al final de ésta.
Comentarios anidados personalizados para Blogger.Una excelente alternativa al sistema de comentarios anidados recientemente implementado por Blogger. Dicha alternativa fue desarrollada por +Felipe Calvo, conocido como NicoNico, colaborador principal del foro de ayuda de Blogger, con la cual podrás habilitar comentarios anidados en tus entradas, y en donde el contenido de éstos es generado por el propio servidor de Blogger, permitiendo así una carga más rápida tanto de los comentarios como de la página del blog.
10 consejos SEO para optimizar las entradas de Blogger. Entrada que nos comparte +Jesús González, que no precisamente tiene que ver con códigos como en las anteriores, aunque resultará muy útil para todos aquellos interesados en mejorar el SEO desde las entradas del blog.

+1. Ofrecer suscripción desde las entradas del blog. Captura a una mayor audiencia ofreciendo suscripción desde las entradas de tu blog. Aquí en +Compartidísimo te decimos cómo lograrlo paso a paso ;)

Sin duda estos tutoriales te permitirán agregarle atractivo a tus entradas, mejorarlas en varios aspectos, u optimizarlas, pero recuerda que lo más importante de todo es el contenido mismo que tu aportas en tus entradas, eso no puedo ser compensado o sustituido por nada ;)

Conoce los límites de tu cuenta Blogger. Infografía

noreply@blogger.com (Karla Castañeda) — Mon, 14 Jan 2013 23:33:00 +0000

Es muy común que al abrir una cuenta en algún servicio, no nos enteremos por completo de los límites de la cuenta, ya sea porque no prestamos atención a ese punto, o porque simplemente lo dejamos al olvido.

Como usuarios de Blogger, es importante estar enterado de todas las condiciones que impone Google en sus servicios, mismos que incluye Blogger, y también conocer los límites de la cuenta, con el fin de evitar sorpresas y tener un mayor control sobre lo que hacemos o no.

En la siguiente infografía, podrás ver cuáles son los límites de la cuenta de Blogger, y ya conociéndolos podrás tomar mejores decisiones con respecto a tu cuenta ;)

Haz click para ampliar.

Fuente: Soporte de Google

Actualización: Ha habido un cambio en el límite de almacenamiento de imágenes cuando las compartes con la web Picasa (al subir las imágenes a tu blog desde una carpeta de tu computadora o directamente a Picasa, Google+) , ahora es de ¡5GB!. Gracias a Ana por pasarnos el dato. Según entiendo, ésto obedece a la consolidacion de Picasa y Drive anunciada desde el blog oficial de Google. Puedes verificar ésta cifra, yendo a Picasa, y ver al fondo de la página o bien en la edición de HTML de la entrada al subir una imagen.

Cerrar Comentarios Automáticamente y Personalizar el Mensaje que Aparece al Cerrarlos

noreply@blogger.com (Karla Castañeda) — Tue, 08 Jan 2013 03:57:00 +0000

En panel de edición de entradas de Blogger, desde las opciones de configuración, podemos gestionar los comentarios del lector. Esto por supuesto nos da la libertad de decidir qué hacer con los comentarios de determinado post, y hacer cambios fácilmente solo configurándolo.

En mi caso, he optado por cerrar los comentarios en algunos posts, mostrando los existentes, cuando considero que ya son demasiados comentarios y ésto obstacularizaría que otros usuarios los leyeran y encontraran algo de provecho. Recordemos que de los comentarios también se aprende y muchas de las dudas o inquietudes que tengamos al leer un post se resuelven desde ahí. Claro que ese es mi punto de vista, habrá quienes prefieran tenerlos abiertos por los siglos de los siglos amén...

Si has pensado en cerrar los comentarios de algunos posts, mostrando los existentes, y a su vez, verte cortés con quienes por ejemplo, quisieran darte alguna opinión, o resolver alguna duda, la opción más adecuada, creo, es personalizar el mensaje que aparece al cerrarlo y agregar algún enlace para que puedan contactarte.

Por defecto, al cerrar los comentarios de algún post mostrando los existentes, el mensaje que aparecerá en lugar del formulario de comentarios es el siguiente:

Los comentarios nuevos no están permitidos.

Podemos cambiar dicho mensaje, y agregar ahí mismo cualquier otra cosa, como un enlace a una página del blog con un formulario de contacto.

Esto, lo podemos hacer desde la edición HTML de la plantilla, aunque el proceso es simple, veamos cómo hacerlo...

Personalizar el mensaje que aparece al cerrar los comentarios al usar la opción: No permitir, mostrar los existentes

Ve a la edición de HTML de la plantilla, activa la casilla de "Expandir plantillas de artilugios", y con la ayuda de Ctrl + F encuentra la siguiente linea <data:post.noNewCommentsText/> que se encuentra en esta parte del código:

<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
Una vez localizada toda esa parte, cambias la linea resaltada de rojo por el siguiente código, editando el texto que viene resaltado de verde. También vienen la opción para que puedas agregar la dirección web (URL) de una página estática donde pondrás el formulario de contacto, y el texto que aparecerá al poner el puntero del ratón encima del enlace (resaltado de azul):

<div class='c-personal'> Lo siento, los comentarios han sido cerrados. Si tienes alguna duda o pregunta, puedes ponerte en <a href='URL de la página con el formulario de contacto' title='El texto del tooltip'>contacto conmigo</a>. Gracias.</div>
Claro que este es un ejemplo, puedes omitir el enlace a la página con el formulario de contacto, etc.
Luego, verificas en vista previa y si todo luce bien guarda los cambios.
Finalmente, para manipular la apariencia que tendrá el mensaje, puedes agregar un poco de CSS, y lo agregas yendo a Plantilla > Personalizar > Avanzado > Añadir CSS:

.c-personal{
display:block;
width:90%;
margin:-15px 0 0 15px; /*margen de arriba, derecha, abajo, izquierda*/
padding:6px 15px;
font-size: 14px; /* Tamaño de la fuente*/
background: #eef2f2; /*Color de fondo*/
border: 1px solid #CEDADC; /*Color del borde*/}

aparecerá en los posts donde hayas cerrado los comentarios,

Lo siento, los comentarios han sido cerrados. Si tienes alguna duda o pregunta sobre este artículo, puedes ponerte en contacto conmigo. Gracias.

Muy mono, hemos cambiado el mensaje que aparecerá al cerrar los comentarios, cuando los hemos cerrado desde las opciones de configuración de las entradas, aunque tenemos que estar revisando los posts para saber si se ha superado un número "x" para cerrarlos, es decir, tenemos que cerrarlos uno por uno...

Pero...¡podemos hacer las cosas más prácticas y "cerrarlos automáticamente, al llegar a "x" número de comentarios y además mostrar un mensaje personalizado"!. Veamos como hacerlo:

Cerrar los comentarios de forma automática, al llegar a "x" número de comentarios y mostrar mensaje personalizado

En este caso personalizaremos el mensaje que aparece al cerrar los comentarios usando el mismo ejemplo, sólo que ahora haremos que los comentarios se cierren automáticamente al llegar a determinado número de comentarios, o bien al haberse superado la misma cantidad, en posts previos a los cambios que haremos.

Primero, vamos a la edición de HTML de la plantilla, expandimos plantillas de artilugios, y buscamos esta parte de código:

<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>

Luego, cambias el código por éste, en donde editarás el texto del mensaje, y los datos que vienen resaltados de colores distintos :

<p class='comment-footer'> <b:if cond='data:post.allowNewComments'><b:include data='post' name='threaded-comment-form'/> </b:if> <b:if cond='data:post.numComments > 49'> <div class='c-personal'> Lo siento, los comentarios han sido cerrados. Si tienes alguna duda o pregunta sobre este artículo, puedes ponerte en <a href='URL de la pagina con el formulario' title=''>contacto conmigo.</a> Gracias.</div><style type='text/css'>.continue{display:none}.comment-form p {display: none !important;}#comment-editor{display:none !important;} </style> </b:if> </p>

Habiendo hecho los cambios, verificas en vista previa y si todo luce bien, guarda los cambios.
Finalmente, puedes manipular la apariencia del mensaje con CSS, que puedes agregar desde el Diseñador de plantillas en la opción Añadir CSS:

.c-personal{
display:block;
width:90%;
margin:-15px 0 0 15px; /*margen de arriba, derecha, abajo, izquierda*/
padding:6px 15px;
font-size: 14px; /* Tamaño de la fuente*/
background: #eef2f2; /*Color de fondo*/
border: 1px solid #CEDADC; /*Color del borde*/}

¡Y listo!, Se mostrarán los comentarios existentes, y no se permitirán comentarios nuevos al superarse el número de comentarios máximo que tu has decidido y además se mostrará un mensaje personalizado ;)

Agregar el Gadget de Seguidores de Google+ sin actualizar tu perfil

noreply@blogger.com (Karla Castañeda) — Fri, 04 Jan 2013 21:58:00 +0000

Recientemente Blogger añadió el gadget de Seguidores de Google+ para que puedas agregar a tu blog fácilmente. Como todos los gadgets disponibles en Blogger, para agregarlo a tu blog, solo necesitas seleccionarlo de la lista de gadgtes que aparece al añadir un gadget desde Diseño, aunque éste aparecerá solo si has actualizado tu perfil de Blogger al de Google+, mostrando los seguidores de tu perfil o página en Google+, según lo tengas configurado.

Si no has actualizado tu perfil de Blogger al de Google+, y agregas el gadget de seguidores de Google+, éste no aparecerá, ya que este elemento obtiene los datos que tengas configurados a través de la pestaña "Google+". Recuerda que desde ahí asocias tu blog con tu cuenta de Google+.

Pues bien, podemos mostrar el gadget de seguidores de Google+ aún si no hemos actualizado el perfil de Blogger por el de Google+, usando su código y añadiéndolo a un gadget con la opción de HTML/Javascript. Simplemente editamos un poco el código del gadget para que podamos poner los datos que se necesitan desde ahí.

Cómo agregar el gadget de seguidores de Google+ habiendo o no actualizado el perfil de Blogger al de Google+

Copia el siguiente código y edita lo que está resaltado de rojo, considerando que en:
- data-height="300" definirás la altura. Edita el valor de 300 por el valor que desees.
- data-width="320" definirás el ancho. Edita el valor de 320 por el valor que desees.
- En: https://plus.google.com/109627432877953314897 cambia el número del ID resaltado de rojo por el ID de tu página en Google+ o el del perfil en cuestión*.
- En donde dice "Seguidores en Google" pones el texto del título que tendrá en gadget.
Código

<h2>Segidores en Google</h2>

<div class="g-plus" data-action="followers" data-height="300" data-source="blogger:blog:followers" data-href="https://plus.google.com/109627432877953314897" data-width="320">

</div>

<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: Para obtener el ID de la página de Google o del perfil, necesitas ir a la página de éste en Google+, y copiar la numeración que aparece en la barra de direcciones:
Desde el panel de Blogger, haz click en la pestaña "Diseño", y añade un gadget con la opción HTML/Javascript, poniendo el código anterior ya editado.
Guarda los cambios en Guardar disposición.

Y listo, ya habrás agregado el gadget de seguidores de Google+.

Notas importantes

El script de este gadget es el mismo que usa el botón +1 y la insignia de Google+ (cuando se usa la opción de código asíncrono y sintaxis HTML5 válida), si ya usas en tu blog alguno de ellos, entonces pon el script (resaltado de azul) después del último de los elementos que coloques de arriba hacia abajo de tu blog. Si por ejemplo ya tuvieras colocado el botón de +1 y pusiste el script de éste antes del cierre de la etiqueta body: </body>, deja el script ahí y no lo vuelvas a poner en el gadget.

Espero sea útil.

Formulario de Contacto para tu Blog Ilimitado

noreply@blogger.com (Karla Castañeda) — Mon, 31 Dec 2012 03:42:00 +0000

Existen varios sitios que ofrecen el servicio de envío de formularios, con los que puedes crear un formulario de contacto para que puedas añadir a tu página y permitir que cualquier usuario te contacte. Dos de ellos son: emailmeform, y jotform. Ambos servicios cuentan con excelentes características que te permitirán crear un formulario de contacto fácilmente, aunque las cuentas gratuitas tienen varias limitaciones, entre ellas, un límite de entregas mensual. Esto se soluciona si se actualiza la cuenta gratuita a una premium, aunque los precios de éstas oscilan entre 9.99 y 49.99 dólares mensuales.

Para quienes buscan alternativas más económicas, está allforms, otro servicio que me parece interesante, con el que puedes crear formularios, entre ellos, uno de contacto. Por supuesto también puedes obtener una cuenta gratuita.

Entre las características de la cuenta gratuita podemos destacar las siguientes:

Sin publicidad. No colocan ningún tipo de publicidad en los formularios.
Ilimitado. No hay un límite en el número de preguntas en los formularios, o en el número de entregas. Ofrecen soporte para todos los tipos de campos en los formularios definidos en HTML.
Protección contra SPAM. Utilizan técnicas para evitar la recepción de contenido indeseado (opcional desde la configuración).
Creador de formularios sencillo, en inglés aunque es intuitivo.
Respuesta automática personalizada. Esto permitirá que los usuarios que te contactaron reciban un correo con una repuesta automática. (opcional desde la configuración).
Bloqueo de dirección IP. Esto resulta bastante útil, cuando algún juguetón(a) esté enviando correos masivos (Spam). (la dirección IP la recibes en el correo con el mensaje que te enviaron).

Cuenta Plus

Si buscas características avanzadas, como la recepción de los datos en varios correos electrónicos, almacenamiento de datos en la cuenta con un duración de 365 días del año, etc, es posible conseguirlo si actualizas tu cuenta a una "Plus" o de pago, y el costo es de sólo 10 dólares anuales, cantidad que pudiera considerarse como una donación para darle soporte al servicio que nos están ofreciendo. Así que si te gusta el servicio, lo encuentras útil y puedes hacer un pago, no dudes en hacerlo ;)

Cómo crear el formulario de contacto en allforms

Ve a la página de allforms, y abre una cuenta accediendo desde la pestaña "Register", y seleccionas "Free Account" para cuenta gratuita, o "Plus Account" para la de pago (10.72 dolares al año).
Ingresa a tu cuenta (en Login) y desde el panel haz click en la pestaña "Create" seleccionando la opción de "Form". Después haces click en continuar para acceder al creador del formato.
Hecho lo anterior, habrás accedido al creador de formularios y verás todas las opciones para crear tu formulario.

Si observas parece sencillo, lo único que puede parecer complicado, es que las opciones aparecen en inglés, aunque no es para asustarse.

Veamos los puntos básicos:
- Cambiar el nombre del formulario: A tu izquierda con fondo azul, aparecen tres opciones. La primera es un campo donde colocas el nombre del formulario (Sample Form).
- Cambiar el texto para las preguntas requeridas de forma obligatoria. Debajo de la opción anterior, desde el campo, cambias el texto que indica que las preguntas que lleven asterisco son obligatorias. Dice: Questions marked by * are required. Puedes cambiar el texto desde ahí y poner por ejemplo: *Respuestas requeridas.
- Agregar preguntas. Por defecto el formulario empieza con tres preguntas, puedes agregar todas las que quieras desde el botón que dice: "Add a Question". O Puedes borrarlas en delete (debajo de la pregunta) para empezar desde cero.
- Cambiar el texto de las preguntas. Si vas a empezar a crear tu formulario usando las tres preguntas que ya vienen por defecto (Name, Email y Message) puedes cambiar el texto si haces click en "change" debajo de cada pregunta, luego se abrirá una ventanita o recuadro donde podrás teclear el texto que quieres que aparezca. También puedes moverlas de posición en move, o borrarlas en delete.
Otras opciones. Debajo de las opciones anteriores, verás varias secciones con más opciones que te permitirán configurar tu formulario, veamos de forma breve una por una:
- Required questions. Ahí seleccionas las preguntas que serán requeridas u obligatorias, activando la casilla correspondiente.
- E-mail Address. En esta opción seleccionas la dirección de correo electrónico de quienes recibirán los formularios enviados.
- E-mail Subjet. Ahí tecleas el texto que aparecerá como "Asunto" en el email que recibas cuando alguien envíe un formulario. Esto puede ser útil si quieres identificar fácilmente desde tu correo, los mensajes enviados desde cierto blog o página.
- E-mail Format. Desde esa opción, seleccionas si los mensajes recibidos desde el formulario tendrán un formato.
- Custom Succes Page. Ahí tecleas la dirección web (URL) a donde deseas redirigir al usuario una vez enviado el mensaje. Si lo dejas en blanco se mostrará el mensaje de envío exitoso.
- Custom Error Page. En esta opción puedes poner la dirección web (URL) de la página a donde se redigirá al usuario, si se produce algún error en el envío por ejemplo si este no completa un campo requerido.
- Enable Anti-Spam. Si seleccionas "Si" después de completado el formulario el usuario tendrán que llenar un campo con el código de verificación anti-spam. Ahí mismo aparece la opción "Lenguaje" para que el texto de ésta opción aparezca en el lenguaje deseado.
- E-mail Question. Si tienes una pregunta en el formulario que solicite la dirección de correo electrónico o email, tienes que seleccionar en el menú desplegable de ésta opción, dicha pregunta. Esto permitirá que puedas enviar una repuesta automática cada vez que alguien envíe un formulario (siguiente opción).
- Thank you E-mail. En esta opción personalizas el mensaje del correo con la respuesta automática que recibirá un usuario al enviarte un formulario. Debes tener seleccionada la pregunta donde solicitas el correo electrónico en el formulario, usando la opción anterior, de otro modo no funcionará.
Una vez configuradas todas las opciones, guardas los cambios en Save y desde la página podrás copiar el código HTML para que puedas incrustar el formulario, poniendo el código en cualquier sección de tu blog, usando la opción de HTML/Javascript al agregar un gadget, o en una página estática. También te facilitarán el HTML de un enlace al formulario que creaste, y además la opción a una página con el formulario usando protocolo HTTPS, para que la transferencia de datos sea segura.

¡Y listo!, ya habrás terminado tu formulario, para que puedan contactarte desde tu blog ;)

Nota: Esta es una guía que pretende hacerte sencilla la creación de tu formulario de contacto. Si tienes algún problema al usar el servicio o alguna pregunta con respecto al servicio, favor de contactar directamente al proveedor de dicho servicio.

Agregar Elementos en los Posts con determinada Etiqueta

noreply@blogger.com (Karla Castañeda) — Sat, 29 Dec 2012 00:27:00 +0000

Hace tiempo, te decía cómo agregar una cajita de suscripción debajo de los posts, para que los usuarios de tu blog puedan suscribirse desde las entradas del blog.

En ese mismo post, me comentaba un usuario, que quería agregar dicha caja sólo en determinadas entradas del blog. Esto lo podemos conseguir valiéndonos de las etiquetas de los posts. En otras palabras, podemos agregar la cajita, o cualquier cosa que queramos en los posts tomando en cuenta las etiquetas.

Cómo hacerlo paso a paso

Ejemplo. Vamos a pensar que quieres que aparezca dicha cajita sólo en las entradas con la etiqueta "Delicioso". En este caso, como en el tutorial que menciono, colocaremos la cajita debajo de los posts, como último elemento. Tomando en cuenta éste ejemplo, veamos como lograrlo...

Lo primero que haremos es agregar el CSS de la cajita. Si es otro elemento el que vas a agregar, entonces deberás agregar el CSS del elemento en "Añadir CSS" del diseñador de plantillas.
Luego vas a la edición de HTML de la plantilla, localizas el siguiente div que está resaltado de rojo.

<div class='post-footer-line post-footer-line-3'>
Aquí dentro muy probablemente habrá otro código (ver el Paso 3 de la entrada mencionada)
</div>
Inmediatamente después del cierre del div "</div>" agregaremos otro div (<div class='post-footer-line post-footer-line-4'>)conteniendo los códigos necesarios para que aparezca la cajita sólo en la etiqueta "Delicioso". Necesitas editar los códigos antes de pegarlos:

<div class='post-footer-line post-footer-line-4'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:label.name == "Delicioso"'>
Aquí pones el contenido de la cajita o elemento que agregarás
</b:if>
</b:if>
</b:loop>
</div>

Notas importantes del código anterior:
- A diferencia del post que estamos refiriendo con la cajita de suscripción, estamos agregando el contenido a un div (<div class='post-footer-line post-footer-line-4'>)para que de ese modo sea más fácil "mover todo el contenido". Si lo quieres mover, puedes usar CSS, y en éste caso usaremos el margen para lograrlo. Sería algo como esto:
  
  .post-footer-line-4{
  margin: 10px 0 5px -20px; /*los valores se leen: arriba, derecha, abajo, izquierda*/
  }
- En esta linea:
  <b:if cond='data:label.name == "Delicioso"'>
  Tenemos que poner el nombre de la etiqueta donde va a aparecer la cajita o el elemento que vas a agregar, en lugar de la etiqueta Delicioso, que estamos usando como ejemplo.
- Con esta linea:
  
  <b:if cond='data:blog.pageType == "item"'>
  Hacemos que la cajita aparezca sólo al estar dentro del post. Ambas lineas, son condicionales de Blogger y llevan su cierre "</b:if>". Si quieres que el elemento se vea desde la página principal, entonces deberás eliminar esa linea y también la de cierre </b:if>, que está casi al final del código (hay dos).
- Y no esta demás decirlo (aunque parezca obvio...) que en en el texto que dice: Aquí pones el contenido de la cajita o elemento que agregarás pones en su lugar el código del elemento, que en este caso es de la cajita, y eliminas todo ese texto de rojo.
Finalmente, verificas en vista previa y si todo luce bien, guarda los cambios.

Hecho todo lo anterior, la cajita aparecerá al final de los posts que tengan la etiqueta "Delicioso" (nuestro ejemplo), sólo al estar dentro de los posts.

Demostración

Puedes ver esto en acción desde éste blog, ingresando a la entrada con la etiqueta "Delicioso", ahí verás la cajita, mientras que en los otros posts no aparecerá. Recuerda que debes entrar al post para verlo.

Otros posts que pueden ser útiles:

Agregar CSS desde el diseñador de plantillas.

Personalizar las Listas Numeradas en los Posts + 3 Ejemplos

noreply@blogger.com (Karla Castañeda) — Fri, 28 Dec 2012 07:30:00 +0000

Desde el panel de edición de entradas de Blogger, es posible crear listas numeradas usando la herramienta "Lista numerada".

Una lista numerada se consigue gracias al código HTML de una "lista ordenada". Tú no tienes que preocuparte por agregar el código HTML, ya que el editor lo hace por ti al usar dicha herramienta. Si vas a la edición de HTML de la entrada, verás que la lista que creaste aparece de éste modo:

<ol>
<li>El contenido del 1er. elemento</li>
<li>El contenido del 2do. elemento</li>
<li>El contenido del 3er. elemento</li>
<li>El contenido del 4to. elemento</li>
etc...
</ol>

Esta herramienta, va numerando de forma automática cada elemento de la lista llevando un "orden", de ahí se deriva el nombre de "listas ordenadas en HTML". En cada elemento se va generando un número de forma sucesiva (de 1 en adelante), aunque tú no lo puedas ver en el código HTML.

Usos de las listas ordenadas en los posts

Crear listas numeradas, es muy conveniente para numerar cualquier tipo de instrucciones. Es ideal para blogs de cocina donde se numeran los pasos a seguir en una receta, o bien, en aquellos blogs que comparten tutoriales, aunque puede usarse en cualquier blog que necesite numerar cualquier cosa.

Por defecto, al usar ésta herramienta, los elementos numerados se verán así:

Sin embargo, podemos personalizar los elementos de la lista, con CSS. Para conseguirlo, nos apoyaremos de éste interesante tutorial de 456 Berea ST, que explica una técnica en donde usando algunas propiedades claves de CSS, lograremos personalizar tanto los números de cada elemento de la lista, como el contenido de cada elemento.

El truco básicamente consiste en anular la numeración por defecto con: "list-style:none", y luego, usar propiedades de numeración automática:"counter-reset" y "counter-increment". Luego con la propiedad "content" se agrega el índice del contador que se crea usando las dos anteriores propiedades.

Ejemplos

Estos son tres ejemplos que he preparado para que puedas usar en tu blog para personalizar las listas numeradas y si alguna te gusta, sólo bastará con copiar el código CSS y pegarlo yendo a Plantilla > Personalizar > Avanzado > Añadir CSS. Por supuesto puedes personalizar los colores de fondos, bordes, etc.

Estilo 1.

CSS

.post-outer ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{ /*Estilos de cada elemento*/
position:relative;
margin:0 0 20px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style: decimal;
border:1px solid #e2e3e2; /*Color de borde*/
background:#f2f2f2; /*Color de fondo*/
text-indent:10px;
}
.post ol li:before{ /*Los estilos del Número*/
content:counter(li);
counter-increment:li;
position:absolute;
top:-5px;
left:-5px;
font-family:'Oswald', serif;
font-size:14px;
width:12px;
margin:0 0 10px 0;
padding:4px !important;
color:#727272; /*Color de texto*/
text-align:left;
background:#e2e2e2; /*Color de fondo*/
text-indent:2px
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:14px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #aeaeae; /*color del triangulito*/
}

Estilo 2.

CSS

.post-outer ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style: decimal;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-8px;
left:-39px;
font-family:'Oswald', serif;
font-size:40px; /*tamaño de la fuente*/
width:34px;
margin:0 0 10px 0;
padding:4px !important;
color:#727272;
text-align:center;
}

Estilo 3.

CSS

.post ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 13px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style:decimal;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:0;
left:-2em;
width:27px;
margin-right:8px;
padding:3px 1px 4px 0 !important;
color:#fff; /*color de la fuente*/
font-size:16px;
background:url(http://3.bp.blogspot.com/-lRC74Dd1TeY/UN0K6VxVDyI/AAAAAAAALWY/t-qa8e96poY/s1600/pasos-2.png) no-repeat left top;
font-weight:bold;
text-align:center
}

En este último ejemplo, decidí usar una imagen para el círculo (resaltada de rojo) como fondo del número. Podemos crear el círculo con CSS, pero éste se verá cuadrado en Internet Explorer 8, versión que aún no es tan vieja.

De cualquier modo, aquí te dejo otras imágenes de círculos con otros colores que puedes usar si quieres.

Nota: He resaltado de rojo los valores que pudieras editar en el CSS de los tres ejemplos, y agregado comentarios resaltándolos de /*verde*/, para que puedas saber de qué se trata cada cosa, al terminar, puedes eliminarlo para no hacer más extenso el código de tu plantilla.

Compatibilidad:
Esto funcionará en todos los navegadores incluyendo IE8, en el caso de Internet Explorer 7, no se verán los estilos del número ya que no soporta los pseudoelementos :before o :after. Sin embargo, agregué una linea en el CSS específica para ese navegador, que hará que aparezca la numeración por defecto de la lista ordenada.

Espero sea útil ;)

Menú de Navegación con Pestañas estilo Google Play con el Gadget de Etiquetas

noreply@blogger.com (Karla Castañeda) — Fri, 28 Dec 2012 06:31:00 +0000

En Front-end-depelopment, veía un excelente tutorial que explica cómo crear una sección con pestañas estilo Google Play, y pensé que sería interesante hacer un menú de navegación aplicando dicho estilo, usando el gadget de las etiquetas. Este menú permitirá navegar entre las páginas de etiquetas y destacar siempre el enlace seleccionado si cambiamos un poco el código del gadget.

Lo que haremos

Vamos a agregar el enlace de la página principal al gadget de las etiquetas (Inicio).
Cambiaremos el código del gadget para destacar el enlace seleccionado, ya sea el de la página principal o los de las páginas de etiquetas, sin usar Javascript.
Con el CSS del tutorial mencionado, le daremos a los enlaces del gadget de las etiquetas la apariencia de pestañas al estilo Google Play.

Demostración

Ventajas

Una vez hechos todos los cambios, no necesitarás editar/agregar ningún código HTML para añadir enlaces.
El enlace seleccionado siempre destacará, independientemente de que se navegue entre las páginas de etiquetas (recuerda que la URL de éstas páginas cambia de forma dinámica). Puedes comprobar ésto desde mi blog, al navegar entre las páginas de etiquetas desde el gadget de etiquetas (Categorías).
Podrás seleccionar cuáles etiquetas mostrar en el menú, editando ésto desde las opciones de configuración del gadget.

Bueno, vayamos al grano y veamos cómo crear el susodicho menú, y aunque no luce mucho ahí en la demostración, ya que está debajo de la demo del menú con iconos usando el gadget de lista de enlaces, puedes ver su funcionamiento.

Importante: Antes de empezar a personalizar el gadget de las etiquetas, es necesario habilitar una sección en la cabecera, para poner ahí el gadget de las etiquetas, ya que la sección que está debajo de la cabecera llamada crosscol, está diseñada pensando en el menú de navegación que traen consigo las plantillas nuevas de Blogger, y el CSS que ya tienen estropeará el resultado. Otra opción seria quitar dicho CSS.

En este caso lo que haremos, es habilitar otra sección y para ello vas a la edición de HTML de la plantilla, y buscas esta linea de código:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Luego, cambias "1" por "3", y "no" por "yes". Puse 3, para que se vea el area punteada en la sección, y puedas identificarla más fácilmente cuando estés en la sección de Diseño.

Cómo crear el Menú paso a paso

Una vez habilitada una nueva sección en la cabecera, necesitamos agregar el gadget de etiquetas, desde "Diseño". Puedes arrastrarlo hasta ahí si ya lo tienes en la columna lateral o bien, agregarlo en "Añadir gadget". Tienes que configurarlo del siguiente modo: en "Editar" selecciona las etiquetas que quieres mostrar. En mostrar, selecciona la opción de "Lista" y no actives la casilla de "Mostrar cantidad de entradas por etiqueta".

Luego, agregas el CSS yendo a Plantilla > Personalizar > Avanzado > Añadir CSS

#Label1 h2{display:none}

#Label1 ul {
overflow:hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 2px solid #3D3D3D;
}
#Label1 li {
float: left;
margin: 0 -15px -3px 0;
}
#Label1 li a {
float: left;
position: relative;
padding: 0 10px 0 14px;
height: 0;
line-height: 32px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
border-right: 30px solid transparent;
border-bottom: 30px solid #3D3D3D;
border-bottom-color: #777\9;
opacity: .3;
filter: alpha(opacity=30);
}
#Label1 li a:hover,
#Label1 li a:focus {
border-bottom-color: #2ac7e1;
opacity: 1;
filter: alpha(opacity=100);
}
#Label1 li a:focus {
outline: 0;
}
#Label1 li a.seleccionado {
z-index: 3;
border-bottom-color: #3d3d3d;
opacity: 1;
filter: alpha(opacity=100);
}

Nota: Las pestañas por defecto tienen transparencia, asi que puedes usar un fondo interesante y mejorar la presentación.
Después, vas a la edición de HTML de la la plantilla, expandes plantillas de artilugios y buscas el código del gadget de las etiquetas mismo que podrás identificar si lo buscas usando el título que le pusiste con la ayuda de Ctrl + F. Lo que nos interesa es esta parte:

<b:if cond='data:display == "list"'> <ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
En el código anterior, identifica las lineas que resalté de negrita y con fondo azul, y las cambias por éstas:

<b:if cond='data:display == "list"'>
<ul>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<li><a class='seleccionado' expr:href='data:blog.homepageUrl'>Inicio</a></li>
<b:else/>
<li><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
</b:if>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:label.name == data:blog.searchLabel'><a class='seleccionado' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
Con el código anterior, estamos agregando un enlace a la página principal (Inicio) y con una condicional de Blogger, destacamos dicho enlace cuando estemos en la página principal. Estamos agregando una clase que identificará al enlace seleccionado. Además, estamos cambiando la condicional en las páginas de etiquetas para que no se pierdan las propiedades declaradas en el CSS de la clase agregada para el enlace seleccionado. Puedes cambiar el texto "Inicio" de la página principal, por el que quieras.
Por último, verificas en vista previa que todo luzca bien, y si es así, guarda los cambios en Guardar plantilla.

Y ¡listo!, ya tienes un menú de navegación con pestañas usando el gadget de las etiquetas, al estilo Google Play ;D

Recomendaciones:
Se recomienda éste menú para blogs que usen algún tipo de resumen en las entradas, de ese modo será mas rápido navegar entre las páginas de etiquetas. O bien, personalizar las páginas de etiquetas para que éstas muestren algún tipo de resumen.

Compatibilidad
Este menú funciona en todos los navegadores incluyendo la antigua versión de Internet Explorer: IE7 (Internet Explorer 7).

Notas adicionales

Si lo prefieres, puedes agregar el menú arriba de las entradas, y para ello deberás arrastrar el gadget y ponerlo arriba de la sección de las entradas del blog, en tal caso, no será necesario habilitar una sección adicional en la cabecera, como se mencionaba al principio.
Si es el segundo gadget de etiquetas que usas, deberás cambiar #Label1 por #Label2 en el CSS (paso 2).

Espero que sea útil, y sigamos disfrutando de las fiestas ;)

Nueva función en el editor de entradas: Menciones de usuarios de Google+ en Blogger

noreply@blogger.com (Karla Castañeda) — Thu, 20 Dec 2012 21:53:00 +0000

En los últimos meses, hemos visto como Blogger se ha estado integrando a Google+, añadiendo nuevas características al panel, y nuevos gadgets que permiten estrechar lazos de nuestro blog, con esta red social.

Si eres usuario de Google+, seguramente sabrás que al compartir tus novedades, puedes hacer menciones de usuarios que también usan el servicio. Pues ahora tenemos la novedad, que desde el panel de edición de entradas de Blogger, podrás hacer menciones de otros usuarios de Google+.

Cómo hacer menciones de otros usuarios de Google+ desde el editor de entradas de Blogger

Para poder usar esta nueva función, necesitas actualizar tu perfil de Blogger al de Google+.

Una vez actualizado tu perfil, podrás hacer menciones a cualquier usuario de dicho servicio, te siga o no, y para ello, sólo deberás escribir + o @ seguido del nombre o la página en Google+. Conforme vayas escribiendo, se desplegará una lista de nombres y podrás auto-completarlo, si lo seleccionas desde la lista, con un solo click.

Una vez que publiques la entrada con la mención, el nombre del usuario que mencionaste aparecerá como un enlace que dirigirá a la página en Google+ del usuario, y también, al poner el puntero del ratón sobre éste aparecerá un recuadro con los datos del perfil, el enlace que conduce a su página y la capacidad para que pueda agregarse a un círculo, como puede verse en la siguiente imagen:

Puedes comprobar el resultado desde ésta mención que hice a mi página +Compartidísimo. También, si has configurado la opción para compartir tus entradas a la página de tu perfil o tu página en Google+, (desde la pestaña de Google+ del panel de Blogger), aparecerá de forma automática el nombre del usuario mencionado en el cuadro de compartir.

Hacer menciones de usuarios en Google+ sin actualizar el perfil de Blogger

Si eres de los que se resiste a actualizar tu perfil de Blogger al de Google+, ya sea porque le tienes mucho cariño a tu perfil de Blogger, o bien, no quieres usar el perfil público de Google+, también puedes hacer menciones a otros usuarios de Google+, aunque no será tan fácil y rápido como cuando has actualizado tu perfil de Blogger al de Google+.

Para ello, deberás crear un enlace a la página del usuario en Google+ con la herramienta "Enlace" del panel de edición de entradas, y luego, ir a la edición de HTML de la entrada, y agregar la clase: "g-profile" , como puede verse en el siguiente ejemplo, mismo que es de mi página +Compartidísimo en Google+.

El HTML del enlace de la página entonces lucirá así:

<a class="g-profile" href="http://plus.google.com/109627432877953314897">+Compartidísimo</a>

Esa parte que está resaltada de rojo con la clase mencionada, habrá que agregar para que al poner el puntero del ratón sobre el enlace, aparezca de forma dinámica el recuadro con los datos del usuario y la capacidad para que pueda agregarse a un círculo.

Conclusiones
Hacer menciones de otros usuarios de Google+, puede llegar a crear vínculos estrechos con otros usuarios del servicio, ya que harás saber a un usuario que ha sido referido en tu entrada. También, puede ser muy bueno cuando se quiere dar una mano a otros compañeros o colegas, ya que estás ayudando a promover su perfil, ¿qué otro beneficio encuentras en las menciones?

+ sobre las menciones de Blogger.

Nuevo Gadget de Seguidores de Google+ en Blogger y cómo empezar a usarlo

noreply@blogger.com (Karla Castañeda) — Wed, 28 Nov 2012 22:30:00 +0000

Ayer agregué al blog el nuevo gadgtet de Seguidores de Google+, mismo que anunciaban oficialmente desde Blogger Buzz, y parece que todo funciona de maravilla. Se reportó un problema con quienes usan las vistas dinámicas, al parecer el gadget no se veía, aunque desde el Blog de los problemas conocidos de Blogger se publicó que esto podía solucionarse si se vaciaba la caché del navegador y se volvía a cargar la página.

El gadget de Seguidores de Google+ le facilitará a los usuarios de tu blog que puedan agregarte a un círculo, y así seguir el contenido que publicas y envías a tu página de Google+, o a tu perfil en Google+, según como lo tengas configurado en tu cuenta de Blogger.

Cómo empezar a usar el gadget de Seguidores de Google+

Una vez que hayas actualizado tu perfil de Blogger al de Google+, puedes empezar a usar el gadget y desde ahí, los usuarios de tu blog podrán agregarte a un círculo, función que ya cumplía el gadget de "Insignia de Blogger" que no hace mucho fue habilitado, con la diferencia de que éste nuevo gadget mostrará la foto del perfil en Google+ de quienes te han agregado, y un enlace que mostrará el resto de tus seguidores desde Google+. Es un gadget similar al de Google Friend Connect o "Seguidores", y puedes usar de forma simultánea con éste, si así lo deseas.

Si eres usuario nuevo de Blogger, y aún no utilizas Google+, no puedes perder la oportunidad de vincular tu cuenta de Blogger a tu perfil de Google+ o mejor aún, crear una página para tu blog y así hacer crecer tu audiencia favoreciendo la promoción de tu blog y establecer vínculos con otros blogueros como tú.

Cómo actualizar mi perfil de Blogger a mi perfil de G+

1. Desde el panel de Blogger, ve a la pestaña de "Google+" y luego actualiza tu perfil de Blogger al de Google haciendo click en "Actualizar a Google+".

Para ello, lo ideal es que ya hayas actualizado tu perfil en Google+, poniendo una foto tuya, y los datos que consideres pertinentes y que quieras mostrar en la web.

2. Luego, aceptas los términos que implica el cambio, mismos que ahí se explican, y actualizas tu perfil en "Cambiar ahora".

El nombre que aparece en la imagen muestra solo un ejemplo.

3. Hecho lo anterior, ya habrás asociado tu blog al perfil de Google+, y tanto el gadget de "Perfil", así como tus entradas y comentarios serán enlazados a tu perfil de Google+. Además, ya puedes empezar a usar el gadget de Seguidores de Google+.

Cómo agregar el gadget de Seguidores de Google+

Es muy simple y lo haces del mismo modo que agregas cualquier otro gadget. Desde la pestaña "Diseño" del panel de Blogger, haces click en agregar un gadget, y eliges la opción de "Seguidores de Google+"

Por el momento, (no se si sea permanente) no hay opciones que configurar en este gadget, así que sólo hay que guardarlo para que se agregue.

Conclusiones
Tal y como lo mencionan desde el blog de los productos de Google en español y en el mismo Blogger Buzz, creo que este gadget le da más relevancia a tus seguidores de Google+, puede hacer crecer más tu audiencia, ya que éste siempre estará visible desde tu blog, ¿tú que piensas?.
Al asociar tu blog con la cuenta de Google+, tendrás múltiples beneficios como la capacidad de poder compartir entradas fácilmente cada vez que publiques, y poder agregar la fotografía de tu perfil en G+, en los resultados de búsqueda de Google, ¿ya lo has hecho?.

Y aprovechando la ocasión, "Muchas gracias por agregarme a un círculo y seguir mi contenido" ;)

+ Información sobre el tema y referencias
Gadget de Seguidores de Google+
Cómo administrar la configuración de Google+ de tu blog

Una Galería de Imágenes con Paginación

noreply@blogger.com (Karla Castañeda) — Tue, 27 Nov 2012 19:42:00 +0000

Hace poco veíamos cómo agregar una galería de imágenes a una página estática del blog. Alguien me comentaba que le gustaría mostrar la galería con paginación, ya que pensaba mostrar muchas imágenes. Eso es posible gracias a jPages, un plugin para jQuery que permite mostrar contenido paginado.

Vamos a usar jPages con el segundo ejemplo que veíamos en el post mencionado. Pensando en que vas a poner la galería en una página estática, te recomiendo ámpliamente ver la explicación del post mencionado para poder ver más detalles.
También vamos a agregar una animación con CSS al cargarse la página con la galería, usando la librería de Animate:css (una libreria fantástica de animaciones con CSS3), que también usan en las demostraciones del plugin y que puede integrarse fácilmente a éste.

Este plugin también puede integrarse con lazy load, de ese modo las imágenes cargarán según el usuario vaya viendo el contenido. Detalles de cómo implementarlo se pueden ver en la página del plugin, de cualquier modo, publicaré otra entrada para explicar cómo implementarlo.

Demostración

Cómo agregar la galería al blog (en una página estática)

1. Primero agregas el CSS de la galería y el CSS para la navegación del plugin, en Añadir CSS del diseñador de plantillas:

/*Galeria */
ul.galeria2{
width:100%;
margin:10px 5px;
padding:0}
ul.galeria2 li{
height:160px; /*el mismo alto que la imagen*/ width:200px; /*el mismo ancho que la imagen*/
display:block;
margin:0 3px 5px 0; /* separación de cada elemento*/
padding:0;
float:left;
list-style:none;
position:relative;
overflow:hidden;}

ul.galeria2 a{
background:none;
margin:0;
padding:0;
color:#fff;
text-align:center;
white-space:nowrap;}
ul.galeria2 li img{ width:200px; /*ancho de la imagen*/ height:160px; /*alto de la imagen*/ margin:0;
padding:0;
border:none;
}
ul.galeria2 span{
width:200px; /*el mismo ancho de la imagen*/
left:1px; /*el mismo ancho que el borde*/ margin:0;
padding:3px 0 3px 0;
background:#000;
bottom:-8px;
left:0px; filter:alpha(opacity=0);
opacity:0;
overflow:hidden;
cursor:pointer; position:absolute;
-webkit-transition:all .25s ease; -moz-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;}
ul.galeria2 a:hover span{ left:0; bottom:0; opacity:.9;filter:alpha(opacity=90)}
ul.galeria2 a span:hover{color:#cec20b} /*color fuente al poner el puntero encima*/
/*Navegacion CSS*/
.holder {
margin: 15px 0;
}
.holder a {
font-size: 12px;
cursor: pointer;
margin: 0 5px;
color: #333;
}
.holder a:hover {
background-color: #222;
color: #fff;
}
.holder a.jp-previous { margin-right: 15px; }
.holder a.jp-next { margin-left: 15px; }
.holder a.jp-current, a.jp-current:hover {
color: #FF4242;
font-weight: bold;
}
.holder a.jp-disabled, a.jp-disabled:hover {
color: #bbb;
}
.holder a.jp-current, a.jp-current:hover,
.holder a.jp-disabled, a.jp-disabled:hover {
cursor: default;
background: none;
}
.holder span { margin: 0 5px; }

Agregar la animación con CSS cuando se carga la galería.

2. Si vas a agregar la animación con CSS de la demostración al cargarse la página, habrá que agregar el CSS de la misma, debajo del CSS anterior.

/*Animate.css - http://daneden.me/animateLICENSED UNDER THE MIT LICENSE (MIT)Copyright (c) 2011 Dan Eden*/ .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s}
.animated.hinge{-webkit-animation-duration:2s; -moz-animation-duration:2s; -ms-animation-duration:2s; -o-animation-duration:2s; animation-duration:2s}
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05)}70%{-webkit-transform:scale(.9)}100%{-webkit-transform:scale(1)}}@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.3)}50%{opacity:1;-moz-transform:scale(1.05)}70%{-moz-transform:scale(.9)}100%{-moz-transform:scale(1)}}@-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(.3)}50%{opacity:1;-o-transform:scale(1.05)}70%{-o-transform:scale(.9)}100%{-o-transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn;}

Nota: El plugin tiene una animación que si funciona en Internet Explorer, que parece como desvanecimiento en las imágenes al cargar cada página, y la puedes ver funcionando en esta página, por lo que, si no usas la animación con CSS3 de la librería, la galería tendrá ese efecto.

3. Luego, vas a la edición de HTML de la plantilla, y agregas jQuery (via Google) antes de </head>, si es que no lo usas en el blog.

<script type="text/javascript">
//<![CDATA[
/**
* jQuery jPages v0.7
* Client side pagination with jQuery
* http://luis-almeida.github.com/jPages
*
* Licensed under the MIT license.
* Copyright 2012 Luís Almeida
* https://github.com/luis-almeida
*/

;(function($,window,document,undefined){var name="jPages",instance=null,defaults={containerID:"",first:false,previous:" previous",next:"next",last:false,links:"numeric",startPage:1,perPage:10,midRange:5,startRange:1,endRange:1,keyBrowse:false,scrollBrowse:false,pause:0,clickStop:false,delay:50,direction:"forward",animation:"",fallback:400,minHeight:true,callback:undefined};function Plugin(element,options){this.options=$.extend({},defaults,options);this._container=$("#"+this.options.containerID);if(!this._container.length)return;this.jQwindow=$(window);this.jQdocument=$(document);this._holder=$(element);this._nav={};this._first=$(this.options.first);this._previous=$(this.options.previous);this._next=$(this.options.next);this._last=$(this.options.last);this._items=this._container.children(":visible");this._itemsShowing=$([]);this._itemsHiding=$([]);this._numPages=Math.ceil(this._items.length/this.options.perPage);this._currentPageNum=this.options.startPage;this._clicked=false;this._cssAnimSupport=this.getCSSAnimationSupport();this.init();}Plugin.prototype={constructor:Plugin,getCSSAnimationSupport:function(){var animation=false,animationstring='animation',keyframeprefix='',domPrefixes='Webkit Moz O ms Khtml'.split(' '),pfx='',elm=this._container.get(0);if(elm.style.animationName)animation=true;if(animation===false){for(var i=0;i<domPrefixes.length;i++){if(elm.style[domPrefixes[i]+'AnimationName']!==undefined){pfx=domPrefixes[i];animationstring=pfx+'Animation';keyframeprefix='-'+pfx.toLowerCase()+'-';animation=true;break;}}}return animation;},init:function(){this.setStyles();this.setNav();this.paginate(this._currentPageNum);this.setMinHeight();},setStyles:function(){var requiredStyles="<style>"+".jp-invisible { visibility: hidden !important; } "+".jp-hidden { display: none !important; }"+"</style>";$(requiredStyles).appendTo("head");if(this._cssAnimSupport&&this.options.animation.length)this._items.addClass("animated jp-hidden");else this._items.hide();},setNav:function(){var navhtml=this.writeNav();this._holder.each(this.bind(function(index,element){var holder=$(element);holder.html(navhtml);this.cacheNavElements(holder,index);this.bindNavHandlers(index);this.disableNavSelection(element);},this));if(this.options.keyBrowse)this.bindNavKeyBrowse();if(this.options.scrollBrowse)this.bindNavScrollBrowse();},writeNav:function(){var i=1,navhtml;navhtml=this.writeBtn("first")+this.writeBtn("previous");for(;i<=this._numPages;i++){if(i===1&&this.options.startRange===0)navhtml+="<span>...</span>";if(i>this.options.startRange&&i<=this._numPages-this.options.endRange)navhtml+="<a href='#' class='jp-hidden'>";else
navhtml+="<a>";switch(this.options.links){case"numeric":navhtml+=i;break;case"blank":break;case"title":var title=this._items.eq(i-1).attr("data-title");navhtml+=title!==undefined?title:"";break;}navhtml+="</a>";if(i===this.options.startRange||i===this._numPages-this.options.endRange)navhtml+="<span>...</span>";}navhtml+=this.writeBtn("next")+this.writeBtn("last")+"</div>";return navhtml;},writeBtn:function(which){return this.options[which]!==false&&!$(this["_"+which]).length?"<a class='jp-"+which+"'>"+this.options[which]+"</a>":"";},cacheNavElements:function(holder,index){this._nav[index]={};this._nav[index].holder=holder;this._nav[index].first=this._first.length?this._first:this._nav[index].holder.find("a.jp-first");this._nav[index].previous=this._previous.length?this._previous:this._nav[index].holder.find("a.jp-previous");this._nav[index].next=this._next.length?this._next:this._nav[index].holder.find("a.jp-next");this._nav[index].last=this._last.length?this._last:this._nav[index].holder.find("a.jp-last");this._nav[index].fstBreak=this._nav[index].holder.find("span:first");this._nav[index].lstBreak=this._nav[index].holder.find("span:last");this._nav[index].pages=this._nav[index].holder.find("a").not(".jp-first, .jp-previous, .jp-next, .jp-last");this._nav[index].permPages=this._nav[index].pages.slice(0,this.options.startRange).add(this._nav[index].pages.slice(this._numPages-this.options.endRange,this._numPages));this._nav[index].pagesShowing=$([]);this._nav[index].currentPage=$([]);},bindNavHandlers:function(index){var nav=this._nav[index];nav.holder.bind("click.jPages",this.bind(function(evt){var newPage=this.getNewPage(nav,$(evt.target));if(this.validNewPage(newPage)){this._clicked=true;this.paginate(newPage);}evt.preventDefault();},this));if(this._first.length){this._first.bind("click.jPages",this.bind(function(){if(this.validNewPage(1)){this._clicked=true;this.paginate(1);}},this));}if(this._previous.length){this._previous.bind("click.jPages",this.bind(function(){var newPage=this._currentPageNum-1;if(this.validNewPage(newPage)){this._clicked=true;this.paginate(newPage);}},this));}if(this._next.length){this._next.bind("click.jPages",this.bind(function(){var newPage=this._currentPageNum+1;if(this.validNewPage(newPage)){this._clicked=true;this.paginate(newPage);}},this));}if(this._last.length){this._last.bind("click.jPages",this.bind(function(){if(this.validNewPage(this._numPages)){this._clicked=true;this.paginate(this._numPages);}},this));}},disableNavSelection:function(element){if(typeof element.onselectstart!="undefined")element.onselectstart=function(){return false;};else if(typeof element.style.MozUserSelect!="undefined")element.style.MozUserSelect="none";else
element.onmousedown=function(){return false;};},bindNavKeyBrowse:function(){this.jQdocument.bind("keydown.jPages",this.bind(function(evt){var target=evt.target.nodeName.toLowerCase();if(this.elemScrolledIntoView()&&target!=="input"&&target!="textarea"){var newPage=this._currentPageNum;if(evt.which==37)newPage=this._currentPageNum-1;if(evt.which==39)newPage=this._currentPageNum+1;if(this.validNewPage(newPage)){this._clicked=true;this.paginate(newPage);}}},this));},elemScrolledIntoView:function(){var docViewTop,docViewBottom,elemTop,elemBottom;docViewTop=this.jQwindow.scrollTop();docViewBottom=docViewTop+this.jQwindow.height();elemTop=this._container.offset().top;elemBottom=elemTop+this._container.height();return((elemBottom>=docViewTop)&&(elemTop<=docViewBottom));},bindNavScrollBrowse:function(){this._container.bind("mousewheel.jPages DOMMouseScroll.jPages",this.bind(function(evt){var newPage=(evt.originalEvent.wheelDelta||-evt.originalEvent.detail)>0?(this._currentPageNum-1):(this._currentPageNum+1);if(this.validNewPage(newPage)){this._clicked=true;this.paginate(newPage);}evt.preventDefault();return false;},this));},getNewPage:function(nav,target){if(target.is(nav.currentPage))return this._currentPageNum;if(target.is(nav.pages))return nav.pages.index(target)+1;if(target.is(nav.first))return 1;if(target.is(nav.last))return this._numPages;if(target.is(nav.previous))return nav.pages.index(nav.currentPage);if(target.is(nav.next))return nav.pages.index(nav.currentPage)+2;},validNewPage:function(newPage){return newPage!==this._currentPageNum&&newPage>0&&newPage<=this._numPages;},paginate:function(page){var itemRange,pageInterval;itemRange=this.updateItems(page);pageInterval=this.updatePages(page);this._currentPageNum=page;if($.isFunction(this.options.callback))this.callback(page,itemRange,pageInterval);this.updatePause();},updateItems:function(page){var range=this.getItemRange(page);this._itemsHiding=this._itemsShowing;this._itemsShowing=this._items.slice(range.start,range.end);if(this._cssAnimSupport&&this.options.animation.length)this.cssAnimations(page);else this.jQAnimations(page);return range;},getItemRange:function(page){var range={};range.start=(page-1)*this.options.perPage;range.end=range.start+this.options.perPage;if(range.end>this._items.length)range.end=this._items.length;return range;},cssAnimations:function(page){clearInterval(this._delay);this._itemsHiding.removeClass(this.options.animation+" jp-invisible").addClass("jp-hidden");this._itemsShowing.removeClass("jp-hidden").addClass("jp-invisible");this._itemsOriented=this.getDirectedItems(page);this._index=0;this._delay=setInterval(this.bind(function(){if(this._index===this._itemsOriented.length)clearInterval(this._delay);else{this._itemsOriented.eq(this._index).removeClass("jp-invisible").addClass(this.options.animation);}this._index=this._index+1;},this),this.options.delay);},jQAnimations:function(page){clearInterval(this._delay);this._itemsHiding.addClass("jp-hidden");this._itemsShowing.fadeTo(0,0).removeClass("jp-hidden");this._itemsOriented=this.getDirectedItems(page);this._index=0;this._delay=setInterval(this.bind(function(){if(this._index===this._itemsOriented.length)clearInterval(this._delay);else{this._itemsOriented.eq(this._index).fadeTo(this.options.fallback,1);}this._index=this._index+1;},this),this.options.delay);},getDirectedItems:function(page){var itemsToShow;switch(this.options.direction){case"backwards":itemsToShow=$(this._itemsShowing.get().reverse());break;case"random":itemsToShow=$(this._itemsShowing.get().sort(function(){return(Math.round(Math.random())-0.5);}));break;case"auto":itemsToShow=page>=this._currentPageNum?this._itemsShowing:$(this._itemsShowing.get().reverse());break;default:itemsToShow=this._itemsShowing;}return itemsToShow;},updatePages:function(page){var interval,index,nav;interval=this.getInterval(page);for(index in this._nav){if(this._nav.hasOwnProperty(index)){nav=this._nav[index];this.updateBtns(nav,page);this.updateCurrentPage(nav,page);this.updatePagesShowing(nav,interval);this.updateBreaks(nav,interval);}}return interval;},getInterval:function(page){var neHalf,upperLimit,start,end;neHalf=Math.ceil(this.options.midRange/2);upperLimit=this._numPages-this.options.midRange;start=page>neHalf?Math.max(Math.min(page-neHalf,upperLimit),0):0;end=page>neHalf?Math.min(page+neHalf-(this.options.midRange%2>0?1:0),this._numPages):Math.min(this.options.midRange,this._numPages);return{start:start,end:end};},updateBtns:function(nav,page){if(page===1){nav.first.addClass("jp-disabled");nav.previous.addClass("jp-disabled");}if(page===this._numPages){nav.next.addClass("jp-disabled");nav.last.addClass("jp-disabled");}if(this._currentPageNum===1&&page>1){nav.first.removeClass("jp-disabled");nav.previous.removeClass("jp-disabled");}if(this._currentPageNum===this._numPages&&page<this._numPages){nav.next.removeClass("jp-disabled");nav.last.removeClass("jp-disabled");}},updateCurrentPage:function(nav,page){nav.currentPage.removeClass("jp-current");nav.currentPage=nav.pages.eq(page-1).addClass("jp-current");},updatePagesShowing:function(nav,interval){var newRange=nav.pages.slice(interval.start,interval.end).not(nav.permPages);nav.pagesShowing.not(newRange).addClass("jp-hidden");newRange.not(nav.pagesShowing).removeClass("jp-hidden");nav.pagesShowing=newRange;},updateBreaks:function(nav,interval){if(interval.start>this.options.startRange||(this.options.startRange===0&&interval.start>0))nav.fstBreak.removeClass("jp-hidden");else nav.fstBreak.addClass("jp-hidden");if(interval.end<this._numPages-this.options.endRange)nav.lstBreak.removeClass("jp-hidden");else nav.lstBreak.addClass("jp-hidden");},callback:function(page,itemRange,pageInterval){var pages={current:page,interval:pageInterval,count:this._numPages},items={showing:this._itemsShowing,oncoming:this._items.slice(itemRange.start+this.options.perPage,itemRange.end+this.options.perPage),range:itemRange,count:this._items.length};pages.interval.start=pages.interval.start+1;items.range.start=items.range.start+1;this.options.callback(pages,items);},updatePause:function(){if(this.options.pause&&this._numPages>1){clearTimeout(this._pause);if(this.options.clickStop&&this._clicked)return;else{this._pause=setTimeout(this.bind(function(){this.paginate(this._currentPageNum!==this._numPages?this._currentPageNum+1:1);},this),this.options.pause);}}},setMinHeight:function(){if(this.options.minHeight&&!this._container.is("table, tbody")){setTimeout(this.bind(function(){this._container.css({"min-height":this._container.css("height")});},this),1000);}},bind:function(fn,me){return function(){return fn.apply(me,arguments);};},destroy:function(){this.jQdocument.unbind("keydown.jPages");this._container.unbind("mousewheel.jPages DOMMouseScroll.jPages");if(this.options.minHeight)this._container.css("min-height","");if(this._cssAnimSupport&&this.options.animation.length)this._items.removeClass("animated jp-hidden jp-invisible "+this.options.animation);else this._items.removeClass("jp-hidden").fadeTo(0,1);this._holder.unbind("click.jPages").empty();}};$.fn[name]=function(arg){var type=$.type(arg);if(type==="object"){if(this.length&&!$.data(this,name)){instance=new Plugin(this,arg);this.each(function(){$.data(this,name,instance);});}return this;}if(type==="string"&&arg==="destroy"){instance.destroy();this.each(function(){$.removeData(this,name);});return this;}if(type==='number'&&arg%1===0){if(instance.validNewPage(arg))instance.paginate(arg);return this;}return this;};})(jQuery,window,document);

//]]>

</script>

5. Luego, iniciamos el plugin agregando lo siguiente, poniéndolo debajo del plugin. Desde ese código puedes configurar las opciones de la paginación de la galería y que abajo se explican:

<script type='text/javascript'>

//<![CDATA[

     $(function() {

     $("div.holder").jPages({

      containerID: "itemContainer",

      previous: "← Anterior",

      next: "Siguiente →",

      perPage: 8,

      midRange: 4,

      animation: "bounceIn"

    });

  });

//]]>

  </script>

Opciones configurables (cosas que puedes cambiar)

En:
perPage:Especificas el número de imágenes por página. Por defecto son 10.
previous: pones el texto del enlace anterior. Igualmente se pueden usar una imagen si se desea.
next: pones el texto del enlace siguiente. Igualmente se pueden usar una imagen si se desea.
midRange:define el número de enlaces a las páginas que serán visibles en la navegación, antes de llegar a la última... Si por ejemplo el valor es 4, y hay un total de 10 páginas, entonces la navegación se verá así:
← Anterior 1 2 3 4 ... 10 Siguiente →
Por defecto viene 5 como valor en el plugin.
animation: Especificas el tipo de animación con CSS3 que vas a aplicar a la galería. Si es diferente a la que muestro en el ejemplo, entonces el CSS será también otro (del paso 2). En la página de la librería (Animate CSS) lo facilitan y lo puedes descargar de forma individual por animación, para no tener que usar el archivo con todas las animaciones que son más de 2500 lineas de código y que facilitan en la página del plugin.
En la página del plugin puedes ver las demostraciones para ver cómo se ve la galería con cada animación...

Importante: Si no vas a usar animación con CSS3 (del paso 2), entonces elimina la linea del código anterior: animation: "bounceIn".

Además de éstas, hay otras opciones que pueden agregarse, y en la página del plugin pueden verse más detalles en los ejemplos.

6. Ya para terminar, en el panel de edición de páginas, agregas el HTML de la galería y lo publicas:

<div class="holder"></div><ul id="itemContainer" class="galeria2"><li><a href="#" title=""><img alt="" src="URL_DE_LA_IMAGEN" /><span style="border:0;">El titulo o leyenda</span></a></li>
<li><a href="#" title=""><img alt="" src="URL_DE_LA_IMAGEN" /><span style="border:0;">El titulo o leyenda</span></a></li> <li><a href="#" title=""><img alt="" src="URL_DE_LA_IMAGEN" /><span style="border:0;">El titulo o leyenda</span></a></li> <li><a href="#" title=""><img alt="" src="URL_DE_LA_IMAGEN" /><span style="border:0;">El titulo o leyenda</span></a></li> </ul>

El código anterior está listo para mostrar 4 imágenes. Edita lo que está resaltado de rojo, y agrega el código para mostrar más imágenes, repitiendo esta parte:

<li><a href="#" title=""><img alt="" src="URL_DE_LA_IMAGEN" /><span style="border:0;">El titulo o leyenda</span></a></li>

...antes del cierre de la etiqueta ul, es decir , antes de </ul>. En el paso 3 de la primera opción de la entrada que mencionaba, se explican los detalles.

Notas adicionales.
El plugin es asombrosamente configurable, hay muchas opciones y explicar todo es muy amplio, en la página pueden verse muchos mas detalles ;)

Las animaciones con CSS3 que están integradas en el ejemplo, no son visibles en IE, sin embargo, el plugin tiene un efecto llamado fade in, que hace que las imágenes se vean como que se desvanecen y que también se puede configurar desde las opciones, arriba puse el enlace para que veas cómo se ve.

El hecho de que tenga paginación la galería, no significa que cada página del contenido tenga una URL única, imagina que es como un slidehow, que va mostrando las imágenes según como lo hayas configurado, y a petición del usuario. En otras palabras no son páginas independientes.

Crédito de las imágenes usadas en la galería Garry Knight
Plugin visto en Vagabundia

Contenido en orden alfabético que se desliza estilo iPhone

noreply@blogger.com (Karla Castañeda) — Mon, 26 Nov 2012 23:08:00 +0000

SliderNav es un plugin ligero, que te permite añadir de forma dinámica contenido que se desliza a través de una barra vertical de navegación. Es ideal para mostrar listados en orden alfabético, aunque se pueden usarse otras palabras.

Según el autor, el plugin es compatible con Firefox 3, Chrome 5, IE7, Safari 4 y Opera 10 en adelante. Puedes ver la Demostración, desde la página del plugin o bien en este blog donde lo he probado. La explicación será considerando el ejemplo 1, que muestra la barra de navegación con las letras del alfabeto (en inglés), como se aprecia en la siguiente imagen.

La imagen solo muestra una parte del elemento (recortada).

Cómo implementarlo en el blog

Vamos a pensar que quieres agregarlo en la columna lateral del blog, entonces harás lo siguiente:

1. Primero, necesitas agregar jQuery antes de </head>, yendo a la edición de HTML de la plantilla. Si ya lo tienes agregado, entonces no necesitas volverlo a poner. Como lo muestro enseguida, lo cargamos desde la librería CDN de Google:

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>

2. Luego, agregas el plugin directamente en la plantilla después de jQuery:

/*
 *  SliderNav - A Simple Content Slider with a Navigation Bar
 *  Copyright 2010 Monjurul Dolon, http://mdolon.com/
 *  Released under the MIT, BSD, and GPL Licenses.
 *  More information: http://devgrow.com/slidernav
 */
$.fn.sliderNav=function(options){var defaults={items:["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],debug:false,height:null,arrows:true};var opts=$.extend(defaults,options);var o=$.meta?$.extend({},opts,$$.data()):opts;var slider=$(this);$(slider).addClass('slider');$('.slider-content li:first',slider).addClass('selected');$(slider).append('<div class="slider-nav"><ul></ul></div>');for(var i in o.items)$('.slider-nav ul',slider).append("<li><a alt='#"+o.items[i]+"'>"+o.items[i]+"</a></li>");var height=$('.slider-nav',slider).height();if(o.height)height=o.height;$('.slider-content, .slider-nav',slider).css('height',height);if(o.debug)$(slider).append('<div id="debug">Scroll Offset: <span>0</span></div>');$('.slider-nav a',slider).mouseover(function(event){var target=$(this).attr('alt');var cOffset=$('.slider-content',slider).offset().top;var tOffset=$('.slider-content '+target,slider).offset().top;var height=$('.slider-nav',slider).height();if(o.height)height=o.height;var pScroll=(tOffset-cOffset)-height/8;$('.slider-content li',slider).removeClass('selected');$(target).addClass('selected');$('.slider-content',slider).stop().animate({scrollTop:'+='+pScroll+'px'});if(o.debug)$('#debug span',slider).html(tOffset);});if(o.arrows){$('.slider-nav',slider).css('top','20px');$(slider).prepend('<div class="slide-up end"><span class="arrow up"></span></div>');$(slider).append('<div class="slide-down"><span class="arrow down"></span></div>');$('.slide-down',slider).click(function(){$('.slider-content',slider).animate({scrollTop:"+="+height+"px"},500);});$('.slide-up',slider).click(function(){$('.slider-content',slider).animate({scrollTop:"-="+height+"px"},500);});}}; //]]>   
</script>

O bien, lo alojas en un sito de alojamiento que uses de confianza, para luego llamarlo usando la etiqueta script:

<script type='text/javascript' src='//mi_arcivo_con_el_plugin.js'></script>

3. Después, agregas la función de jQuery para llamar al elemento que se está creando...

<script type="text/javascript">
 //<![CDATA[  
    $(document).ready(function(){
        $('#slider').sliderNav();
    });
 //]]>
</script>

4. Luego, agregas el CSS, yendo a plantilla > Personalizar > Avanzado > Añadir CSS.

/*
* SliderNav - A Simple Content Slider with a Navigation Bar
* Copyright 2010 Monjurul Dolon, http://mdolon.com/
* Released under the MIT, BSD, and GPL Licenses.
* More information: http://devgrow.com/slidernav
*/
.slider {
width: 300px; /*el ancho del slider.Toma nota del ancho de donde lo colocaras*/
min-height: 250px;
display: block;
position: relative;
background: #fff;/*color de fondo de los elementos de la lista*/
overflow: hidden;
}
.slider ul {
list-style: none;
margin:0;
padding:0;
}
.slider-content {
float: left;
width: 100%;
display: block;
overflow: hidden;
min-height: 250px;
}
.slider-content ul {
float: left;
width: 100%;
display: block;
position: relative; top:-3px;
}
.slider-content ul li {
float: left; width: 100%;
}
.slider-content ul ul li a {
padding: 5px 10px;
display: block;
border-bottom: 1px solid #f3f3f3; /*borde al fondo de cada elemento*/
text-transform: capitalize;
}
.slider-content ul ul li a:hover {
background: #f3faff; /*el color de fondo al poner el puntero encima del titulo*/ border-color: #d5ebf9;/*color del borde*/
}
.slider-content .title {
padding: 5px 0;
text-indent: 10px;
background: #bbb; /*color de fondo del bloque de cada letra en la lista*/
color: #fff; /*color de fuente*/ width: 100%;
float: left; font-weight: bold;
text-transform: uppercase;
}
.slider-content .selected .title {
background: #666; /*el color de fondo de la letra seleccionada en la lista*/
}
.slider .slider-nav {
position: absolute;
right: 0;
top: 0;
background: #666; /*color de fondo barra vertical con letras de navegación*/
min-height: 250px;
}
.slider .slider-nav ul {
padding: 5px 0; }
.slider .slider-nav li a {
padding: 3px 5px;
line-height: 13px;
text-align: center;
color: #fff; /*color de fuente de cada elemento de lista*/
font-weight: bold;
display: block;
text-transform: uppercase;
cursor: pointer;
}
.slider #debug {
position: absolute;
bottom: 0;
left: 0;
padding: 5px;
background: #000;
color: #fff;
}
.slider .arrow { /*las flechas creadas con css*/
font-size: 0px;
line-height: 0%;
width: 0px;
border-bottom: 8px solid #fff;
border-left: 5px solid #333;
border-right: 5px solid #333;
position: relative; top: -5px; /*mover flecha de arriba*/
}
.slider .down {
border-bottom: none;
border-top: 8px solid #fff;
top: 2px; /*mover flecha al fondo*/
}
.slider .slide-up, .slider .slide-down {
height: 20px;
background: #333; /*color de fondo de las barras horizontales con las flechas */
text-align: center;
cursor: pointer;
float: right;
width: 100%;
position: relative;
}

Notas importantes del CSS.


Comúnmente, cuando agregas un elemento a una plantilla de Blogger, hay que hacer ajustes, ya que puede haber algunas propiedades que estén en la plantilla que se hereden al elemento, cuando no fueron especificadas en el CSS, y por ello, puede verse alterado la apariencia de dicho elemento.
En la plantilla de ejemplo, he editado algunos valores y agregado algunas propiedades del CSS mismas que he resaltado de morado para que puedas identificarlas, que pueden ser claves para ajustar el elemento.
En cuanto a los colores de fondo, bordes y color de fuentes, los he resaltado de rojo para que puedan editarse. Por favor, también lee los comentarios de color verde, para que sepas de que se trata cada cosa, ya que termines, puedes eliminarlos.


5. Finalmente, y pensando en que vas a agregar el elemento en una columna lateral, ve a Diseño y agregas el código HTML en un gadget con la opción de HTML/Javascript, siguiendo la siguiente estructura:


<div id="slider">
<div class="slider-content">
        <ul>
            <li id="a"><a name="a" class="title">A</a>
                <ul>
                    <li><a href="#">Adam</a></li>
                    <li><a href="#">Alum</a></li>
                    <li><a href="#">Ali</a></li>
                    
                </ul>
            </li>
            <li id="b"><a name="b" class="title">B</a>
                <ul>
                    <li><a href="#">Bohemia</a></li>
                    <li><a href="#">Becky</a></li>
                   
                </ul>
            </li>
            etc...                                                             </ul>                                                               </div>

Explicación de la estructura del código HTML (del paso 4)


Antes del cierre de la etiqueta <ul> que resalté de azul, deben estar los bloques con las listas en orden alfabético, es decir en la parte que dice etc... Asegúrate de eliminar ese texto del código. Entonces, siguiendo con la estructura anterior, seguiría la "C", y el código HTML de éste se verá así:
<li id="c"><a name="c" class="title">C</a>
                <ul>
                    <li><a href="#">Corem</a></li>
                    <li><a href="#">Cohemia</a></li>                   
                </ul>
            </li>

IMPORTANTE:  Cada vez que agregues el bloque con la lista, asegúrate de que el ID de la etiqueta "li" y el nombre asignado a la etiqueta "a", lleven la misma letra respectivamente. En el bloque anterior lleva la "c" que es la que seguía, tomando en cuenta el orden alfabético.

Si quieres agregar más elementos a la lista de cada bloque con determinada letra, entonces deberás repetir esta linea...
<li><a href="#">Cometia</a></li>
Entonces, el bloque anterior, con la linea anterior, quedaría así:
<li id="c"><a name="c" class="title">C</a>
                <ul>
                    <li><a href="#">Corem</a></li>
                    <li><a href="#">Cohemia</a></li>
                    <li><a href="#">Cometia</a></li>
                </ul>
            </li>

Al terminar de poner todos los elementos con la letra "c", seguirá el bloque con la letra "d" y así sucesivamente. Su estructura será la misma que se explicaba anteriormente.
Otras notas:

Se puede ajustar la altura en pixeles, si deseas anular la detección automática basada en la navegación vertical. Según explican, puede que sea necesario ajustar la altura mínima en el CSS (min-height). Puede inhabilitarse las flechas. Puedes verse todos los detalles en la página del autor.

Mejoras en las aplicaciones móviles de Blogger

noreply@blogger.com (Karla Castañeda) — Fri, 16 Nov 2012 19:14:00 +0000

Google ha anunciado algunas mejoras en las aplicaciones móviles de Blogger, tanto para Android como para IOS. Estas actualizaciones, pretenden darte más facilidad, y una mejor experiencia a la hora de querer compartir y crear una nueva entrada desde tu dispositivo móvil.

Según explican, algunas de las mejoras incluye:

Soporte para vista panorámica cuando escribes una nueva publicación
Habilidad para compartir en Google+
Habilidad de ver la fecha de publicación de una nueva entrada
Soporte internacional en más de 30 idiomas
Soporte para iPad

En lo que respecta a la aplicación para Android, desde la página, se pueden leer comentarios positivos sobre las mejoras que se han implementado, ¿cuál es el tuyo?

Ahora puedes descargar las aplicaciones actualizadas para Android desde la Play Store o para IOS en la App Store.

Fuente: Los productos de Google

10+ Estupendos Sets de Bordes y Marcos (Brushes e Imágenes)

noreply@blogger.com (Karla Castañeda) — Tue, 13 Nov 2012 21:25:00 +0000

Los marcos, son elementos gráficos decorativos muy útiles que hacen resaltar las fotografías o imágenes. Además del uso personal en álbumes de fotografías, son comúnmente utilizados para mostrar trabajos fotográficos profesionales como portafolios, o bien para realzar las imágenes en blogs o páginas web.

Los bordes delimitan el contenido de las secciones del blog o la página, y pueden hacerlo ver más estético y detallado. De igual modo, los bordes pueden enmarcar las imágenes en una galería de imágenes, así como las imágenes de los posts.

Afortunadamente contamos con el talento y dedicación de diseñadores gráficos que muy gentilmente comparten su trabajo con todos, facilitándonos estos recursos.

A continuación una amplia colección de marcos y bordes. Algunas vienen disponibles en formato de imagen como JPG o PNG, otros como brushes o pinceles para photoshop (ABR), algunos en formato EPS, pero todos están muy monos, son gratis, y algunos pueden ser usados para uso comercial.

Marcos

1. Excelente set de 14 marcos estilo polaroid, en alta resolución, disponibles en formato jpg. Se permite el uso comercial (para usarse en proyectos comerciales, no para venderse tal y como son).

Ver / Descargar

2. Set de 15 marcos de madera estilo vintage en alta resolución. Permitido su uso comercial.

Ver / Descargar

Ver / Descargar (Segunda parte)

3. Esquina de Marco para fotografía disponible en formato PSD y formato JPG.

Ver / Descargar

4. Estupendo set de 12 marcos hechos a mano, disponibles en formato PSD y ABR (pinceles para photoshop).

Ver / Descargar

5. Marco de tira de rollo película aislada, disponible en formato PSD.

Ver / Descargar

Bordes y esquinas

6. Set de 8 brushes o pinceles de bordes y esquinas, hechos a mano para Photoshop.

Ver / Descargar

7. Set de 27 texturas y 27 bordes estilo grunge, disponibles en formato ABR (pinceles para Photoshop), y también en formato PNG (imágenes listas para usar con fondo transparente). Permitido su uso comercial.

Ver / Descargar

8. Set de 20 bordes divisores, especial para diseños minimalistas. Disponible en formato PNG, con fondo transparente.

Ver / Descargar

9. Set de 13 Bordes ásperos y esquinas para Photoshop.

Ver / Descargar

10. Set de 14 bordes disponibles en formato PSD y formato CSH. Perfecto para bordes de secciones en el blog.

Ver / Descargar

11. Set de 9 pinceles para photoshop con forma circular con puntadas, disponible también en formato de imagen (PNG) con fondo transparente. Se permite su uso personal, aunque también se puede comprar la licencia para uso comercial.

Ver / Descargar

12. Set de 15 bordes y 15 esquinas para photoshop.

Ver / Descargar

13. Set de 5 pinceles de bordes y esquinas para photoshop con motivos florales, disponible también en formato png (con fondo transparente).

Ver / Descargar

3 Generadores de imágenes animadas de precarga

noreply@blogger.com (Karla Castañeda) — Fri, 02 Nov 2012 14:20:00 +0000

Ahora que hablábamos sobre el desplazamiento infinito para el blog, scroll infinito o infinite scrolling si lo llamamos en función a lo que hace, tal vez habrá algunos interesados en personalizar la imagen que aparece cuando se están cargando las entradas, comúnmente llamada en inglés loader icon o loading gif, que aunque no es lo mismo si lo traducimos, reflejan de qué se trata. Bueno, como dijo el conocido chapulín colorado: -La idea es esa...-

Es muy común encontrar ésta imagen cuando se está cargando cualquier contenido, o en el progreso de una descarga. Generalmente la encontramos como una especie de circulito que gira, otras veces como una barra animada, aunque pueden usarse muchas otras formas.

Hoy tengo para ti tres generadores que te facilitaran la tarea a la hora de personalizar la susodicha imagen animada, todos son online y no necesitas abrir ninguna cuenta para empezar a usarlos.

1. Loader Generator

Este generador cuenta con un repertorio de 132 estilos de imágenes entre las que podrás elegir para empezar con la personalización. Es muy fácil usarla, solamente haces click en el estilo que te gusta, y luego configuras las opciones que te muestra como: color de la imagen, fondo de la imagen que también puede ser transparente, y el tamaño.

Finalmente generas la imagen, para luego descargarla.

Enlace: Loader Generator

2. Preloaders

Este generador, aunque cuenta con menos estilos de la imagen, tiene más opciones en la configuración, cosa que adorarán aquellos que son muy meticulosos y quieren todo muy detallado . En la imagen he agregado comentarios en español en cada opción de la configuración.

Al final, cuando hayas terminado con la personalización de la imagen, no marques ninguna casilla en las opciones de descarga, de ese modo sólo descargarás la imagen animada.

Enlace: Preloaders

3. Ajaxload

Finalmente tenemos este generador que se podría decir que es express y muy simple, aunque no por ello menos efectivo. Cuenta con alrededor de 32 estilos disponibles y solamente dos opciones en la personalización, por lo que rápidamente podrás crear tu imagen de precarga.

Enlace: ajaxload.info

Scroll Infinito en el Blog (Cargar todos los Posts desde la Página Principal)

noreply@blogger.com (Karla Castañeda) — Thu, 01 Nov 2012 23:44:00 +0000

Si ya has probado las vistas dinámicas de Bogger, o por lo menos, las has visto funcionar en algunos blogs como en Blogger Buzz, seguramente te habrás dado cuenta que no utilizan los enlaces de navegación (Entradas antiguas, Página Principal, Entradas recientes) en la página principal, ya que las entradas se van cargando al desplazarse hacia abajo, a eso se le conoce como scroll infinito.

El scroll infinito, puede hacer que la página sea más accesible, y mejorar la experiencia del usuario, ya que éste no tendrá que cargar entradas nuevas haciendo click en el enlace de navegación, pues todas las entradas (o su resumen) se cargarán desde la página principal.

Ejemplos de sitios en los que se ha implementado la técnica de scroll infinito.

Sitios como Tumblr, Looks Like Good Design, Spookbook.nu son ejemplos de sitios que utilizan ésta técnica y que ha sido muy bien aplicada, y seguramente te inspiraran para saber cómo implementarla para que armonice con el diseño del blog. Esta técnica es ideal para blogs de fotografía, diseño y moda, ya que las imágenes ocupan un papel protagónico, aunque puede implementarse en cualquier blog.

Scroll infinito en las plantillas de Blogger...

¿Te gustaría probar esta función en tu blog? pues ahora puedes hacerlo, ya que Muthu kannan de manki's weblog, ha desarrollado un script que funciona con jQuery , el cual, hace que todas las entradas del blog se carguen desde la página principal, al desplazarse hacia abajo.

Mathu Kannan ha estado desarrollando el script de forma constante, implementando mejoramientos como soporte a Google analytics, el sistema de comentarios de Disqus, y botones de Facebook.
Desde su página puedes agregar ésto al blog fácilmente, así como también verlo funcionar, ya que él lo usa.

Cómo agregar el scroll infinito al blog.

Opción 1. Agregar el artilugio (gadget). La opción más fácil y rápida.

1. Simplemente vas a la página del autor, y haces click en el Botón que dice "Add to Blogger".

2. Eliges el blog al que quieres agregar ésta función.

Nota: Si ya tienes jQuery en tu blog, haces click en donde dice "Editar contenido" y lo eliminas. Hasta la fecha viene así (versión 1.6.1):

3. Añades el artilugio.

El código será agregado a tu blog, y podrás editarlo/eliminarlo desde Diseño, editando el gadget que se agregó con la opción HTML/Javascript.

Opción 2. Agregar el script directamente a la plantilla y editar el texto de "Load more posts" e imagen.

1. Agregas jQuery en tu blog, si es que no lo tienes en el blog. (He añadido la versión más reciente).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

2. Abres el contenido del archivo que facilitan (script), y lo copias. Para abrirlo tienes que poner la dirección del archivo en la barra de direcciones.

http://manki-scripts.googlecode.com/files/blogger-infinite-scrolling-1.5.js

Opcional. Puedes editar el texto que dice: "Load more posts" por otro, como por ejemplo: "Cargando posts", identificando ésta linea en el script y cambiándolo:

var link = $('<a href="javascript:;">Load more posts</a>');

...si también quieres cambiar la imagen (el gif animado que aparece a un lado del texto de "Load more posts"), sólo identifícala en el script en la siguiente linea, y cámbiala por una propia. He resaltado la URL de la imagen de rojo:

var b=$('<img src="https://lh3.googleusercontent.com/-FiCzyOK4Mew/T4aAj2uVJKI/AAAAAAAAPaY/x23tjGIH7ls/s32/ajax-loader.gif" style="display: none;">');

2. Ya que lo copiaste/editaste, lo pones debajo de jQuery, dentro de la etiqueta script, como se indica a continuación:

4. Verificas en vista previa y si todo luce bien guardas los cambios.

Opción 3. Alojando el script.

1. Agregas jQuery, si es que no lo tienes en el blog.

2. Abres el script que facilitan, y si quieres, editas el texto y cambias la imagen (el gif animado), para luego guardarlo en tu computadora.

3. Alojas el script y copias la URL de éste, luego lo agregas al blog, después de jQuery:

4. Verificas en vista previa y si todo luce bien, guarda los cambios.

Notas adicionales

Cabe señalar que, en conjunto con ésta técnica, sería bueno hacer algunas modificaciones en la presentación de los enlaces de navegación de Blogger al ingresar a la página, colocándolos de forma estratégica, y cambiando su apariencia.

Via: manki's weblog