Hướng dẫn tạo Tab comment Facebook và comment blogspot đẹp và chuyên nghiệp

Hôm nay Share123.vn sẽ hướng dẫn các bạn cách tạo Tab comment Facebook và comment blogspot đẹp và chuyên nghiệp giống phim.share123.vn, về cơ bản đây chỉ là tab hai trong một, ở đây trong thủ thuật này bạn có thể tạo không giới hạn tab các bạn có thể thêm tab một cách thoải mái.

Demo Thủ thuật

Cách làm:
Bước 1: Đăng nhập => Mẫu => Chỉnh sửa HTML => Ctrl+F (Nội tuyến) => Tìm ]]></b:skin> Paste đoạn code sau vào trước ]]></b:skin>


.tabberlive{

margin:0;

padding:5px;

clear:both;

background:#f8f8f8;

border:1px solid #DDD;

}



.tabbernav {

margin:0;

padding: 3px 0;

border-bottom: 1px solid #ddd;

font-family:Arial,Helvetica,sans-serif;

font-size:12px;

font-weight:bold;

}

.tabbernav li {

list-style:none;

margin:0;

display:inline;

}

.tabbernav li a {

padding:3px 0.5em;

margin-right:1px;

border:1px solid #DDD;

border-bottom:none;

background:#6c6c6c;

text-decoration:none;

color:#ffffff;

}

.tabbernav li a:hover {

color:#6c6c6c;

background:#ffffff;

border:1px solid #DDD;

text-decoration:none;

}

.tabbernav li.tabberactive a,

.tabbernav li.tabberactive a:hover {

background:#ffffff;

color:#6c6c6c;

border-bottom: 1px solid #ffffff;

}

.tabberlive .tabbertab {

padding:5px;

border:1px solid #DDD;

border-top:0;

background:#ffffff;

}

.tabberlive .tabbertab h2,

.tabberlive .tabbertabhide {

display:none;

}

.tabbertab .widget-content ul{

list-style:none;

margin:0 0 10px 0;

padding:0;

}

.tabbertab .widget-content li {

border-bottom:1px solid #ddd;

margin:0 5px;

padding:2px 0 5px 0;

}

Bước 2: Mẫu => Chỉnh sửa HTML => Ctrl+F (Nội tuyến) => Tìm </body> Paste đoạn code sau vào trước </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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;

fjs.parentNode.insertBefore(js, fjs);

}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Bước 3: Mẫu => Chỉnh sửa HTML => Ctrl+F (Nội tuyến) => Tìm </head> Paste đoạn code sau vào trước </head>



<script src='https://sites.google.com/site/share123vn/Tabshare123vn.js' type='text/javascript'/>

<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="660"></div>';

//]]>

</script>

Bước 4: Mẫu => Chỉnh sửa HTML => Ctrl+F (Nội tuyến) => Tìm Id sau:


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

<a name='comments'/>

<h4><data:post.commentLabelFull/>:</h4>

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

</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 + &quot;_backlinks-container&quot;'>

<b:if cond='data:post.showBacklinks'>

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

</b:if>

</div>

</div>

</div>

Cắt ( Ctrl+X) đoạn code này và lưu tạm trong Notepad để tí Paste vào Bước 5

Bước 5: các bạn chèn đoạn code sau vào vị trí muốn hiển thị tab comment kết hợp, thường là chèn ngay trên <div id='related-posts'> của bài viết liên quan cho đẹp


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="tabber">

<div class="tabbertab section" id="tab1">

<h2>Bình luận Facebook</h2>

<script type='text/javascript'>

document.write(fbcm);

</script>

</div>

<div class="clear">

</div>

<div class="tabbertab section" id="tab2">

<h2 class="title">

Bình luận Blogspot</h2>

Paste đoạn code ở Bước 4 vào đây

</div>

<div class="clear">

</div>

</div>

<div class="clear">

</div>

</b:if>