Personalizar el FanBox de Facebook

Hace unos d?as CebicheTV me dec?a que hab?a visto en Daddy Design un Fanbox personalizado que quer?a aplicar pero que no entend?a muy bien c?mo hacerlo.

La forma como lo presentan es un estilo minimalista que se adapta muy bien a plantillas de dise?os m?s simplistas, aunque a partir del c?digo CSS se puede modificar para hacer una readaptaci?n del mismo.

Como puedes ver se ha eliminado la cabecera del Fanbox, se han quitado los bordes, el bot?n 'Me gusta' se ha puesto debajo, y el n?mero de fans est? en otro color.

Para conseguir personalizar el FanBox de esta forma necesitaremos saber la ID de nuestra p?gina de Facebook.

Para saberla entra a tu p?gina de Facebook y haz click en el bot?n Editar la p?gina que se encuentra en el lado superior derecho.

En la barra de direcciones de tu navegador ver?s al final una serie de n?meros, esa es la ID.

https://www.facebook.com/pages/edit/?id=XXXXXXXXXXXXXXX

Ahora descarga este archivo, descompr?melo y sube el archivo a un hosting.
Luego entra en Dise?o | Elementos de la p?gina | A?adir gadget | HTML/Javascript y ah? pega este c?digo:

<script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script>
<fb:fan profile_id="XXXXXXXXXXXXXXX" stream="0" connections="8" logobar="0" width="240" css="URL del archivo CSS"></fb:fan>

Cambia las equis que est?n en rojo por la ID de tu p?gina de Facebook que conseguiste anteriormente. Y agrega la URL de tu archivo CSS que subiste al hosting. Con eso ser? suficiente para tener el FanBox con este estilo minimalista.
?Se puede personalizar m?s? Claro, si abres el archivo facebook.css te encontrar?s con este c?digo:

.fan_box a:hover{
text-decoration: none;
}
.fan_box .full_widget{
height: 200px; /* Altura del FanBox */
border: 0 !important; /* Eliminamos el borde */
background: #fff !important; /* Color de fondo del FanBox */
position: relative;
}
.fan_box .connect_top{
background: none !important;
padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
display: none; /* Con eso eliminamos la cabecera */
}
.fan_box .connect_action{
padding: 0 !important;
}
.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
span.total{
color: #FF6600; /* Color de la fuente para el n?mero de fans */
font-weight: bold;
}
.fan_box .connections .connections_grid {
padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #666 !important; /* Color del nombre de los fans */
padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0; /* Con eso colocamos abajo el bot?n 'Me gusta' */
right: 5px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}

En esas anotaciones color verde se indica cu?les son las ?reas que podemos modificar, como el color de fondo, el color del nombre de los fans, el color del n?mero de fans, etc.

Se recomienda no cambiar el tipo de letra para evitar desajustes con los espacios. Y si cambias la altura del gadget deber?s hacerlo tanto en el c?digo que va en el HTML/Javascript como en el archivo CSS, tomando en cuenta que la altura en negrita deber? tener aproximadamente 40px m?s que la altura establecida en el CSS.

Seguro podr?n hacerse modificaciones interesantes, pero as? como est? a m? me parece bastante lindo el dise?o :)

Mostrar una imagen diferente en los links rotos de las im?genes

Algunos tienen la mala costumbre de hacer hot-linking en su blog, es decir, andan navegando por la red, encuentran una imagen, consiguen su URL y la usan para mostrar dicha imagen en su blog. Es es el hot-linking, y lo ?nico que hace es que perjudiquemos el ancho de banda del sitio al que le hemos tomado la foto. Pero adem?s de eso corres el riesgo de que el due?o del sitio Web elimine la imagen y te quedes sin ella.

Cuando eso sucede obviamente la imagen ya no se mostrar? en el blog y en su lugar veremos el t?pico icono que representa que una el v?nculo de una imagen est? roto, o sea que el link de esa imagen no funciona.

Pero esa no es la unica raz?n por la que pueda aparecernos ese icono, a veces aun cuando subimos las im?genes a nuestro propio hosting el servidor puede estar ca?do, la conexi?n puede andar lenta, sin querer eliminamos la foto, o simplemente hemos copiado mal la URL de la imagen. En cualquiera de esos casos puede aparecer el icono de la que hablo que indica que la imagen no existe o no carg?.

Lo que veremos hoy es c?mo mostrar una imagen diferente al habitual icono predeterminado que trae el navegador, de manera que podamos cambiar la imagen que se muestra cuando la URL de la imagen est? rota.

As? que cambiaremos esto:

Por una imagen personalizada, como por ejemplo, esta:

Para conseguirlo usaremos un script muy corto que lo que hace es detectar el tama?o ancho de la imagen, si lo encuentra en cero entonces mostrar? la imagen que hemos elegido.
S?lo debes entrar en Dise?o | Edici?n de HTML y antes de </head> pegar lo siguiente:

<script type='text/javascript'>
//<![CDATA[
// Script para sustituir im?genes rotas
function ImagenOk(img) {
if (!img.complete) return false;
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) return false;
return true;
}
function RevisarImagenesRotas() {
var replacementImg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1TH4Iflf-U0TfO8WU117nzJV9rTbT8KS00IJ5JU9WgIdpy8OAadMdjywbhtlFz2UMAl_JVsv2Z9blreVO0H6TBX0Duo7QTB5aKU4XxSOEaT52S9CgGsiE0enZHAz4bsoRfQmTI5GaLdo/";
for (var i = 0; i < document.images.length; i++) {
if (!ImagenOk(document.images[i])) {
document.images[i].src = replacementImg;
}}}
window.onload=RevisarImagenesRotas;
// ]]>
</script>

Lo que est? en color rojo es la URL de la imagen de ejemplo que he puesto, pero puedes cambiarla por alguna que t? dise?es o el icono que t? elijas.

Cabe aclarar, que este script no sustituir? las im?genes de los hostings que a?aden su propia imagen para indicar que la imagen ha sido eliminada como es el caso de TinyPic y Photobucket.
Recuerda que, para evitar en lo mayor posible que las im?genes no se vean, no uses la imagen de alguien m?s, mejor sube tus im?genes a Picasa y as? te evitar?s muchos dolores de cabeza.

El script est? probado en Firefox 5, Google Chrome 12, Opera 11, Safari 5, Internet Explorer 7, 8 y 9. En todos funciona, si no ves el icono personalizado de inmediato entonces tienes que esperar a que cargue el blog por completo.

Subir im?genes y obtener la URL de la imagen

Como todos los d?as se van sumando nuevos usuarios al mundo de los blogs, es necesario tocar este tipo de temas b?sicos por lo recurrente de la pregunta, ?c?mo obtener la URL de una imagen?

En la red hay muchos hostings tanto gratuitos como de pago donde podemos alojar im?genes, pero dado que nosotros usamos Blogger entonces no hay nada mejor que usar el mismo servicio de alojamiento que Google nos brinda y que es Picasa.

La manera m?s r?pida de subir una imagen es haci�ndolo desde el mismo editor de entradas de Blogger. S?lo entra en Creaci?n de entradas | Nueva entrada. Y preferentemente desde la pesta?a HTML da click en el icono de la imagen.

Se abrir? una venatana emergente, ah? selecciona la imagen y dale click en Subir imagen.
Cuando se haya subido ver?s que en el editor de entradas aparecer? el c?digo de la imagen.

En ese c?digo se encuentra la URL de la imagen. Ver?s dos URLs (direcciones Web):

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXkI0meVr8pDc0f6yiwoDbfaaWlGZCGLmSQoJER9plGJSbNzZJLsg4sErp-xwfcjuoreYfWtacy11jbQx5sMynla2Yd0Hu4Kf8j8WgvGxs04R0iuhJlre4OT2ZUfK1RqcwC5V_kdASaTu/s1600/imagen.jpeg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="320" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXkI0meVr8pDc0f6yiwoDbfaaWlGZCGLmSQoJER9plGJSbNzZJLsg4sErp-xwfcjuoreYfWtacy11jbQx5sMynla2Yd0Hu4Kf8j8WgvGxs04R0iuhJlre4OT2ZUfK1RqcwC5V_kdASaTu/s400/imagen.jpeg" /></a></div>

La primera es la URL de la imagen que necesitas donde la vayas a ocupar. No es necesario que publiques esa entrada donde subiste la imagen, bien puedes no publicarla, dejarla como borrador o eliminarla, la foto seguir? en Picasaweb (a menos que si cuando eliminaste el borrador tambi�n hayas seleccionado eliminar la imagen).

Tambi�n puedes subir la imagen directo desde Picasa. S?lo ingresa a Picasaweb, selecciona el ?lbum donde quieres alojar la imagen, y da click en A?adir fotos

Selecciona la imagen desde tu equipo y s?bela.

Ya que haya subido da click en Aceptar.

Ah? ver?s la imagen en miniatura, junto a las dem?s fotos, si es que hay m?s.

Si quieres conseguir la URL de la imagen desde Picasa entonces dale click a la imagen para que se abra en su tama?o original.
Con el bot?n derecho del mouse da click sobre la foto, y selecciona la opci?n seg?n el navegador que uses...

Si usas Google Chrome selecciona Copiar URL de imagen:

Si usas Mozilla Firefox selecciona Copiar la ruta de la imagen:

Si usas Opera selecciona Copiar direcci?n de la imagen:

Si usas Safari selecciona Copiar direcci?n de la imagen:

Si usas Internet Explorer (espero que no), primero selecciona Propiedades, se abrir? una ventana, ah? ver?s la URL de la imagen que puedes copiar seleccion?ndola:

Habiendo seleccionado cualquiera de esas opciones ya tendr?s en el portapapeles la URL de la imagen. Sencillo ?no?

Recuerda que todas las im?genes que subes desde Blogger se almacenan en tu cuenta de Picasa, as? que si quieres encontrar una imagen que anteriormente subiste en tu blog, entra en tu cuenta de Picasa, selecciona el ?lbum que contiene el nombre de tu blog y ah? busca la imagen que necesitas. El procedimiento para conseguir la URL de la imagen es el mismo que se ha explicado m?s arriba.

Enviar sitemap a Google

Un sitemap es lo que literalmente significa en espa?ol, un mapa del sitio. En �l est? contenida la informaci?n de todas las p?ginas del blog. Por esa raz?n es conveniente enviar el sitemap a Google para que le facilitamos a los robots toda la informaci?n del blog y conozcan todas las p?ginas que hay en �l, as? a los robots les ser? m?s f?cil indexar nuestro sitio; y un sitio bien indexado tiene mayores posibilidades de posicionamiento en la Web.

Para a?adir un sitemap en Google primero es necesario que accedas a las Herramientas para Webmasters para incluir ah? tu sitio web.
As? que primero entra ah? y da click en Acceder a las Herramientas para webmasters de Google.
Ver?s un bot?n que dice A?adir un sitio, da click en �l y escribe la direcci?n de tu blog.

Ahora deber?s demostrar la propiedad del sitio, para ello selecciona la pesta?a M�todos alternativos y click en A?adir una metaetiqueta a la p?gina principal de su sitio.

Copia la metaetiqueta y p�gala despu�s de <head>, ya que lo hayas hecho haz click en Verificar. En cuanto la verificaci?n sea satisfactoria aparecer? el panel de control del sitio que has a?adido.
Hasta ah? ya hemos dado de alta nuestro blog en las Herramientas para Webmasters.

Ahora busca el enlace Enviar un Sitemap y da click en �l.

Luego click en el bot?n Enviar un Sitemap. Ah? aparecer? la URL de tu blog y al lado un recuadro, en ese recuadro pega lo siguiente:

feeds/posts/default?redirect=false&start-index=1&max-results=500

Si todo ha salido bien entonces aparecer? un icono de una palomita verde al lado de la URL del sitemap que indicaste.

Si tuvieras m?s de 500 posts deber?s a?adir otro sitemap pues cada uno s?lo tiene la capacidad de mostrar 500 entradas. El procedimiento es el mismo, click en el bot?n Enviar un Sitemap, pero ahora pega esto:

feeds/posts/default?redirect=false&start-index=501&max-results=500

Y si tuvieras m?s de 1000 entradas a?ade tambi�n este:

feeds/posts/default?redirect=false&start-index=1001&max-results=500

Si hubiera alg?n problema al enviarlo s?lo marca la casilla que est? junto a la URL del sitemap y luego da click en el bot?n Volver a enviar.
Como ves, es un proceso que te quitar? s?lo un par de minutos pero una vez hecho tendr?s la certeza que Google podr? indexar tu blog de manera m?s f?cil.

Usar el mismo avatar en todos los comentarios propios

AVISO

Este truco no funciona en los comentarios anidados de Blogger.

?Les ha pasado alguna vez que por andar de curiosos eliminaron sin querer la foto del perfil y por consiguiente el avatar en los comentarios dej? de verse? ?O quiz? alguna vez usaron un avatar que ya no les gusta pero no quieren eliminar el comentario ni dejar ese comentario sin avatar?

Pues no s� ustedes pero yo siempre he sido muy curioso, una vez entr� a mi cuenta de Picasa, vi una carpeta que dec?a 'Im?genes de Blogger', y como vi muchos avatares repetidos los elimin�, y claro, mis comentarios antiguos dejaron de tener avatar. Y peor aun, mi primer avatar era una foto m?a sin camisa (no se preocupen chicas, prometo no volver a hacerlo), luego me arrepent? de subir esa foto pero no quer?a ni eliminar esos comentarios ni eliminar el avatar para evitar dejar ese icono que siempre nos recuerda que una imagen est? rota

?Qu� podemos hacer en estos casos? Si por haber eliminado tu foto tienes comentarios sin avatar, o si simplemente quisieras que todos tus comentarios (propios por supuesto) tengan la misma imagen aun cuando sean comentarios antiguos, lo que podemos hacer es usar un c?digo para condicionar nuestro avatar de manera que la imagen que elijamos aparezca por defecto en todos los comentarios propios, tanto aquellos antiguos como los actuales y futuros. As? que si a los largo de la vida de tu blog has usado varios avatares en los comentarios podr?s cambiar todos ellos por la imagen que quieras.

Para conseguir tener el mismo avatar en todos tus comentarios entra en Dise?o | Edici?n de HTML, marca la casilla Expandir plantillas de artilugios y busca este c?digo:

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Una vez encontrado reempl?zalo por este:

<b:if cond='data:blog.enabledCommentProfileImages'>
<b:if cond='data:comment.authorUrl == &quot;URL de tu perfil de Blogger&quot;'>
<!-- Inicia mi avatar -->
<div class='avatar-image-container'>
<img src='URL de la imagen' style='height:100%; width:100%;'/>
</div>
<!-- Termina mi avatar -->
<b:else/>
<data:comment.authorAvatarImage/>
</b:if></b:if>

Cambia donde se se?ala, la URL de la imagen del avatar que quieres mostrar, as? como la URL de tu perfil de Blogger, es algo como esto:
http://www.blogger.com/profile/XXXXXXXXXXXXXXXX
Como estamos usando la URL del perfil eso evitar? que el avatar se muestre en otro comentarista que tenga el mismo nick que el nuestro (gracias a Felipe por ese tip)

Con eso conseguir?s que absolutamente todos tus comentarios tengan el mismo avatar, sin importar si ten?as comentarios sin foto.
Si el blog tuviera dos autores y deseas que el otro autor tenga su propio avatar personalizado en todos sus comentarios entonces en ese caso en lugar de ese c?digo, el que habr? de ponerse es este:

<b:if cond='data:blog.enabledCommentProfileImages'>
<b:if cond='data:comment.authorUrl == &quot;URL de tu perfil de Blogger&quot;'>
<!-- Inicia mi avatar -->
<div class='avatar-image-container'>
<img src='URL de la imagen' style='height:100%; width:100%;'/>
</div>
<!-- Termina mi avatar -->
<b:else/>

<b:if cond='data:comment.authorUrl == &quot;URL del perfil de Blogger del otro autor&quot;'>
<!-- Inicia avatar otro autor -->
<div class='avatar-image-container'>
<img src='URL de la imagen del otro autor' style='height:100%; width:100%;'/>
</div>
<!-- Termina avatar otro autor -->
<b:else/>

<data:comment.authorAvatarImage/>
</b:if></b:if></b:if>

Cambia donde se indica las URLs de los perfiles de los dos autores. Y de igual manera pon la URL de las im?genes donde se indica.

Debo aclarar que obviamente esto s?lo afecta a tus propios comentarios y ?nicamente en los comentarios que hayas hecho en tu propio blog.

Relojes de cuenta regresiva personalizados

Countdown Clock Codes es un servicio que nos permite crear nuestros propios relojes de cuenta regresiva personalizados, para ello nos ofrecen distintas im?genes de fondo para usar, as? como la posibilidad de agregar un mensaje personal en ellos.

Dispone de varias categor?as como cumplea?os, navidad, caricaturas, a?o nuevo, etc.

Su uso es sumamente sencillo, s?lo hay que elegir la fecha esperada, la imagen de fondo, el mensaje personal, los colores y listo. Una vez configurado copiamos el c?digo y lo pegamos en un elemento HTML/Javascript.

MySpace-Countdowns

Algunas opciones, excepto la palabra UNTIL (hasta, en espa?ol) podemos modificar una vez que tenemos el c?digo.

<center><embed src="http://www.countdownclockcodes.com/cd/ccc-cartoons/show.swf?clickURL=http://www.countdownclockcodes.com/&clickLABEL=MySpace-Countdowns&flashLABEL=CountdownClockCodes&skin=http://www.countdownclockcodes.com/cd/ccc-cartoons/skins/2.jpg&text=%20Aqui%20va%20tu%20mensaje&untilColor=3501985&textColor=16777215&datesColor=0&year=2050&month=0&day=1&hour=0&minute=0&second=0&x=0&y=80" quality="high" bgcolor="#ffffff" width="300" height="200" name="countdown" align="middle" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br><small><a href="http://www.countdownclockcodes.com/">MySpace-Countdowns</a></small></center>

La direcci?n que est? despu�s de URL es el enlace que se encuentra dentro del contador.

Hay dos etiquetas LABEL, la segunda es el texto que aparece en ese enlace dentro del contador.

La URL que est? despu�s de skin es la imagen de fondo, as? que podemos cambiarla por una imagen propia si es que alguna de las del sitio no nos gustan.

Lo que est? despu�s de text es el mensaje personalizado, ese puede quitarse si es que deciden no mostrar ning?n texto.

Y como un extra lo que est? en gris es el enlace de hasta abajo que aparece fuera del contador.

No es nada extraordinario, pero es una buena opci?n si es que est?n cansados de usar un reloj de cuenta regresiva m?s simple, sobre todo si podemos personalizarlo un poco m?s.

Enlace | Countdown Clock Codes

La Edici?n de HTML en la nueva interfaz de Blogger

Desde que en abril se anunci? la nueva interfaz de Blogger mucho se ha esperado de ella pero pocos han sido quienes han tenido la oportunidad de usarla. Estos "afortunados" -como dice Blogger-, seguro ya saben que esta nueva interfaz no tiene la opci?n de editar la plantilla desde la Edici?n de HTML. ?nicamente podemos cambiar de plantilla, o bien, cambiar de lugar o eliminar los gadgets desde lo que usualmente conocemos como Elementos de la P?gina y que ahora s?lo se llama Dise?o.

Como todo lo que est? en Blogger in Draft es de pruebas, ser?a muy apresurado decir que es definitivo que la Edici?n de HTML no la volveremos a ver. As? que bien puede ser que definitivamente no la incluyan o que m?s adelante lo hagan. Lo cierto es que en estos casos lo mejor es no especular y dejar que de la boca mano de Blogger salga la versi?n oficial con sus merecidos argumentos, aunque ya sabemos que siempre lo hace m?s tardado de lo que deber?a.

Mientras tanto, los "afortunados" que ya disponen de esta nueva interfaz a?n pueden editar la plantilla desde la Edici?n de HTML, ya sea usando la versi?n normal de Blogger o ingresando a una URL antigua.

Como esta interfaz est? disponible s?lo desde Blogger in Draft, entonces la primera opci?n es dejar de usar esta interfaz como escritorio predeterminado. As? que entramos en Blogger, desmarcamos la casilla Establacer Blogger en borrados como predeterminado, cerramos la sesi?n e ingresamos al Blogger "normal".

Habiendo hecho esto podr?s utilizar nuevamente la versi?n oficial actual que es la que la mayor?a conocemos y que s? dispone de la Edici?n de HTML.

Otra opci?n es que, si no quieres estar entrando y saliendo de esa interfaz cada vez que vayas a editar la plantilla entonces a trav�s de un link puedas acceder a la antigua interfaz de Blogger in Draft y as? puedas utilizar la Edici?n de HTML.

Para ello necesitas ingresar a tu cuenta de Blogger, y en la barra izquierda localiza el nombre de tu blog y luego haz click en Escritorio.

Al hacer esto ver?s en la barra de direcciones de tu navegador una direcci?n que contiene la ID de tu blog, es una serie de n?meros f?cil de reconocer.

Copia esa ID y luego usa este enlace:

http://draft.blogger.com/html?blogID=XXXXXXXXXXXXXXXXX

Cambia lo que est? en rojo por la ID de tu blog y podr?s acceder a la Edici?n de HTML de la antigua interfaz de Blogger in Draft.

Como tambi�n ser?a muy tedioso tener que estar buscando la ID de tu blog a cada rato puedes agregar esa URL a tus marcadores (favoritos) y as? tener un acceso mucho m?s f?cil.

Lo dicho, no hay nada definitivo de manera oficial pero mientras tanto estas son unas opciones para poder editar la plantilla del blog. Y claro, que si ya tienes esta interfaz aprovecha la opci?n de Enviar comentarios para que puedas quejarte libremente :)

Agregar una descripci?n a las etiquetas del blog

En algunas ocasiones es necesario ser lo m?s descriptivo posible con ciertas ?reas del blog como por ejemplo en las p?ginas de etiquetas; ya sea porque quiz? la etiqueta que elegimos no dice mucho sobre la tem?tica de la que se habla, o porque el p?blico al que est? dirigido el blog necesita m?s detalles para su comprensi?n.

As? que una forma de ser m?s expl?citos es agregar una descripci?n en las p?ginas de las etiquetas para cuando el lector haga click en esa etiqueta pueda tener una introducci?n sobre lo que encontrar? en esa categor?a.

Como tambi�n soy malo describiendo las cosas mejor mira en este blog de pruebas que enlaza a la etiqueta Juegos. Si das click en otras etiquetas ver?s que la descripci?n cambia y ninguna de ellas se ven ni en la portada ni en las entradas individuales.

Para agregar estas descripciones a las p?ginas de etiquetas haremos uso de los c?digos condicionales para que -redundantemente- condicionemos que s?lo se muestren en la etiqueta que especifiquemos, por lo tanto puedes hacerlo para todas las etiquetas de tu blog o s?lo para las que elijas.

Primero ingresa a Dise?o | Edici?n de HTML, marca la casilla Expandir plantillas de artilugios y busca esta l?nea:

<b:include data='top' name='status-message'/>

Si no la tienes probablemente la eliminaste para ocultar el mensaje "Mostrando entradas con la etiqueta..."
Si ese es tu caso entonces busca este c?digo:

<!-- posts -->
<div class='blog-posts hfeed'>

Debajo de cualquier de esos c?digos agrega esto:

<b:if cond='data:blog.url == &quot;http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta&quot;'>
<div id='IntroEtiquetas'>
<img src='URL de la imagen' style='float: left; border:0; margin: 0 5px 10px 0;'/>
...Aqu? va la descripci?n de la etiqueta...
</div>
</b:if>

Escribe el nombre de tu blog y el de la etiqueta donde se indica. Si lo deseas tambi�n puedes agregar una imagen, pero si no, puedes quitar el c?digo de la imagen y no pasa nada.

Ese c?digo es para una sola etiqueta, si deseas m?s s?lo agrega debajo de �l otro c?digo igual cambiando obviamente el nombre de la etiqueta y su descripci?n.

Ya que hayas hecho eso a?ade antes de ]]></b:skin> los estilos:

#IntroEtiquetas {
background:#6E6E6E; /* Color de fondo */
color:#000; /* Color del texto */
padding:20px;
}

Son estilos muy b?sicos pero que puedes mejorar agregando m?s o modificando los existentes para que se adapten a tu gusto.

Como ves es un procedimiento muy simple que puede ayudar a ilustrar las categor?as de tu blog haci�ndolas m?s personalizadas.

Men? vertical con subpesta?as hecho s?lo con CSS

Este es un men? vertical con subpesta?as hecho s?lo con CSS, no tiene nada de Javascript o de alguna librer?a, as? que para aquellos que prefieren las cosas simples esta es una buena opci?n para organizar las etiquetas del blog o cualquier enlace.

• Pesta?a 1
  • Pesta?a 1.1
  • Pesta?a 1.2
• Pesta?a 2
  • Pesta?a 2.1
  • Pesta?a 2.2
  • Pesta?a 2.3
  • Pesta?a 2.4
  • Pesta?a 2.5
• Pesta?a 3
  • Pesta?a 3.1
  • Pesta?a 3.2
  • Pesta?a 3.3
• Pesta?a 4
  • Pesta?a 4.1
  • Pesta?a 4.2
  • Pesta?a 4.3
  • Pesta?a 4.4
• Pesta?a 5
  • Pesta?a 5.1
  • Pesta?a 5.2

Colocarlo es bastante sencillo, s?lo entra en Dise?o | Edici?n de HTML y antes de
]]></b:skin> pega los estilos siguientes:

/* Men? vertical con subpesta?as
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
#menuvertical ul { list-style-type: none; padding:0;}
#menuvertical ul li.nivel1 {
width: 162px; /* Ancho de las pesta?as */
}
#menuvertical ul li.primera {
border-top: solid 1px #FFF; /* Borde superior de la primera pesta?a */
}
#menuvertical ul li {padding:0;}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #fff; /* Color del texto */
background-color: #045FB4; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pesta?as */
border-top: none;
padding: 8px;
position: relative;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #6E6E6E; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
}
#menuvertical ul li a.nivel1 {
display: block !important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top: -1px;
}
#menuvertical ul li ul li a {
width: 160px;
background-color: #045FB4; /* Color de fondo subpesta?as */
color: #fff; /* Color del texto subpesta?as */
}
#menuvertical ul li ul li a:hover {
position: relative;
background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpesta?as */
color: #000; /* Color del texto al pasar el mouse subpesta?as */
}

Ahora entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript y ah? pega lo siguiente:

<div id="menuvertical">
<ul>

<li class="nivel1 primera"><a href="#" class="nivel1">Pesta?a 1</a>
<ul>
<li class="primera"><a href="URL del enlace">Pesta?a 1.1</a></li>
<li><a href="URL del enlace">Pesta?a 1.2</a></li>
</ul>
</li>


<li class="nivel1"><a href="#" class="nivel1">Pesta?a 2</a>
<ul>
<li class="primera"><a href="URL del enlace">Pesta?a 2.1</a></li>
<li><a href="URL del enlace">Pesta?a 2.2</a></li>
<li><a href="URL del enlace">Pesta?a 2.3</a></li>
<li><a href="URL del enlace">Pesta?a 2.4</a></li>
<li><a href="URL del enlace">Pesta?a 2.5</a></li>
</ul>
</li>


<li class="nivel1"><a href="#" class="nivel1">Pesta?a 3</a>
<ul>
<li class="primera"><a href="URL del enlace">Pesta?a 3.1</a></li>
<li><a href="URL del enlace">Pesta?a 3.2</a></li>
<li><a href="URL del enlace">Pesta?a 3.3</a></li>
</ul>
</li>


<li class="nivel1"><a href="#" class="nivel1">Pesta?a 4</a>
<ul>
<li class="primera"><a href="URL del enlace">Pesta?a 4.1</a></li>
<li><a href="URL del enlace">Pesta?a 4.2</a></li>
<li><a href="URL del enlace">Pesta?a 4.3</a></li>
<li><a href="URL del enlace">Pesta?a 4.4</a></li>
</ul>
</li>


<li class="nivel1"><a href="#" class="nivel1">Pesta?a 5</a>
<ul>
<li class="primera"><a href="URL del enlace">Pesta?a 5.1</a></li>
<li><a href="URL del enlace">Pesta?a 5.2</a></li>
</ul>
</li>

</ul>
</div>

Agrega la URL de los enlaces donde se indica y listo. Si quieres agregar otra pesta?a SIN subpesta?as entonces a?ade antes de </ul> una l?nea como esta:

<li class="nivel1"><a href="URL del enlace" class="nivel1">Pesta?a 6</a></li>

Si quieres agregar una pesta?a CON subpesta?as entonces a?ade igual antes de </ul> lo siguiente:

<li class="nivel1"><a href="#" class="nivel1">Pesta?a 6</a>
<ul>
<li class="primera"><a href="URL del enlace">Pesta?a 6.1</a></li>
<li><a href="URL del enlace">Pesta?a 6.2</a></li>
<li><a href="URL del enlace">Pesta?a 6.3</a></li>
<li><a href="URL del enlace">Pesta?a 6.4</a></li>
</ul>
</li>

No es un men? fuera de lo normal pero s? es bastante ?til para organizar los enlaces del blog.

Cambiar el favicon del blog ahora desde Blogger

Blogger hoy ha puesto la opci?n de cambiar el favicon del blog desde Blogger in Draft dentro de los Elementos de la p?gina, lo cual anteriormente hac?amos directamente desde la Edici?n de HTML de la plantilla.

Para acceder a �l s?lo hay que ir a Dise?o | Elementos de la p?gina y dar click en Editar sobre el nuevo elemento Favicon.

Ah? cargamos el favicon que queremos para nuestro blog en formato .ICO que sea menos a 10kb de peso y listo.

Si a primera vista no lo visualizan s?lo hay que refrescar la p?gina del blog y ah? estar?.

No es nada del otro mundo pero la buena noticia es que eso soluciona el problema que ten?amos con el favicon que no se ve?a en Internet Explorer 9.

Gracias a Psiko Corpse Grinch por el aviso.

Cuando en el blog aparecen menos entradas de las configuradas

Son muchos quienes por primera vez se topan con este conflicto, configuran su blog para mostrar equis n?mero de entradas y de un momento a otro aparecen menos entradas en el blog de las que hab?an configurado.

No es algo nuevo ni se trata de un error de la plantilla o un problema de Blogger y aunque ya hace un tiempo hab?amos tocado parte de ese tema me parece que es necesario explicar un poco m?s a detalle el porqu� sucede esto debido al gran n?mero de personas que preguntan muy a menudo por esta situaci?n.

Es bien sabido por todos que desde siempre Google ha querido destacar por la rapidez en sus productos haciendo de este factor un distintivo de su marca. Blogger, al ser un producto de Google no se puede quedar atr?s por lo tanto quiere que los blogs alojados en blogspot sean lo m?s r?pido posibles en cargar, esto no por un capricho de ellos, sino porque est? mas que visto que los usuarios preferimos los sitios que cargan m?s r?pido a aquellos que nos quitan 3 minutos de nuestro "valioso tiempo" o que simplemente parece que nunca acabar?n de cargar.

Es por ello que desde febrero del 2010 Blogger puso en marcha la autopaginaci?n como una medida para controlar la velocidad de carga de los blogs. Esto es que, si un blog tarda mucho tiempo en cargar debido a la cantidad de contenido que posee, entonces, sin importar cu?ntas entradas hayas configurado, Blogger determinar? de forma autom?tica el n?mero apropiado de entradas a mostrar tanto en la portada como en las p?ginas de etiquetas y archivos a fin de no hacer el blog tan lento.

Por lo tanto, si ten?as configurado (por ejemplo) 10 entradas a mostrar entonces podr?a ser que s?lo se muestren la mitad de ellas o menos.

No hay un truco o receta m?gica para evitarlo, es una medida que tom? Blogger y que parece no haber marcha atr?s. Sin embargo s? puedes hacer algo para reducir el tiempo de carga de tu blog y de esta forma quiz? puedas ver un par de entradas m?s (no te obsesiones, no ver?s 50 entradas de nuevo).

Si la acci?n fue tomada por la velocidad de carga del blog entonces trabaja en reducirla:

• Quita los gadgets que no sean necesarios o que sean lentos en cargar
• Revisa si tienes alg?n script que alguna vez pusiste pero que dejaste de usar y olvidaste eliminar de la plantilla
• Reduce el n?mero de im?genes que tengas tanto en las entradas como dentro de la plantilla, o bien, utiliza un editor que optimice las im?genes para hacerlas m?s ligeras.
• Muestra algunos gadgets s?lo en las entradas, as? evitar?s que �stos tengan que cargar en la portada y archivo del blog

En resumen, imagina que en tu blog har?s una venta de garage y todo lo que no uses o no sea necesario que se vaya para afuera, y lo que vayas a dejar que no ocupe tanto espacio. M?s delante hablaremos un poco m?s sobre el tema de reducir la velocidad de carga del blog.

Seguro que muchos se quejan (y se seguir?n quejando) por estas medidas pero piensa que tener un blog m?s r?pido significa tener mayores probabilidades de tener m?s visitas en el blog pues los que antes abandonaban la p?gina porque no cargaba ahora podr?n quedarse en tu blog a navegar sin esperar mucho tiempo en ver el contenido de tu sitio.

Mostrar los Seguidores en otro blog

AVISO

La p?gina de Google Friend Connect cerr? el 1 de marzo de 2011, por tal motivo ya no es posible ingresar al sitio para realizar este tipo de configuraciones.

Seguro no es el caso de todos pero habr? quienes en alg?n momento tengan la necesidad de poner el gadget de Seguidores de su blog en otro blog distinto. No me refiero a exportar tus seguidores a otro blog pues eso como tal no estoy seguro que se pueda.
A lo que me refiero es a poder mostrar el gadget de seguidores del blog principal en otro blog diferente y que los lectores tambi�n puedan hacerse seguidores desde ese segundo blog.

Para conseguir que el gadget de Seguidores se muestre en otro blog entra a Google Friend Connect, ah? busca en la columna izquierda el nombre de tu blog y da click en �l.

Aparecer? un peque?o men?, busca Configuraci?n y luego selecciona la pesta?a Avanzados.

Una vez hecho eso busca el punto n?mero 2 que dice Otras opciones, ah? ver?s un recuadro titulado Direcciones alternativas.

Dentro del recuadro encontrar?s dos URLs de Blogger, justo debajo de ellas agrega la URL del otro blog donde quieres mostrar a tus seguidores y guarda los cambios.

Luego regresa al peque?o men? del lado izquierdo, da click en Gadgets y selecciona Miembros.

Configura tu gadget de seguidores con el ancho y colores que quieras, cuando termines da click en Generar c?digo.

Ya s?lo copia ese c?digo y dir?gete al blog donde deseas mostrar tus seguidores, ah? pega en un elemento HTML/Javascript el c?digo que copiaste y listo.

Ver?s que en ese blog se muestra el mismo n?mero de seguidores que tienes en tu blog principal. Aunque en algunos casos quiz? diga que no hay seguidores, pero si le das click en Unirte o en Acceder de inmediato se mostrar?n todos los seguidores.

Un dato curioso es que en ese momento ver?s que el gadget tradicional de Seguidores de tu blog principal habr? cambiado ligeramente, b?sicamente habr? cambiado el color del bot?n para unirse el cual tendr? un color azul y mostrar? un texto distinto al habitual.

Otra "curiosidad" es que en adelante te llegar? un correo cada vez que alguien se haga seguidor de tu blog, pero si te enfada recibir esos correos puedes eliminar esas notificaciones haciendo click en el enlace que viene en los mismos correos.

Como dije al principio, quiz? no sea ?til para todos pero si alg?n d?a alguien necesita hacerlo por equis raz?n entonces ah? est? la informaci?n.

Tabview para agrupar varios gadgets en uno solo

Los tabviews son elementos que nos permiten agrupar en un solo contenedor varios gadgets y que pueden seleccionarse por medio de pesta?as.

Su funci?n principal es ahorrarnos espacio en el blog para evitar tener dispersos gadgets de la misma categor?a y as? poder agrupar en uno solo varios gadgets. Hay varios m�todos para crear tabviews, algunos requieren jQuery, otros Mootools, o cualquier otro script.

Para agregarlo a tu blog entra en Plantilla | Edici?n de HTML y antes de ]]></b:skin> pega los estilos:

/* Tabview
----------------------------------------------- */
.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}
.tabviewnav {
margin:0;
padding:3px 0; /* Si usas plantilla del Dise?ador cambia el 0 por 15px */
font-size:12px; /* Tama?o de la fuente en las pesta?as */
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#0B243B; /* Color de las pesta?as */
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#fff;
}
.tabviewnav li a:hover {
color:#fff;
background:#084B8A; /* Color de la pesta?a al pasar el cursor */
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#084B8A; /* Color de la pesta?a activa */
color:#fff;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #ccc; /* Borde del contenedor general */
background:#fff; /* Color de fondo del gadget */
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

Ahora antes de </head> pega este script:

<script type='text/javascript'>
// Tabview para agrupar gadgets

//<![CDATA[
document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
//]]>
</script>

Por ?ltimo busca esta l?nea:

<div class='column-right-inner'>

O si usas una plantilla antigua de Blogger busca esta l?nea:

<div id='sidebar-wrapper'>

Pega debajo de cualquiera de esas dos l?neas lo siguiente:

<div class='tabview'>
<b:section class='tabviewtab' id='Pesta?a1' maxwidgets='1'/>
<b:section class='tabviewtab' id='Pesta?a2' maxwidgets='1'/>
<b:section class='tabviewtab' id='Pesta?a3' maxwidgets='1'/>
</div>

Guarda los cambios, y entra en Dise?o | Elementos de la p?gina, ah? ver?s las nuevas ?reas para agregar los gadgets, los identificar?s porque tienen mayor separaci?n que los dem?s.

S?lo tienes que dar click en A?adir un gadget para agregar el gadget a la pesta?a que le corresponde, o bien, arrastrar un gadget que ya tengas a esa secci?n.

Si quieres agregar m?s pesta?as s?lo a?ade antes del ?ltimo </div> una l?nea como esta:

<b:section class='tabviewtab' id='Pesta?a4' maxwidgets='1'/>

Toma en cuenta que cada l?nea que agregues deber? tener un ID diferente, por ejemplo Pesta?a5, Pesta?a6, etc.

Puedes agregar varios tabviews, s?lo repite el ?ltimo paso y recuerda cambiar de igual forma el nombre de los IDs.

Si deseas agregarlo en una entrada para mostrar un contenido entonces el c?digo que deber?s a?adir en tu post ser? este:

<div class='tabview'>
<div class='tabviewtab' id='Pesta?a1' title='T?tulo de la pesta?a'>
... Aqu? el contenido ...
</div>
<div class='tabviewtab' id='Pesta?a2' title='T?tulo de la pesta?a'>
... Aqu? el contenido ...
</div>
<div class='tabviewtab' id='Pesta?a3' title='T?tulo de la pesta?a'>
... Aqu? el contenido ...
</div>
</div>

Ah? agrega el contenido que quieras donde se indica y el t?tulo de la pesta?a, y de igual forma puedes a?adir m?s pesta?as antes del ?ltimo </div> a?adiendo un fragmento como este:

<div class='tabviewtab' id='Pesta?a4' title='T?tulo de la pesta?a'>
... Aqu? el contenido ...
</div>

Recuerda que, si tu sidebar es muy angosta no conviene que pongas muchas pesta?as, o que los t?tulos de las pesta?as sean muy largos, de lo contrario las pesta?as se encimar?n.

Tambi�n debes tomar en cuenta que este gadget no acelera la velocidad de carga del blog, es ?nicamente para agrupar gadgets en uno solo, incluso -dependiendo de cada blog- podr?a tardar un poco en cargar el tabview.

A?adir el bot?n +1 (PlusOne) de Google en Blogger

Desde hace un par de meses Google hab?a anunciado un bot?n llamado Plus One (+1) el cual funcionar?a como el bot?n 'Me gusta' de Facebook, o sea que, al ver los resultados en una b?squeda podr?amos ver cu?ntas personas han recomendado alg?n enlace de los resultados y nosotros mismos tambi�n valorar los enlaces que m?s nos gusten.

El bot?n ya ha sido lanzado, y como lo han anunciado en Blogger Buzz ya est? disponible tambi�n en Blogger.

El bot?n est?ndar viene incluido dentro de los botones de compartir de Blogger, si a?n no los tienes s?lo ingresa en Dise?o | Elementos de la p?gina, da click en Editar sobre el elemento Entradas del blog y ah? marca la casilla de los botones.

Si ya tuvieras los botones pero no ves el bot?n Plus One, entonces agrega despu�s de <head> esta l?nea:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>

Si por el contrario no quieres tener ese bot?n, pero quieres conservar los dem?s botones de compartir de Blogger entonces agrega antes de ]]></b:skin> esto:

.dummy-container {display:none;}

Tambi�n podemos usar el bot?n Plus One en otra parte, por ejemplo arriba de las entradas, y podemos usar un bot?n m?s grande.

Para poner el bot?n de esta forma entra en Dise?o | Edici?n de HTML, marca la casilla Expandir plantillas de artilugios y busca esta l?nea:

<div class='post-header'>

Justo debajo de ella pega lo siguiente:

<div style='float: right; padding:10px;'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone expr:href='data:post.url' size='tall'/>
</div>

Si quisieras que el bot?n s?lo se vea en las entradas individuales entonces usa este c?digo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float: right; padding:10px;'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone expr:href='data:post.url' size='tall'/>
</div>
</b:if>

Hay 4 tama?os diferentes de los botones, el est?ndar es el que se usa en los botones de compartir, pero si pones este ?ltimo bot?n puedes cambiar el tama?o tall que es el m?s grande, por small (peque?o) o medium (mediano).

Small	Medium	Standard	Tall

Si has elegido poner el bot?n arriba de las entradas y usas una plantilla del Dise?ador entonces quiz? no te permita hacer click en el bot?n, para solucionarlo busca esta parte y elimina lo que est? en negrita:

.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}

Si tienes dudas sobre el bot?n Plus One visita la p?gina de preguntas frecuentes que Google ha puesto a disposici?n de todos:
http://www.google.com/support/webmasters/bin/answer.py?answer=1140194

Poner separadores en los gadgets

Hace alg?n tiempo vimos c?mo poner separadores en las entradas, y desde esa vez muchos han preguntado c?mo poner separadores en los gadgets de la sidebar. La verdad es que es un procedimiento sumamente sencillo que no deber? quitarnos ni 3 minutos de tiempo.

Haremos algo similar como lo que hicimos para enmarcar entradas y gadgets s?lo que aqu? tendremos la opci?n de incluir una imagen como separador y as? delimitar de forma est�tica el final de cada gadget.

Si usamos bordes tendremos un resultado como este.

Y si usamos im?genes podr? verse m?s o menos as?.

Veremos c?mo hacerlo para las plantillas antiguas de Blogger, y las hechas con el Dise?ador de plantillas de Blogger. En cualquier de los dos casos entra en Dise?o | Edici?n de HTML y luego...

Para plantillas hechas con el Dise?ador de plantillas de Blogger

Si quieres que el separador sea un borde agrega antes de ]]></b:skin> lo siguiente:

.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}

Si quieres que el separador sea una imagen entonces en lugar de lo anterior agrega esto:

.column-right-outer .widget, .column-left-outer .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}

Para las Plantillas antiguas de Blogger

De igual manera agrega antes de ]]></b:skin> lo siguiente si quieres que el separador sea un borde:

.sidebar .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}

O bien, si quieres que el separador de los gadgets sea una imagen entonces lo que deber?s agregar ser? esto:

.sidebar .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}

Agrega la URL de la imagen del separador donde se indica si es que te decidiste por el separador con im?genes. Si la imagen fuera muy alta cambia donde dice padding-bottom:70px; por una valor m?s grande hasta que la imagen se muestre por completo.

En el caso de los separadores con bordes puedes modificar el grosor, tipo y color del borde, eso se hace donde dice border-bottom:4px solid #000;
4px es el grosor, solid es el tipo de borde, puedes cambiarlo por dotted, dashed, double, groove, ridge, outset, o inset, y #000 es el color del borde.
En donde dice padding-bottom:20px; podemos controlar la distancia entre cada gadget.

Como dije antes, es un procedimiento bastante simple que quiz? la parte m?s dif?cil ser? decidirnos por un estilo que nos guste.