dicas blog
Home » , , , » Como adicionar botões de rede social css no blog

Como adicionar botões de rede social css no blog

9
Esse tutorial é somente  para blogger e blospot!
Ter botões de  rede  social  no  blog  é  fundamental  para  que  os  visitantes  possam se  comunicar  com você  e acompanhar   seu  trabalho  em  outras plataformas, para  poder ficar  sempre informados  de   suas  novas  postagens  e  tutoriais feitos  no blogger  existem  vários  modelos de  botões,  isso tem  em  todos  os  blogs   hoje  em  dia  trouxe um  modelo  novo com  CSS  efeito  hover  ao  passar  o  mouse por  cima  deles  gera
  um  efeito  bem  agradável e divertido. se você acabou  de criar  um blog  ou uma  empresa e quer que ela cause  uma boa impressão não poderá  faltar  nada  nela. terá que ter  barra de  menu  caixa  de  pesquisa caixa   para  assinar  por  E-mail etc. e você  vai precisar de botões que possam ser bem  vistos e notáveis já que eles acompanham a rolagem da  pagina  subindo  e  descendo para  melhor visualização  os botões  são  das seguintes redes sociais Twitter  Facebook  RSS e Google +  se você gostou  vamos  ao  tutorial  abaixo   para estalar  no blog.

 
Copie o código  abaixo e   cole dentro  de  gadget  HTML/javaScript 

Demo



 <style>
    .sosmed-kananblogger{ background:url('http://4.bp.blogspot.com/-pHaCPnRRhpw/UEyeymZDBAI/AAAAAAAAAPo/sQgRynAxmLc/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
    .sosmed-kananbloggerc{ background:url('http://4.bp.blogspot.com/-udMDlRqH1mA/UEyexorOOMI/AAAAAAAAAPg/xlYmVRZR5Gc/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
    .sosmed-isiblogger{margin:0px 0 0 43px}
    .sosmed-kanantwitter{background:url('http://2.bp.blogspot.com/-cb-8UxmdvCY/UEye3s5ckoI/AAAAAAAAAQI/2UsOUiBl7OY/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
    .sosmed-kanantwitterc{background:url('http://4.bp.blogspot.com/-TtvqyHndUXc/UEye2FTtlVI/AAAAAAAAAQA/3de7K8XwcWE/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
    .sosmed-isitwitter{margin:0px 0 0 43px}
    .sosmed-kananfacebook{background:url('http://2.bp.blogspot.com/-kX-wO_55wpo/UEye0R9pSdI/AAAAAAAAAP4/GYLd2emZvyc/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
    .sosmed-kananfacebookc{background:url('http://3.bp.blogspot.com/-xAafaK_rors/UEyezhSNU4I/AAAAAAAAAPw/ceimgukhoT8/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
    .sosmed-isifacebook{margin:0px 0 0 43px}
    .sosmed-kananrss{background:url('http://2.bp.blogspot.com/-A2gUy4WF8l8/UUa2igFbIZI/AAAAAAAAAiM/2ck6-Wot2yM/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
    .sosmed-kananrssc{background:url('http://1.bp.blogspot.com/-RZyN5DznuUY/UUa9Uc04tFI/AAAAAAAAAi8/okz_LnBFNS4/s1600/RSSjoss.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
    .sosmed-isirss{margin:0px 0 0 43px}
    </style>
    <div class='sosmed-kananblogger' onmouseout='this.className=&apos;sosmed-kananblogger&apos;' onmouseover='this.className=&apos;sosmed-kananbloggerc&apos;'><div class='sosmed-isiblogger'><a href='https://www.facebook.com/SEU-NOME' target='_blank'><img alt='Like us on Facebook' src='https://lh3.googleusercontent.com/-DQ1Esvk6Vvg/UVL9feGbqzI/AAAAAAAACEM/JO3rrj14mM8/h120/fbmbd.png' title='Curtir no facebook'/></a><br/>
    </div></div><div class='sosmed-kanantwitter' onmouseout='this.className=&apos;sosmed-kanantwitter&apos;' onmouseover='this.className=&apos;sosmed-kanantwitterc&apos;'><div class='sosmed-isitwitter'><a href='https://twitter.com/SEU-NOME' target='_blank'><img alt='Follow us on Twitter' src='https://lh5.googleusercontent.com/-6RRhPePkuks/UVL74twwaMI/AAAAAAAACEA/pW1bCwLv064/h120/tr.png' title='Seguir no twitter'/></a><br/>
    </div></div><div class='sosmed-kananfacebook' onmouseout='this.className=&apos;sosmed-kananfacebook&apos;' onmouseover='this.className=&apos;sosmed-kananfacebookc&apos;'><div class='sosmed-isifacebook'><a href='https://plus.google.com/SEU-NOME' target='_blank'><img alt='Recommend us on Google Plus' src='https://lh6.googleusercontent.com/-3m4KILu5Dhk/UVL-rxKI1CI/AAAAAAAACEY/l1MikOKfgxQ/h120/recomendar%2B.png' title='Recomendar no google'/></a><br/>
    </div></div><div class='sosmed-kananrss' onmouseout='this.className=&apos;sosmed-kananrss&apos;' onmouseover='this.className=&apos;sosmed-kananrssc&apos;'><div class='sosmed-isirss'><a href='http://feeds.feedburner.com/SEU-NOME' target='_blank'><img alt='Subscribe me on RSS' src='https://lh4.googleusercontent.com/-8AU_8ZMiyjU/UVMARKyQmkI/AAAAAAAACEk/AOlBcvNRy8E/h120/seguir+via+rss.png' title='Assinar'/></a><br/>
    </div></div>

Tutorial  atualizado:código na caixinha abaixo.


De um CTRL+F  pra facilitar a busca nesses locais (SEU-NOME)  depões  adicione seus ids nomes das  redes   sociais  Twitter Facebook Google+ RSS
 
Depões  de feito tudo  salve o gadget em  qualquer  local.

9 comentários:

  1. boas amigo os botoes aparecem só que não abre o codigo nao deve tar bem ...

    ResponderExcluir
    Respostas
    1. Agora deu mano estava faltando um div,obrigado por avisar.

      Excluir
  2. Ricardo, eu estou pensando em criar um template para meus leitores no blog, como gadget posso colocar esses botões para eles próprios usarem?

    ResponderExcluir
    Respostas
    1. Claro caio pode colocar qualquer coisa que tiver aqui no blog na boa.

      Excluir
  3. muito legal cara, fui testar o tutorial mas os botões aparecem e não abrem, usei os dois codigos do tuto mas não fez diferença. vc poderia colocar o codigo corrigido se for o caso?

    ResponderExcluir
  4. cara quero colocar os icones das minhas redes sociais na barra de menu do blog, como faço?

    ResponderExcluir
    Respostas
    1. Tenho que dar uma olhada no seu blog para poder ajudar!

      Excluir