Jump to content
Script Brasil

Registre-se agora para obter acesso a todos os nossos recursos. Depois de registrado e logado, você poderá criar tópicos, postar respostas em tópicos existentes, dar reputação aos seus colegas, obter seu próprio messenger particular, publicar atualizações de status, gerenciar seu perfil e muito mais. Se voce já tem uma conta, faça o login Aqui - de outra forma create uma conta para livre hoje!

chris1999

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

Recommended Posts

Simple%2BSocial%2BWidget.jpg

 
 
 
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.
<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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...