Barra flutuante para seguir nas redes sociais

Widget muito interessante, trata-se de uma excelente barra flutuante para seguir nas redes sociais, essa barra fica na lateral esquerda do blog dando uma boa visibilidade das suas redes sociais ao seu leitor, todos nós sabemos a importância das redes sociais para um blog, elas são uma ótima fonte de tráfego para o blog, estando presente nas redes sociais, os seus leitores podem lhe ajudar na divulgação compartilhando o seu conteúdo e por isso vale apenas investir nelas.

Se você deseja adicionar esse elegante widget em seu blog, basta seguir atentamente o tutorial abaixo, mas antes você pode ver uma prévia clicando no botão abaixo.

Demonstração

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.

Acesse o painel do blogger, clique na guia Modelo, editar Html (não precisa marcar Expandir Modelos de Widgets) e procure por </head> e antes dela cole o código a seguir.

<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>
Ainda dentro do Html procure por ]]></b:skin> e antes da tag encontrada cole o código a seguir.
.social-buttons {
    position: fixed;
    top: 130px; left: 0%;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {width:160px; float:left;
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {width:160px; float:left;
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {width:160px; float:left;
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {width:160px; float:left;
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {width:160px; float:left;
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {width:160px; float:left;
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {width:160px; float:left;
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}
Continuando dentro do Html, agora você deve procurar pela tag <body> e depois dela cole o código a seguir fazendo as devidas alterações, visualize e depois salve.
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='URL DA FANPAGE' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Curta no Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/USUÁRIO DO TWITTER' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Siga no Twitter</span></span></a>
<a class='itemsocial' href='URL GOOGLE+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Siga no Google+</span></span></a>
<a class='itemsocial' href='URL DO PINTEREST' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Siga no Pinterest</span></span></a>
<a class='itemsocial' href='URL DO YOUTUBE' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Siga no Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/NOME DO FEED' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Assine o RSS</span></span></a>
</div>
OBS: Troque as partes destacadas em vermelho de acordo com o que é pedido.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest