Saturday, December 8, 2012

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/AVvXsEiqTs0DUH9szisKTRulJg86egK56Iibse23xLUbK6bJkf2XV8OpCcJFordKJDFcJ2c1Ep1Hmz8WZSJ80Jgr_6IuRoEPs1hN5byuUHd_7B6mUTpbMeEx61bTLf4-VzmLRL0V1lgd0nDVEqxr/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/AVvXsEjrz6NUflD1RrlmOb0jmg4tJ87yt6_yZ7tU_lihp3irnxYRzDe4tdXVwqzMdFP0uvo5fY7P9bttNCyCg96qZo3FQPBqg5G52Rg1Vz2ypPj-UGUvixK5ZLQSG3MrKVPMRGKrmaCUPw4_nN9h/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>