Blogroll

Saturday, November 23, 2013

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

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 

Share Template Seo vô đối

Như tiêu đề Share Template Cutiseo Blog đang xài, Template sắp xếp các thẻ h1,h2,h3 tối ưu hóa seo.Giao diện dễ tùy biến kể cả người mới cũng có thể dùng. Nền blog sáng, tùy chỉnh Menu , Mạng xã hội đơn giản các muốn sử dụng thì copy code dưới paste vào Template rùi Save xem nha!
Demo
Dowload

 

© 2013 Trường THCS Tòng Bạt. All rights resevered. Designed by Templateism

Back To Top