• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tùy biến Comment Form sao cho đẹp

21
26/02/2011

Trong quá trình chăm chút cho blogspot, một admin bao giờ cũng muốn cho phần nhận xét trên blog của mình thật đẹp. Tuy nhiên để thỏa ước muốn đó thì cũng không phải dễ dàng gì nếu admin không hiểu tường tận về hệ thống nhận xét của Blogger.

Phần nhận xét của một blogspot được đặt nằm gọn trong id có tên là #comments chứa các id và class khác, trong đó có hai id chính là #comments-block#comment-form. Bạn không nên nhầm mà đồng nhất #comment-form với #comments bởi vì #comment-form là một bộ phận của #comments mà thôi. Tôi sẽ đề cập đến phần #comments-block trong một bài viết khác, trong phạm vi bài này, chỉ xin giải quyết vấn đề làm sao để có một Comment Form cho đẹp.

Dưới đây là phân tích cấu trúc một Comment Form cơ bản chưa được chỉnh sửa gì nhiều.



Như các bạn thấy thì id #comment-form chứa 2 id khác quan trọng gồm #comment-post-message (dòng thông báo Đăng một nhận xét) và #comment-editor (khung nhập nhận xét). Để hiểu sâu hơn, chúng ta tiếp tục phân tích phần XML trong Template của Comment Form.

Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa comment-form tìm đến đoạn code như bên dưới.

<b:includable id='comment-form' var='post'>
<div id='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>

Chú ý trên đoạn code trên, đối với một số Template thì bạn sẽ thấy thẻ <div class='comment-form'>, thay vì là thẻ <div id='comment-form'>.

Nào, chúng ta bắt đầu tùy biến bằng CSS nhé.

1. Nếu bạn muốn tùy biến dòng thông báo Đăng một nhận xét thì bạn đặt CSS như sau.

#comment-post-message {
float:left;
font-size:14px;
font-family:Arial;
font-weight:bold;
border:1px solid #fc5604;
color: #0000ff;
text-case:sentence;
}

Chú ý text-transform:uppercase đặt chữ viết HOA, còn text-case:sentence đặt chữ viết Hoa chữ cái đầu.
Nếu bạn rành về CSS thì có thể tùy ý điều chỉnh theo ý muốn.
Nếu bạn muốn id này float về giữa thì đặt float:center;
Nếu muốn ẩn quách nó đi thì đặt thêm display:none !important;
Còn nếu muốn xóa luôn nó đi thì (trong Template) xóa dòng <h4 id='comment-post-message'><data:postCommentMsg/></h4>
Nếu muốn thay đổi dòng Đăng một nhận xét thì thay <data:postCommentMsg/> bằng câu gì đó bạn muốn.

2. Nếu để ý phần #comment-editor bạn sẽ thấy bề ngang nó cách xa biên bên phải của phần Main và bề dọc nó cách xa phần #blog-pager làm cho nó trông rất xấu xí, vì chừa đất trống rất nhiều mà chẳng biết “trồng” cái gì vào đấy. Để cắt phần đất thừa đó đi thì bạn tùy biến CSS cho phần #comment-editor như sau.

#comment-editor{
width:580px;
height:240px;
padding-left:10px;
}

Ở đây bạn chỉnh các thông số về chiều rộng (width) sao cho không quá bề rộng phần Main, chiều cao (height) sao cho tương xứng và padding-left phù hợp với trang của bạn.

3. Ngoài ra bạn có thể tùy biến CSS cho cả id #comment-form như sau.

#comment-form {
background: ;
}
#comment-form p {
………
}

Bạn có thể đặt nền (background) cho phần Comment Form và thêm CSS khác vào đoạn code trên.

Đối với Template có thẻ <div class='comment-form'> thì thay #comment-form bằng .comment-form

Và còn nhiều thứ khác nữa có thể tùy biến xung quanh Comment Form, hy vọng có thể cập nhật tiếp trong thời gian tới. :1)

{21 bình luậnAdd yours ?}

02:42:00, 27 thg 2, 2011

Em cũng vừa viết 1 bài về comment-block :D

Bên wordpress thì toàn bộ phần comment được gọi chung là Comment Form hết

Reply
08:15:00, 27 thg 2, 2011

@Noct Ừh, bên Blogger thì quy định khác Wordpress một chút

Reply
10:53:00, 27 thg 2, 2011

bài tiếp theo bác viết về cách hiển thị các comments như của bác ấy :51)

Reply
19:13:00, 27 thg 2, 2011

bác hướng dẫn làm recent post có ảnh đi

Reply
20:17:00, 27 thg 2, 2011

Search trên sitemaps của blog tớ ấy, phần nhãn Recent Posts rất nhiều tiện ích như vậy.

Reply
20:23:00, 27 thg 2, 2011

E tìm ra chưa, vào nhãn này cho nhanh nè.
:67)

Reply
03:34:00, 26 thg 3, 2011

Hỏi: Làm sao để vượt tường lửa vào VOA hay các trang bị chặn khác như Facebook ?

Đáp: Xin hãy vào
www.vn1975.info
chọn “Đồng ý”. Rồi nạp tên đường dẫn vào ô URL trên cùng để vượt tường lửa vào trang muốn vào. (Ví dụ: nếu muốn vào Facebook, nạp: facebook.com vào ô trống kế chữ URL rồi nhấn Enter hay bấm vào “Thực hiện”.)

Reply
23:42:00, 4 thg 5, 2011

Minh co code hoi khac, nho Mr. Ha xem thu nhe! Minh muon noi rong khung comments. Thanks truoc nha.
#comments .comment-author {
padding-top: 5px;

border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}

#comments .comment-author:first-child {
padding-top: 0;

border-top: none;
}

.avatar-image-container {
margin: .2em 0 0;
}

#comments .avatar-image-container img {
border: 1px solid $(image.border.color);
}

Reply
10:29:00, 5 thg 5, 2011

Bạn muốn khung nhận xét rộng thì dùng css thế này:

#comment-editor{
width:580px;
height:240px;
padding-left:10px;
}

thay 580 bằng con số phù hợp cho chiều ngang Main.

Mình là Mr Hà đây. K còn làm Admin cho trang này nữa. Mình đang phát triển cái khác triển vọng hơn. Sau khi hoàn thành tươm tất mình sẽ thu hồi lại trang này và phát triển một trang mới từ trang này.

Reply
22:07:00, 5 thg 5, 2011

vậy pác có còn viết thủ thuật nữa hem :62)

Reply
14:59:00, 6 thg 5, 2011

Tất nhiên là có chứ. Thời gian qua đi đổi gió để giảm stress. Khi quay lại sẽ thu hồi trang từ người đã nhượng trước đây. Đổi cho người đó 1 trang khác để lấy lại trang này vì admin mới k đủ sức duy trì site.

Reply
15:04:00, 7 thg 5, 2011

N chi biet ap dung thu thuat thui, nhung N se ghe tham thuong xuyen trang moi cua ban. Ah, cam on Mr. Ha ve thu thuat nay nha.

Reply
23:36:00, 5 thg 6, 2011

:55)

Reply
23:48:00, 5 thg 6, 2011

Chỉ dùm tớ làm cái khung Com này với,tớ thik lắm :74)

Reply
11:27:00, 23 thg 6, 2011

Anh đã giúp tôi về làm khung nhận xét chưa ?

Reply
14:42:00, 24 thg 6, 2011

Chưa,bác Ha đang rất bận :51)

Reply
21:46:00, 5 thg 7, 2011

Ở dòng Home-Older post có khoảng cách với Footer thế này http://cc3.upanh.com/24.596.31709552.4sW0/space.png
Làm sao để thu gọn độ rộng vậy pak ?

Reply
22:40:00, 31 thg 8, 2011

Đã áp dụng thành công cám ơn anh Hà nhiều.

Reply
11:23:00, 19 thg 8, 2016

Dịch vụ chuyển phát nhanh hàng hóa quốc tế .

http://www.chuyenhangdiuc.net/

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn