Oct 20, 2012

Professional Facebook Like Box for Blogger

Here is the another most advance and Professional Facebook Like Box for Blogger .Social networking sites Like Facebook, Google+  and Twitter drive a good amount of traffic to blog.so Here let me share knowledge how to add most advanced Facebook Like Box below each blog posts in Blogger


Live Demo

Receive daily updates from EGYTRICKS via Facebook


Follow Below Simple Steps To add this FB like Box below each and Blogger Post
  • Go to Blogger Dashboard > Template
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code  ]]></b:skin>(use Ctrl+F to find the code)
  • Now add the below code just Above/Before ]]></b:skin> 

#LS-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;
}
# LS-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;
}
# LS-fb  td{
padding:3px 0;
}


  • Now search the code <data:post.body/>
  • Now add the below code just Below/After <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='LS-fb'>
<div id='LS'>
<table width='100%'>
<tbody> <tr><td>
<span style='font-style: normal; font-size: 23px; 
font-family:Georgia,Times New Roman,Trebuchet MS; '>Receive daily updates from LABSTRIKE via Facebook</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%2FEGYTRICKS&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>

Replace EGYTRICKS with your Page Name
NOW ALL DONE SAVE YOUR TEMPLATE ... :)

Subscribe Updates, Its FREE!

0 comments:

Post a Comment

 

Copyright @ 2013 EgyTricks.

Designed by Vikash | EgyTricks