Botones de compartir oficiales de Blogger

Ya están disponibles en el panel de Blogger "normal" sin necesidad de ir a Blogger in Draft, aunque los pasos para instalarlos en plantillas modificadas previamente siguen siendo los de esta entrada.

Blogger está dando la opción de probar a través de Blogger in Draft un conjunto de cinco iconos sociales para compartir las entradas por correo electrónico, Blogger, Twitter, Facebook y Google Buzz.

En el caso de Twitter se usa la url acortada utilizando para ello el servicio del propio Google.
Los botones se verán tal como ves en la imagen, aunque incluyen efecto "hover" y al paso del ratón se mostrarán con todo su colorido.

Aunque aún están en periodo de pruebas, podemos comenzar a utilizarlos aún en las plantillas anteriores al Diseñador de plantillas e incluso en las plantillas modificadas, ya que hace tiempo que Blogger añadió el código necesario en ellas para los botones tal como (Vagabundia) adelantaba en esta entrada.

[1] Accedemos a nuestro escritorio de Blogger desde Blogger in Draft.

[2] Vamos a Diseño y en el gadget "Entradas del blog" pinchamos en editar. Marcamos ahí la opción "Mostrar botones para compartir".

De esta manera ya deberían ser visibles los iconos para compartir al pie de nuestras entradas.

En el caso de las plantillas modificadas, y aún a pesar de que el código de los botones esté incluido en ellas, no se mostrarán sin añadir unas líneas en la plantilla:

[1] Marcamos la opción de "Expandir las plantillas de artilugios" situados en Edición HTML.

[2] Localizamos esta línea de código:
<p class='post-footer-line post-footer-line-3'>
O en su defecto, esta otra:
<div class='post-footer-line post-footer-line-3'>
[3] Debajo de esa línea, añadimos esto y guardamos los cambios:
<div class='post-share-buttons'>

<b:include data='post' name='shareButtons'/>

</div>
Si solo queremos mostrar los botones en la página de entradas y no en la principal por ejemplo, incluimos el código anterior en una condicional de este modo:
<b:if cond='data:blog.pageType == "item"'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>
Usando CSS podemos escoger que botones mostrar, ocultando aquellos que no nos interesen usando para ello la clase que tiene añadida cada botón.

Colocamos antes de la etiqueta ]]></b:skin> una línea como esta para cada botón que queramos ocultar:
.sb-email{display:none;}/* ocultar boton email */
.sb-blog{display:none;}/* ocultar boton Blogger */
.sb-twitter{display:none;}/* ocultar boton Twitter */
.sb-facebook{display:none;}/* ocultar boton Facebook */
.sb-buzz{display:none;}/* ocultar boton Buzz */

Fuente: El Escaparate de Rosa

0 comentarios:

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika