Add Google Plus Pop Out Box with Smooth Hover Effect

As in our one of the last post you see the how to create a Google Plus Followers Widget For Blogger and many you would also saw some Facebook and Twitter Pop Out Box with hover effect on mouse touching. This is also the some concept with it. This is fully customizable easily and simply create  with CSS, jQuery and HTML and it has a very smooth hover effect as you will see in the live demo and also very easy to install it  in your own blog. It looks very professional and when you will add this widget in your blog then it would be increase your Google Plus Page's followers be'coz this is very new concept with Google Plus and as Google recently announced their Plus badge for blogs and website then it's easy to do this. Give it a try in demo.

Live Demo

Add Pop Out Google Plus Widget

• Login to Blogger > Dashboard
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below 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>
</style>

<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/AVvXsEgZnkh-HH4oMJ_LhoNaMKsqicM-bQ_9alATpNKmY1mJ_wR682LOTrHbcBl1Xeug41Is0ry_cHO08U9H53FbelKuuL-SJIDtFOi0pZNnVGzghoRjYyAI9Jp8gB4Id2gcGVmPjEr1FaYq8234/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/AVvXsEhQzph77i1fr1MgjrHRmlh-1BMjBtc2uT1iA-2iddQajcVQVZxJhew0kR3WZfmXsxpXm3YcCoqFCgZvZ2uC8oAs16kmrz47UChX3XES-Jh9yHWZ5u5Qzzfncx1SNVKRVkczdiNTpmatzqpv/s1600/best+blogger+tips.png'/></a>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/108584822806858722112" 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>
</div>

• Save your template.

Make Changes....!

•  Replace 108584822806858722112 with your Google Plus Page/Profile ID.

If Any Problem Comes, Ask in Comments