Comment phân cấp cho blogger.

Blogger đã cho ra hệ thống comments phân cấp nhưng đã test một thời gian và theo ghi nhận từ một số blogger thì hệ thống comments này vẫn chưa thật sự hay lắm. Loc_rabbirt cũng đã nhờ mình share bộ comments form trên blog mình nên hôm nay mình viết bài viết này share bộ comments form này cho mọi người cùng sử dụng.

Xem Demo

Bài viết này mình phát triển từ một thủ thuật trước đây của vnblogspot. Hiện tại vnblogspot cũng đã share 1 bộ comments form khác khá đẹp. Bạn có thể xem hướng dẫntại đây hoặc sử dụng bộ comments form theo hướng dẫn bên dưới.

Thủ thuật này khá dài dòng. Bạn nên lưu lại template trước khi thực hiện để đề phòng bất trắc.

1. Nếu bạn đang xài threaded comments của blogger thì dầu tiên bạn cần chuyển threaded comments của blogger về mẫu comments cũ. Nếu bạn đang xài mẫu comments khác thì bỏ qua bước này.

Để thực hiện việc này bạn làm theo hướng dẫn ở đây.

2. Vào thiết kế → chỉnh sử HTML → mở rộng mẫu tiện ích và chèn đoạn code phía dưới vào trước thẻ ]]></b:skin>

#comments h4 {font-size: 24px;font-weight: normal;margin: 20px 0;}
.cm_wrap {clear: both;margin-bottom: 10px;float: right;width: 100%;}
.cm_head {margin: 0;width: 70px;float: left;}
.cm_avatar {margin: 0;vertical-align: middle;padding: 3px;width: 35px;height: 35px;}
.cm_reply {padding-top: 5px;}
.cm_reply a {display: inline-block;margin: 0;padding: 1px 6px;border: 1px solid #C4C4C4;border-top-color: #E4E4E4;border-left-color: #E4E4E4;color: #424242 !important;text-align: center;text-shadow: 0 -1px 0 white;text-decoration: none;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;background: #EDEDED;background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );font: 11px/18px sans-serif;}
.cm_reply a:hover {text-decoration: none !important;;background: #ccc;;background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;}
.cm_entry {padding: 16px;background: #F7F7F7;border: 1px solid #E4E4E4;overflow: hidden;text-align:justify;
border:1px solid rgba(0,0,0,0.4);
border-bottom:1px solid rgba(0,0,0,0.2);
background: rgba(0,0,0,0.15);
background: -moz-linear-gradient(top, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.15)), to(rgba(0,0,0,0.05)));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#999999'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#999999')"; /* IE8 only */
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5)}
.cm_info {margin-bottom: 5px;}
.cm_name {font-weight: bold;font-size: 12px;float: left;}
.cm_date {font-size: 12px;float: right;font-style: italic;color: blue;}
.cm_entry p {margin: 0;font-size: 13px;color: #666;}
.cm_pagenavi {font-size: 10px;text-transform: uppercase;color: #666;text-shadow: 1px 1px white;font-weight: bold;}
.cm_pagenavi a {color: #666;text-decoration: none;padding:10px;}
.cm_pagenavi a:hover {text-decoration: underline;}
.cm_pagenavi span {color: #888;background: white;padding: 4px;border: 1px solid #E0E0E0;}
.authorstamp, .adminstamp {border-radius:5px; float:right; font-size:10px; padding:0 5px; margin-left:5px; box-shadow: 3px 3px 3px #666;}

.adminstamp {color: blue; background: yellow;}
.authorstamp {color: yellow; background: green;}

3. Tìm đoạn code sau:

<b:includable id='comments' var='post'>
...
</b:includable>

Phần ... sẽ khác nhau tùy blog.
4. Bạn thay toàn bộ đoạn code ở bước 3 bằng đoạn code sau:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments > 0'>
          <b:if cond='data:post.numComments == 1'>
            <span id='cm_total'>1</span> comment
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> comments
          </b:if>
        </b:if>
        </h4>
        <div id='cm_reply_css'/>
        <div class='cm_pagenavi' id='cm_page'/>
        <div id='voquocan-emo'><div id='cm_block'>
            <b:loop values='data:post.comments' var='comment'>
                <b:if cond='data:comment.isDeleted'>
                <b:else/>

                    <div expr:id='data:comment.anchorName'>
                        <div class='cm_wrap'>
                            <a expr:name='data:comment.anchorName'/>
                            <div class='cm_head'>
                                <div class='cm_avatar'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>
                                </div>
                                <div class='cm_reply'>
                                    <a expr:href='"https://www.blogger.com/comment.g?blogID=4270938063143781293&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
                                </div>
                            </div>
                            <div class='cm_entry'>

       <b:if cond='data:comment.isDeleted'>
        <span class='deleted-comment'><data:comment.body/></span>
       <b:else/>
        <b:if cond='data:comment.authorUrl'>
                                <div class='cm_info'>
                                    <div class='cm_name'>
                                        <b:if cond='data:comment.authorUrl'>
<b:if cond='data:comment.authorClass == "blog-author"'>

<b:if cond='data:comment.authorUrl == "http://www.blogger.com/profile/15630166934565261153"'>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author'><span class='admin'><data:comment.author/></span></a><span class='adminstamp'>ADMIN</span>
<b:else/>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow'><span class='author'><data:comment.author/></span></a><span class='authorstamp'>CTV</span>
</b:if>
<b:else/>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><span class='visitor'><data:comment.author/></span></a>

</b:if>
<b:else/>

<b:if cond='data:comment.authorUrl'>
<data:comment.author/>

<b:else/>
</b:if>
                                        </b:if>
                                    </div>
                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>
                                </div>
                                <p><data:comment.body/></p>

<b:else/>
<div class='anoncm-wrapper' expr:id='data:comment.id'><p style='float:left;padding:10px;margin:0;width:450px;text-align:justify'><strong>Thông báo:</strong> Mẫu bình luận <strong>"Ẩn danh"</strong> và comments không địa chỉ URL đã bị khóa. Bạn vui lòng chọn mẫu <strong>"Tên/URL"</strong> và điền đầy đủ thông tin để viết bình luận.<b:include data='comment' name='commentDeleteIcon'/></p>
</div>
<div style='clear:both'/>
</b:if>
       </b:if>
       <div class='clear'/>
                            </div>
                        </div>
                    </div>
                </b:if>
     </b:loop>
        </div></div>
        <div class='cm_pagenavi' id='cm_page_copy'/>
<script type="text/JavaScript">
</script>
    <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>
</b:if>
</div>
</b:includable>

Thay đổi code:

Trong đoạn code ở bước 2 có 1 đoạn code màu xanh dương ở cuối.
» adminstamp: là của Admin
» authorstamp: là của cộng tác viên
» Color: là màu của chữ ADMIN - CTV
» background: là màu nền của chữ ADMIN - CTV

Trong đoạn code ở bước 4:
» Thay địa chỉ profile (http://www.blogger.com/profile/15630166934565261153) thành địa chỉ profile của bạn (Admin)
» Thay blog ID trong đoạn code trên (4270938063143781293) thành blog ID của bạn rồi save template lại là xong. Để biết ID blog của bạn thì bạn làm theo hình bên dưới.

Nhấp vào ảnh để xem rõ hơn

Những update trong bộ comments form này:

» Thay đổi giao diện của khung chứa nội dung comments.
» Chặn comments của người dùng "Ẩn danh" và người dùng "Tên không có URL" (đoạn code màu xanh lá ở bước 4)
» Gắng tem Admin, Cộng Tác Viên cho comments của Admin, và CTB blog (đoạn code màu vàng ở bước 4)

Nếu không sử dụng thủ thuật nào bạn chỉ việc xóa đoạn code của nó đi là được.
Những nội dung màu đỏ bạn có thể thay thế cho phù hợp với blog của bạn.

Update lần 1:

Do có một số bạn hỏi về việc tạo thanh cuộn cho phần nội dung comments khi có nhiều comments nên mình viết thêm phần update hướng dẫn về vấn đề này.
Để xuất hiện thanh cuộn bạn chỉ việc thêm đoạn code sau vào trước thẻ ]]></b:skin>

#cm_block{max-height: 200px; width: 635px; overflow:auto;}

max-height: là chiều cao tối đa. Nếu phần comments vượt qua chiều cao này thì sẽ xuất hiện thanh cuộn
width: là chiều rộng của phần comments
Bạn thay đổi 2 thống số trên cho phù hợp với blog là được rồi.

Tìm kiếm Blog này

Viết Cho Những Giấc Mơ Về Em

Comment phân cấp cho blogger.

Nhận xét

Đăng nhận xét

Bài đăng phổ biến

Full bộ ảnh nude Ngọc Trinh không che

[DL] -The Secret World of Alex Mack (1994) | Thế Giới Bí Mật Của Alex Mack - [Vietsub]