Blogger- phân tích style comment blogger

 Trong temblate blogger có rất nhiều ID, class do ta tự đặt tên để tạo nên nhưng style mong muốn. Tuy nhiên phần coment thì không phải vậy. có nhiều class đã được google chuẩn hóa và chúng ta phải tuân theo. Do đó khi tạo ra những style cho riêng mình chúng ta phải viết cấu trúc html cũng như các lass được bố trí như thế nào. Khi đã hiểu được bản chất vấn đề thì mọi việc trở nên đơn giản, từ nay trở đi bạn có thể tạo riêng có bản thân style comment mà bạn muốn hoặc dễ dàng hiểu được những kiểu style comment mà ai đó chia sẽ.
Trong chủ đề phân tích comment blogger này tôi chia làm 3 phần chính:

• - Xem HTML + CSS trong một demo đơn giản về comment blogger.
• - Xem demo các class css trong một comment blogger.
• - Lấy CSS cơ bản nhất trong comment bloger
• - Tạo cho riêng mình phong cách comment blogger một cách nhanh nhất.

Xem cấu trúc HTML + CSS comment blogger
Trước tiên ta xem một ví dụ về một style comment mặc định

Xem cấu trúc HTMLTại đây http://pastebin.com/Sa9Dc6Yy

Nếu đoạn code trên không hiển thị thì bạn xem tại đây

<meta charset="utf-8">
<div class="comments" id="comments">
<a name="comments"></a>
<h4>7 nhận xét:</h4>
<div class="comments-content">
<div id="comment-holder">
<div id="" kind="c">
<div id="">
<div id="" class="comment-thread" kind="r" t="0" u="0">
<ol id="">
<li id="" class="comment" kind="b"> <!-- comment level 1 -->
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user"><a rel="nofollow" href="">Tên khách</a></cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:03 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là nhận xét của khách có địa chỉ</p>
<span id="" class="comment-actions secondary-text" kind="m">
<a kind="i" href="javascript:;" target="_self" o="r">Trả lời</a>
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b"> <!-- comment level 1 -->
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user">Nặc danh</cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="#">09:03 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là nhận xét của ẩn danh</p>
<span id="" class="comment-actions secondary-text" kind="m">
<a kind="i" href="javascript:;" target="_self" o="r">Trả lời</a>
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b"> <!-- comment level 1 -->
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user blog-author"><a rel="nofollow" href="">Thao Trinh</a></cite>
<span class="icon user blog-author"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:04 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là nhận xét của tác giả </p>
<span id="" class="comment-actions secondary-text" kind="m">
<a kind="i" href="javascript:;" target="_self" o="r">Trả lời</a>
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"> <!-- bắt đầu vùng comment cấp 2 -->
<span id="" kind="d">
<div id="" class="comment-thread inline-thread" kind="t" t="0" u="0"> <!-- Ta nên lấy tên lớp inline-thread làm đại diện cho các comment từ 2 cấp trở lên-->
<span id="" class="thread-toggle thread-expanded" kind="g">
<span id="" class="thread-arrow"></span>
<span id="" class="thread-count">
<span id="" style="display: none;"></span>
<span id="" style="display: none;"></span>
<a href="javascript:;" target="_self">Trả lời</a>
<div id="" class="thread-dropContainer thread-expanded"><span class="thread-drop"></span></div>
</span>
</span>
<ol id="" class="thread-chrome thread-expanded"> <!-- bắt đầu danh sách các comment cấp 2 -->
<div>
<li id="" class="comment" kind="b">
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user"><a rel="nofollow" href="http://web.com">Tên khách</a></cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:05 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là trả lời của khách có dịa chỉ</p>
<span id="" class="comment-actions secondary-text" kind="m">
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b">
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user">Nặc danh</cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:15 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là trả lời của nặc danh</p>
<span id="" class="comment-actions secondary-text" kind="m">
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b">
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user blog-author"><a rel="nofollow" href="">Thao Trinh</a></cite>
<span class="icon user blog-author"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">09:15 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content">Đây là trả lời của tác giả</p>
<span id="" class="comment-actions secondary-text" kind="m">
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
</div>
<div id="" class="continue" kind="ci"><a href="javascript:;" target="_self">Trả lời</a></div>
</ol>
<div id="" class="comment-replybox-thread"></div>
</div>
</span>
</div>
<div id="" class="comment-replybox-single"></div>
</li>
<li id="" class="comment" kind="b">
<div class="avatar-image-container"><img src="http://img1.blogblog.com/img/anon36.png"></div>
<div id="" class="comment-block">
<div id="" class="comment-header" kind="m">
<cite class="user">Nặc danh</cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a rel="nofollow" href="">16:06 Ngày 05 tháng 7 năm 2013</a></span>
</div>
<p id="" class="comment-content"><span class="deleted-comment">Nhận xét này đã bị quản trị viên blog xóa.</span></p>
<span id="" class="comment-actions secondary-text" kind="m">
<a kind="i" href="javascript:;" target="_self" o="r">Trả lời</a>
<span class="item-control blog-admin "><a o="d" target="_self" href="">Xóa</a></span>
</span>
</div>
<div id="" class="comment-replies"></div>
<div id="" class="comment-replybox-single"></div>
</li>
</ol>
<!--[[[[[[[[[[[[ bắt đầu từ phần này, ko cần quan tâm đến -->
<div id="" class="continue" kind="ci" style="display: none;" title="continue"><a href="javascript:;" target="_self" title="continue A">Thêm nhận xét</a></div>
<div id="" class="comment-replybox-thread" title="comment-replybox-thread">
<div id="threaded-comment-form" title="threaded-comment-form">
<p>Vui lòng không spam.<br></p>
<a href="#" id="comment-editor-src"></a>
<iframe allowtransparency="true" class="blogger-iframe-colorize blogger-comment-from-post" frameborder="0" height="234px" id="comment-editor" name="comment-editor" src="forcomments-form.html" width="100%" style="display: block;" title="IFRAME blogger-iframe-colorize blogger-comment-from-post"></iframe>
</div>
</div>
<div id="" class="loadmore loaded" kind="rb" title="loadmore loaded"><a href="javascript:;" target="_self" title="loadmore loaded A">Tải thêm...</a></div>
<!-- kết thúc từ phần này, ko cần quan tâm đến ]]]]]]]]]]]-->
</div>
</div>
</div>
</div>
</div>
<!-- [[[[[[[[ bắt đầu từ phần này, ko cần quan tâm đến -->
<p class="comment-footer" title=""></p>
<div class="comment-form" title="comment-form">
<a name="comment-form"></a>
<!--
<script type="text/javascript" src="www.blogger.com/static/v1/jsbin/1347259804-comment_from_post_iframe.js"></script>
<script type="text/javascript">BLOG_CMT_createIframe('http://www.blogger.com/rpc_relay.html', '0000000000000'); </script>
-->
</div>
<p></p>
<div id="backlinks-container"><div id="Blog1_backlinks-container"></div></div>
<!-- kết thúc từ phần này, ko cần quan tâm đến ]]]]]]]]]-->
</div>
<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/2159474849-widget_css_2_bundle.css' />

Xem demo các class css trong một comment blogger
Bây giờ chúng ta sẽ xem từng thành phần trong comment tương ứng với những class nào:

IMG các lớp css bằng sơ đồ trong excel

Lấy CSS cơ bản nhất trong comment bloger
Trông các class lồng nhau, khá rối rắm. Chỉ một số ít bạn muốn css một cách chi tiết thì cũng nên biết điều này! Tuy nhiên phần lớn chúng ta chỉ cần biết cách sử dụng những class cơ bản để áp dụng cho blog của mình.
Tôi giới thiệu cho các bạn những dòng css cơ bản nhất để áp dụng cho tất cả các blog, theo những dòng này, bạn tự thêm những style để làm sinh động comment trong blog bạn theo ý muốn.

a {text-decoration:none;}
/*Toàn vùng comment*/
#comments {overflow:hidden}
/*đếm số nhận xét*/
.comments h4 {font:nomal bold 25px areal; color:#016702; background:#ddd; padding:3px}
/*nhóm nhận xét cùng cấp (ko phân biệt cấp)*/
.comments .comment-thread{ padding:0 0 0 0px;position:relative}
/*mỗi nhận xét, bao gồm avatar và thông tin coment*/
.comments .comments-content .comment {margin: 0px; padding: 0px;}
.comments .comments-content .comment:first-child {padding: 0px;}
.comments .comments-content .comment:last-child {padding: 0px;}
/*avatar*/
.comments .avatar-image-container {float: left;max-height: 35px;overflow: hidden;width: 35px;}
.comments .avatar-image-container img {max-width: 35px;}
/*thông tin coment (ko phân biệt cấp)*/
.comments .comment-block {margin-left:50px ;position: relative;background:#F4F6FC; padding:9px;border:1px solid #ddd;}
/*phần đầu thông tin (tên, thời gian, dấu hiệu author)*/
.comments .comments-content .comment-header {position: relative;}
/*hiển thị tên đối tượng, dấu hiệu author*/
.comments .comments-content .user {font-style: normal;font-weight: bold;}
.comments .comments-content .user  a {font:bold 15px arial; color:#016702;}
/*dấu hiệu author*/
.comments .comments-content .icon.blog-author {
position:absolute;top:-15px;right:-15px;margin:0;background-image: url(http://png-2.findicons.com/files/icons/725/colobrush/24/star.png)
; height: 24px;width: 24px;  }
/*thời gian nhận xét*/
.comments .comments-content .datetime {}
.comments .comments-content .datetime a{font:italic 12px areal;color: #999;}
/*Nội dung nhận xét*/
.comment-content {position: relative;text-align: justify;}
.comments.comment-content {}
.comments .comments-content .comment-content {}
.deleted-comment {font-style: italic;opacity: .5;}
/*nut tra loi | xoa */
.comments .comment .comment-actions {}
.comments .comment .comment-actions a {color:#aaa}
.comments .comment .comment-actions a:hover {color:#ff0000}
/*xóa*/
span.blog-admin {display: inline;}
.item-control {display: none;}
/*Nút trả lời*/
.comments .continue {border-top: 2px solid #999999;cursor: pointer;}
.comments .continue a {display: block;font-weight: bold;padding: .5em;}
.comments .continue {display: none;}
/*comment cấp trả lời ...........*/
.comments .comments-content .comment-replies {margin-left: 50px;margin-top: 9px;}
.comments .comments-content .inline-thread {padding: 0; /*background:#eee;*/}
/*Nút trả lời (ko phải coment gốc)*/
.comments .thread-toggle a{opacity:.5;}
.comments .thread-toggle {cursor: pointer;display: inline-block;}
/*........... kết thúc comment trả lời*/
.comments.comment-replies {}
/*chỉ riêng coment trả lời*/
.comments.inline-thread.comment-block {}
/*chỉ riêng coment gốc*/
.comments.comment-replybox-single {}
/*form*/
.comments.comment-form  {width:100%;max-width:100%}

Bạn chèn css này vào trước ]]></b:skin>, chúng ta sẽ được một style comment như sau:

Mỗi người có sẽ có sở thích kiểu comment khác nhau, bản thân tôi cũng chưa thấy style trên đẹp cho lắm. Nhưng vấn đề cơ bản ở đây là từ css cơ bản như trên là nền tảng để chúng ta phát triển những style đẹp mắt hơn và phức tạp hơn. Tuy rằng nó chỉ có 2 cấp nhưng các comment cấp thứ 3,4,5,... cũng chỉ sử dụng style cấp thứ 2 mà thôi. Bạn nếu thích cũng quy định những style riêng cho comment cấp khác nhau, nhưng như thế bạn sẽ khá mất thời gian để phân tích từng lớp css.

Tạo cho riêng mình phong cách comment blogger một cách nhanh nhất
Từ css style comment cơ bản đã có như trên, làm thế nào để tạo một style comment cho riêng mình ?
Bạn vào địa chỉ như hình, điều mà bạn quan tâm là chỉ cần mở 2 thẻ CSS và Output. Bạn tự css bên trái để thấy những kết quả ngay tức khắc ở bên phải. bạn làm đến khi nào được một style ưng ý thì copy css đó lại dán vào template của bạn.

Vậy là từ nay bạn đã có thể tự tạo cho riêng mình một style comment blogger trong tầm tay. Bạn cũng có thể sưu tầm những css khác rồi dán vào để kiểm tra style trước khi áp dụng chính thức vào blog của bạn.

Đôi lúc traong bài viết dùng từ miêu tả chưa chính xác, mong các bạn cho ý kiến đóng góp để bài viết hoàn thiện hơn.
Cám ơn và chúc các bạn thành công!

TTTj of bendoi.vn

bendoi.vn