Como adicionar um simples widget de contador social da barra lateral para o Blogger

• Demonstração

Os contadores de mídia social são muito populares hoje em dia, então, você trouxe um tutorial sobre Como adicionar um widget simples de contador social da barra lateral para o Blogger. Este é um widget muito simples e elegante. É feito apenas com CSS e HTML, o que torna o carregamento rápido e compatível com vários navegadores. Possui vários botões de perfil de mídia social com link ativo e números de contagem que podem ser alterados facilmente através do layout em etapas simples.

Com a ajuda deste widget, você pode mostrar seus seguidores nas mídias sociais de maneira muito elegante. Ele não é atualizado automaticamente porque alguns sites de mídia social não têm suporte API adequado para o blogueiro. Por isso, fizemos o manual, onde você pode mostrar seu número aproximado de seguidores. 

Adicionando o widget 

A primeira coisa que você precisa fazer é fazer login na sua conta do Blogger e acessar >> Layout >> Clique em adicionar um gadget em qualquer lugar ao seu layout >> Adicionar widget HTML / JAVASCRIPT e cole o código abaixo no espaço em branco.

JS<style> 

a.social_item { 
position: relativa; 
display: bloco; 
altura: 50px; 
altura da linha: 50 px; 
estouro: oculto; 
raio da borda: 4px; 
} 
li.social_item-wrapper { 
float: left; 
largura: 48%; 
alinhamento de texto: centro; 
margem direita: 4%! importante; 
margem inferior: 10 px! importante; 
cor: #fff; 
} 
.social_item-wrapper: enésimo filho (2n + 2) { 
margem-direita: 0! importante; 
} 
.social_icon { 
float: left; 
altura da linha: 50 px; 
largura: 41px; 
tamanho da fonte: 1.3rem; 
} 
a.social_item.social_facebook { 
background: # 5d82d1! important;
} 
.fa-facebook.social_icon { 
background: # 2E4372; 
} 
li.social_item-wrapper: passe o mouse .fa-facebook.social_icon { 
background: # 3F5B9B; 
} 
li.social_item-wrapper: passe o mouse .social_facebook { 
background: # 2E4372; 
} 
a.social_item.social_twitter { 
background: # 40bff5! important; 
} 
.fa-twitter.social_icon { 
background: # 1571A5; 
} 
li.social_item-wrapper: passe o mouse .fa-twitter.social_icon { 
background: # 1C97DE; 
} 
li.social_item-wrapper: passe o mouse .social_twitter { 
background: # 1571A5; 
} 
a.social_item.social_youtube { 
background: # ef4e41! important; 
}
.fa-youtube.social_icon { 
background: # B31919; 
} 
li.social_item-wrapper: passe o mouse .fa-youtube.social_icon { 
background: # E22020; 
} 
li.social_item-wrapper: passe o mouse .social_youtube { 
background: # B31919; 
} 
a.social_item.social_dribbble { 
background: # f7659c! important; 
} 
.fa-dribbble.social_icon { 
background: # B51A45; 
} 
li.social_item-wrapper: passe o mouse .fa-dribbble.social_icon { 
background: # E82159; 
} 
li.social_item-wrapper: passe o mouse .social_dribbble { 
background: # B51A45; 
} 
a.social_item.social_rss { 
background: # ff7e30! important; 
}
.fa-rss.social_icon { 
background: # C2521B; 
} 
li.social_item-wrapper: passe o mouse .fa-rss.social_icon { 
background: # E86321; 
} 
li.social_item-wrapper: passe o mouse .social_rss { 
background: # C2521B; 
} 
a.social_item.social_google-plus { 
background: # eb5e4c! important; 
} 
.fa-google-plus.social_icon { 
background: # BF2424; 
} 
li.social_item-wrapper: passe o mouse .fa-google-plus.social_icon { 
background: # E82C2C; 
} 
li.social_item-wrapper: passe o mouse .social_google-plus { 
background: # BF2424; 
} 
a.social_item.social_linkedin { 
background: # 3897f0! important; 
}
.fa-linkedin.social_icon { 
background: # 02669E; 
} 
li.social_item-wrapper: passe o mouse .fa-linkedin.social_icon { 
background: # 0275B6; 
} 
li.social_item-wrapper: passe o mouse. social_linkedin { 
background: # 02669E; 
} 
a.social_item.social_instagram { 
background: # 3f91cb! important; 
} 
.fa-instagram.social_icon { 
background: # 6F583C; 
} 
li.social_item-wrapper: passe o mouse .fa-instagram.social_icon { 
background: # 8E714D; 
} 
li.social_item-wrapper: passe o mouse. social_instagram { 
background: # 6F583C; 
} 
a.social_item.social_pinterest { 
background: # CA2027; 
}
.fa-pinterest.social_icon { 
background: # AB1B21; 
} 
li.social_item-wrapper: passe o mouse .fa-pinterest.social_icon { 
background: # CA2027; 
} 
li.social_item-wrapper: passe o mouse sobre o social_pinterest { 
background: # AB1B21; 
} 
ul.social-counter a { 
color: #fff; 
} 
</style> 
<div class = "socialcounter"> 
    <ul class = "social-counter"> 
        <li class = "social_item-wrapper"> <a href=" # "class="social_item social_facebook"> <i class = "fa fa-facebook social_icon"> </i> <span class = "social_num"> 230.000 </span> </a> </li>
"class =" social_item social_twitter "> <i class =" fa-twitter social_icon "> </i> <span class =" social_num "> 230.000 </span> </a> </li> 
        <li class =" social_item-wrapper "> <a href=" #" class="social_item social_youtube"> <class i = "fa social_icon fa-youtube"> </ i> <span class = "social_num"> 230.000 </ span> </ a> </li> 
        <li class = "social_item-wrapper"> <a href=" # "class="_ social_item social_dribbble"> <i class =" fa-dribbble social_icon "> </i> <span class = "social_num"> 230,000 </span> </a> </li> 
        <li class = "social_item-wrapper"> <a href=" # "class="social_item social_rss"> <i class =" fa-rss social_icon "> < / i> <span class = "social_num"> 230.000</span> </a> </li> 
        <li class = "social_item-wrapper"> <a href=" # "class="social_item social_google-plus"> <i class =" fa fa-google-plus social_icon "> </i> <span class =" social_num "> 230.000 </span> </a> </li> 
        <li class =" social_item-wrapper "> <a href =" # "class =" social_item social_linkedin " > <i class = "fa-linkedin social_icon"> </i> <span class = "social_num"> 230.000 </span> </a> </li> 
        <li class = "social_item-wrapper"> <a href = " # " class = "social_item social_instagram "> <i class =" fa-instagram social_icon "> </i> <span class =" social_num "> 230.000 </span> </a> </li> 
    </ul> 
</div>

Altere o texto destacado em vermelho com seus seguidores de mídia social e destacado em azul com seus perfis de mídia social. 

Conclusão

Parabéns !! Você conseguiu. agora você aprendeu que Como adicionar um widget social simples da barra lateral para o Blogger . Visite o seu blog e verifique o incrível widget ao vivo em ação, espero que tenha gostado deste tutorial. Se você gostou, compartilhe com seus amigos, estamos trabalhando duro para desenvolver mais widgets incríveis, por favor, fique ligado.