Caixa de divulgação expansível com botões +1, curtir e seguir

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.

Redes Sociais

• 

Tags | blog, facebook, redes sociais, twitter, wordpress