Gadgets Redes Sociais Com ícones Bootstrap

Img fornecida gentilmente por : myriammira no Freepik

 Se você já foi atrás de inserir botões de redes sociais nos seus templates e ou em alguma área específica provavelmente se decepcionou quando soube que alguns widgets de redes sociais são pagos.

Hoje em dia muitos templates premium já vez com essa opção embutida porém nem sempre é assim ou nem sempre é da forma como realmente queremos.

Foi pensando nisso que desenvolvi utilizando bibliotecas gratuitas como Bootstrap, um gadgets nativo com ícones de redes sócias totalmente gratuito e exclusivo para o blogger 

Primeiro vamos apresentar o script:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /><br /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css" /><br /><br /><style><br />  .social-icons a {<br />    text-decoration: none;<br />    margin: 0 10px;<br />    color: #000; /* Cor dos ícones */<br />  }<br />  .social-icons a:hover {<br />    color: #007bff; /* Cor dos ícones ao passar o mouse */<br />  }<br /></style><br /><br /><div class="social-icons"><br />  <a href="https://www.facebook.com/seuPerfil" target="_blank"><br />    <i class="bi bi-facebook"></i><br />  </a><br /> <br />  <a href="https://www.instagram.com/seuPerfil" target="_blank"><br />    <i class="bi bi-instagram"></i><br />  </a><br />  <a href="https://www.youtube.com/seuPerfil" target="_blank"><br />    <i class="bi bi-youtube"></i><br />  </a><br />  <a href="https://wa.me/seuNumero" target="_blank"><br />    <i class="bi bi-whatsapp"></i><br />  </a><br />  <a href="https://t.me/seuPerfil" target="_blank"><br />    <i class="bi bi-telegram"></i><br />  </a><br />  <!-- Adicione mais ícones conforme necessário --><br /></div>

 Como fica após implementar no blogger veja abaixo a demonstração do código rodando:

👇

Adicionamos alguns dos ícones das principais redes sociais, os ícones vão se adaptar ao css do seu template quase de forma automática por isso em cada template será mostrado em cores diferentes ( dependendo do seu tema de cores ) 

Lembre se de editar o código a sua nessecidade, exemplo: 

Na linha 

<a href="https://t.me/seuPerfil" target="_blank">

    <i class="bi bi-telegram"></i

Substitua "seu perfil" pelo link do seu perfil na rede social, caso não for usar suas redes adicione .com para o final ou a extensão correta de cada rede.

para adicionar uma nova rede copie o código já existente e edite adicionando o código do Bootstrap correspondente a rede , exemplo:

<a href="adicione aqui o link da rede , sempre use "https:// no início " target="_blank">

    <i class="adicione o ícone do Bootstrap+ nome da rede "></i>

  </a>

Para saber sobre o ícone especifico vá até o site do Bootstrap e digite o nome do da rede social.

Para usar o código é bastante simples abra um novo widget em seu template, ou use no final ou começo das postagens adicionado em " modelo de postagens" 

Também é ideal para cabeçalhos e rodapés você pode usar caso esteja desenvolvendo templates para Blogspot.

Observação: para diminuir o tamanho do script usei biblioteca de hospedagem externa do cloudflare do Bootstrap, por tanto a modificação do script como tamanho dos ícones cor etc  é limitada.

Com isso espero ter ajudado dúvidas deixe nos comentários.