Botón + 1 en Blogger

En este tema veremos la colocación del botón de +1 en Blogger el cual es una de las maneras en las cuales podemos compartir nuestros artículos este botón es similar a los ya conocidos botones de facebook,Twitter y algunos otros en la red social, este botón es diseñado por Google el cual se puede llamar importante ya que es una especie de contador para el buscador de Google que dentro de sus fuentes de búsqueda toma demaciado en cuenta la puntuación obtenida del botón, así que como vemos lo llamaremos importante tenerlo en nuestro Blogg o pagina web.

Vamos a tener en cuenta una de las posibilidades que nos va a proporcionar el botón +1, sera la de mostrar un mensaje cuando los usuarios nos regalen un voto, pero ojo también tendríamos la posibilidad de mostrar otro mensaje para cuando ya no quieran recomendar.

Les mostrare un ejemple de como se vería el botón:

Para enseñarnos a colocar este botón empezaremos a realizar lo siguiente:

Si queremos mostrar el botón debajo del titulo de las entradas, Buscaremos el siguiente codigo:

<div class='post-header'>

Si lo que queremos es que se muestre al final de las entradas,Buscaremos la siguiente linea:

<div class='post-footer'>

Bien ahora después de que analizamos bien lo que queriamos hacer con nuestro codigo, pasaremos al siguiente punto, agregamos debajo de cualquiera de los codigos anteriores lo siguiente:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// mensaje Google+ (BloggAyuda.com)
function saludoPlusOne(plusone) {
var div_ty = document.getElementById("mensajePlusOne");
if (plusone.state == "on") {
div_ty.innerHTML = "¡Gracias por recomendarnos! Tu voto es importante para nosotros."; document.getElementById('mensajePlusOne').className='msgPlusOne';
} else {
div_ty.innerHTML = "Parece que ya no te gustamos, ojalá nos des otra oportunidad."; document.getElementById('mensajePlusOne').className='msgPlusOne';
}
}
//]]>
</script>


<div align='right'><g:plusone callback='saludoPlusOne'/>
<div id='mensajePlusOne'/></div>

Ahora ya que tenemos el codigo colocado nos vamos a buscar : ]]></b:skin> ,y colocamos los siguientes codigos antes de el.

.msgPlusOne {


background:#0B0B3B;


color:#A4A4A4;


padding:10px;


font-style:italic;


}

Bien como vimos estos son los estilos que tendria nuestro recuadro donde aparecera el mensaje que colocaremos, como vemos el codigo que les puse se encuentra dentro de el en tono rojo los mensajes que se mostraran, el primero es el mensaje de bienvenida o de gratitud cuando nos recomiendan y el segundo es el que indica cuando ya nos les agrada la recomendacion.

Como vimos fue un detalle simpke de la colocacion del boton con comentario.

Posted in: Blogger