♥ ASSALAMUALAIKUM ♥
![]() |
This is how FB Comment will look like |
![]() |
And This is how Blog Comment will look like |
![]() |
Click Image To Zoom |
![]() |
You May refer to this picture |
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://2.bp.blogspot.com/-uFjnblDYmQk/TgvzeRCM3QI/AAAAAAAAB7U/Zebl_cpQ4lk/s1600/facebook.png'/>
<fb:comments-count expr:href='data:post.url'/> People Sharing 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://1.bp.blogspot.com/-9FmbJGH15sM/Tgvzd04Q-VI/AAAAAAAAB7Q/Lme3FaDgAts/s1600/blogger.png'/> <data:post.numComments/> People Sharing 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='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<img class='comments-tab-icon' src='http://2.bp.blogspot.com/-uFjnblDYmQk/TgvzeRCM3QI/AAAAAAAAB7U/Zebl_cpQ4lk/s1600/facebook.png'/>
<fb:comments-count expr:href='data:post.url'/> People Sharing 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://1.bp.blogspot.com/-9FmbJGH15sM/Tgvzd04Q-VI/AAAAAAAAB7Q/Lme3FaDgAts/s1600/blogger.png'/> <data:post.numComments/> People Sharing 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='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US /all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' 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>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' 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>
P/S : For Those Using Old Template Find this code h3.post-title, .comments h4 { And put the CSS code below above it.
.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;}
#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;}
Preview .. If you are satisfied, Save And you're DONE..Goodluck!!!
P/S : Updated 16/08/2011 - Image Add On
If you have any questions,Don't be hesitate to leave comments and questions below, I will try to help you...
@Azeanthy Paiman
ReplyDeletehuhuhuhu
hehee..blurr..*wink*
ReplyDeletesaya mmg lemah sgt dan sgt dlm memanipulasi teknologi.. huhu
@Azeanthy Paiman My pleasure dear..dear ndak tanya me awal2..:P
ReplyDelete@~nazaku~ Kenapakah Labu?..hehehe
@Akue Achik Dear,here I am if you need my help ..:)
nice lah tutorial dia.
ReplyDeleteehehe..thanks sis.. :) tp skg rsany xda pa yg sy mahu bg tnjuk d fb lg..all my posts are just full with crap..ehehe
ReplyDeleteBookmarked !!.../* comments tak dapat cari, dan tak faham..nak try guna juga,kalau ada masa please help me :) tq
ReplyDeletewahhh..cool!! tp sa tida pandai buat ni..uhh. -_-
ReplyDeleteNanti i cuba buat :).
ReplyDeleteNice share cik Pink DIva. Nk try la buat.thx for tutorial. :D
ReplyDeleteCara Pantas Setel Masalah!!!
ahh.. fail la dear... sama problem macam si elih...
ReplyDelete@Elih Japahar And @nowriz ..kamu pakai template yang lama ..jadi letak kod di atas sebelum kod dibawah ini.
ReplyDeleteh3.post-title, .comments h4 {
Lau ada error,..send me the error message kat komen box ni..:P
@Bob Merley Thanx Bob..::P
ReplyDelete@Akue Achik ok dear..anytime jew if you want my help ok
@Yen Its my pleasure to help you Yen..just say it
@SJB AKA SUE J-B. Ok sue,any error just let me know ..
@Abe Goreng Your welcome bro ..anyway bro,next time if you want to comment,kindly dont put your link on HTML,,just URL k..sure i'll visit your post...huhu I love my blog..
Oh,ada beza antara template lama dengan template baru ka kak??
ReplyDelete@Aki
ReplyDeleteiya iyalah dear Aki..susunan pada css ndak sama..:)
wahh..nt klw rs mau bwt sure rujuk tuto ni n bwt..hehe :)
ReplyDeletethanks sbb share..skrg popular ni kan ? :)
hmmmm...i think it's cool when people can comment straight away to my fan page right..because my fan page is so quiet, well, no fans :p ahhaha....thx for the tips! ^^
ReplyDeletex dapat buat punn
ReplyDelete@Jerul
ReplyDeleteError ape yang keluar kat screen? i need to know that so that I can help you dear Jerul..
As I can see,your're using new template..put the above code [ Comments CSS] above this /* Comments,just copy and paste this into find box...
tenkiu!! dah jadi dah dengan bimbingan ni...refers 2,3 blog gak nk faham ni...huhu..tp dah berjaya!! heheh....
ReplyDelete@♕ Mr.IX ♂ Finally !! ada juga yang berjaya buat..huhuhu..tak sia2 my tutorial ..
ReplyDeleteThanx for shared here your victory bro..:P
Keep up the great work fellow blogger, your challenging work is definitly going to pay off.
ReplyDelete