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/AVvXsEiw-oc4UyglYrSQ_eJ1DecFgF3hpv9V4079B0R9EJO-14q7FAvvXb5BSKPXrNexmr2nmTC-yGlN6v2C9Th0T5Bi8VM8obj09cmL0nbypjaiuE_tXeXIGyrJ5di4ybcoaljFeAOQFbWsfyjh/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/AVvXsEgIV7MMpvyNie6JXbY3yCZDsqauyhN_6hjLMWByr7KFDlXU2OPwQVypsuGCcC6aRMwvtXU8JzPlDb0L6ySYS52FQl-s5By7L6Yt_czWaXmuX6JzCuhYoAh669Ta4SFsoh1F9FOlfSg-4plf/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.

Note:- Hello There!Happy for reading the article and don't forget share this article on your social network.Thanks You ^_^

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Admin ID-Netblog, Published at 2:02 AM and have 0 comments

Writed by : Admin ID-Netblog

My friend was reading the article onHow To Add Static Google Plus Pop Out Box With Smooth Hover Effect. Admin, buddy permitted copying and pasting or disseminate this article, but do not forget to put the source link below.

<a href="https://bloggerheroe.blogspot.com/2012/12/how-to-add-static-google-plus-pop-out.html" target="_blank">How To Add Static Google Plus Pop Out Box With Smooth Hover Effect</a>