How to add Google+ followers sliding box on blogger ~ DepoTech

In this article, I will provide you with an attractive Google+ followers sliding box for Blogger Blogs. This Google plus follower widget is just like Facebook Like Box and Twitter Fan Box. Sliding Google+ followers box will float on your blog/websites’ left or right side.

It will look like that :

1/ Open your blog

2/ In your blog Dashboard go to Layout

3/ Choose the place where you want to add you like box and click Add a Gadget (Left or right)

4/ Choose HTML/JavaScript

5/ Enter a title for example (Follow us Google+ )

6/ Paste this code ..


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//
</script>
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBI-vKLkqSKatZcSXz3v5NpVE6Nx0RAan29Mia9mPOnLAvr5QmxX0NwcM2vXzFUx0GsQRM8_CdQ0qT6zBO_TAbUZBmkMt3_wO3_B0lUOliaa5TUoJTRb7gz0z3UVjriwmrqTIKJb4U4x0/s1600/G++theblogservices.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 275px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 15px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
<div class="gplusbox">
<div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/115935237586164014917/posts?hl=ar
" data-source="blogger:blog:followers" data-width="320">
</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>
<a href="http://www.theblogservices.net/" target="_blank" title="The Blog Services"><img src="http://bit.ly/theblogservices" alt="The Blog Services" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
</div>
</div>


Done ... :)

If you have a problem just leave a comment ...