Best Advanced Facebook Like box for Blogger blogs

Get Free SEO Tips

2016_05_29_06_55_52
Follow me

Mathias Amodu

Founder at Zealmat Limited
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large
Follow me
The Facebook like box is one of the best gadget that keeps your audience moving in contact with you.
Over the years I discovered that Facebook has done it possible best to create different features for websites and blog for example the Facebook comment box for blogger blog and other platform.
Today I will teaching you how to use an advanced facebook like box for blogger blogs with out much stress.

Image

Step 1
First visit www.blogger.com

Step 2
Now on your blogger dashboard select your preferred blog which you will like to to add this feature to.

Step 3
Then scroll your move down to template tab and then click >>>> Edit HTML.

Step 4
Now on click any part in your HTML code then press CTRL+F and search for the below code.

]]></b:skin>

Step 5
place the following 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;
}

Step 6
Again search for the below code.

<data:post.body/>

Step 7
Then place the following peace of code below it.

<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 this page and get more info</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
%2F zealmat&amp;
width= 450&amp;height= 200 &amp;colorscheme
%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>

Step 8
Now finally save your template and then visit your blog to see how beautiful it is.

ARRANGEMENT

  • Replace Like this page and get more info with your own favorite description.
  • Replace zealmat with your Facebook username.
  • Replace 450 and 200 with your desired width and height.
Don’t forget to drop your comment below thank you
About Mathias Amodu 912 Articles
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large

4 Comments

Leave a Reply

Your email address will not be published.


*


[mc4wp_form id="3153"]