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





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.

Comentários

Postar um comentário

Popular Game

Burp Suite Professional v2021.5.2 Build 8133 + Loader-Keygen

Imagem
  Descrição Burp Suite é uma plataforma confiável e prática que fornece um meio simples de realizar testes de segurança de aplicativos da web.  Ele oferece controle total, permitindo combinar técnicas manuais avançadas com várias ferramentas que funcionam perfeitamente em conjunto para oferecer suporte a todo o processo de teste.  O utilitário é fácil de usar e intuitivo e não exige que você execute ações avançadas para analisar, verificar e explorar aplicativos da web.  É altamente configurável e vem com recursos úteis para auxiliar testadores experientes em seu trabalho. Características Burp Proxy Arroto Aranha Repetidor de arrotos Sequenciador Burp Decodificador Burp Comparador de arrotos Intruso arroto Scanner Burp Salvar e restaurar Procurar Analisador de Alvo Captura de tela Detalhes:   Formato: exe   Tamanho: 394MB   Fonte:    www.baixedetudo.net.br   Senha:  www.baixedetudo.net.br Como Registrar ou Ativar: 1 - Desinstale a v...
Leia mais

IObit Driver Booster Pro 9 Com Crack

Imagem
  Descrição IObit Driver Booster Pro 9 IObit Driver Booster Pro 9   A atualização de drivers é geralmente uma etapa inicial para evitar falha de hardware, instabilidade do sistema e vulnerabilidades de segurança ocultas.  Atualizar os drivers regularmente também é uma maneira eficaz de aprimorar o desempenho geral do PC e maximizar a experiência de jogo.  Embora esse processo possa ser arriscado e frustrante se feito manualmente.  Driver Booster PRO foi introduzido para baixar e atualizar drivers para você automaticamente com apenas um clique.  Baseado na biblioteca em nuvem, o Driver Booster PRO pode sempre ser o primeiro a identificar drivers desatualizados e baixar e atualizar drivers em uma velocidade incomparável.  Com o recurso de backup, é uma solução fácil, eficaz e sem riscos para manter seus drivers atualizados. Características Atualizar drivers desatualizados com segurança e rapidez Ofereça suporte a mais dispositivos de hardware e mel...
Leia mais

uTorrent Pro v3.5.5 Build + Crack Download Grátis

Imagem
  Descrição uTorrent é um cliente BitTorrent eficiente para Windows.  A maioria dos recursos presentes em outros clientes BitTorrent estão presentes no uTorrent, incluindo priorização de largura de banda, agendamento, download automático de RSS e Mainline DHT.  Além disso, o uTorrent suporta a especificação conjunta de criptografia de protocolo e troca de pares.  Ao contrário de muitos clientes de torrent, ele não consome recursos valiosos do sistema - normalmente usando menos de 6 MB de memória, permitindo que você use o computador como se ele não existisse. Características Transmita instantaneamente Assista ou visualize torrents durante o download, sem esperar pelo arquivo concluído. Converta, baixe e reproduza em vários formatos O µTorrent Pro inclui um reprodutor de mídia HD ou converta para reproduzir em qualquer dispositivo móvel. Novos recursos premium µTorrent Pro está sempre adicionando novos recursos.  Aproveite-os sem nenhum custo extra. Proteção anti...
Leia mais