Sé que ya muchos están usando el botón Google+1 en el blog para que los usuarios puedan recomendar las entradas que les parecen interesantes. Pero también podemos colocar el botón +1 (Plus One) para que se recomiende no la entrada sino la página principal del blog.
Y para ya no poner nada en las entradas (por si ya tienes ahí el botón) vamos a colocar el botón Google +1 en una barra flotante abajo de la página, de esta forma tus lectores podrán recomendar tu blog.
Puedes ver el ejemplo en esta misma entrada, al final aparece una barra. En ella se muestra un texto que invita a los lectores a recomendar el blog, luego, tal como hicimos para poner un mensaje al hacer click en el botón +1 haremos que el primer mensaje desaparezca al hacer click y que en su lugar se muestre un mensaje de agradecimiento, y al hacer click nuevamente para deshacer el voto se mostrará un mensaje diferente.
Y para ya no poner nada en las entradas (por si ya tienes ahí el botón) vamos a colocar el botón Google +1 en una barra flotante abajo de la página, de esta forma tus lectores podrán recomendar tu blog.
Puedes ver el ejemplo en esta misma entrada, al final aparece una barra. En ella se muestra un texto que invita a los lectores a recomendar el blog, luego, tal como hicimos para poner un mensaje al hacer click en el botón +1 haremos que el primer mensaje desaparezca al hacer click y que en su lugar se muestre un mensaje de agradecimiento, y al hacer click nuevamente para deshacer el voto se mostrará un mensaje diferente.
Como sé que a muchos les puede parecer molesto tener siempre la barra visible, he incluido una cookie (a duras penas lo hice) para que el lector sólo lo vea una vez por semana, aunque por supuesto este tiempo lo puedes configurar a tu gusto.
Empecemos. Primero entra en Diseño | Edición de HTML y pega antes de </head> esto:
<script type='text/javascript'>Ahora pega antes de ]]></b:skin> estos estilos:
//<![CDATA[
// Cookies
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
//]]>
</script>
/* Barra Plus OneA continuación busca la etiqueta <body> o esta línea:
----------------------------------------------- */
#barraPlus1 {
position:fixed;
bottom:0px;
left:0;
height:24px;
background:#000; /* Color de la barra */
width:100%;
padding:5px;
filter:alpha(opacity=70); /* Transparencia de la barra */
-moz-opacity:0.7; /* Transparencia de la barra */
-khtml-opacity: 0.7; /* Transparencia de la barra */
opacity: 0.7; /* Transparencia de la barra */
z-index:900;
}
#mensajePlus1, #textoPlus1 {
color:#D8D8D8; /* Color del texto */
font-family:Verdana; /* Tipo de fuente */
font-size:16px; /* Tamaño del texto */
vertical-align: middle;
display:table-cell;
}
.botonPlus1 {
display:table-cell;
padding-left:20px;
}
.cerrarTextoPlus1 {display:none !important;}
<body expr:class='"loading" + data:blog.mobileClass'>Debajo de cualquiera de ellas dos agrega este código:
<script type='text/javascript'>
//<![CDATA[
// barra Google +1 (ciudadblogger.com)
function saludoPlus1(plusone) {
var div_ty = document.getElementById("mensajePlus1");
if (plusone.state == "on") {
document.getElementById('textoPlus1').className='cerrarTextoPlus1';
div_ty.innerHTML = "¡Gracias por recomendarnos! Tu voto es importante para nosotros.";
} else {
document.getElementById('textoPlus1').className='cerrarTextoPlus1';
div_ty.innerHTML = "Parece que ya no te gustamos, ojalá nos des otra oportunidad.";
}
}
//]]>
</script>
<div align='center' id='barraPlus1'>
<span id='textoPlus1'>¿Te ha gustado el blog? Qué tal si nos regalas un +1</span>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<div id='mensajePlus1'/><span class='botonPlus1'><g:plusone callback='saludoPlus1' href='http://nombre-de-mi-blog.blogspot.com'/></span>
</div>
<script type='text/javascript'>
//<![CDATA[
var divName = document.getElementById("barraPlus1");
if(!readCookie('cookiePlus1')) {
divName.style.display='block';
createCookie('cookiePlus1', 'cookiePlus1', 7); // Número de días que dejará de verse
}
else {
divName.style.display='none';
}
//]]>
</script>
Ahora vamos a personalizar todo esto. En el segundo código, el de los estilos, está señalado en color verde algunas áreas que se pueden modificar como el color de fondo, tamaño de la letra, etc. Ahí mismo se controla la transparencia que tiene la barra, con un valor más alto se hace menos transparente, con uno más bajo se hace más transparente.
El primer texto en rojo es el mensaje que aparece cuando el lector recomienda el blog, el segundo texto es el mensaje cuando deja de recomendarlo, y el tercero es el mensaje que aparece por defecto cuando carga la página.
Un poco más abajo se señala dónde se debe cambiar la dirección de tu blog.
Por último, en color azul verás el 7, ese es el número de días que dejará de verse la barra estática, transcurrido ese tiempo el lector podrá verla de nuevo, a menos claro que él haya borrado las cookies de su navegador. Ese valor puedes cambiarlo por el que quieras.
Yo en mi ejemplo lo he puesto para que dure unos minutos nada más, así que cuando actualices esta página, dejes un comentario o ingreses a otra entrada dejará de verse, pero después estará ahí de vuelta.
El resultado me parece que puede ser muy óptimo para recomendar el blog con el botón +1 de Google, sobre todo porque podemos seguir usando el botón que recomienda las entradas, y al mismo tiempo usar este que recomendará el blog, no las entradas.
El primer texto en rojo es el mensaje que aparece cuando el lector recomienda el blog, el segundo texto es el mensaje cuando deja de recomendarlo, y el tercero es el mensaje que aparece por defecto cuando carga la página.
Un poco más abajo se señala dónde se debe cambiar la dirección de tu blog.
Por último, en color azul verás el 7, ese es el número de días que dejará de verse la barra estática, transcurrido ese tiempo el lector podrá verla de nuevo, a menos claro que él haya borrado las cookies de su navegador. Ese valor puedes cambiarlo por el que quieras.
Yo en mi ejemplo lo he puesto para que dure unos minutos nada más, así que cuando actualices esta página, dejes un comentario o ingreses a otra entrada dejará de verse, pero después estará ahí de vuelta.
El resultado me parece que puede ser muy óptimo para recomendar el blog con el botón +1 de Google, sobre todo porque podemos seguir usando el botón que recomienda las entradas, y al mismo tiempo usar este que recomendará el blog, no las entradas.
No hay comentarios:
Publicar un comentario