2 Re-Designed Facebook Likebox for Blogger/Wp

2 Re-Designed Facebook Likebox for Blogger
Facebook likebox is a must have widget in all types of blogs. This likebox what provided by Facebook it's pretty much simple, but this likebox is customizable, so you can reshape it however you want to. Here is method I used make a widget box than putted the default likebox in there. These two custom likeboxes are made of HTML, CSS and CSS3. Let's see how them looks like and how to add and configure;

Shadow Style Facebook likebox


Preview-
Shadow Style Facebook likebox

Demo- (Click Here)

Codes for copy-

<style>
    .ks-faceboo{
      width:96%;
      margin:10px 0px;
      border:1px solid #b9b6b6;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      box-shadow: 10px 10px 10px #e3e3e3;
      height:155px;
      width:280px;
      overflow:hidden;
    }
</style>
<div class='ks-faceboo'>
<!--crawlist.net widget starts-->
   <div id="fb-root"></div>
<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.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="https://www.facebook.com/crawlistblog" data-width="280" data-height="280" data-small-header="true" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/crawlistblog"><a href="https://www.facebook.com/crawlistblog">Crawlist</a></blockquote></div></div>
<!--crawlist.net widget ends--></div>

Blue shadow + Hover effect style Facebook likebox


Preview-
2 Re-Designed Facebook Likebox for Blogger
Live Demo- (Click here)

Codes for copy-

<style>
.ks-lb {
    border: 1px solid #09F;
    border-radius:0px 0px 0px 0px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    background: #fff;
    width:280px;
    height:155px;
    margin:auto;overflow:hidden;}
.ks-lb:hover {
    border: 1px solid #06F;
    border-radius:10px 10px 10px 10px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    background: #fff;
    -moz-box-shadow:1px 1px 10px 1px rgba(1,1,400,1);
    -webkit-box-shadow:1px 1px 10px 1px rgba(1,1,400,1);
    box-shadow:1px 1px 10px 1px rgba(1,1,300,1);overflow:hidden;}
</style>
<!--crawlist.blogspot.com widget starts-->
<div class="ks-lb">
<!--crawlist.net widget starts-->
   <div id="fb-root"></div>
<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.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="https://www.facebook.com/crawlistblog" data-width="280" data-height="280" data-small-header="true" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/crawlistblog"><a href="https://www.facebook.com/crawlistblog">Crawlist</a></blockquote></div></div><!--crawlist.net widget ends--></div>

How to add this widget in Blogger
  • First log in to your Blogger, select your Blog, 
  • Go to 'Layout' tab then click 'add a gadget'  
  • Select 'html/javascript' from pop up menu. 
  • Copy following codes and configure

How to add this widget in Wordpress
  • From dashboard hover mouse on 'appearance' tab, 
  • From 'appearance' menu select 'widgets', 
  • Then drag and drop 'Text' content box in widget area, 
  • Copy following codes and paste into 'text' box, 
  • For new dashboard click on 'Text' add it to sidebar and paste following codes and configure

How to configure
  • Collect your Facebook fanpage's direct address link, and paste in 'https://www.facebook.com/crawlistblog' 3 times.
So represent a unique art with your Facebook likebox. Don't forget to mention what you thinking about these by comment. Goodluck

Popular posts from this blog

Add Cool Social Media Sharing icons below posts in Blogger

Easily Get 50000 free Backlink for your website

13 Best Forum CMS/Script to use

7 best CMS/script for building Social networking website

Read Download Stephen King's Novels ePub & Apk

Read Download ePub Harry Potter Books & Apk

10 Best Free Flash Editor software to use

12 best free Article Rewriter/Spinner you can use

Top 6 Best Alternatives to ZBIGZ

6 Best Local Web Server software