Tabber comments Facebook và Blogger cho Blogspot

Theo mặt định thì blogspot của chúng ta chỉ có comments google blogger thôi, nay Hồng Designer sẽ hướng dẫn các bạn một thủ thuật blogspot mới đó là thêm comments facebook kết hợp với comments blogger vào blogspot.

Tabber comments Facebook vaf Blogger cho Blogspot

Bước 1 :

Đưng nhập vào template blogspot của bạn tìm đến thẻ </head> và chèn đoạn code sau trên thẻ </head>

<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="640"></div>';
//]]>
</script>

Lưu ý : 640 là chiều rộng của comments

Bước 2 :

Tiếp tục chèn đoạn code sau trên thẻ </body>

<div id='fb-root'/>
<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

Bước 3 :

Tìm đoạn code sau :

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
............
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
</b:if>

Bước 4 :

Thêm đoạn code sau dưới đoạn code ở bước 3

<b:if cond='data:blog.pageType == "item"'><div class='tabviewsection'><style>.tabs-widget{padding:0;height:28px;border-bottom:1px solid #ddd;width: 630px;padding-left: 15px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiuZHi0QrlCHA6lJhKlZ85Bs3kQzkyebtnY2senbX0248zukYmSefAxId9_gHsJnJBn3e5wQ-zVFUmmhQbPxNijHoig1MsVOhuwAz4fydty3dlilG825pnIegMljqrjKCrp4zYkTRB5MbY/s38/hinhnenthanhtab-thaiaiti.gif);}.tabs-widget li{list-style:none;list-style-type:none;padding:0;float:left;}.tabs-widget li:first-child{margin:0}.tabs-widget li a{color:#333;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1CMdi-__6w4PN_8hMkBgJ8DcnyU8yp8R66v0bfz-caFNvX6UMJQUAkSy2bdg12LPNvfhjd7Yeg30jx-f4lYXJb2yy9sufHAxpldMZsJDN2TQ8euOf2lDlXsOnhMH_1RVgECGooFWWa9TW/s27/2thaiaiti123.gif);padding:5px 10px;display:block;text-decoration:none;font:bold 13px Arial;text-transform:none;border:1px solid #ccc;height: 17px;margin-right:2px;border-top-left-radius:8px;border-top-right-radius:8px;}.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjySRZvXec9sISoiz-lYPjBUL6tJWPgvi3ZEiQmHICDvPrq-KHzsYGpiiy3qpa4dj4mE4WUOQlxAjH-0_mrneNy9yQdC9oGUglo-RwEYYxl3kbEmxPYWDemciAz3MMHnk9ZLjUmWW7eeOKj/s31/1thaiaiti123.PNG);color:#333;text-decoration:none;height: 18px;border-bottom: none;}.tabviewsection{width:640px;margin: 0;float: left;margin-top: 20px;}#widget-themater_tabs-1432447472-id1 {float: left;margin-top: 10px;}</style>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script><div style='float: left;margin-top:5px;height: 20px;overflow: hidden;'><div class='addthis_toolbox addthis_default_style '><a class='addthis_button_facebook_like' fb:like:layout='button_count'/><a class='addthis_button_google_plusone' g:plusone:size='medium'/></div><script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f57432236fb4dee' type='text/javascript'/></div><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Bình luận facebook</a></li> <li><a href='#widget-themater_tabs-1432447472-id2'>Bình luận Google</a></li>
</ul><div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:if cond='data:blog.pageType == "item"'><script type='text/javascript'>document.write(fbcm);</script></b:if>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
Đoạn code commnet của Google Blogger.... </div>
</div>
</b:if>

Bước 5 :

Chúng ta đã thêm comments facebook vào blogspot và bay giờ tìm đến đoạn code comments google blogger thay thế vào phần Đoạn code commnet của Google Blogger.... trong bước 4.
Tìm đoạn code sau đây

<div class='comments' id='comments'>
<a name='comments'/>
<h4><data:post.commentLabelFull/>:</h4>
<b:if cond='data:post.numComments > 200'>
<div class='commentnavi' id='commentnavi'/>
<script type='text/javascript'>
var numcomments='<data:post.numComments/>';
//<![CDATA[
var current;numshowpage=5;prev='«';next='»';pagefirst='Page';pageitems='Comments';dw='';urlactivepage=location.href;numpage=parseInt((numcomments-1)/200)+1;urlpost=urlactivepage.split('.html');urlpost=urlpost[0]+'.html';if(urlactivepage.indexOf('?commentPage=')==-1){current=1}else{current=parseInt(urlactivepage.substring(urlactivepage.indexOf('?commentPage=')+13))}var integer=parseInt(numshowpage/2);if(integer==numshowpage-integer){numshowpage=integer*2+1}first=current-integer;if(first<1){first=1}last=first+numshowpage-1;if(last>numpage){last=numpage;if((last-first+1)<numshowpage){first=last-numshowpage+1;if(first<1){first=1}}}if(current*200<=numcomments){dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+(current*200)+' / '+numcomments+' '+pageitems+'</span>'}else{if((((current-1)*200)+1)==numcomments){dw+='<span class="page-items">'+numcomments+' / '+numcomments+' '+pageitems+'</span>'}else{dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+numcomments+' / '+numcomments+' '+pageitems+'</span>'}}dw+='<span class="page-first">'+pagefirst+'</span>';if(current>1){dw+='<a class="page-prev" href="'+urlpost+'?commentPage='+(current-1)+'#comments">'+prev+'</a>'}if(first>1){dw+='<a class="page-number" href="'+urlpost+'?commentPage=1#comments">1</a>'}if(first>2){dw+='<span class="gap"></span>'}for(i=first;i<=last;i++){if(i==current){dw+='<span class="selected">'+i+'</span>'}else{dw+='<a class="page-number" href="'+urlpost+'?commentPage='+i+'#comments">'+i+'</a>'}}if(last<numpage-1){dw+='<span class="gap"></span>'}if(last<numpage){dw+='<a class="page-number" href="'+urlpost+'?commentPage='+numpage+'#comments">'+numpage+'</a>'}if(current<numpage){dw+='<a class="page-next" href="'+urlpost+'?commentPage='+(current+1)+'#comments">'+next+'</a>'}var a=document.getElementById('commentnavi');a.innerHTML=dw;
//]]>
</script>
</b:if>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
<script type='text/javascript'>
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML;c=b.indexOf('icon user blog-author">');if((items_copy[i].author.avatarUrl=='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEVOx_JOaj1Gj-83h7wpdly16zVYpUug2-X9iFZnEN97ZMmxr8HMxvYd7v5V9t1KdH0ka-J-Wo3omAkSqeLFOJKkNS-HFaW0a_BvnlyaSiOB_dsa_RjdrXEPiehfLJQAgzX6d9AGHuS074/s656/alo_logo%2520%25281%2529%2520copy.png')&&(c!=-1)){b=b.replace(/icon user blog-author">/,'icon user">')}a.innerHTML=b}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
for(i=0;i<items_copy.length;i++){if(i==items_copy.length-1){d=document.getElementById('c'+items_copy[i].id).getElementsByTagName('p').item(0);e=d.innerHTML+'<div class="thanks-comment '+items_copy[i].deleteclass.replace(/ blog-admin/,'')+'">Cảm ơn '+items_copy[i].author.name+' Chúc bạn 1 ngày làm việc hiệu quả!</div>';d.innerHTML=e}}
//]]>
</script>
<script type='text/javascript'>
var likeurl='<data:blog.url/>';
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);gl="'"+items_copy[i].id+"'";b=a.innerHTML+'<div class="like-cm" onmousemove="likecom('+gl+')"><div id="like-cm'+items_copy[i].id+'"></div></div>';a.innerHTML=b}function likecom(i){var a=document.getElementById('like-cm'+i);if(a){a.innerHTML='<iframe style="margin:-6px 0 0 -13px" frameborder="0" allowtransparency="true" scrolling="no" height="20" src="http://www.blogger.com/blog-post-reactions.g?options=[Like]&textColor=%23666666#'+likeurl+i+'" width="100"><\/iframe>'}}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b}
//]]>
</script>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>