Box do Facebook, Google+ e Twitter na lateral do blog, juntos em um único gadget!

Views:
<style>
img,a{
border:0;
}
#on{
visibility:visible;
}
#off{
visibility:hidden;
}
#facebook_div{
width:196px;
height:340px;
overflow:hidden;
}
#twitter_div{
width:240px;
height:327px;
overflow:hidden;
}
#google_plus_div{
width:271px;
height:303px;
overflow:hidden;
margin-top:10px;
margin-left:2px;
}
 
#kakinetwork_div{
width:300px;
height:97px;
overflow:hidden;
}

#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:-33px;
border-radius:none; /*imagem face,,,,,,,,,,,,,,,, -33*/
}
#facebook_right iframe{
border:0 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:240px;
height:327px;
position:fixed;
right:-244px/
}
#twitter_right_img{
position:absolute;
top:-2px;
left:-33px;
border:0;
border-radius:none; /*imagem Twitter,,,,,,,,,,,,,,,,,-33*/
}
#google_plus_right{
z-index:10003;
background-color:#ffffff;
border:2px solid #0170CA;
border-top:2px solid #0170CA;
border-bottom:2px solid #0170CA;
border-right:2px solid #0170CA;
border-left:2px solid #0170CA;
width:271px;
height:303px;
position:fixed;
right:-275px;
}
 
#kakinetwork_right img{
position:absolute;
top:-2px;
left:-101px
}
#google_plus_right_img,#feedburner_right_img{
position:absolute;
top:-2px;
left:-32px;
border-radius:none;
border:0; /*imagem Google Plus e feedburner,,,,,,,,,,,,,,,, -32*/
}

#facebook_left{
z-index:10005;
border:2px solid #3c95d9;
background-color:#fff;
width:196px;
height:353px;
position:fixed;
left:-200px;
}
#facebook_left img{
position:absolute;
top:-2px;right:-35px}
#facebook_left iframe{
border:0 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:353px;
position:fixed;
left:-250px;
}
#twitter_left_img{
position:absolute;
top:-2px;
right:-23px;
border-radius:none;
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:hidden;
width:261px;
height:303px;
position:fixed;
left:-261px;
}

#kakinetwork_left img{
position:absolute;
top:-2px;right:-101px;
}
.box-title1{
border:1px solid #ddd;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:5px 5px 5px #CCC;
-moz-box-shadow:5px 5px 5px #CCC;
box-shadow:5px 5px 5px #CCC;
margin:10px 0;
padding:10px;
}

#kakinetwork_right,#kakinetwork_left{
z-index:10003;
border:2px solid #303030;
background-color:#fff;
width:300px;
height:97px;
position:fixed;
}
#google_plus_left_img,#feedburner_left_img{
position:absolute;
top:-2px;
right:-275px;
border:0
}  
</style>  

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></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: -244 }, 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: -275 }, 500); }); jQuery("#feedburner_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#feedburner_right").stop(true, false).animate({ right: -304 }, 500); }); });
</script>  

<div id="on">
<div id="facebook_right" style="top: 18%;"> <div id="facebook_div">  
<img src="http://lh3.googleusercontent.com/-I44nDTfSPyo/Ul1vDPqVB4I/AAAAAAAAJaw/5YFaYhEFb70/s101/facebook.png" alt=""/>  
COLE AQUI O CÓDIGO DE SUA FANPAGE
</div>
</div>
</div>  

<div id="on">
<div id="twitter_right" style="top: 35%;">
<div id="twitter_div">  
<img id="twitter_right_img" src="http://lh4.googleusercontent.com/-x-u5pxf89SE/Ul1vGP32IeI/AAAAAAAAJa4/G0khEdGLpoU/s101/twitter.png"/>  
AQUI O CÓDIGO DO TWITTER
</div>        
<div id="on">
<div id="google_plus_right" style="top: 52%;">  <div id="google_plus_div">  
<img id="google_plus_right_img" src="http://1.bp.blogspot.com/-Teux3f5_Fs4/Uro7jFLkTZI/AAAAAAAA0qA/kGsyhr_Wzmc/s1600/aba+g+.png"/>  
<div style="float:left;margin:10px 10px 10px 0;">
<div class="g-plus" data-action="followers" data-height="303" data-source="blogger:blog:followers" data-href="ENDEREÇO COMPLETO DE SEU PERFIL G+/" data-width="265"> </div>
<script type='text/javascript'>
(function() {
window.___gcfg = {'lang': 'pt-br'};
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>



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage