Fonte: Iago Melanias/blogandocomfacilidade
No artigo de hoje, aprenderemos a inserir uma caixa de divulgação expansível com os botões +1, curtir e seguir de, respectivamente, Google+, Facebook e Twitter. O objetivo desse botões é sempre aumentar o tráfego para as redes sociais e assim seus leitores poderão acompanhar seu blog. Dessa forma, desenvolvi um widget bem elegante para fazer isso, deixando a divulgação das redes sociais mais bonita e mais simples, além de que ocupa menos espaço, afinal, para mostrar os botões, você primeiro precisa clicar no botão “Compartilhar nosso blog”.
Vamos ao Tutorial:
1º – Acesse o painel do seu blog e clique na guia modelo.
2º – Em seguida, clique no Botão Editar HTML.
3º – Segure as teclas CTRL+F e procure por:
]]></b:skin>
4º – E, acima dele, cole o seguinte código:
#loginContainer{position:relative;float:left;font-size:12px} #loginButton { padding: 8px; font-family: Arial, sans-serif; display: inline-block; position: relative; z-index: 30; cursor: pointer; background: #4092E2; background: -moz-linear-gradient(top, rgba(64, 146, 226, 1) 0%, rgba(26, 117, 221, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64, 146, 226, 1)), color-stop(100%,rgba(26, 117, 221, 1))); background: -webkit-linear-gradient(top, rgba(64, 146, 226, 1) 0%,rgba(26, 117, 221, 1) 100%); background: -o-linear-gradient(top, rgba(64, 146, 226, 1) 0%,rgba(26, 117, 221, 1) 100%); background: -ms-linear-gradient(top, rgba(64, 146, 226, 1) 0%,rgba(26, 117, 221, 1) 100%); background: linear-gradient(top, rgba(64, 146, 226, 1) 0%,rgba(26, 117, 221, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4092e2', endColorstr='#1a75dd',GradientType=0 ); border: 1px solid #176ABB; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #loginButton:hover { background: #499BEA; background: -moz-linear-gradient(top, rgba(73, 155, 234, 1) 0%, rgba(32, 124, 229, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73, 155, 234, 1)), color-stop(100%,rgba(32, 124, 229, 1))); background: -webkit-linear-gradient(top, rgba(73, 155, 234, 1) 0%,rgba(32, 124, 229, 1) 100%); background: -o-linear-gradient(top, rgba(73, 155, 234, 1) 0%,rgba(32, 124, 229, 1) 100%); background: -ms-linear-gradient(top, rgba(73, 155, 234, 1) 0%,rgba(32, 124, 229, 1) 100%); background: linear-gradient(top, rgba(73, 155, 234, 1) 0%,rgba(32, 124, 229, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); text-decoration: none; } #loginButton.active { background: #4092E2; border-bottom: 0; -webkit-border-radius: 4px 4px 0 0px; } #loginButton span { display: block; padding-top: 2px; font-weight: normal; font-size: 16px; color: white; text-shadow: 1px 1px 1px #176ABB; } #loginForm { width: 284px; border: 1px solid #176ABB; border-radius: 0px 3px 3px 3px; -moz-border-radius: 3px 0 3px 3px; background: #4092E2; margin-top: -7px; border-image: initial; padding: 6px; } #loginBox { top: 52px; right: 0; display: none; z-index: 29; } div#body { background: white; border-radius: 3px; -moz-border-radius: 3px; margin: 0; padding: 2px 5px; padding-bottom: 4px; } #loginContainer li { list-style: none; border-bottom: 0px; } #social-btn0 { padding: 10px; } #social-btn { border-top: 1px solid #C6C6C6; padding: 10px; padding-bottom: 4px; padding-top: 8px; } #social-btn1 { padding: 5px; border-top: 1px solid #C6C6C6; padding-top: 9px; }
5º – Segure as teclas CTRL+F e procure por:
</head>
6º – E, acima dele, cole o seguinte código:
<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://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'/> <script type='text/javascript'> // Caixa de Login $(function() { var button = $('#loginButton'); var box = $('#loginBox'); var form = $('#loginForm'); button.removeAttr('href'); button.mouseup(function(login) { box.toggle(); button.toggleClass('active'); }); form.mouseup(function() { return false; }); $(this).mouseup(function(login) { if(!($(login.target).parent('#loginButton').length > 0)) { button.removeClass('active'); box.hide(); } }); }); </script>
7º – Depois, clique em Salvar Modelo.
8º – Depois, clique na Guia Layout.
9º – Clique em Adicionar Gadget e selecione o gadget tipo HTML/Javascript.
10º – Dentro do conteúdo do gadget, cole o seguinte código (lembre-se de substituir):
<div id="loginContainer"><li><span><a id="loginButton" class=""><span> Compartilhe nosso Blog </span></a></span></li><div style="clear:both"></div><div id="loginBox" style="display: none; "><div id="loginForm"><div id="body" class="body-login"> <div id="social-btn0"> <div class="g-plusone" data-annotation="inline" data-width="280" data-href="ENDEREÇO DO BLOG"></div> </div> <div id="social-btn"> <div class="fb-like" data-send="false" data-href="ENDEREÇO DO BLOG" data-width="260" data-show-faces="false" data-font="arial"></div> </div> <div id="social-btn1" class="group"> <a href="https://twitter.com/NOME-DE-USUÁRIO-DO-TWITTER" class="twitter-follow-button" data-show-count="true" data-lang="pt">Follow @NOME-DE-USUÁRIO-DO-TWITTER</a> </div></div></div></div></div>
Lembre-se de substituir as duas vezes que pede o endereço do seu blog e as duas vezes que pede o seu nome de usuário do Twitter.
11º – Depois, clique em Salvar.