This gadget has a nice lovely designed box with a Facebook like and
share button and also a link to your Facebook fan page for boosting your
blog/website fans; what else you want?
Get ready to see the awesome elegance in
action which will develop your blog/website. Let’s move to the tutorial.
How to Install the Facebook Like Box Below Each Post to Blogger?
STEP #2: Go to Dashboard>Template
STEP #3: Click on Edit
HTML>Proceed
STEP #4: Tick on Expanded
Template Widget check box
STEP #5: Take a Backup your template
STEP #6: Find (Ctrl + f) for the code below
]]></b:skin>
STEP #7: Just above that paste the following code.
.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px
10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:600px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqF6kqcjC-7tLoI46tF-EfXQL1md5kDeEzAwbmVseweHd6kMiet9tdF4ZCGuxFd0INhQyokrh48hHtVSTn_tNPlOI4UwSVCmaXQbJsYWBPGcTtrHD_ErG0sH3hm8LH-IoMtiP3QAM3igs/")
no-repeat scroll left top transparent;
}
.fb_like_top
a {
height:24px;
width:114px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp5pWcd7c7pUxFtxgkNJXooTuuJ441VWAV4QBiOSzqZ0uTie9i3VZneXYuuK6XULhbo1s1wwjqxzXcQ84ST92esAXVBbH-ZrFSVD3MR8gvqBq2RmWRSXce9PT9Zf0CJk2ocvnvuZLLoA/")
no-repeat scroll left top transparent;
display:block;
margin-left:485px;
text-indent:-5000px;
}.fb_like_button_holder
{
-moz-border-radius:10px 10px
10px 10px;
border-radius:10px;
background:none repeat scroll
0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:575px;
height:42px;
}
How to Customize?
- You can change/adjust
the width value 600px
according to your blog.
STEP #8: Now find (Ctrl + f) for the code below
<data:post.body/>
STEP #9: You may find this code 2 or 3 times but you just need to
concentrate on the first one in your template. Just below that code paste the
following code.
<b:if
cond='data:blog.pageType == "item"'>
<div
class='fb_like_box'>
<div class='fb_like_top'><a rel='nofollow' href='http://www.facebook.com/WIKITECHNOL'>Be a
Fan</a></div>
<div
class='fb_like_button_holder'>
<iframe
allowTransparency='true'
expr:src='"http://www.facebook.com/plugins/like.php?href=" +
data:post.url +
"&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"'
frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>
</div>
</div>
</b:if>
How to Customize?
- Replace WIKITECHNOL with your Facebook
username.
STEP #10: Now click on Save and it’s done.
So execute
steps correctly and you are done. Head to your blog and check the trick
executed. So don't forget us. We will only survive with your generosity. Like,
Share, Follow and Subscribe. If you are facing any problem with implementing
these codes just comment below for help. Stay tuned for more posts.
{ 0 comments... read them below or add one }
Post a Comment