Sliding Facebook Like Box With CSS3

, , No comments
I see there are many blogs that use a sliding facebook like box. Quite interesting as well as we can a little messing around with fb like box on the blog with our mouse. But I see many blogs that use a sliding fb like box using jquery to show and hide the effects of his or her sliding.
Sliding Facebook Like Box With CSS3
For that I am now trying to make sliding the facebook like box using only CSS3 or javascript jquery without adding to the effect of sliding it in order not to increase the burden resulting from the addition of the blog loading javascript gif as shown below.

CSS used was simple enough just to create icons and boxes where fb facebook like box as shown below. Please save the CSS code above the code ]]></b:skin> or </style> 
.socialbox{
    position:fixed;
    top:10%;
    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;
}
Then, because it uses HTML5 fb like box, please add facebook javascript code just below <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>
Then add the following HTML code above the code </body>
<div class="socialbox">
    <div class="fbicon-box">f</div>
    <div class="fb-like-box" data-href="https://www.facebook.com/leetblogger" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
Please replace the URL with the URL of this https://www.facebook.com/leetblogger your facebook.

Facebook like box so that it can be run, please 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>
Easy is not it Good luck ....

» DO NOT FORGET TO LIKE N Yeach comments ... 

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )