Ontem, nós ensinamos Como Inserir uma Barra de Compartilhamento Dentro dos Artigos Fixada no Fundo da Tela, hoje nós estamos disponibilizando uma nova versão que desenvolvemos, essa fica fixada no canto esquerdo da tela e ainda possui um efeito muito legal em jquery, que quando posicionamos o mouse, ela expande. Além de ser bem leve, elegante, simples e bonita, ela ajuda na divulgação dos artigos, já que ela só aparece dentro dos artigos.
Vamos ao Tutorial:
1º – Acesse o Painel do seu Blog e clique na Guia Modelo.
2º – Em seguida, clique em Editar HTML.
3º – Depois clique em na Caixa Expandir Modelos de Widgets.
4º – Segure as Teclas CTRL+F e procure por:
</head>5º – E Acima dele cole o seguinte código:
<script type='text/javascript'>
window.onload = function socialButtons() {
$('.social_site').hover(function() {
$(this).stop().animate({
left: '0px'
},
'fast')
},
function() {
$(this).stop().animate({
left: '-192px'
},
'fast')
})
}
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'pt-BR'}
</script>
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/>
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'/>6º – Depois segure as teclas CTRL+F e procure por:
]]></b:skin>7º – E Acima dele cole o seguinte código:
body .social_site {cursor: pointer;height: 116px;left: -192px;overflow: hidden;position: fixed;width: 220px;z-index: 10000;}
body .social_closed {left: -170px;}
body .social_open {left: 0;}
body .social_site .icon {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRV2OGLeH2G0BO7vevMvGa7fIh5tnBVdloKFJ3wm0KzemLRLijeNdVrQcaT6_72XQ7oZf0IVWGD0lE6MSUyzWSn0GAZBVqF72KbVHaqmxmGLOVEaQhfn8QjMhv3CkTuu5xfcxIxTo2U_o/s1600/sprite-s.jpg") repeat scroll 0 0 transparent;float: right;height: 124px;width: 60px;}
body .social_site .tray {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRV2OGLeH2G0BO7vevMvGa7fIh5tnBVdloKFJ3wm0KzemLRLijeNdVrQcaT6_72XQ7oZf0IVWGD0lE6MSUyzWSn0GAZBVqF72KbVHaqmxmGLOVEaQhfn8QjMhv3CkTuu5xfcxIxTo2U_o/s1600/sprite-s.jpg") repeat-x scroll 0 0 transparent;float: right;height: 154px;width: 160px;}
body .social_users {top: 273px;}
body .social_users .icon {background-position: 60px 0px;}
body .social_users .tray {background-position: -15px 0px;}
body .social_users .tray p {display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;}
body .social_users .tray p a, body .social_users .tray p a:active, body .social_users .tray p a:visited {color: black;display: block;font-size: 12px;margin-top: 0l;width: 100%;text-decoration: none;font-family: Arial, sans-serif;}
.tray.bg_denovo div {float: left;margin-top: -30px;margin-left: 8px;}
.fb_edge_comment_widget span iframe {display: none;}
.gc-reset {display: none;}8º – Depois, segure as teclas CTRL+F e procure por:
<body9º – E, Abaixo dele cole o seguinte código:
<b:if cond='data:blog.pageType == "item"'>
<div class='social_site social_users' id='social_link_users'><a><div class='icon'/></a>
<div class='tray bg_denovo'><p><a>Compartilhe Esse Artigo:</a></p>
<p id='users_online_box'>
<div style='float: left;margin-top: -30px;margin-right: -24px;'><fb:like data-width='52' font='arial' layout='box_count' send='false' show_faces='false' width='54'/></div>
<div style='margin-left: 30px;margin-right: -10px;'><g:plusone size='tall'/></div>
<div style='float: right;margin-top: -30px !important;margin-right: -23px;'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a></div></p></div></div></b:if>
