|
|
Okay now we will discuss how to put it to your blog, just its application:
1. As usual my friend go to your blogger pal respectively.
2. On pal menu click the ➨Design tab ➨ Edit HTML➨ Expand Widget Templates.
3. Backup template first to anticipate when an error occurs.
4. Now in the Template Edti pal find the code]]> </ b: skin>
5. If you have found, copy the code below and paste it or place it in the code above.
.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
NB: If my friend wants both transparent back ground then you can simply remove the blue color code.
6. Now my friend for the code </ head> then copy and paste the following code or place it on top of it.
6. Now my friend for the code </ head> then copy and paste the following code or place it on top of it.
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB HERE' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
NB: Notice the red text, replace the text with a Facebook Application ID mate, to make the application already knows all the dong!
7. Still in the Edit HTML, now my friend looking <div class='comments' id='comments'> Then copy and paste the following code or place it underneath.
NB: <div Usually there are two so class='comments' id='comments'> select your second code, ok!
7. Still in the Edit HTML, now my friend looking <div class='comments' id='comments'> Then copy and paste the following code or place it underneath.
NB: <div Usually there are two so class='comments' id='comments'> select your second code, ok!
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
NB:
- Remove the code below purple if your template or below are the same code.
- Note the color-coded blue: number 2 (two) is the number of comments that will be displayed in comments facebook, my friend can change. Number 400 (four hundred) is the width of the comment box facebook, my friend can change it according to your template.
8. Save.
Now my friend can see the result in your blog comments. So first to post comments or articles Replacing Facebook and Blogger Side by side, hopefully this post or articles can be useful for all of my friend.
Now my friend can see the result in your blog comments. So first to post comments or articles Replacing Facebook and Blogger Side by side, hopefully this post or articles can be useful for all of my friend.
Regard.
Author: Unknown Location: Pangkalpinang, Bangka Belitung
Article How to Install Facebook Comments And Adjoining Blogger, Published by Unknown on the day Sunday, June 30, 2013. Hopefully this article can add your insights. Unknown a
is a writer who wants to be successful in the virtual world. Try, and keep trying. May God give consent. regards
0 comments:
Post a Comment