Widgets das Redes Sociais em seu Blog

 Como colocar Widgets das Redes Sociais em seu Blog

Para colocar widgets das redes sociais em seu blog é muito simples, em poucos passos já estará tudo pronto, veja:

1- Acesse seu Blogger e no menu lateral clique em "Layout".

2- Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".

3- Dentro do conteúdo do gadget cole o código do Widget que você escolheu.

4- Clique em "Salvar", posicione o gadget para o espaço desejado e clique em "Salvar Organização".

<style>
/* social links */
.social { clear: right;
list-style: none;
margin: 0px;
margin-top: 8px;
padding: 0px;}
.footer .social { float:none; }
.footer .social li a { margin:0 5px 8px 0; }
.social li { display:inline-block; text-indent:-999em; }
.social li a { display:block; width:32px; height:32px; margin-left:5px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg38kKz_PSbFA2puoPHXjaNR54CNnWpf0swYSLnMXZcKEkaTO9lAVWXJ_U7lxxj3XXB1T1_C1vyA3hpK7EPOe_aupx09dfFI6_VcdTHgn_AYZrvmDOSQQmM53ABXkPH1orDcdSrQTLKI9Ul/s1600/Social.png); background-repeat:no-repeat;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.social li:first-child a { margin-left:0; }
.social li a:hover { border-top-left-radius:0px; }
.social li a.facebook:hover { background-color:#3c5fac; }
.social li a.twitter { background-position:-32px 0; }
.social li a.twitter:hover { background-color:#5ec3df; }
.social li a.flickr { background-position:-64px 0; }
.social li a.flickr:hover { background-color:#FF0084; }
.social li a.rss { background-position:-96px 0; }
.social li a.rss:hover { background-color:#ff9900; }
.social li a.dribble { background-position:-128px 0; }
.social li a.dribble:hover { background-color:#EA4C89; }
.social li a.lastfm { background-position:-160px 0; }
.social li a.lastfm:hover { background-color:#D51007; }
.social li a.linkedin { background-position:-192px 0; }
.social li a.linkedin:hover { background-color:#2089b5; }
.social li a.vimeo { background-position:-224px 0; }
.social li a.vimeo:hover { background-color:#0dadd6; }
.social li a.google { background-position:-256px 0; }
.social li a.google:hover { background-color:#c63d2d; }
.social li a.forrst { background-position:-288px 0; }
.social li a.forrst:hover { background-color:#5b9a68; }
.social li a.skype { background-position:-320px 0; }
.social li a.skype:hover { background-color:#00aff0; }
.social li a.picassa { background-position:-352px 0; }
.social li a.picassa:hover { background-color:#ffd34e; }
.social li a.youtube { background-position:-384px 0; }
.social li a.youtube:hover { background-color:#c8312b; }
.social li a.pinterest { background-position:-416px 0; }
.social li a.pinterest:hover { background-color:#cb2027; }
.social li a.tumblr { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaT1G-X5OiUHfjJUU6q5VhyTMFcsnh-Hf93fS3HsWTm8YcrTeXE3C2sSeHO8VPzdThL56XPq-RK3yvn5bFoks1sv_iu-Qzg_prsgl3-DexvJsfEVqUEu7YDJFiTe-VIlFZuwqFCX-1CS6A/s1600/tumblr.png); }
.social li a.tumblr:hover { background-color: #2C4762; }
.social li a { background-color:#bbb; }
.social li a { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
</style>
<ul class="social">
<li><a class="facebook" href="LINK AQUI" target="_blank">Facebook</a></li>
<li><a class="twitter" href="LINK AQUI" target="_blank">Twitter</a></li>
<li><a class="linkedin" href="LINK AQUI" target="_blank">LinkedIn</a></li>
<li><a class="flickr" href="LINK AQUI" target="_blank">Flickr</a></li>
<li><a class="lastfm" href="LINK AQUI" target="_blank">Last.fm</a></li>
<li><a class="vimeo" href="LINK AQUI" target="_blank">Vimeo</a></li>
</ul>

* Substitua LINK AQUI pelo link referente a rede social.

COMPARTILHAR:

Curtir

+1

Tweet

Tweet