Widget do Google Plus oculto na lateral do blog

Coloque um widget do Google Plus mostrando o avatar de seus assinantes oculto, na lateral do Blogger. Com esse widget seus visitantes poderão se cadastrar em seu Google Plus com muita elegância :-)



Clique em Layout

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código colocando o número do ID de seu Google Plus no local indicado.

<!-- Widget do Google Plus -->
<style>
img, a {
border: 0;
}
#on {
visibility: visible;
}
#off {
visibility: hidden;
}
#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;
}
#google_plus_div {
width: 290px;
height: 250px;
overflow: hidden;
margin-left: 5px;
margin-top: 1px;}
#NBT_div {
width: 300px;
height: 97px;
overflow: hidden;
}
#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("").hover(function ()
{  jQuery(this).stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("").stop(true, false).animate({   right: -200  }, 500); }); jQuery("").hover(function () {  jQuery(this).stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("").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="google_plus_right" style="top: 1%;">
<div id="google_plus_div">  
<img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJPnaUQlUXj5HOko-ZNI_piUuSLt5Nk1FLwVdj0UVFVESbanRZvv6-8mO0LM4HmPvaPDBksAT1R2wOTH_35NHkJUQCUfuOiIojTpLLbFTA1qZANJs2KcxCjdxHkq6SLjPToDmbPbOIKfs/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/AVvXsEhdAmfj7VABeObtOD4FGIvARUUUjt-jVW9Fq2bzEC7y4sWwW2KZuYrDUOf5fQbv2Epkw9eyQ96N0jSGvL9uIqeDxJtBv7I86ebHdfIgOMudrqMCeVqvhaJ2a6A4bCXLR756-orPs9YCXO_V/s1600/best+blogger+tips.png'/></a>
<div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/NÚMERO 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>