COLOCAR WIDGETS SOCIAIS DO FACEBOOK, TWIITER E GOOGLE PLUS OCULTO

Este é 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.

<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>

{ 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhamT0vU9J43gFC8eALUwYhWN7XFnHIRDZKYGSDaLr5XNXUvJaKS8akMLC0J7RNpXei7trta2dQzHGLi9hdjhp2j5anvBl886sJuprrNq3X4fXZN09ZXEw_43Dd4b8b_15s6V2c0mum_T/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&height=346&colorscheme=light&show_faces=true&border_color&stream=false&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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijS_jdeNL6BjK5Y1LjrCxRcxNmZ0_jDNSe5XLSN1cG3basQJRQ1tICRiaHfsUOC56qJHeUuxXh9hLU8dxC_zIXMIJM0dvPjfoHcOGEeDssBtQluf24so0uHiT43BeCvxUGfa0n1qO3IpXi/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjphycw5Sm4NExbciRDu-qhLivmqVw8sKWM53vxXeObPFVl3JskoB1n-XXoDksRSIsw17JGJ4PykUBdwcLc9FSGVGi7bZalk9HyFDaMrh6QSRx8aF_7M80gc-Pv7mY8rwksTVbHqogr3BI/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaOQpTd5Yz-31gyIQYnRVN-AOZXxRG1gfxcHXMtgGBY1r8nJFdTwEn1g-obGMJRIxZnoODKkGrqZKtHb3q7-iZWy3NJbNFWHKacYUXbAHioIuyy_6doXFG1YDoQt0xbCwfTDodr4YZKKjh/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>

Gostou do tutorial? Alguma duvida deixe o seu comentário!

COLOCAR WIDGETS SOCIAIS DO FACEBOOK, TWIITER E GOOGLE PLUS OCULTO

quinta-feira, 17 de julho de 20140 comentários

Postar um comentário

Mais Acessadas

Parceiros