How To Add Static Google Plus Pop Out Box With Smooth Hover Effect

In this tutorial i will show you how to add a cool floating Google Plus Pop Out Box Widget With Smooth Hover Effect for Blogger that slides to the left on mouseover. 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 really easygoing to install it  in your own blog. It looks very pro and when you testament add this widget in your blog then it would be amount your Google Positive Writer's masses be'coz this is very new construct with Google Quality and as Google newly declared their Positive badge for blogs and website then it's wanton to do this.

View Live Demo

Install Pop Out Google Plus Widget

If you are a beginner in Blogger Editing ,use our one click Widget

• Click the below Add to Blogger Button to install

Manually Add Pop Out Google Plus Widget

• Sign In to your Blogger Account.
• Go to Design->Page Elements
• Click on Add Gadget and look for HTML/Javascript take it
• Give the title as you need(eg:Random Posts)
• Copy and paste the below code to the content section

<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/AVvXsEgLCpmtO9G5W_1Ezmhn6TWkkxRDqcL5X4dOR_3up4_CyTNLTOpD5nf37GYWgVShrLBk1cwDKYTsWa_SXL-ptlvcNF3dDJelRh7Exl7BfXg8fhOOJrjIz-v7kUblp9emproXWvapM8Nklav3/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/AVvXsEiUxKJ8ngxo4rUxE64HNtwPbI86O-b0TqweMGY_nXuSIpTSSwDdA0ivxt4bl3LxPHAEPn_j8DdA-WC9twl6rfKLsYF51foMfEq1ANxXU-FFYNb38xJWqKCIaawdcvMjCJW0KMad1OrqnDor/s128/bloggers-hero.blogspot.com.png'/>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/106957260261276964704" 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>

• Click on Save...

Make This Changes

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

• If you have any doubts don't hesitate to ask.Please Comment.
• Now If  You Enjoy This Post! Please Take 5 Seconds To Share It.

Share it Please

Tweet