Botões Redes Sociais Ícones Retina no Final das Postagens do Blog


Coloque em seu blog botões para compartilhar nas redes sociais no final das postagens com novo estilo utilizando as fontes awesome.

Atualmente na maioria dos templates, sejam pagos ou gratuitos, os botões de compartilhamento aparecem de maneira constante aplicados para aparecerem no final de cada artigo. Com sua imprescindível necessidade não sequer imaginamos não poder contar com essa função em nossos blogs que auxiliam para que nossos trabalhos possam ser compartilhados e expandidos na web.

Infelizmente nem sempre o estilo desse widget nos agrada e aí partimos para a personalização que também muitas vezes acabam por piorar tal aplicativo.

Redes Sociais com Fonte Awesome Personalizável


Nesse artigo trazemos até você um código que criará uma excelente função (imagem acima) a partir das impressionantes fontes awesome. Se você não conhece, podemos citar em breve relato as fontes awesome como ícones vetoriais escaláveis que podem ser facilmente personalizados - tamanho, cor, sombra e várias outras opções através do poder do CSS. Ou seja, você personaliza qualquer ícone disponível como qualquer fonte normalmente formatada em uma página HTML.

No nosso caso aqui hoje, são as redes sociais que vem ajustado em um widget que ficará logo no final das postagens de seu blog possibilitando o rápido compartilhamento. E mais, com um ótimo efeito hover que possibilita uma cor única se transportar à cor padrão de cada rede social ao passar do mouse.

Ficou com vontade de aplicar em seu blog? veja como é simples no tutorial a seguir:

Colocar Botões Redes Sociais Fonte Awesome no Blog

1º Passo: Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

2º Passo: Clique no código do template, pressione "CTRL+F" e pesquise por <head>

3º Passo: Logo ABAIXO da tag encontrada, cole o seguinte código:

<linkhref='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

4º Passo: Pesquise agora por ]]></b:skin>

5º Passo: Logo ACIMA da tag encontrada, cole o seguinte código:

/* CSS Share Button */
.sharepost{overflow:hidden;text-align:center;margin:20px auto;}
.sharepost li{width:19%;padding:0;list-style:none;float:left;margin-right:1.2%;}
.sharepost li a{padding:10px 0;background-color:#aaa;color:#fff;display:block;transition:all 0.3s linear;}
.sharepost li a:hover{opacity:1;color:#fff;transition:all 0.3s linear;text-decoration:none}
.sharepost li .twitter:hover{background-color:#55acee}
.sharepost li .facebook:hover{background-color:#3b5998}
.sharepost li .gplus:hover{background-color:#dd4b39}
.sharepost li .pinterest:hover{background-color:#cc2127}
.sharepost li .linkedin:hover{background-color:#0976b4}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
.sharepost ul {margin-left:20px;margin-right:20px;}

Configuração:

* Destacado em VERDE, cor de fundo quando estáticos.
* Destacado em LARANJA, cor do texto e dos ícones.
* Destacados em AZUL, cores de fundo da rede social correspondente ao passar o mouse.

6º Passo: Pesquise agora por <div class='post-footer'>

* Você poderá encontrar dois trechos iguais, caso encontre opte pelo segundo.

7º Passo: Logo ABAIXO do trecho encontrado, cole o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='sharepost'>
                <ul>
                <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
                <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
                <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank' title='LinkedIn Share'><i class='fa fa-linkedin'/>Share</a></li>
                <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank' title='Pin It'><i class='fa fa-pinterest'/>Share</a></li>
                </ul>
         </div>
<div style='clear:both'/>
</b:if>

8º Passo: Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

9º Passo: Vá em seu blog e veja como ficou.

Concluindo

As fontes awesome vieram realmente "pra ficar", possibilitando a criação de widgets práticos e com visuais espetaculares sem interferir no carregamento das páginas e nem conflitando com outros códigos. Nesse tutorial você pôde perceber como foi simples aplicar e personalizar os botões para compartilhar nas redes sociais que ficarão em um local bastante propício para realizar essa função tão importante e necessária que é ampliar a divulgação de suas postagens

Deixe seu comentário, ele é a motivação do nosso trabalho.
Proxima
« Anterior
Anterior
Proxima »