How To Customize Facebook Like Box Layout with CSS

Facebook like box are used by all blogs and websites now a days but  many site have the default fb-like box some even remove borders, faces and even change the background of the box. In this tutorial the Facebook like box is just the same as the default one but we have just added some Fancy CSS Effect to it.

See the above image how the Facebook like box really looks after adding CSS style to it.

Note:- As we said in the older post first thing is to backup your blogger template before adding the CSS code to your blog.

First you need to go to your blog template EDIT HTML and find the ]]></b:skin> tag. After findING the tag add the below code above it.

/*Facebook-Likebox-CSS-TNB
----------------------------------------------- */
.fb-wrapper {padding:5px;
margin: 10px auto;
width: 276px;
height: 360px;
border-radius: 0px;
position: relative;
z-index: 90;
background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1px solid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:10px;
}
.inner {border:1px dashed #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}

.ribbon-wrapper-blue {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}

.ribbon-blue {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #306EFF;
background-image: -webkit-gradient(linear, left top, left bottom, from(#306EFF), to(#3BB9FF));
background-image: -webkit-linear-gradient(top, #306EFF, #3BB9FF);
background-image: -moz-linear-gradient(top, #306EFF, #3BB9FF);
background-image: -ms-linear-gradient(top, #306EFF, #3BB9FF);
background-image: -o-linear-gradient(top, #306EFF, #3BB9FF);

color: #fff;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-blue:before, .ribbon-blue:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}

.ribbon-blue:before {
left: 0;
}
.ribbon-blue:after {
right: 0;
}

Next save your blog template, Go to Layout click on Add Gadget and then add HTML/Javascript inside it add the below code.

<div class="fb-wrapper">
<div class="insiderr">
<div class="ribbon-wrapper-blue">
<div class="ribbon-blue">
Facebook</div>
</div>
<center><iframe allowtransparency="false" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/thenextblogs&amp;width=240&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23eeeeee&amp;stream=false&amp;header=false&amp;height=335" style="background: trasparent; border: 0px solid #222; height: 335px; overflow: hidden; width: 240px;"></iframe></center>
</div>
</div>

Now change the link with your Facebook page url, Finally click on the save button and click view blog all done.