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("http://2.bp.blogspot.com/-wDiWs6f80bg/UMHSnugJM7I/AAAAAAAAFVQ/vaxObWoVnjE/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://lh5.googleusercontent.com/-ZjymP0J9Hmc/UMVVT3GwiyI/AAAAAAAAHWc/LOO2VU_Wc4k/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...

If You Enjoyed This Post Please Take 5 Seconds To Share It.

6 comments:

  1. Hi,

    Im trying to use your google+ box, but theres a small issue with it:
    http://kepfeltoltes.hu/view/130206/issue_www.kepfeltoltes.hu_.jpg

    Why displaying the original badget? In you demo site is not showing it.

    ReplyDelete
  2. i request the creator of this to view the demo now, it is shopwing the widget already opened, and on mouse hover it is coming out more, some problem,,, pl check.

    Thanks.

    http://ultimatesqs.blogspot.in/

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete

Abusive Comments are not allowed on this site.
Don't post comments with links included..