Nhận xét mới mờ ảo với jQuery

Xin giới thiệu với tất cả các bạn thủ thuật nho nhỏ về tiện ích nhận xét mới mờ ảo với hiệu ứng mờ ảo sử dụng với JQuery.Đây là tiện ích mà mình tham khảo từ Blog của bác Duy Phạm Nhận xét mới với style Windows 8  .Hôm nay mình chỉ chỉnh sửa lại đôi chút cho hợp lý và trông đẹp mắt hơn.

DEMO

Bây giờ chúng ta bắt đầu thực hiện các thủ thuật theo các bước sau đây :
Bước 1: Vào Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>'

#rc-avatar-plus li{background:transparent!important;border:0!important;list-style-type:none!important;margin:0!important;padding:0 0 10px!important}
#rc-avatar-plus .rc-info{width:20%}
#rc-avatar-plus img{height:60px;padding:0!important;width:60px}
#rc-avatar-plus h4{font-size:0;margin:5px 0!important;text-align:center;text-shadow:.5px .5px 1px #666;text-transform:capitalize}
#rc-avatar-plus a{padding:5px;position:relative;width:70%}
#rc-avatar-plus .rc-author a{background:#a2c9e2;color:#000!important;text-decoration:none;text-shadow:.5px .5px 1px #666}
#rc-avatar-plus .rc-author a:hover{color:#0006ff!important;text-decoration:none;text-shadow:.5px .5px 1px #666}
#rc-avatar-plus .rc-admin a{background:#a2c9e2;color:#0006ff!important;text-decoration:none;text-shadow:.5px .5px 1px #666}
#rc-avatar-plus .rc-admin a:hover{color:#000!important;text-decoration:none;text-shadow:.5px .5px 1px #666}
#rc-avatar-plus a:after{content:"";height:0;line-height:0;position:absolute;top:10px;width:0}
#rc-avatar-plus p{margin:0 0 5px;padding:0}
#rc-avatar-plus .rc-author a:after{border-left:10px solid transparent;border-top:10px solid #a2c9e2;left:-10px}
#rc-avatar-plus .rc-admin a:after{border-right:10px solid transparent;border-top:10px solid #a2c9e2;right:-10px}
#rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float:left}
#rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a,#rc-avatar-plus span{float:right}
#rc-avatar-plus ul{background:#fff!important;border:1px solid #bbb;padding:5px!important;word-wrap:break-word}

Bước 3: Lưu lại template
Bước 4: Vào blogger > Bố cục > Tạo một widget HTML/Javascrip mới và dán vào form Nội dung đoạn code sau :

<span class="glap"><div id='rc-avatar-plus'>
<script type='text/javascript'>
var copyright_by_duypham_dot_info='Recent Comments free version 3.0 by http://duypham.info';nc=5;
length_name=30;
length_content=90;
no_avatar='http://img1.blogblog.com/img/anon36.png';
on='on';
home_page='';
admin_uri='';
admin_avatar='';
var dp=['S b=["\\E\\H\\P\\s\\M\\f\\A","\\M\\e\\e\\s\\1B\\r\\r","\\Z","\\n\\q\\I\\v","\\M\\j\\h\\I","\\1k\\A\\D\\1A","\\n\\q\\E\\h\\U\\1J\\I","\\r\\s\\r","\\k\\s\\l\\n\\e","\\w","\\j\\h\\s\\l\\f\\m\\h","","\\k\\H\\V\\k\\e\\j\\n\\q\\L","\\e\\v\\2B\\s\\s\\h\\j\\1p\\f\\k\\h","\\1a\\e","\\e\\n\\e\\l\\h","\\I\\h\\h\\E","\\v\\s\\h\\q\\2C\\h\\f\\j\\m\\M\\1a\\e\\v\\e\\f\\l\\1K\\h\\k\\H\\l\\e\\k","\\H\\j\\n","\\f\\H\\e\\M\\v\\j","\\k\\j\\m","\\L\\E\\1a\\n\\A\\f\\L\\h","\\h\\q\\e\\j\\P","\\l\\h\\q\\L\\e\\M","\\l\\n\\q\\1g","\\r","\\e\\M\\j\\1a\\n\\q\\J\\j\\h\\s\\l\\P\\J\\e\\v","\\K\\f\\l\\H\\h","\\L\\E\\1a\\h\\U\\e\\h\\q\\E\\h\\E\\1H\\j\\v\\s\\h\\j\\e\\P","\\m\\v\\q\\e\\h\\q\\e","\\k\\H\\A\\A\\f\\j\\P","\\T\\1D\\2A\\2z\\2v\\1n\\1t","\\l\\f\\k\\e\\1L\\q\\E\\h\\U\\1J\\I","\\T\\1D\\1q\\1C\\1C\\1t","\\q\\f\\A\\h","\\M\\e\\e\\s\\1B\\r\\r\\n\\A\\L\\1q\\Z\\V\\l\\v\\L\\V\\l\\v\\L\\Z\\m\\v\\A\\r\\n\\A\\L\\r\\V\\l\\f\\q\\1g\\Z\\L\\n\\I","\\q\\v\\w\\f\\K\\f\\e\\f\\j","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\B\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\2x\\2y\\1t\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1P\\j\\n\\e\\h","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\w\\k\\j\\m\\D\\x","\\r\\I\\h\\h\\E\\k\\r","\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D\\1A\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1K\\h\\m\\h\\q\\e\\w\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\I\\j\\h\\h\\w\\K\\h\\j\\k\\n\\v\\q\\w\\1C\\Z\\1A\\w\\V\\P\\w","\\r\\I\\h\\h\\E\\k\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D","\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1q\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\C\\H\\l\\B","\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\v\\q\\w","\\1B\\w","\\1D\\m","\\m\\v\\A\\A\\h\\q\\e\\1H\\f\\L\\h\\D","\\T","\\1k","\\C\\l\\n\\w\\m\\l\\f\\k\\k\\D\\x","\\j\\m\\J\\f\\E\\A\\n\\q","\\j\\m\\J\\f\\H\\e\\M\\v\\j","\\x\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\n\\q\\I\\v\\x\\B\\C\\n\\A\\L\\w\\f\\l\\e\\D\\x","\\x\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\f\\K\\f\\e\\f\\j\\x\\w\\k\\j\\m\\D\\x","\\x\\r\\B\\C\\M\\1G\\B","\\C\\r\\M\\1G\\B\\C\\r\\E\\n\\K\\B\\C\\f\\w\\M\\j\\h\\I\\D\\x","\\x\\w\\j\\h\\l\\D\\x\\q\\v\\I\\v\\l\\l\\v\\1P\\x\\w\\e\\n\\e\\l\\h\\D\\x","\\w\\v\\q\\w","\\x\\B\\C\\s\\B","\\C\\r\\s\\B","\\e\\j\\H\\h","\\C\\k\\s\\f\\q\\B","\\C\\r\\k\\s\\f\\q\\B","\\C\\r\\f\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\m\\l\\h\\f\\j\\x\\B\\C\\r\\E\\n\\K\\B\\C\\r\\l\\n\\B","\\C\\r\\H\\l\\B","\\n\\q\\q\\h\\j\\2i\\2j\\2q\\2r","\\j\\m\\J\\f\\K\\f\\e\\f\\j\\J\\s\\l\\H\\k","\\L\\h\\e\\2m\\l\\h\\A\\h\\q\\e\\2P\\P\\1L\\E"];1f=0;u=0;X=[];d=[];p=[];Y=[];1j=[];1x=[];t=[];1o=[];1u=[];a=[];W=[];1l=[];1h=[];1s=[];1m=[];1R=b[0];1S=b[1];1T=b[2];1Y=b[3];1M=3b[b[4]];y=1M[b[6]](b[5]);1w 2T(1r){G(d[u][b[6]](b[7])!=-1){Y[u]=1;i=d[u][b[8]](b[7]);i=i[1];i=i[b[10]](/-/g,b[9]);i=i[b[10]](/.2S/,b[11]);1I=i[b[12]](0,1);1O=i[b[12]](1);i=1I[b[13]]()+1O;t[u]=i}N{o=1r[b[16]][b[15]][b[14]];t[u]=o;1N=1r[b[16]][b[17]][b[14]];i=2U((1N-1)/2Y)+1;Y[u]=i};u++};1w 2X(R){1f=R[b[16]][b[17]][b[14]];1x=R[b[16]][b[15]][b[14]];G(b[18]1i R[b[16]][b[19]][0]){1s=R[b[16]][b[19]][0][b[18]][b[14]]};1m=R[b[16]][b[19]][0][b[21]][b[20]];1W(g=0;(g<1z)&&(g<1f);g++){c=R[b[16]][b[22]][g];G(g==R[b[16]][b[22]][b[23]]){2W};X=c[b[24]][0][b[4]];X=X[b[8]](b[25]);1X=X[5];1E=X[8];d[g]=c[b[26]][b[4]];G(y!=-1){d[g]=d[g]+b[5]};1o[g]=c[b[28]][0][b[27]];1u[g]=c[b[28]][1][b[27]];p[g]=1E;G(b[29]1i c){S F=c[b[29]][b[14]]}N{G(b[30]1i c){S F=c[b[30]][b[14]]}N{S F=b[31]}};F=F[b[10]](/<3c \\/>/g,b[9]);F=F[b[10]](/@<a.*?a>/g,b[11]);F=F[b[10]](/<[^>]*>/g,b[11]);G(F[b[23]]<1Q){1j[g]=F}N{F=F[b[12]](0,1Q);S 1e=F[b[32]](b[9]);F=F[b[12]](0,1e);1j[g]=F+b[33]};Q=c[b[19]][0][b[34]][b[14]];G(Q[b[23]]<1F){a[g]=Q}N{Q=Q[b[12]](0,1F);S 1e=Q[b[32]](b[11]);Q=Q[b[12]](0,1e);a[g]=Q+b[33]};G(b[18]1i c[b[19]][0]){1h[g]=c[b[19]][0][b[18]][b[14]]};G(c[b[19]][0][b[21]][b[20]]==b[35]){W[g]=2n;1l[g]=b[36]}N{W[g]=c[b[19]][0][b[21]][b[20]];1l[g]=a[g]};G(d[g][b[6]](b[7])!=-1){1d[b[38]](b[37])}N{1d[b[38]](b[39]+1U+b[2V]+1X+b[3a])}}};G(2R==b[2Z]+1S+1R+1T+1Y){1d[b[38]](b[39]+1U+b[2Q]+1z+b[2l])};1w 2k(){S O=b[11];O+=b[2o];1W(z=0;(z<1z)&&(z<1f);z++){t[z]=t[z][b[10]](b[2p]+1x+b[2s],b[11]);S 1b=b[11];G(Y[z]==1){1b=b[1V]}N{1y=b[2c]+Y[z]+b[1V];G(y!=-1){1b=b[2b]+1y}N{1b=b[2a]+1y}};O+=b[1Z];G(((1h[z]==1s)&&(W[z]==1m))||((1h[z]==2d)&&(W[z]==2e))){O+=b[2h]}N{O+=b[2g]};O+=b[2f]+1l[z]+b[2t]+W[z]+b[2u]+a[z]+b[2J]+d[z]+1b+p[z]+b[2I]+a[z]+b[2H]+t[z]+b[2G]+1j[z]+b[2K];G(1o[z]!=b[2L]){O+=b[2O]+1u[z]+b[2N]};O+=b[2M]};O+=b[2F];1d[b[2E]](b[2w])[b[2D]]=O};',"|","split","|||||||||||_0x2dd0|||x74|x61||x65||x72|x73|x6C|x63|x69|||x6E|x2F|x70|||x6F|x20|x22|||x6D|x3E|x3C|x3D|x64|_0xd75bx5|if|x75|x66|x2D|x76|x67|x68|else|_0xd75bx8|x79|a2|_0xd75bx4|var|x26|x78|x62|im|lk|pn|x2E|||||||||||x24|_0xd75bx9|x6A|document|_0xd75bx6|tt|x6B|ur|in|j2|x3F|alt|ima|x32|pi|x43|x31|_0xd75bx2|ura|x3B|ti|x5F|function|tb|cp|nc|x30|x3A|x33|x23|cid|length_name|x34|x50|str1|x4F|x52|x49|a3|num|str2|x77|length_content|ad|loc|dot|home_page|48|for|pid|inf|52|||||||||||51|50|49|admin_uri|admin_avatar|55|54|53|x48|x54|rc_avatar|44|x45|no_avatar|45|46|x4D|x4C|47|56|57|x39|69|x28|x29|x35|x38|x55|x53|68|70|67|61|60|59|58|62|63|66|65|64|x42|43|copyright_by_duypham_dot_info|html|rc_avatar2|parseInt|40|break|rc_avatar1|200|42|||||||||||41|location|br","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,199,dp[3][dp[2]](dp[1]),0,{}));
</script>
<script type='text/javascript'>rc_avatar();</script>
</div>
</span>

Bước 5: Lưu lại là hoàn tất thủ thuật. 

Thêm Hiệu Ứng Mờ Ảo Cho Đẹp

Bước 6: Vào lại chỉnh sửa template và thêm jQuery <head> (nếu có rồi thì bỏ qua bước này tránh xung đột code)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

Bước 7: Chèn code bên dưới trước thẻ đóng </body> sau đó lưu lại template

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
if(!$.browser.msie) $(".glap ul li").hover(function() {$(this).siblings().stop().fadeTo(400,0.4);},
function() { $(this).siblings().stop().fadeTo(400,1); });
});
//]]>
</script>

Chúc các bạn thành công với thủ thuật này

Read more »

Thread Comment đẹp phân cấp với CSS cho blogspot

Như các bạn đã biết hiện nay Blogspot đã cho ra Threaded comments mới, tuy nhiên giao diện còn khá đơn giản, nhìn không đẹp mắt lắm. Do vậy hôm đây mình sẽ giới thiệu cho các bạn Threaded comments đã được mình tùy biến trông đẹp hơn,bắt mắt hơn và đặc biệt là có thể phân bao nhiêu cấp tùy ý bạn.Đây cũng là  yêu cầu của bạn Hồng Phi Lê .

Demo 

Lưu ý: Trước hết blog của bạn phải cài đặt threaded comments rồi đã thì mới sử dụng thủ thuật này nhé. Nếu chưa cài đặt hãy làm theo hướng dẫn bên dưới :
1.Vào blogger > Mẫu > Chỉnh sửa HTML
2.CTR+F Tìm đoạn code sau :

<b:include data='post' name='comments'/>

3.Thay toàn bộ đoạn code tìm được bằng code bên dưới ( có 4 lần thay hoặc nhiều hơn tùy templete )

<b:include data='post' name='threaded_comments'/>

4.Lưu lại template

Tùy chỉnh Threaded Comments của blogger
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Dán code bên dưới vào trước ]]></b:skin>

#comments h4{margin:15px 0 15px;line-height:1.4em;text-transform:capitalize;font-size:160%;box-shadow:0 1px 3px 0 #B5B5B5;-moz-box-shadow:0 1px 3px 0 #b5b5b5;-webkit-box-shadow:0 1px 3px 0 #B5B5B5;border:1px solid #DDD;border-bottom:4px solid #0F83A0;overflow:hidden;position:relative}
.comments .comments-content .comment,.comments .comments-content .comment:first-child,.comments .comments-content .comment:last-child{padding:5px;border:1px solid #CFCFCF;margin:0 0 5px;box-shadow:0 1px 3px 0 #B5B5B5;-moz-box-shadow:0 1px 3px 0 #b5b5b5;-webkit-box-shadow:0 1px 3px 0 #B5B5B5;border:1px solid #DDD;border-bottom:4px solid #0F83A0;overflow:hidden;position:relative}
.comments .avatar-image-container{max-height:50px;width:45px;height:45px;padding:2px;border:1px solid #BDBDBD}
.comments .avatar-image-container img{max-width:50px;width:100%}
.comments .comment-block{margin-left:52px;}
.comments .inline-thread .avatar-image-container{float:right;width:40px;height:40px}
.comments .inline-thread .comment-block{margin:0 50px 0 0}
.comments .comments-content .comment-header{padding:0 0 3px;border-bottom:1px solid #D8D8D8}
.comments .comments-content .comment-replies{margin:10px 5px 0}
.comments .comments-content .inline-thread .comment-content{padding:0 10px}
.comments .comments-content .icon.blog-author{position:absolute;right:10px;background-color:#5390ad;width:65px;height:20px;border-radius:0 0 3px 3px;top:-7px}
.comments .comments-content .icon.blog-author::before{content:"Admin";color:white;position:absolute;left:12px;top:3px}
.comments .comments-content .inline-thread .comment:first-child{margin-top:8px}
#comments-block{margin:1em 0 1.5em;line-height:1.6em}
#comments-block .comment-author{margin:.5em 0}
#comments-block .comment-body{margin:.25em 0 0}
#comments-block .comment-footer{margin:-.25em 0 2em;line-height:1.4em;text-transform:uppercase;letter-spacing:.1em}
#comments-block .comment-body p{margin:0 0 .75em}
.deleted-comment{font-style:italic;color:gray}
.comment-form{max-width:100%}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment .comment-block {
margin-left:52px;
}
.comments .comment-thread.inline-thread .comment {
margin:0px 0px 5px 30%; /* Level 6+ */
background-color:#f4f4f4;
border:1px solid #ddd;
padding:10px 15px;
color:#333;
}
.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 25%;} /* Level 6 */
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 20%;} /* Level 5 */
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 15%;} /* Level 4 */
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 10%;} /* Level 3 */
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 5%; } /* Level 2 */
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0%; } /* Level 1 */
#comments .avatar-image-container img{border:2}
.comment-thread{color:#111}
.comment-thread a{color:#2F4F4F}
.comment-thread ol{margin:0 0 20px}

- Đoạn code  màu vàng chính là phần xác định phân cấp cho thread comment.
- Nếu bạn đang sử dụng  một trong các style giao diện Thread Comment(Duy Pham)  thì chỉ cần thêm nguyên đoạn mã  màu vàng trên vào trước thẻ ]]></b:skin> trong template.

Bước 3: Save lại và thử comments xem có pro hơn trước không nhé!

Di chuyển ghi chú nhận xét theo khung nhận xét khi reply đây là thủ thuật của bác Duy Pham.

Các bước thực hiện.

Bước 1: Tìm trong template thẻ <b:includable id='threaded-comment-form' var='post'>. 

Mã hàm threaded-comment-form trước khi thay thế

Tại hàm threaded-comment-form này thay thế thẻ <b:else/> bằng đoạn mã dưới đây: 

<b:else/>
<div id='threaded-comment-form'>

Thay thế thẻ </b:if> bằng đoạn mã dưới đây: 

</div>
</b:if>

Mã hàm threaded-comment-form sau khi thay thế

Bước 2: Thay thế đoạn mã document.getElementById(domId).insertBefore(replybox, null);trong template của bạn bằng đoạn mã dưới đây: 

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Các bước trên là nhóm những thành phần cần di chuyển theo khung nhận xét vào cùng thẻ <div> với id là threaded-comment-form và khai báo lại hàm insertBefore. Thủ thuật đã xong!

Trên đây là các bước cơ bản các bạn có thể tùy chỉnh css theo phong cách riêng của bạn.
Để tránh bị vỡ khung comment các bạn nên xóa tất cả những đoạn css có dạng #comments...đi,chỉ để lại đoạn mình hướng dẫn thôi.
 Bạn nên sao lưu Template để tránh trường hợp bị lỗi,bằng cách nhấp vào liên kết Mẫu => Sao lưu/Khôi phục => Tải về .

Chúc các bạn thành công.

Read more »

Thêm comments facebook song song với comments blogger

Theo yêu cầu của bạn DINH VAN Tu mình sẽ hướng dẫn bạn cách thêm comments facebook song song với comments blogger vào blog giống blog của mình.

Demo xem tại blog

Trước hết bạn phải đăng ký một apps trên Facebook tại Developers.facebook.com và làm theo các hình :

Trước khi tiến hành thủ thuật bạn phải lựa chọn chế độ nhúng cho comments mặc định của blogger

Vào blogger > Cài đặt > Bài đăng và nhận xét

Vị trí nhận xét bạn chọn Được Nhúng

Bây giờ chúng ta sẽ tiến hành thực hiện trong template

Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML

Bước 2: Chọn mở rộng mẫu Tiện Ích

Bước 3: Dán code bên dưới sau thẻ <head>

<meta expr:content='data:blog.url' property='og:url'/>

<meta content='article' property='og:type'/>

<meta content='Link ảnh Logo của blog' property='og:image'/>

<meta content='FACEBOOK APP ID' property='fb:app_id'/>


<script src='http://code.jquery.com/jquery-latest.js'/>

<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>

FACEBOOK APP ID bạn thay bằng ID đã tạo ở những bước trên


Bước 4: Tìm thẻ <html và thay bằng đoạn bên dưới

<html xmlns:fb='http://www.facebook.com/2008/fbml'

Nếu tìm trong template có xmlns:fb='http://www.facebook.com/2008/fbml' rồi thì bỏ qua bước này.

Bước 5: Tìm ]]></b:skin> và dán trước nó code bên dưới

.comments-page { background-color: #f2f2f2; width:500px;}

#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;}

Thay đổi những phần tô đậm sao cho phù hợp với blog của bạn lần lượt là màu nền và độ rộng khung comments


Bước 6: Tìm code bên dưới

<div class='comments' id='comments'>

Chèn đọan code sau bên dưới đọan code bạn đã tìm thấy đầu tiên ở bước 6.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>

<img class='comments-tab-icon' src='https://lh3.googleusercontent.com/-JKnnPrkXJv8/UR-IRJM77uI/AAAAAAAAAlU/1Yg5mP00PyM/h120/cmbg%5B1%5D.png'/>

<fb:comments-count expr:href='data:post.url'/> Comments

</div>

<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#comments");' title='Comments from Blogger'>

<img class='comments-tab-icon' src='https://lh3.googleusercontent.com/-JKnnPrkXJv8/UR-IRJM77uI/AAAAAAAAAlU/1Yg5mP00PyM/h120/cmbg%5B1%5D.png'/> <data:post.numComments/> Comments

</div>

<div class='comments-page' id='fb-comments-page'>

<b:if cond='data:blog.pageType == "item"'>

<div id='fb-root'/>

<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='500'/>

</b:if>

</div>

Trong đó 500 là độ rộng của khung comments bằng facebook

Read more »