Monday, 27 April 2015

G+ Followers and Facebook Like Box Sliding Widgets

G+ Followers and Facebook Like Box Sliding Widgets
This post is a continuation of my previous post to add a widget on Google+ Followers Facebook Like Box Sliding widget we created yesterday. CSS code Google+ Followers and Facebook Like Box Sliding widgets is actually same just a little addition to the widget that is above.
Here we add the z-index code for our widget on the top shelf in his hover so that when the widget on-hover over it, the icon does not preclude the bottom widget. For more details Click on Demo button below.
Placement of CSS code and HTML together with the placement of the codes for sliding Facebook Like Box in my previous post.

CSS code 

I have this CSS code to combine Facebook Like Box code and Google+ Followers, so for those who have installed a sliding Facebook Like Box on my previous post, Replace the CSS code below.
.socialbox{
    position:fixed;
    top:100px;
    right:-286px;
    height:250px;
    width:285px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
}
.fbicon-box{
    width:30px;
    height:35px;
    position:absolute;
    top:-1px;
    left:-30px;
    background:#405D9B;
    border-radius:3px 0 0 3px;
    color:#fff;
    font-family:Arial;
    font-size:30px;
    font-weight:700;
    text-align:center;
    padding-top:2px;
}
.socialbox:hover{
    right:0;
    z-index:2;
}
.socialbox2{
    position:fixed;
    top:145px;
    right:-279px;
    height:230px;
    width:258px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
    padding:10px;
}
.gpicon-box{
    width:30px;
    height:32px;
    position:absolute;
    top:-1px;
    left:-30px;
    background:#DD4B39;
    border-radius:3px 0 0 3px;
    color:#fff;
    font-family:Georgia;
    font-size:20px;
    font-weight:700;
    text-align:center;
    padding-top:5px;
}
.socialbox2:hover, .socialbox2:active{
    right:0;
}

HTML Code
For the HTML code is the same, if you have installed a sliding Facebook Like Box on my previous post, please replace with its HTML code with the HTML code below.
<div class=”socialbox”>
    <div class=”fbicon-box”>f</div>
    <div class=”fb-like-box” data-href=”https://www.facebook.com/tips4tricx” data-width=”300″ data-height=”240″ data-show-faces=”true” data-header=”false” data-stream=”false” data-show-border=”false”></div>
</div>
<div class=”socialbox2″>
    <div class=”gpicon-box”>g+</div>
<div class=”g-plus” data-action=”followers” data-height=”240″ data-href=”https://plus.google.com/+AbidAziz1” data-source=”blogger:blog:followers” data-width=”260″></div>
</div>
Replace the Facebook profile URL and your Google+ profile above the Facebook profile URL and your Google+ profile.Then add facebook javascript SDK and javascript Google+ below.

Javascript Facebook 

Save the below code <body>
<div id=’fb-root’/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Javascript Google+

Save the above code </body>
<script type=’text/javascript’>
 (function() {
  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>
Then please do not forget to make sure your blog is already using jquery library like this (any version).
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js’ type=’text/javascript’></script>
» DO NOT FORGET TO LIKE N Yeach comments …
Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks