WIDGET BARRA DE COMPARTILHAMENTO EXPANSÍVEL COM JQUERY


barra de compartilhamento expansível

Olá Pessoal, hoje vou ensinar a vocês como adicionar em seu blog um linda barra de compartilhamento  com efeito mouse hover. Essa barra é simplesmente incrível e tem visual bem bacana e contém botões de compartilhamento para as principais redes sociais. Oferecer botões de compartilhamento para seus leitores é extremamente importante pois pode ajudar a aumentar o numero de visitas. O código é de fácil instalação em seu blog, basta seguir o tutorial com atenção.


Primeiramente você deve adicionar um código no Html do seu blog, para isso acesse o Painel do Blogger, clique na guia Modelo e em Editar Html e procure pela tag </head>e cole o código a seguir acima dessa tag.
Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Vá em modelo ► Fazer backup/Restaurar ► Fazer download do modelo completo.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;pt-BR&#39;} </script>
Clique em visualizar para ver se esta tudo ok e salve. 

Agora vá na guia Layout e clique em Adicionar Gadget do tipo Html/JavaScript e cole o código a seguir sem fazer alteração nenhuma e salve.
<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".pbslidebox").hover(function () {
            jQuery(this).stop().animate({
                left: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                left: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .pbslidebox {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqHK4mEhPqrfDCN5JfGjSze-QC0sVRa8919WFM8A0rMbnug1vF6fC1H3FTcah1xzBFJ0RGvC5oyqvPQ1HpeJ_5FVt1JAT5MuGXS_qgOYX1a79xL1Fn2KIom8OorCbrBpUcWxHatSHrMj7E/s102/barra-compartilhamento-expans%25C3%25ADvel.png") no-repeat scroll right top transparent !important;
        display: block;
        float: left;
        height: auto;
        padding: 0 45px 0 0px;
        width: 65px;
        z-index: 99999;
        position:fixed;
        left:-70px;
        top:20%;
    }
    .pbslidebox div {
        border:none;
        position:relative;
        display:block;
    }
    #floatingbuttons {
        background: #fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #CCCCCC;
        float:left;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:left;
        clear:both;
        margin:5px 4px 0 4px;
    }
    .addbuttons {
        clear:both;
        text-align:center;
        padding-top:5px;
    }
    .addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
        color:#000;
        background:none;
        font-family:arial, sans-serif;
        display:block;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        line-height:11px;
    }
    .addbuttons a:hover span {
        color:#fff;
        background:none;
        text-decoration:underline;
    }
</style>
<div class="pbslidebox" style="">
    <div>
        <div id='floatingbuttons' title="Share this post!">
            <script src="http://connect.facebook.net/pt_BR/all.js#xfbml=1">
               
            </script>
            <script type="text/javascript">
                (function () {
                    var s = document.createElement('SCRIPT'),
                        s1 = document.getElementsByTagName('SCRIPT')[0];
                    s.type = 'text/javascript';
                    s.async = true;
                    s.src = 'http://widgets.digg.com/buttons.js';
                    s1.parentNode.insertBefore(s, s1);
                })();
            </script>
            <!-- Medium Button -->
            <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
            <div class='floatbutton' id='facebook'>
                <fb:like layout="box_count" show_faces="false" font=""></fb:like>
            </div>
            <div class='floatbutton' id='google+1'>
                <g:plusone size="tall"></g:plusone>
            </div>
            <div class='floatbutton' id='stumbleupon'>
                <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
            </div>
            <div class='floatbutton' id='digg'>
                <a class="DiggThisButton DiggMedium"></a>
            </div>
            <div class='floatbutton' id='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
            <div class="addbuttons">
                <a href="http://www.personalizaroblogger.com.br/2012/09/widget-barra-de-compartilhamento.html" title="Barra de compartilhamento expansível no blog!"><span class="getfloat">Add esse Widget</span></a>
            </div>
        </div>
    </div>
</div>
 
O que achou deste widget? Tem alguma sugestão ou dúvida? 
Comente e diga-nos sua opinião.

1 comentários:

  • Unknown says:
    28 de abril de 2013 às 11:54

    Olá amigo, vi que copiou esse artigo do meu blog, peço por gentileza que remova o mesmo, pois os devidos créditos não foram colocados e você copiou até o texto na integra.

    Por favor remova o post!

Postar um comentário

Por favor leia antes de comentar:

1. Escreva apenas o que for referente ao tema;
2. Ofensas pessoais ou spam não serão aceitos;
3. faço parcerias por meio de comentários;
4. Para entrar em contato nosso msn bloggeresites@hotmail.com;
5. Obrigado por sua visita e volte sempre.