Barra flotante para compartir las entradas del blog con opción de cerrar
En una entrada anterior expliqué la forma de obtener una preciosa caja de suscripción para el blog. Esta caja ofrece a los lectores los enlaces de suscripción de nuestro blog, así como el link hacia nuestro perfil en Twitter o en Facebook.Los dos últimos enlaces guardan una pequeña similitud con este truco. He construido una herramienta muy novedosa, una barra para compartir los artículos del blog con opción de cerrar y que aparecerá únicamente en las páginas de entradas individuales, flotando en el lado izquierdo de la pantalla.
Un widget muy profesional y cómodo, que se puede o no ocultar -a opción del lector- y que permitirá difundir el artículo que estemos viendo en Twitter, Facebook, Google Buzz y Stumble Upon.
¿Lo mejor de todo? No tienes que editar absolutamente nada en el código, simplemente copiarlo e implementarlo en la plantilla con dos sencillos y rápidos pasos.
Diseño>Edición de HTML>expandimos artilugios
Busca la etiqueta </head> y añade esto encima (antes):
<script type='text/javascript'>function Compartpostblcn(){
div = document.getElementById("Compartpostblcn");
div.style.display="none";}
setTimeout(Compartpostblcn, 90000);</script>
<link href='https://sites.google.com/site/editoriosus/fds/blcnCompartepost.css' rel='stylesheet' type='text/css'/>
Ahora busca la etiqueta <body> en tu plantilla e inserta este bloque de código debajo:
<b:if cond='data:blog.pageType == "item"'><div id='Compartpostblcn'><a href='javascript:Compartpostblcn();'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOThK8pFsaPP_6ZsV5KJvHiQW3vAArlyx8nSaEO8EDmMhZ5VLNfgIeVtxxrL8-LJoUKe1XHKz0a6kTvkrr6_uxZ2VQ6x3KzABskQuUfnaDH7t5XymTrwzF2QHzGQ1M4VZmWURPXj61O2rl/s320/blcerracompar.png' style='border:none;float:right;margin-bottom:10px;margin-top:4px;padding-right:8px;padding-top:4px;' title='Cerrar'/>
<div class='JJblccomp1'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div><div class='JJblccomp1'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Compartir</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='JJblccomp1'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Publicar en Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='JJblccomp1'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/><a href='http://goo.gl/favZ'><img alt='Stumble Upon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXAuBuRCuR4wg1su7WsRHgrtXsMDu47d3nRih2jiwHmx637bWxoLM0YgaPOyUzzUE3rUOP-sjclhWC2KrWGZZDqWv-QmTrfRL9r2IJYzgAAU9aD839f7WcmxFaaIxkp98vZMrRWve8w62N/s320/blobbt.png' style='border:none;float:right;margin-bottom:10px;margin-top:4px;padding-right:2px;padding-top:4px;'/></a></div></a></div></b:if>
En caso de no encontrar esta última etiqueta, prueba a escribir en el buscador de tu navegador (puedes abrirlo pulsando las teclas Ctrl y F simultáneamente-) <body o prueba con esta línea:
<body expr:class='"loading" + data:blog.mobileClass'>
Guarda la plantilla para terminar. No olvides que la barra para compartir aparecerá en las páginas de posts individuales. Accede a una entrada cualquiera y comprueba el resultado.
0 comentarios:
Publicar un comentario
¡Gracias por comentar!