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.

BHgoogleplus

[button link=”http://bderodemo.blogspot.com/” type=”big” newwindow=”yes”] LIVE DEMO[/button]

How To Install 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("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/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.

 

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!

Comments

  1. Hemant Verma says:

    Good

    Widget Generators

  2. adrian lucernas says:

    @Hemant Verma

    Thanks

  3. azad hussain says:

    How to you use tick mark in your heading? Can you share a tutorial?

  4. adrian lucernas says:

    @azad hussain

    Thanks to drop your comment, don’t you worry i will make a tutorials of that maybe today or tommorow and stay in touch with us for new updates….

  5. Hemant Verma says:

    @azad hussainanswer of your request, check below codes.

    Write Your Text Here

    2. Replace Write Your Text Here with your text.

    for more visit Widget Generators

  6. adrian lucernas says:

    @Hemant Verma

    Thank You for helping us..

  7. adrian lucernas says:

    @azad hussain

    The easiest way is to copy paste..you copy my tick mark and paste to your blog…

    Thanks..

  8. azad hussain says:

    @adrian lucernas
    I want to add directly on my template.
    Any way to do it?

  9. adrian lucernas says:

    @azad hussain

    please use the manual code in the field,,because there is a problem on Add To Blogger button,,also the other blog same problem,I friendly recommend to you use the manually add the code to your blog, and follow the instruction above..

  10. Adpower AE says:

    Great Post About Generator parts.Thanks for the post Wow…

Speak Your Mind

*


*