Botões de compartilhar personalizados

Oi gente, depois de tanto tempo eu finalmente voltei a postar no blog, estava resolvendo umas coisas e tentando personalizar meu layout, o que levou um tempinho e ainda não acabei. Mas agora estou de volta, e decidi postar no blog as coisas que venho aprendendo em CSS e HTML. O que vou ensinar hoje é: como colocar botões de compartilhamento personalizado no blogger.
Vai ficar assim:

Observação 1: Para esses botões eu usei como base o tutorial do blog da Rocky, só adicionei umas coisinhas para ficar mais fofo, então caso você não entenda algo que expliquei aqui você vai lá dar uma conferida ok?

Observação 2: A imagem do pandinha eu encontrei no DeviantArt e os ícones também, o balão fui eu quem fiz. Mas você pode mudar as imagens e os títulos pelo que quiser.

No HTML do seu blog, pesquise por:


<div class="post-footer-line post-footer-line-3">


Abaixo dele cole o código:


<!--Compartilhamento Personalizado Começo--><div><img src="https:%3Cfont%20color=%22#b4a7d6%22%20data-blogger-escaped-style=%22color:%20%23b4a7d6;%22%3Ehttps://1.bp.blogspot.com/-XRp1B08Dt1M/WyRX27qL6MI/AAAAAAAACYo/24XzaMGslukG8IOo1CGlY--V9L9SWzr7wCLcBGAs/s1600/panda_emoji_28__hello_hi___v2__by_jerikuto-d7n4wla.gif%3C/font%3E" title="Pandinha :3" /></div><div><img src="https:%3Cfont%20color=%22#b4a7d6%22%20data-blogger-escaped-style=%22color:%20%23b4a7d6;%22%3Ehttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc7hJ3ZgPPv3Lb-e4FznmdUhaGLCzMPAVt5G1Eg-oYYLdztoK5PB7KXP9eAzt5I7Kysa_u9F7JA2LUSiPbXtN30WeEVRBU2SM9hEKr26-f6SkTCXAU5oq9wpVlXJtaxVI5QF_O82q2aVw/s1600/compartilhe+pronto+eu+acho.png%3C/font%3E" title="by Bia Katerine" /><a expr:href="&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url" href="https://www.blogger.com/u/1/null" target="_blank"><img src="https:%3Cfont%20color=%22#b4a7d6%22%20data-blogger-escaped-style=%22color:%20%23b4a7d6;%22%3Ehttps://3.bp.blogspot.com/-PaBMFcOTyrw/WyZ3YgmrErI/AAAAAAAACeY/7bwoAMzahF4biYEFCZIJeGoVilnU9TpFACLcBGAs/s1600/f.png%3C/font%3E" title="Facebook" /></a><a expr:href="&quot;http://twitter.com/share?url=&quot; + data:post.url" href="https://www.blogger.com/u/1/null" target="_blank"><img src="https:%3Cfont%20color=%22#b4a7d6%22%20data-blogger-escaped-style=%22color:%20%23b4a7d6;%22%3Ehttps://2.bp.blogspot.com/-9hejC7odWis/WyZ3ZBvGJzI/AAAAAAAACeg/3Aonhw1MaqEFQ02KUJrvBBC-njqQn8-XQCLcBGAs/s1600/t.png%3C/font%3E" title="Twitter" /></a><a expr:href="&quot;https://plus.google.com/share?url=&quot; + data:post.url" href="https://www.blogger.com/u/1/null" target="_blank"> <img src="https:%3Cfont%20color=%22#b4a7d6%22%20data-blogger-escaped-style=%22color:%20%23b4a7d6;%22%3Ehttps://1.bp.blogspot.com/-LQahKpHykbI/WyZ3YXBsXaI/AAAAAAAACec/wrBQvOB-w9YRqekFX3sav7MHlBdWjQkUACLcBGAs/s1600/g%252B.png%3C/font%3E" title="Google+" /></a><a class="addthis_button_pinterest_share" href="https://www.blogger.com/u/1/null"><img alt="Pin This" border="0" src="https:%3Cfont%20color=%22#b4a7d6%22%20data-blogger-escaped-style=%22color:%20%23b4a7d6;%22%3Ehttps://3.bp.blogspot.com/-e2sf7vSgru0/WyZ3YfzSGrI/AAAAAAAACeU/LbNQhjzfrZAKaHoQehz0HZkDZoEvWvYlACLcBGAs/s1600/p.png%3C/font%3E" title="Pinterest" /></a></div><!--Compartilhamento Personalizado Final-->



E pronto! Mude os links em lilás pelas imagens que quiser.

Até mais!