Botões de compartilhamento personalizados!!!

Vocês viram que o layout aqui do blog está mudado, né? Me realizei profissionalmente conseguindo fazer algo para mim que agradasse os meus olhos, porque sempre consegui fazer trabalhos lindos para os outros, mas nunca achava algo para mim que realmente me representasse. Enfim! O blog está lindo, deu muito trabalho, e entre as horas intermináveis de programação, fiz alguns códigos bem legais que vocês vão gostar 

Vou ensinar vocês a fazerem esses links de compartilhamento nas redes sociais, que vão levar as pessoas a compartilharem no seu blog no seu twitter, facebook, e google plus. Primeiro você vai precisar dar Ctrl + F no html do seu blog, e digitar na barrinha de pesquisa que vai aparecer a abertura <head>. Logo em baixo dela você vai colar o seguinte código :

<script type='text/javascript'>
  WebFontConfig = {
    google: { families: [ &#39;Raleway::latin&#39; ] }
  };
  (function() {
    var wf = document.createElement(&#39;script&#39;);
    wf.src = (&#39;https:&#39; == document.location.protocol ? &#39;https&#39; : &#39;http&#39;) +
      &#39;://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js&#39;;
    wf.type = &#39;text/javascript&#39;;
    wf.async = &#39;true&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>


Ele vai inserir a fonte Raleway no seu html. Se quiser fazer os botões com outra fonte, basta pular essa parte. Em seguida, pesquise de novo na mesma barra por ]]></b:skin> e logo a cima cole o CSS : 

#compartilhamento {
float: center;
padding: 15px;
}
#compartilhamento a{
border: 1px solid #f87a93;
font-family: 'Raleway', sans-serif;
letter-spacing: 5px;
padding: 5px;
color: #f87a93;
}
#compartilhamento a:hover {
color: #696969;
text-decoration : none;
}
#compartilhamentonome {
font-family: 'Raleway', sans-serif;
letter-spacing: 5px;
padding: 5px;
}  
Segue a legenda : 
Verde : Cor das bordas dos botões
Amarelo : Cor dos links
Azul : Cor dos links quando o mouse estiver por cima

E por último, procure por <div class='post-footer'> e escolha em qual abertura você vai inserir os botões, lembrando que você vai encontrar dois códigos iguais, mas estamos falando do segundo que você achar. No caso o do meu blog se encontra no <div class='post-footer-line post-footer-line-1'> . Em baixo do código que escolher, você vai inserir o código a seguir : 

<div id='compartilhamento'>
        <div id='compartilhamentonome'> <center>Compartilhe nas redes sociais</center></div>
        <a href='http://www.facebook.com/share.php?u'>Facebook</a>   <a href='https://plus.google.com/share?url'>Google +</a>   <a href='http://twitter.com/home?status'>Twitter</a>
      </div>

Se sinta a vontade para adicionar quais redes sociais você preferir! <3

7 comentários:

  1. ooie rsrs adorei a dica vou tentar colocar
    esse que esta pronto vai ficar nas mesmas cores que o seu?
    bjoos <3
    menina arrumada

    ResponderExcluir
    Respostas
    1. Siim sim, mas deixei nas legendas os lugares onde você vai modificar pra mudar a cor. Depois me mostra como ficou amora!

      Excluir
    2. Siim sim, mas deixei nas legendas os lugares onde você vai modificar pra mudar a cor. Depois me mostra como ficou amora!

      Excluir
    3. entao é q sou meio burrinha com html kkk

      Excluir
  2. Esses tutoriais magníficos nunca são demais 😍

    Beijos,
    blogmilenafranca.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Fico muito feliz que tenha gostado do tutorial <3 <3 <3 Beijinhooooos!

      Excluir
  3. Como você fez para deixar no centro? O meu não tá ficando :c

    ResponderExcluir

Blog da Beca - 2016. Programação por : Beautée Store. Tecnologia do Blogger. Subindo... imagem-logo