Wednesday 19 February 2014

Advanced Facebook Like box for Blogger blogs

Advanced Facebook Like box for Blogger blogs


1. Go to blogger dashboard --> Template --> Edit Html (Tick Expand widget template option).

2. Find for ]]></b:skin> tag and place the following peace of code just above it.
#BTbiz-fb {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
box-shadow: 5px 5px 5px #CCCCCC;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding:10px;
margin-top:25px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:560px;
}
# BTbiz-fb:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
}
# BTbiz-fb  td{
padding:3px 0;
}

3. Now find for <data:post.body/> and place the following peace of code below it.

Advanced Facebook Like box widget code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='BTbiz-fb'>
<div id='BTbiz'>
<table width='100%'>
<tbody> <tr><td>
<span style='font-style: normal; font-size: 23px; font-family:Georgia,Times New Roman,Trebuchet MS; '>Like Us....   Receive updates on your Facebook wall!!!!</span></td></tr>
<tr><td>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricksdotbiz&amp;
width=590&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false' style='border:none !important; overflow:hidden; width:560px; height:180px;'/></td></tr>
</tbody> </table></div></div>
</b:if>

4. Save the template.

Facebook Like box customizations

  • Replace Like Us....   Receive updates on your Facebook wall!!!! with your desired words.
  • Replace bloggertricksdotbiz with your Facebook username.
  • Replace 590 and 180 with your desired width and height respectively.

Hope you guyz liked this widget.. Happy Blogging.

Share This!


No comments:

Post a Comment

Powered By Blogger · Designed By Seo Blogger Templates