Add Static Google Plus Box With Smooth Hover Effect For Blogger

In this post i will explain you how to add static google plus box for your blogger. There is already this type of static like box for facebook, now i am providing you such thing for developing the google plus members and this can improve your traffic to certain amount.

This is purely made with CSS and if needed changes can be made such as colour and others. Before getting this you can view the demo to know how it will look at your site.

Add This To Blogger

Step 1: Login to your account.

Step 2: Now goto Layout-->Add A Gadget-->HTML/Javascript.

Paste the following code in it.

<style> .post-body{padding:8px 0 10px} </style>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 500;
summary_img = 390;
img_thumb_height = 120;
img_thumb_width = 180;
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
<style type="text/css">
#gpplikebox{
background-color:#F90101;
display:block;
padding:0;
z-index:99999;
position:fixed;
}
.gpplbadge{
background-color:#F90101;
display: block;
height:150px;
top:50%;
margin-top:-75px;
position:absolute;
left:-47px;
width:47px;
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRlclbw2H7K96JQZExm3-p7xAueUqFVLZ1KtuX6YsmKXgpQH3MF9Qjlnie_HwQGJ54z-jjbZb3BSHjR-7Gpktt4sc2K1Ojme4LNR9aeXP8Oxhjl0maCAXz5xi3bjq_mkqkbzKYlJ7kdKQ3/s1600/gplus-right.png");
background-repeat:
no-repeat;
overflow:hidden;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-bottomleft:8px;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
}
</style>
<script type="text/javascript">
(function(md){
md(document).ready(function(){
var $dur = "medium";
// Duration of Animation
md("#gpplikebox").css({right: -250, "top" : 100 })
md("#gpplikebox").hover(function () {
md(this).stop().animate({
right: 0
}, $dur);
}, function () {
md(this).stop().animate({
right: -250
}, $dur);
});
md("#gpplikebox").show();
});
})(jQuery);
</script>
<div id="gpplikebox" style="display:none;">
<div class="gpplbadge"></div>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPuRk9VL5D4IGTxfyqE04tJ0zamweq6B75JEmTe9sCWxwmyzNit7OPAXxjXmpDw5iwcgWVuJO7zVHfsQMQSX8pFQLVdt71oZyQCMT8m46oq5WP8Wvsc_3F17SkEK5GlekmY55qSxySeOg/s128/bloggers-hero.blogspot.com.png'/>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/105700823233597076366" data-source="blogger:blog:followers" data-width="245">
</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>

Step 3: Now replace 105700823233597076366 with your Google plus ID.

Step 4: Click save and you are done.

Take few seconds to share this with your friends...