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 comments:
Post a Comment