Cargando...
Menu Ver sumario






Actualizando el botón +1 y aprovechando para recomendar la página principal

30/07/2011
Hace unos días, Vagabundia nos avisaba de que el script para instalar el botón +1 había sido actualizado. Esto no quiere decir que el anterior código haya dejado de funcionar y que irremediablemente tengamos que cambiarlo. No, simplemente que hay una nueva versión.

Las actualizaciones suelen ser para mejorar, pero como no me he puesto a ver el contenido del script de Google (ni lo voy a hacer), no sé exactamente en qué consisten las novedades. Sin embargo, lo que si se ve a simple vista es que el nuevo código incluye un parámetro que por su nombre, posiblemente haga que el script funcione de manera asíncrona.

Esto suele ser bastante bueno para reducir la velocidad de carga del blog, así que aunque J.Miur tenía en el momento de redactar el post una pequeña reserva sobre su funcionalidad, servidor lo ha instalado y puede acreditar que hasta la fecha ha funcionado sin problemas.


El nuevo código lo podéis encontrar en la misma página que ya comentamos en su momento (Plusone button) y para actualizarlo sólo hay que tener en cuenta que este tiene dos partes.

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>

<!-- Place this tag after the last plusone tag -->
<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>

Las primeras dos líneas son las que "pintan" el bótón allá dónde queráis. Si instaláis ahora el botón por primera vez, las tenéis que insertar dónde queráis que aparezca: en la barra lateral, en la cabecera de cada post, tras estos... Sin embargo, si ya teníais el botón, estas líneas no hay que tocarlas y se quedan tal y cómo estén.

Las siguientes son la llamada al script que maneja todo el sistema y estas son precisamente las que han cambiado. Otra vez, distinguimos entre páginas que tenían el botón y las que no.

Si no teníais el +1, sólo tenéis que buscar en vuestra plantilla el código del último botón que hayamos "pintado" (podemos situar varios sin problemas) e insertar esta segunda parte después. En un principio esta es la única restricción (situarlo después), pero para no calentarnos la cabeza ni dejarnos la vista, quizás lo más rápido es colocarlo justo antes de </body>. De esta manera, con seguridad que no nos equivocaremos.

Si ya tenías el botón, el procedimiento es el mismo, pero previamente tendrás que borrar la línea que llamaba al antiguo código. Esta:

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

Puede que la tengas un poco distinta si incluiste alguno de los parámetros para adaptar el lenguaje o cambiar el tamaño (SIZE: small, medium, standard o tall.


Y ya que estamos facilitando la recomendación de nuestras entradas ¿por qué no hacerlo directamente con nuestro blog entero?

En un principio, el script lo que registra es la dirección dónde se encuentra el botón, por lo que la dirección principal sólo se recomendará con el +1 si estamos en dicha página principal. Pero quizás alguno quiera que también se pueda hacer esto desde cualquier página. El ejemplo lo tenéis ahora mismo en este blog, en la barra de la derecha.

Pues esto es también muy fácil una vez que ya tenemos todo lo anterior. Sólo hay que añadir otra vez el código que siguiendo la expresión que estamos utilizando en esta entrada, "pinta" el botón, pero esta vez incluyéndole una referencia a la dirección de nuestra página inicio.

<g:plusone href='http://NOMBREBLOG.blogspot.com'/></g:plusone>

Sería lo marcado en verde, respetando los posibles atributos que tuviérais en su caso.


Por último, si estáis aburridos y queréis redondear la cosa, en Ciudad Blogger tenéis también explicado un sistema para que el botón +1 muestre un mensaje cuando se pulse.

Imágenes en enlaces de navegación sólo con CSS. Blogger.

26/07/2011
Es verano y por tanto además de estar medio de vacaciones también estoy muy perezoso, así que me vais a disculpar el bajo nivel de publicación y que hoy os venga con una cosa sencillita.

Para ir directamente al grano, se trata de sustituir los enlaces que de manera automática salen en todos las plantillas con el rótulo "Entradas más recientes", "Entradas antiguas" y "Página principal" por imágenes y además, incluyendo un efecto rollover o hover.

Esto ya vimos cómo hacerlo alterando la parte HTML de la plantilla, pero en esta ocasión lo vamos a hacer sólo cambiando las propiedades de las clases CSS que administran este tipo de enlaces. La ventaja de hacerlo de esta manera y no de la otra, es que cuando Blogger tenga a bien cambiarnos subrepticiamente nuestro código, las modificaciones que hayamos hecho en nuestra plantilla no afectarán tanto a las novedades que nos incorporen.

En las plantillas de 2006, la referencia para insertar el nuevo código son estas líneas que se reproducen a continuación:

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

Puede ser que en lugar de $startSide y $endSide, os aparezcan left y right, pero esto es indiferente. Hay que tomar todo ese trozo y sustituirlo por este otro:

.blog-pager {
background: $(paging.background);
position: relative;
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}
a.home-link {
position:absolute;
left:50%;
margin:0px auto 0px -22px;
padding:0px;
width:44px;
height:44px;
text-indent:-1000px;
overflow:hidden;
background:url(https://lh5.googleusercontent.com/-p1c6dHi1FpE/TfONzGPVH4I/AAAAAAAAOFk/Cxc6C61vFRI/home.jpg);
}
a.home-link:hover {
background:url(https://lh3.googleusercontent.com/--_riVMv6s0g/TfOVhDPXkXI/AAAAAAAAOFs/FZC4ti1QK6U/homeneg.jpg);
}
#blog-pager-newer-link a {
float:left;
padding:0px;
width:44px;
height:44px;
text-indent:-1000px;
overflow:hidden;
background:url(https://lh3.googleusercontent.com/-suBXj3s0yOU/TfONzDZ3_eI/AAAAAAAAOFc/s_pRGf23IVA/flecha1.jpg);
}
#blog-pager-newer-link a:hover {
background:url(https://lh3.googleusercontent.com/-GFENOjY2rwo/TfOVhIjHMdI/AAAAAAAAOF0/1i8MbwFCUbU/flecha1neg.jpg);
}
#blog-pager-older-link a {
float:right;
padding:0px;
width:44px;
height:44px;
text-indent:-1000px;
overflow:hidden;
background:url(https://lh5.googleusercontent.com/-m7PjPnyacHY/TfONzMAlrbI/AAAAAAAAOFg/RoTlwqQqvKI/flecha2.jpg);
}
#blog-pager-older-link a:hover {
background:url(https://lh4.googleusercontent.com/-FxzfedowoA0/TfOVhCWQfkI/AAAAAAAAOFw/4YLOBH-G0vc/flecha2neg.jpg);
}

La base del truco consiste en asignar un fondo gráfico determinado a las clases que controlan cada uno de los tres tipos de enlaces (home-link, blog-pager-newer-link y blog-pager-older-link) y al mismo tiempo, mandar bien lejos el texto por defecto, con un sangrado negativo (text-indent). Esto hace que sólo sea el texto el que desaparezca, viéndose sin problemas la imagen de fondo. Es necesario que el ancho y el alto de cada clase se ajuste al tamaño de las imágenes a utilizar.

Los efectos hover son opcionales y para suprimirlos sólo habría que omitir las clases y sus propiedades, que terminan con esa pseudoclase (:hover).

Por supuesto, las imágenes de este ejemplo son sólo eso, un ejemplo y las podéis/debéis personalizar a vuestro gusto. Sólo habría que sustituir las direcciones propuestas por las vuestras y cambiar los anchos y altos por los que correspondan.

En plantillas del nuevo diseñador sólo encontraréis como referencia la clase .blog-pager. En ese caso, sólo añadís en ella la propiedad position:relative; y a continuación insertáis el resto de código anteriormente reproducido, antes de ]]></b:skin>

Chuleta para crear formas simples con CSS3

13/07/2011
Las siguientes formas no son imágenes, sino CSS que incluye algunas de las últimas propiedades del estándar. Puedes probar a descargarlas, pero sólo para comprobar que efectivamente sólo tenemos ante nosotros fondos, bordes y unas pocas curvas.



Sabiendo que en una capa con ancho o alto igual a cero los bordes sí que se muestran del ancho con que se definan, que estos se solapan formando ángulos que pueden ser a su vez redondeados y como no, con un poco de lógica, se pueden construir estas y otras muchas más formas simples... o más complicadas.

La cosa funciona con un div vacío al cual le hemos asignado una ID. Previamente, a esa ID le hemos asignado una serie de propiedades CSS. Por ejemplo, lo que parece un banderín violeta (que me perdonen la señoras por mi incultura sobre los colores) se construiría con este código.

En la parte CSS de nuestra plantilla incluimos la ID bookmark-ribbon y sus propiedades:
#bookmark-ribbon {
width: 0;
height: 100px;
border-left:50px solid purple;
border-right: 50px solid purple;
border-bottom:35px solid transparent;
}

Y dónde queramos que aparezca la forma, se colocaría una capa como esta:
<div id="bookmark-ribbon"></div>

Experimentando un poco sobre este tipo de código, podéis comprobar mejor cómo funciona, pero por si acaso, en Land of Web han sido tan amables que han recopilado 36 de estas en una estupenda hoja de ayuda que incluye el código CSS ilustrado con la imagen que podremos formar ► CSS3 Simple Shapes – Cheat Sheet.

CSS3: Como es habitual, sólo disponible en los navegadores más modernos...


¡Hala! Todos a jugar con la nueva interface de Blogger

08/07/2011
Noticia breve.

Unos la tenían y otros no, pero desde anoche, todos los usuarios de Blogger pueden ya ver y trastear el nuevo escritorio. Así lo anunciaron desde su blog.

Pero ojo... No os volváis locos buscándolo en vuestro acceso normal (http://www.blogger.com), porque de momento está en el laboratorio, es decir en Blogger Draft, el banco de pruebas de todas las novedades de esta plataforma.


La primera tontería que me ha agradado mucho, ha sido la incorporación de un calendario en el apartado para programar entradas. Realmente cómodo, aunque tengo que añadir que al programar esta me dió un fallo y el feed envió un par de tweets con enlaces rotos, como si ya se hubiera publicado el post.


Un pasito más dentro del proceso de modernización y re-styling de todos los productos de Google.

Agradecemos el soplo a @Pizcos, que cazó el tweet al vuelo y habilmente lo pasó raudo y veloz ;)

Nada nuevo. Sólo Google+, el botón +1, los seguidores y toda esta movida

07/07/2011
Cómo acostumbra a decir Pizcos, Google no da puntada sin hilo y lo del botón +1 parece que no fue sino el primer paso de algo que tiene mucho que ver con el gran proyecto del emporio para meterse de lleno en el tema de las redes sociales, un filón en el que hasta ahora se había quedado un poco descolgado. Y no por gusto... ¿Hemos olvidado Google Wave?

Habitualmente uno supone cosas que luego no son como cree. El botón de Google lleva ya algunas semanas danzando entre nosotros y resulta tan fácil su instalación, que creí innecesario hablar sobre él. Pero claro lo obvio a veces no lo es tanto. ¿Cómo alguien va a instalar algo que no sabe que existe o si lo sabe, desconoce dónde encontrar su código? Además ¿para qué nos sirve? Pues nada, aquí estamos para explicar un poco cómo vemos nosotros el tema de la #googlerevolution y para lo del dichoso botón.


El interés es el  mismo que comenté cuando hablaba de Google Friend Connect y el gadget de Seguidores (para los que tenemos Blogger) y radica en la relevancia que en sí mismo tiene el benefactor del botón. Ni más ni menos que San Google.

El botón +1 permite que los usuarios descubran contenido relevante (un sitio web, un resultado de búsqueda de Icono de Google o un anuncio) de usuarios que ya conocen y en los que confían. Al añadir el botón +1 a sus páginas, los usuarios pueden recomendar su contenido a sus amigos y a sus contactos para que estos vean la recomendación a través de los resultados de búsqueda de Icono de Google en el momento más relevante.

O sea, que cuando algún contacto vuestro busque en Google, además de los enlaces habituales también encontrará en lugar destacado, aquellos que vosotros hayáis recomendado previamente pulsando el botón.

Como editores web, lo interesante es el mecanismo inverso: que los usuarios pueden utilizar el botón +1 en tu sitio para recomendar contenido a sus contactos. Sin botón no facilitamos la recomendación.


Pero Google piensa -con razón- que nosotros no valoramos igual las recomendaciones de desconocidos que las de gente con la que tenemos afinidad en cuanto a gustos. Así que las que veremos serán exclusivamente las de aquellos con los que estamos conectados por GMail, Reader, Buzz, Seguidores (Friend Connect). Todo bien entrelazado y conectadito.


¿Y que dice Adsense de todo esto? Pues casi nada si aspiras a pagarte el hosting y una cena con la parienta por tu aniversario con la publi. Contenido parcial de un correo de esta semana sobre el boton +1:

De este modo, logrará que sus páginas destaquen en las búsquedas de Google, mejorando su CTR en los resultados de las búsquedas tanto de pago como naturales.

Evidentemente, la credibilidad es baja dado que la fuente es parte (muy) interesada, pero por si acaso quizás deberíamos ir pensando en todo esto.


Además, para terminar de cerrar el círculo tenemos entre otras pistas el cambio de look de algunos servicios, la homogeneización de marca y el reciente lanzamiento de Google+, que salvo alguna sorpresa adicional es el culmen de todo el proyecto.

De este último servicio ya se ha hablado demasiado -tenemos hasta un blog especializado- y hay información por todas partes, así que baste saber que es la integración social de todos los productos de Google y el lugar desde dónde podrás interactuar con tus contactos.

Círculos, Quedadas, Subidas desde el móvil, Intereses y Hola! (mensajería) es lo que ahora mismo podemos encontrar. Todo con muy buena pinta según opinión generalizada.


¿Y lo del botón? Ah, sí. Ya dije que era fácil. Sólo hay que acceder a esta página (El botón +1 en su página web) y seguir las instrucciones. En Blogger, el primer trozo de código también se puede insertar antes de &lt;/head&gt;. Para el otro trozo que es el que realmente pinta el botón, lo más normal es que lo pongáis junto con el resto de botones: Twitter, Facebook, Bitácoras, Menéame, etc.


Bueno, pues ya tenemos botón, tenemos seguidores, tenemos blog, tenemos reader, tenemos invitaciones para Google+... Ahora lo complicado de momento es conseguir que seamos uno de los elegidos por los dioses o que al menos tengamos un golpe de fortuna que nos permita registrarnos en un descuido del sistema.

Pero bueno, tranquilos, que el 31 de Julio está a la vuelta de la esquina.

Más información:

Destacar comentarios de los autores de cada entrada en Blogger

05/07/2011
Esto es algo antiguo y que de hecho ya había publicado anteriormente. Lo que ocurre es que con tantos cambios automáticos por parte de Blogger en las plantillas, aquel primer post ha quedado desfasado y lo explicado allí no sirve actualmente.

El cambio es muy sencillo y nos permite dar un estilo distinto a los comentarios del autor de un post. Si hay varios editores, en cada entrada sólo se destacarán aquellos que correspondan al autor de esa entrada concreta.

Tenemos que ir a Diseño ► Edición HTML y con Expandir plantillas de artilugios seleccionado, buscar el siguiente trozo:

...
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
...

Ese es el bucle que va imprimiendo los comentarios de cada post y un poco más abajo de esas líneas, encontraremos la variable que contiene todos los comentarios. Es <data:comment.body/>. Vamos a suponer que todos la encontrais entre etiquetas de párrafo (<p>). Si es así, añadimos una condición para comprobar cuando el autor del comentario y el del post coinciden, en cuyo caso aplicamos un estilo diferente. En verde lo que encontraremos. Lo demás hay que añadirlo.

<b:if cond='data:comment.author != data:post.author'>
<p>
<data:comment.body/>
</p>
<b:else/>
<p class='estiloautor'>
<data:comment.body/>
</p>
</b:if>

Ahora ya sólo resta crear en nuestra parte CSS la clase estiloautor y darle formato a discreción. El ejemplo más fácil sería añadir un color de fondo distinto, pero el resto de posibilidades que son infinitas, lo dejo a vuestro buen gusto y criterio.

.estiloautor {
background:#ffffff;
padding:10px;
}

Si por casualidad vuestra plantilla no utiliza las etiquetas de párrafo para los comentarios, entonces tendréis que sustituir todas las p por div.

Ejemplo en Oldbook:

Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada
El botón que no hace nada

Ir Arriba