Thứ Ba, 24 tháng 4, 2012

ghghghg

Chèn comment phân cấp vào Blogspot Ver 2 với jquery - by: http://namkna.blogspot.com/
Phần comment phân cấp phiên bản đầu tiên có rất nhiều lỗi nghiêm trọng, vì vậy, mình quyết định không sử dụng bộ code đó nữa, mà mình muốn chia sẻ với các bạn bộ code mới hoàn thiện hơn với sự trợ giúp của jQuery.
Phiên bản này thực ra do Tiến Nguyên sáng tạo nên, namkna chỉ giới thiệu lại cho mọi người thoi!.
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Dán code sau
lên trước thẻ </head> trong code template của bạn. Nếu ai đã cài jQuery rồi thì không cần bước này.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
6. Tiếp theo, copy đoạn CSS dưới đây và dán lên trước đoạn code ]]></b:skin>
/* Comments */
#cm_block {
padding: 0 0 0 25px;
}
.cm_wrap {
background: #F8F8F8;
padding: 10px;
border: 1px solid #DDD;
margin: 10px 0 0 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
float: right;
}
.cm_avatar {
float: left;
width: 36px;
height: 36px;
background: white;
border: 1px solid #CCC;
padding: 3px;
margin-right: 5px;
}
.cm_avatar img {
width: 36px;
height: 36px;
background: url(http://anonymouscreativity.tumblr.com/images/anonymous_avatar_96.gif) center center no-repeat;
}
.cm_name a {
font-size: 12px;
font-weight: bold;
color: black;
}
.cm_date {
color: #CCC;
font-size: 11px;
}
.cm_reply {
font-size: 10px;
text-transform: uppercase;
float: right;
border: 1px #DDD solid;
padding: 3px;
line-height: 1em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #999;
}
.cm_reply:hover {
background: black;
color: white;
}
.cm_body p {
margin: 0 5px 0 0;
color: #666;
line-height: 1.5em;
float: left;
word-wrap: break-word;
}
.cm_form {
margin-top: 20px;
}
#comments h4 {
color: #333;
font-size: 24px;
font-weight: normal;
text-align: center;
margin: 1em auto 0.5em auto;
text-shadow: 0 0 1px #999;
}
.comment-form {
max-width: 100%;
clear: both;
}
7. Tiếp tục tìm trong template đoạn code A như sau:  
<b:includable id='comments' var='post'>
Kéo xuống tìm gần ngay dưới đoạn code này là đoạn code B như sau: 
</b:includable>
Hãy thay thế tất cả code bên trong đoạn A - B bằng đoạn code sau:
<div class='comments' id='comments'>
 <a name='comments'/>
 <b:if cond='data:post.allowComments'>
  <b:if cond='data:post.numComments != &quot;0&quot;'>
   <div class='clabel'><h4><span id='cm_total'><data:post.numComments/></span> comments</h4></div>
  </b:if>

  <div id='cm_reply_css'></div>

  <div class='cm_pagenavi' id='cm_page'></div>

  <div id='cm_block'>
   <b:loop values='data:post.comments' var='comment'>
    <div expr:id='data:comment.anchorName' class='cm_outer'>
     <a expr:name='data:comment.anchorName'/>

      <div class='cm_avatar'>
       <data:comment.authorAvatarImage/>
      </div>
      <div class='cm_info'>
       <span class='cm_name'>
        <b:if cond='data:comment.authorUrl'>
         <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
        <b:else/>
         <data:comment.author/>
        </b:if>
       </span>
       <span class='cm_date'><data:comment.timestamp/></span>
      </div>

      <div class='cm_body'>
       <b:if cond='data:comment.isDeleted'>
        <span class='deleted-comment'><data:comment.body/></span>
       <b:else/>
        <p><data:comment.body/></p>
       </b:if>
       <a class='cm_reply' expr:href='&quot;https://www.blogger.com/comment.g?blogID=__BLOGID__&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
       <b:include data='comment' name='commentDeleteIcon'/>
       <div class='clear'/>
      </div>

     <div class='clear'/>
    </div>
   </b:loop>
  </div>
  <div class='cm_pagenavi' id='cm_page_copy'></div>
  <div class='cm_form'>
   <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
     <b:include data='post' name='comment-form'/>
    <b:else/>
     <data:post.noNewCommentsText/>
    </b:if>
   <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
  </div>
 </b:if>
</div>
8. Lưu template lại và kiểm tra kết quả nếu thấy thành công rùi thì không cần phải làm bước 9 nữa.
9. Kế tiếp bạn cần truy cập vào đây kéo chuột xuống nhập URL vào dán đoạn script này trước th </body> (nhớ mở rộng tiện ích mẫu)

 Chúc thành công! 
theo:vnblogspot .

2 nhận xét: