Hoje vamos aprender a colocar um menu de redes sociais no seu blog. É rápido e fácil de instalar pois, o código já está prontinho.
Para começar você precisa ter instalada em seu template a fonte especial que gera os ícones.
Para aplicar essa fonte no seu blog, primeiro acesse o painel de seu blog e clique na aba Modelo.
A seguir clique em Editar HTML e dentro da caixa de código dê um clique e logo após dê um Ctrl+F.
Após aparecer a barra de busca digite nelaa tag <head> e tecle Enter para localizar.
Abaixo de <head> cole este código abaixo e salve.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css?ver=3.9.2' id='font-awesome-css' media='all' rel='stylesheet' type='text/css'/>
Agora, ainda no painel do blog, clique em Layout.
Escolha Adicionar um gadget e na janela de opções selecione HTML/JAVASCRIPT.
Dentro da caixinha cole o seguinte código:
<center>
<ul class="redessociais">
<a href="LINK DO PERFIL" title="Facebook"><li class="icone"><i class="fa fa-facebook" style="color:#fff"></i></li></a>
<a href="LINK DO PERFIL" title="Google+"><li class="icone"><i class="fa fa-google-plus" style="color:#fff"></i></li></a>
<a href="LINK DO PERFIL" title="Pinterest"><li class="icone"><i class="fa fa-pinterest" style="color:#fff"></i></li></a>
<a href="LINK DO PERFIL" title="Instagram"><li class="icone"><i class="fa fa-instagram" style="color:#fff"></i></li></a>
</ul>
</center>
<style>
li.icone{width: 38px; height: 38px; line-height: 38px; background: #E8657B; text-align: center; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); margin: 8px 4px 0 auto; font-size: 26px; font-weight: normal;}
li.icone:hover{background: #000;}
ul.redessociais{margin-top: 5px; margin-left:-2px; padding: 0; list-style: none;}
ul.redessociais li{display: inline-block; padding: 4px;margin-left: 1px;margin-right: 3px;}
</style>FAZENDO AS ALTERAÇÕES DE SUA PREFERÊNCIA:
No lugar onde está escrito LINK DO PERFIL coloque, claro, o endereço de seu perfil na rede social correspondente.
Faça isso com todas as redes que for inserir.
No lugar onde está escrito o nome da rede social mantenha, é importante. E sobretudo mantenha o trecho que diz <i class="fa fa-facebook" pois é esse nome da rede social (no caso, facebook, escrito exatamente assim) que vai fazer aparecer os ícones.
Aqui tem mais ícones que talvez você se agrade visite o site do desenvolvedor do recurso.
Se quiser acrescentar mais redes sociais além das 4 que forneci basta copiar essa linha de código:
<a href="LINK DO PERFIL" title="NOME DA REDE"><br /> <li class="icone"><i class="fa fa-NOME DO ÍCONE" style="color:#fff"></i></li>
E coloca-la ANTES do fechamento da div </ul>.
Cores são alteradas no código hexadecimal precedido de #.
O tamanho dos ícones é definido no estilo.
Confira o gráfico:
width: 38px; -largura
height: 38px; -altura
line-height: 38px; -altura do texto
background: #E8657B; -cor de fundo
text-align: center; -alinhamento do ícone
color: #fff; -cor do ícone
font-size: 26px; -tamanho da fonte do ícone
Depois de editar como desejar, salve, arraste o gadget para onde deseja que ele fique e salve as alterações do Layout.
Crédito: Elaine Gaspareto
Nenhum comentário:
Postar um comentário