20 de mar de 2013

Colocar widgets sociais do Facebook, Twiiter e Google plus oculto



Eis aqui um código para implementar os widgets de suas páginas sociais como Google Plus, Facebook e Twitter, onde ficarão escondidos tendo o visitante que clicar em alguns botões na lateral do blog.

Clique em Layout


Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias com os endereços de suas páginas sociais no local grifado em vermelho.



<!-- Menu com widgets sociais -->
<style>
img, a {
border: 0;
}
#on {
visibility: visible;
}
#off {
visibility: hidden;
}
#facebook_div {
width: 196px;
height: 340px;
overflow: hidden;
}
#twitter_div
{
width: 246px;
height: 240px;
overflow: hidden;
}
#google_plus_div {
width: 290px;
height: 250px;
overflow: hidden;
margin-left: 5px;
margin-top: 1px;}
#NBT_div {
width: 300px;
height: 97px;
overflow: hidden;
}
/* right side style */
#facebook_right {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff; width: 196px;
height: 353px; position: fixed;
right: -200px;
}
#facebook_right img {
position: absolute;
top: -2px;
left: -35px;
}#facebook_right iframe {
border: 0px solid #3c95d9;
overflow: hidden; position: static;
height: 360px;
left: -2px; top: -3px;}#twitter_right {
z-index: 10004;
border: 2px solid #6CC5FF;
background-color: #6CC5FF;
width: 246px;
height: 240px;
position: fixed;
right: -250px;
}#twitter_right_img {
position: absolute;
top: -2px;
left: -35px;
border: 0;
}
#google_plus_right {
z-index: 10003;
background-color: #F2F2F2;
border: 2px solid #006ec9;
border-top: 2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-right: 2px solid #0056a0;
border-left: 2px solid #0056a0;
width: 290px;
height: 250px; position: fixed;
right: -294px;
}
#google_plus_right_img {
position: absolute; top: -2px;
left: -33px;
border: 0;
}
#NBT_right {
z-index: 10003;
border: 2px solid #303030;
background-color: #fff;
width: 300px;
height: 97px;
position: fixed;}#NBT_right img
{ position: absolute;
top: -2px; left: -101px;
}/* left side style */
#facebook_left {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 250px;
position: fixed;
left: -200px;}#facebook_left img {
position: absolute;
top: -2px;
right: -35px;
}
#facebook_left iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
right: -2px;
top: -3px;}
#twitter_left {
z-index: 10004;
border: 2px solid #6CC5FF;
background-color: #6CC5FF;
width: 246px;
height: 250px;
position: fixed;
left: -250px;
}
#twitter_left_img {
position: absolute;
top: -2px;
right: -35px;
border: 0;
}
#google_plus_left {
z-index: 10003;
background-color: #006ec9;
border: 2px solid #006ec9;
border-top: 2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-left: 2px solid #0056a0;
border-right: 2px solid #0056a0;
width: 290px;
height: 250px;
position: fixed;
left: -294px;}
#google_plus_left_img {
position: absolute;
top: -2px;
right: -33px;
border: 0;
}
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<script type="text/javascript">jQuery(document).ready(function ()

{ jQuery("#facebook_right").hover(function ()
{ jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#facebook_right").stop(true, false).animate({ right: -200 }, 500); }); jQuery("#twitter_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#twitter_right").stop(true, false).animate({ right: -250 }, 500); }); jQuery("#google_plus_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop(true, false).animate(
{ right: -294 }, 500); });});</script><br /><div id="on"> <div id="facebook_right" style="top: 12%;">


<div id="facebook_div">
<img alt="" src="http://3.bp.blogspot.com/-wQUpmiGwynE/UNHJaesfqeI/AAAAAAAAItg/JQlnTuoFRnQ/s1600/NBTfacebook_right.png" />
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=ENDEREÇO DE SUA PÁGINA DO FACEBOOK;
width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"
style="border: none; height: 346px; overflow: hidden; width: 200px;"></iframe>
</div>
</div>
</div>

<div id="on">
<div id="twitter_right" style="top: 28%;">
<div id="twitter_div">
<img id="twitter_right_img" src="http://3.bp.blogspot.com/-UrPbwWyd88E/UNHJhIlDSRI/AAAAAAAAIt4/fmis0qzbcfI/s1600/NBTtwitter_right.png" />
<script type='text/javascript'>function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://s.moopz.com/connect.html?user='+screen_name+'" class="FB_SERVER_IFRAME" scrolling="no" style="width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "></iframe>';}</script>  <div id="twitterfanbox">  <script type="text/javascript">fanbox_init("NICK DE SEU TWITTER");document.write( unescape( '%3C%73%70%61%6E%20%73%74%79%6C%65%3D%22%63%6F%6C%6F%72%3A%20%23%39%39%39%39%39%39%3B%20%66%6F%6E%74%2D%73%69%7A%65%3A%20%78%78%2D%73%6D%61%6C%6C%3B%22%3E%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%6E%65%77%62%6C%6F%67%67%65%72%74%69%70%73%2E%63%6F%6D%2F%32%30%31%33%2F%30%32%2F%61%64%64%2D%73%6D%6F%6F%74%68%2D%6A%71%75%65%72%79%2D%66%6C%6F%61%74%69%6E%67%2D%74%77%69%74%74%65%72%2D%66%61%6E%2E%68%74%6D%6C%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%3E%47%65%74%20%54%68%69%73%3C%2F%61%3E%3C%2F%73%70%61%6E%3E' ) );</script>
</div>

<div id="twitterfanbox">
<script type="text/javascript">fanbox_init("NICK DE SEU TWITTER");</script>
</div>
</div>
</div>


<div id="on">
<div id="google_plus_right" style="top: 45%;">
<div id="google_plus_div">
<img id="google_plus_right_img" src="http://2.bp.blogspot.com/-e2uAzeEjWU4/UTHxwZv6O_I/AAAAAAAAACo/IIkUjVUrtus/s1600/NBTgoogle_plus_right.png" />
<div style="float: left; margin: 10px 10px 10px 0;"> <a href='http://newbloggertips.com'>
<img alt='Tips Tricks And Tutorials' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a>
<div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/NUMERO DO ID DE SEU GOOGLE PLUS"
data-source="blogger:blog:followers" data-width="270">  </div>  <script type="text/javascript">      
(function() {          window.___gcfg = {'lang': 'en'};          var po = document.createElement('script');          po.type = 'text/javascript';        
po.async = true;          po.src = 'https://apis.google.com/js/plusone.js';          var s = document.getElementsByTagName('script')[0];        
s.parentNode.insertBefore(po, s);        })();      </script>   </div> </div>
</div>
</div>
</div>


17 comentários:

  1. Olá! Eu adoro seus tutoriais, eles sempre me ajudam muito. Eu gostaria de colocar em meu blog apenas o widget do Google + . Seria possível você postar o código? Obrigada! =)

    ResponderExcluir
  2. Elkinha,

    Amei seu tutorial. Vou colocar no TPV.
    Muito legal!!!
    Obrigada.
    Bjks

    ResponderExcluir
    Respostas
    1. Que bom que gostou. É mesmo muito bacana. Também estou usando. :)

      Excluir
  3. Oi Elke!

    Gostaria de saber se terá mais um no tutorial sobre personalização da caixa de comentários pois não estou conseguindo aplicar os modelos que você postou antes.Aliás,não consigo com nenhum hack disponível na net e acredito que o Blogger tenha feito alterações nas configurações do Html.

    Seu layout ficou muito bom,parabéns.

    ResponderExcluir
    Respostas
    1. Oi, vou ver o que está acontecendo, só peço um pouquinho de paciencia pois estou com várias tutoriais novas e bacanas para lançar e ainda estou testando-as. Pbrigada.

      Excluir
    2. Blz,enquanto isso eu fico tentando ,novamente, com os códigos que você postou antes.Desde Já agradeço.

      Óah!Esse widget lateral em seu blog é eficiente,éinh?!vou Add o ''templateseacessorios''nas minhas redes porque ele me faz lembrar que dá pra fazer isto,rss...

      Abçs. e boa sorte.

      Excluir
  4. oi esse gadget e otimo mais minha pagina do facebook nao aparece

    ResponderExcluir
  5. muito legal ja esta no meu blog http://personalizaseublog.blogspot.com/

    ResponderExcluir
  6. no meu nao funcionou
    www.esseeocorrego.blogspot.com

    ResponderExcluir
  7. è possivel colocar na visualização dinamica ?

    ResponderExcluir
  8. se eu tirar a parte do google+ do codigo ainda vai pegar o do facebook é twitter?

    ResponderExcluir
  9. o meu apenas o do Facebok nao deu certo oque sera q deu de errado !!!!

    ResponderExcluir
    Respostas
    1. No final do seu link do facebook coloquei um dúvida bem assim ? Que aí dera certo

      Excluir
  10. Gostaria de colocar apenas do facebook, é possível??

    ResponderExcluir
  11. No meu não funcionou me ajuda por favor, só entra o google+

    ResponderExcluir
  12. Oi no meu nao entrou o facebook voce poderia me ajudar? https://www.facebook.com/trabalhosacademicosnet

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube