Thursday, December 27, 2012

Sliding Google+plus Pop Out Follower Box

3:07 PM By , , , , No comments

 Sliding Google+plus Pop Out Follower Box For Blogger:-


     Google+ plus is quickly growing.October 2011 it already had over 40 million user's and is the fastest growing social media site ever.Google Recently Launches Follower widget for all website.You can add this widget to your blog by going to layout -->> Add gadget,but that old way to show your visitor this visit.I just customize this widget little with CSS.Now this widget will float on left side of your blog and when any visitor will put mouse over it then it will slide and expand itself.

Live Demo


 Adding This Widget To Blogger:
  •     Go To Blogger/Blogspot Dashboard.
  •     Click On Layout Tab.
  •     Now Add Gadget -->> HTML/JavaScript.
  •     Paste Below Code There.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("http://4.bp.blogspot.com/-P_L7snSQIhY/UNwbKcrJWII/AAAAAAAABYY/Qpz93Gv34cw/s1600/g++itbooster.jpg") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 330px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 15px;
background: white;
border: 2px solid #D64937;
border-right: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/106849304625432735979" data-source="blogger:blog:followers" data-width="320">
</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>


  •     Now Replace RED Color highlighted Code with your Google + page or profile URL.
  •     Click On Save Button And Preview your blog and you will see this widget live on your blog.

0 comments:

Post a Comment

Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies..