Box de Botões de Compartilhamento Expansível com Jquery


Botões de Compartilhamento Expansíveis Fixados na Tela 
 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/AVvXsEj7hhG-iwPqlm7jxZr4LEmhK4pj16IvvJjM4qqRhVmv0BRLDorlHZi2yLTeNQxUxJes6bCsw0iVE_F5neskmQqtibiVnQzr0PPiVr9CLBAetBdCKjQvXN_hk6OcEUlkj0WZTi8GUKPpV-I/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/AVvXsEj7hhG-iwPqlm7jxZr4LEmhK4pj16IvvJjM4qqRhVmv0BRLDorlHZi2yLTeNQxUxJes6bCsw0iVE_F5neskmQqtibiVnQzr0PPiVr9CLBAetBdCKjQvXN_hk6OcEUlkj0WZTi8GUKPpV-I/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:
<body

9º – 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>

10º – Clique em salvar e pronto.

Nenhum comentário:

Postar um comentário

Postagem mais recente Postagem mais antiga Página inicial