Social Follow na Sidebar do blogger

Hoje falarei aqui no DicasHot a respeito de como colocar em seu blog uma destas caixinhas, onde contém o se Follow, Facebook, Twitter, Google plus e o seu Feed.

E, você pode observar, que estas são as principais redes sociais da atualidade.

          Seguir @DicashotBlogger

Muitas pessoas não sabem a importância deste gadget!!!

Por quê?

Quando uma pessoa vai lá na sua caixinha e clica, por exemplo, no Google+, automaticamente ela está divulgando o seu blog para outras pessoas. Saiba mais sobre o Google+ clicando aqui.

Algumas pessoas acham colocar um destes no blogger é muito difícil, mas, na verdade não é!!! Você vai reparar que é bem simples...

1º passo: Acesse o painel do blogger e vá ao menu “Design”, clique em “adicionar um gadget”, escolha o modo "HTML/javascript" e cole o seguinte código:

<style type="text/css">
/*<!CDATA[*/
#socialfollow{
width:270px; /*--edite largura se quiser--*/
margin:auto;padding:0;
background:#FFFFFF; /*--edite cor de fundo se quiser--*/
border: 1px solid #ccc;
}
.googleplus {height: 57px;border:0;}
.facebook {
    border-bottom: 1px solid #ccc;margin-top: -2px;padding: 5px 10px;}
.gplusone {
    border-top: 1px solid #ccc;border-top: 1px solid white;
    font-size: .87em;color: black;padding: 9px 0 0 11px;
    line-height: 24px;height:30px;}
.gplusone span {
    display: inline-block;vertical-align: middle;height: 20px;
    margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.twitter {
    border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
.twitter a.twitter-follow-button {
    width:200px;display: block;}
.twitter iframe {margin: 9px 11px;}
.pinterest{margin: 9px 11px;}

.emailbox {
border-top: 1px solid #ccc;
padding: 12px 16px;overflow: hidden;}
.emailbox form{
width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.emailbox input.emailu {
float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border:1px solid #eee;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.emailbox input.emailu:focus {color: #333;}
.emailbox input.submitu {
-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.emailbox input.submitu:hover {
text-decoration: none;}
.submitu{
color:#444 !important;
border:1px solid #CCC;text-shadow:0 1px 0 #fff;background: #dbdbdb;background: -moz-linear-gradient(top, #dbdbdb 0%, #bbbbbb 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(100%,#bbbbbb));background: -webkit-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: -o-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: -ms-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#bbbbbb',GradientType=0 );}
.submitu:hover{
background: #e6e6e6;background: -moz-linear-gradient(top, #e6e6e6 0%, #bbbbbb 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#bbbbbb));background: -webkit-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: -o-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: -ms-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#bbbbbb',GradientType=0 );}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.getmore a {
display: inline-block;font-weight: normal;text-decoration: none;text-shadow: 1px 1px 1px #fff;font-size:10px; float:right;}
/*]]>*/
</style>
<div id="socialfollow">
<div class="googleplus">
<script type="text/javascript">
        /*<![CDATA[*/
        window.___gcfg = {lang: 'pt'};
        (function(){
            var po = document.createElement("script");
            po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(po, s);
        })();
        /*]]>*/
        </script>
<div class="g-plus" data-height="69" data-href="https://plus.google.com/ID-PAGINA-GOOGLE-PLUS" data-theme="light" data-width="270">
</div>
</div>
<div class="facebook">
<iframe allowtransparency="true" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2FNOME-DA-SUA-PAGINA&amp;send=false&amp;layout=standard&amp;width=250&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" frameborder="0" scrolling="no" style="border: none; height: 90px; overflow: hidden; width: 250px;"></iframe>
</div>
<div class="gplusone">
<script type="text/javascript">/*<![CDATA[*/
          (function() {
        var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
        po.src = "https://apis.google.com/js/plusone.js";
        var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
          })();/*]]>*/
        </script>
<div class="g-plusone" data-href="URL-DO-SEU-BLOG/" data-size="medium">
</div>
Recomende no Google+</div>
<div class="twitter">
<a class="twitter-share-button" data-lang="pt" data-show-count="true" href="https://twitter.com/USERNAME-TWITTER">Follow @DicasHot2012</a>
<script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
</div>
<div class="pinterest">
<a href="http://pinterest.com/USERNAME-PINTEREST/"><img alt="Follow Me on Pinterest" height="28" src="http://passets-lt.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" /></a></div>
<div class="emailbox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=nome-do-seu-feed', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table style="width: 100%px;">            <tbody>
<tr>             <td>
<input class="emailu" name="email" placeholder="Digite seu email" type="text" />
</td>             <td width="64px">
<input class="submitu" type="submit" value="ASSINE" />
</td>             </tr>
</tbody></table>
</form>
</div>
<div class="getmore">
<a href="http://dicashot.blogspot.com.br/2012/08/incluindo-gadget-social-follow-na.html#.UCpfCqBE7F8" target="_blank">Instale este gadget</a></div>
</div>

2°passo - ALTERE os trechos deste código destacados em AZUL.

Como encontrar o ID do google plus?

Por mais que pareça desnecessário vou fazer um passo a passo para que não reste dúvidas a ninguém que tenha já um mínimo de conhecimento de Internet.

1 - Clique aqui e acesse o site – Google Plus login [plus.google.com]

2 – Clique no seu nome, abaixo de sua foto de perfil – avatar

Essa é sua página no Google Plus.

3 – Lá em cima na barra de navegação você vai ver isso:

url de perfil do google plus

4 – Essa é a URL do seu perfil e os números na cor azul são seu número de identificação (ID). Copie somente os números e pronto.

Como encontrar o nome da página do Facebook?

Primeiro de tudo, você precisa ter uma página no facebook. Saiba como criar uma página no facebook em 5 passos clicando aqui.

Quando você já tiver sua página, basta pegar o nome que esterá na barra de endereço do site, como nesta imagem:

Como saber o nome da página do twitter?

O nome da página do twitter é bem notável, veja a imgem:

Quando você alterar todos o código, basta salvar o gadiget e pronto!!!
Qualquer dúvida não deixe de perguntar!!!

Curta também a nossa Fan Page no Facebook: http://facebook.com/Dicashot

Se inscreva e receba nossas atualizações por e-mail: