Comment Facebook và Comment blogspot đẹp và chuyên nghiệp

Posted by: Unknown on 5:53 PM in Blogger 0

Hôm nay Cuti 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 , 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.

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>Chúc bạn thành công