Caixa de divulga��o expans�vel com bot�es +1, curtir e seguir (WordPress)
Autor: Bruno Cesar | Publicado: 2012-04-07T19:17:00-07:00

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 no WordPress. Nosso tutorial para Blogger  recebeu uma grande quantidade de coment�rios pedindo para criar um  tutorial sobre o mesmo, s� que na vers�o WordPress. Como n�s gostamos de  satisfazer pedidos de leitores, estamos ent�o criando o tutorial de  como inserir essa mesma caixa, s� que em vers�o WordPress. O tutorial  n�o muda quase nada, apenas os locais nos quais os c�digos v�o ser  inseridos. Vamos l�!Ver Demonstra��oVamos ao Tutorial:1� � Acesse o painel do seu blog WordPress e clique na Guia Apar�ncia.2� � Depois clique em Editor e selecione o arquivo style.css do seu tema.3� � V� at� o final do arquivo e na �ltima linha, d� um quebra-linha e cole o seguinte c�digo:#loginContainer{position:relative;float:left;font-size:12px}&lt;br /&gt; #loginButton {&lt;br /&gt; padding: 8px;&lt;br /&gt; font-family: Arial, sans-serif;&lt;br /&gt; display: inline-block;&lt;br /&gt; position: relative;&lt;br /&gt; z-index: 30;&lt;br /&gt; cursor: pointer;&lt;br /&gt; background: #4092E2;&lt;br /&gt; background: -moz-linear-gradient(top, rgba(64, 146, 226, 1) 0%, rgba(26, 117, 221, 1) 100%);&lt;br /&gt; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64, 146, 226, 1)), color-stop(100%,rgba(26, 117, 221, 1)));&lt;br /&gt; background: -webkit-linear-gradient(top, rgba(64, 146, 226, 1) 0%,rgba(26, 117, 221, 1) 100%);&lt;br /&gt; background: -o-linear-gradient(top, rgba(64, 146, 226, 1) 0%,rgba(26, 117, 221, 1) 100%);&lt;br /&gt; background: -ms-linear-gradient(top, rgba(64, 146, 226, 1) 0%,rgba(26, 117, 221, 1) 100%);&lt;br /&gt; background: linear-gradient(top, rgba(64, 146, 226, 1) 0%,rgba(26, 117, 221, 1) 100%);&lt;br /&gt; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4092e2', endColorstr='#1a75dd',GradientType=0 );&lt;br /&gt; border: 1px solid #176ABB;&lt;br /&gt; -webkit-border-radius: 4px;&lt;br /&gt; -moz-border-radius: 4px;&lt;br /&gt; border-radius: 4px;&lt;br /&gt; }&lt;br /&gt; #loginButton:hover {&lt;br /&gt; background: #499BEA;&lt;br /&gt; background: -moz-linear-gradient(top, rgba(73, 155, 234, 1) 0%, rgba(32, 124, 229, 1) 100%);&lt;br /&gt; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73, 155, 234, 1)), color-stop(100%,rgba(32, 124, 229, 1)));&lt;br /&gt; background: -webkit-linear-gradient(top, rgba(73, 155, 234, 1) 0%,rgba(32, 124, 229, 1) 100%);&lt;br /&gt; background: -o-linear-gradient(top, rgba(73, 155, 234, 1) 0%,rgba(32, 124, 229, 1) 100%);&lt;br /&gt; background: -ms-linear-gradient(top, rgba(73, 155, 234, 1) 0%,rgba(32, 124, 229, 1) 100%);&lt;br /&gt; background: linear-gradient(top, rgba(73, 155, 234, 1) 0%,rgba(32, 124, 229, 1) 100%);&lt;br /&gt; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 );&lt;br /&gt; text-decoration: none;&lt;br /&gt; }&lt;br /&gt; #loginButton.active {&lt;br /&gt; background: #4092E2;&lt;br /&gt; border-bottom: 0;&lt;br /&gt; -webkit-border-radius: 4px 4px 0 0px;&lt;br /&gt; }&lt;br /&gt; #loginButton span {&lt;br /&gt; display: block;&lt;br /&gt; padding-top: 2px;&lt;br /&gt; font-weight: normal;&lt;br /&gt; font-size: 16px;&lt;br /&gt; color: white;&lt;br /&gt; text-shadow: 1px 1px 1px #176ABB;&lt;br /&gt; }&lt;br /&gt; #loginForm {&lt;br /&gt; width: 284px;&lt;br /&gt; border: 1px solid #176ABB;&lt;br /&gt; border-radius: 0px 3px 3px 3px;&lt;br /&gt; -moz-border-radius: 3px 0 3px 3px;&lt;br /&gt; background: #4092E2;&lt;br /&gt; margin-top: -7px;&lt;br /&gt; border-image: initial;&lt;br /&gt; padding: 6px;&lt;br /&gt; }&lt;br /&gt; #loginBox {&lt;br /&gt; top: 52px;&lt;br /&gt; right: 0;&lt;br /&gt; display: none;&lt;br /&gt; z-index: 29;&lt;br /&gt; }&lt;br /&gt; div#body {&lt;br /&gt; background: white;&lt;br /&gt; border-radius: 3px;&lt;br /&gt; -moz-border-radius: 3px;&lt;br /&gt; margin: 0;&lt;br /&gt; padding: 2px 5px;&lt;br /&gt; padding-bottom: 4px;&lt;br /&gt; }&lt;br /&gt; #loginContainer li {&lt;br /&gt; list-style: none;&lt;br /&gt; border-bottom: 0px;&lt;br /&gt; }&lt;br /&gt; #social-btn0 {&lt;br /&gt; padding: 10px;&lt;br /&gt; }&lt;br /&gt; #social-btn {&lt;br /&gt; border-top: 1px solid #C6C6C6;&lt;br /&gt; padding: 10px;&lt;br /&gt; padding-bottom: 4px;&lt;br /&gt; padding-top: 8px;&lt;br /&gt; }&lt;br /&gt; #social-btn1 {&lt;br /&gt; padding: 5px;&lt;br /&gt; border-top: 1px solid #C6C6C6;&lt;br /&gt; padding-top: 9px;&lt;br /&gt; } &lt;br&gt;4� � Depois clique em Salvar Arquivo.5� � Depois clique no arquivo Header.php.6� � Segure as teclas CTRL+F e procure por:&nbsp;&lt;/head&gt;7� � E, acima dele cole o seguinte c�digo.&lt;script src='http://platform.twitter.com/widgets.js' type='text/javascript'/&gt; &lt;script src='https://apis.google.com/js/plusone.js' type='text/javascript'&gt; {lang: 'pt-BR'} &lt;/script&gt;&lt;br /&gt; &lt;script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/&gt; &lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'/&gt; &lt;script type='text/javascript'&gt; // 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 &gt; 0)) { button.removeClass('active'); box.hide(); } }); }); &lt;/script&gt;8� � Depois, clique em Widget na Guia Apar�ncia.9� � E arraste um widget de texto para sua lateral.10� � No t�tulo, coloque o que quiser.11� � Dentro do conte�do do widget, cole o seguinte c�digo e lembre-se de substituir.&lt;div id="loginContainer"&gt;&lt;li&gt;&lt;span&gt;&lt;a id="loginButton" class=""&gt;&lt;span&gt; Compartilhe nosso Blog &lt;/span&gt;&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&lt;div style="clear:both"&gt;&lt;/div&gt;&lt;div id="loginBox" style="display: none; "&gt;&lt;div id="loginForm"&gt;&lt;div id="body" class="body-login"&gt;&lt;div id="social-btn0"&gt;&lt;div class="g-plusone" data-annotation="inline" data-width="280" data-href="ENDERE�O DO BLOG"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="social-btn"&gt;&lt;div class="fb-like" data-send="false" data-href="ENDERE�O DO BLOG" data-width="260" data-show-faces="false" data-font="arial"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="social-btn1" class="group"&gt;&lt;a href="https://twitter.com/NOME-DE-USU�RIO-DO-TWITTER" class="twitter-follow-button" data-show-count="true" data-lang="pt"&gt;Follow @NOME-DE-USU�RIO-DO-TWITTER&lt;/a&gt;&lt;br /&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;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.12� � Depois, clique em Salvar.