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

<!-- 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVNgd53MHABwcWIl6fuEAO383v714J_G9o0Pj3dBVhMAAoqpWvvmzr37tzKklCNrbq0EY3_so2lYgaUN6PunmfksPjcSac-EPnZ22SfG9Du3DNjgrMzTJpB-cn6tTGbzcjcXP5pqieM7Jj/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHGU_8J14SzjQFZhyaR3oVJOC2trb6SbwmRCh4lWfb4ysGXIWJeXP7bDYTlLIy3kSjxwroOaCvNwgogo5W62Nr6QfmRbHRHzCN4F3fTkxggba5ii7gXscFIfSAHRurLt1zjkWOrmHriSb2/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/AVvXsEiXmuyJ4I0iOgUzfWAvnSc0pm4_YO-54W_SSGsI2_a_6l7SirkLx3vP6Aqg9sB2YhIbo8jhSNMZur4VRRKDgSbxHsLbNlFneDUMxq0WVS7SxVtF9K9X2lLWL45wUVpKLuc9t2P6yLy8WEw/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/AVvXsEiMGGkEoNkSe9Vnr0RHPUgl_73cyljKZxS6YG2fm6rnKXi2gu_OyJMOGADFid0Ko_eftTsVqcPtsfrWhpOXf0lE5jIgleYMoaUs0ansrilDiUJF1l-02lQ7xYbLvBZRqGoBUzYAHvDwO_0v/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>