Barra flotante para compartir en Redes sociales en Blogger

Como venia diciendo desde hace tiempo, esta es la era de las comunicaciones y el mejor medio de comunicacion en todo el mundo son las redes sociales y los desarrolladores han creado innumerables formas de agregar las redes a sus sitios web.

Esta barra de redes sociales aparece encima de la entrada y flota hacia arriba o hacia abajo dependiendo para que esten siempre visibles, de esta manera si a alguien le gusta algo que has hecho, no tendrá que buscar donde compartir.

Para agregar esta barra a tu Blog sigue los siguientes pasos.

Ve a Plantilla, Luego a Edicion de HTML.
Luego presiona la casilla de Expandir plantilla de artilugios y busca la etiqueta </head>, arriba de ella pega lo siguiente.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"/>

Ahora busca nuevamente </head> y arriba de ella pega lo siguiente.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
    #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
    #w2bSocialFloat td{padding:4px;margin:0;border:none;}
    #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
    #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
    // Twitter
    (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
    // Google + (plus)
    (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
    // Stumbleupon
    (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
    // Digg
    (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>

Lo negreado es el estilo del gadget e indica que es lo que puedes personalizar teniendo conocimiento de CSS.
Ahora busca la etiqueta <data:post.body/> y arriba de ella pega lo siguiente.

<b:if cond='data:blog.pageType == "item"'>
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table width="100%" class="w2bSocialFloat">
    <tr>
        <td>
            <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
        </td>
        <td>
            <iframe expr:src=""//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
        </td>
        <td>
            <div expr:id=""w2bPinit-" + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton">
                <data:post.body/>
                <script type="text/javascript">
                    w2bPinItButton({
                        url:"<data:post.url/>",
                        thumb: "<data:post.thumbnailUrl/>",
                        id: "<data:post.id/>",
                        defaultThumb: "http://fc08.deviantart.net/fs70/f/2012/127/0/3/profile_picture_by_ihojose-d4yvwga.jpg",
                        pincount: "horizontal"
                    });
                </script>
            </div>
        </td>
        <td>
            <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
        </td>
        <td>
            <su:badge layout="1" expr:location="data:post.url"></su:badge>
        </td>
        <td>
            <a class="DiggThisButton DiggCompact"></a>
        </td>
    </tr>
</table>
</div>
</b:if>

El enlace Azul indica una imagen cuando compartas y el contenido no tenga imagen, esta saldrá automaticamente.
guarda los cambios.
Listo ya tienes una barra flotante con redes sociales para compartir tu contenido en ellos.

FUTUdownloads

Buscar este blog

Barra flotante para compartir en Redes sociales en Blogger